@allnulled/ui-script NPM

UI-Script

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

Index

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"
});