UI-Script

UI-Script is a shorter & simpler substitute for HTML syntax.

Index

• UI-Script
• Index
• Online version
• Documentation
• Installation
• Usage
• Examples
• Binaries usage
  • Usage of uiscript
  • Usage of xcomponents
• Extra information
  • Use Windows 7 programmatic dialogs
  • More than 25 components

Online version

You have a free tester online version here:

• https://allnulled.github.io/ui-script-language

Documentation

The documentation can be found:

• On NPM at https://npmjs.com/@allnulled/ui-script
• On Github at https://github.com/allnulled/ui-script-language

Installation

Before starting, import the package via npm:

npm install --save @allnulled/ui-script

First, you import the CSS file for general and per-component styling:

<link rel="stylesheet" type="text/css" href="./node_modules/@allnulled/ui-script/docs/lib/ui-script/ui-script.css" />

Second, you import the JS file for general and per-component logic:

<script src="./node_modules/@allnulled/ui-script/docs/lib/ui-script/ui-script.js"></script>

Usage

Once you have done this, 2 variables are added into the global scope window:

• uiscript_api and
• uiscript_components.

However, you can use import statement too to retrieve the uiscript_api.

The uiscript_api comes packed like this:

window.uiscript_api = {
    ast: { parser: ast_parser },
    parser,
    components: window.uiscript_components
};

The uiscript_api.parser.parse(uiscript) function returns HTML syntax from uiscript syntax.

The uiscript_api.ast.parser.parse(uiscript) function returns an object syntax from uiscript syntax.

The uiscript_api.components holds the uiscript_components object.

The uiscript_components holds all the ui-script (Vue2) components of the library, this is:

• xbreadcrumb
• xbutton
• xdialogport. Imports a special API for Windows 7 dialogs based on Vue.js v2 components usage.
• xform
• xformfield
• xjumbotron
• xlabel
• xlayout
• xlayoutnopaddingbottom
• xlayoutnopaddingtop
• xlink
• xpage
• xpanel
• xparagraph
• xstatic
• xsubtitle
• xtable
• xtablecell
• xtablerow
• xtester
• xtitle
• xwindow
• xwindowbody
• xwindowfooter
• xwindowfooteritem
• xwindowtitle

Examples

The following example demonstrates how to create a new Vue.js v2 component from UI-Scripting markup.

<script>
Vue.component("CustomComponent", {
    template: uiscript_api.parser.parse(`
      !div {
       !xwindow {
        !xwindowtitle {{ Título de la ventana }}
        !xwindowbody {
         !xtitle {{ Título de página }}
         !xsubtitle {{ Subttulo de página }}
         !xbreadcrumb {{ Ruta » a » subdireccion }}
         !xpanel {
          !xform {
           !xformfield {{ Usuario: }}
           !xformfield {{ Contraseña: }}
          }
         }
         !xlayoutnopaddingtop [style="text-align: right;"] {
          !xbutton {{ Entrar }}
         }
        }
        !xwindowfooter {
         !xwindowfooteritem {{ Pie de ventana }}
        }
       }
      }
    `)
});
</script>

Binaries usage

Usage of uiscript

To parse uiscript code into html you can simply:

uiscript file1.uis file2.uis file3.uis

This will output the equivalent html files beside each.

Usage of xcomponents

To create a setup of files (lib folder) you can simply:

xcomponents docs

This will create a lib folder inside the docs folder with:

• calo: castelog import statement.
• win7: win7 CSS library.
• ui-script: ui-script JS and CSS files, and the whole component API too, in case you need to modify it.

Extra information

Use Windows 7 programmatic dialogs

The xdialogport provides a special API for Windows 7 based dialogs with very easy asynchronous methods. Visit its documentation here to take full advantage of this API.

As easy as:

const confirmation_1 = await Vue.prototype.$dialogs.confirm("Did you like it?", "Question", "A daily custion", "Yes", "No");
const confirmation_2 = await Vue.prototype.$dialogs.confirm({
  html: "Did you like it?",
  title: "Question",
  footer: "A daily custion",
  button_accept: "Yes",
  button_reject: "No"
});

More than 25 components

The most of them are just CSS. But useful anyway to wrap the contents of your templates.

1. xbreadcrumb
2. xbutton
3. xdialogport
4. xdialogcurrent
5. xform
6. xformfield
7. xjumbotron
8. xlabel
9. xlayout
10. xlayoutnopaddingbottom
11. xlayoutnopaddingtop
12. xlink
13. xpage
14. xpanel
15. xparagraph
16. xstatic
17. xsubtitle
18. xtable
19. xtablecell
20. xtablerow
21. xtester
22. xtitle
23. xwindow
24. xwindowbody
25. xwindowfooter
26. xwindowfooteritem
27. xwindowtitle