@allnulled/ui-script

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

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

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
• xform
• xformfield
• xjumbotron
• xlabel
• xlayout
• xlayoutnopaddingbottom
• xlayoutnopaddingtop
• xlink
• xpage
• xpanel
• xparagraph
• xsubtitle
• xtable
• xtablecell
• xtablerow
• xtester
• xtitle
• xwindow
• xwindowbody
• xwindowfooter
• xwindowfooteritem
• xwindowtitle

Examples

The following example demonstrates how to create a new Vue.js 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.