the easy shift to component-based development
loading... app.bundle.js
Create amazing component-based
websites and web applications.

« Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. »

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus, consectetur.
Reusability by design

Include content and load components also if located on different servers.

Loading content from local server
<div data-ui-include="content/lorem_ipsum"></div>
Transform and reshape

Keep HTML code concise and neat, then transform it by applying templates or loading components over it.
With automatic fields mapping (data-binding) templates and components can smoothly transform a minimal set of HTML elements into a rich and interactive content.

Applying a MDL template from a remote server
<div data-ui-include="https://genielabs.github.io/zuix/app/templates/mdl_card">
    <h1 data-ui-field="title">Still got the goods</h1>
    <img data-ui-field="image" src="images/example_picture.jpg">
    <p data-ui-field="text">
        Fifty years after their debut album, The Rock Band
        prove they've still got the goods.
    </p>
    <a data-ui-field="link_read" href="javascript:alert('Clicked!')">Read More</a>
</div>

This is how the HTML snippet above looks like before the mdl_card template is applied.

Still got the goods

Fifty years after their debut album, The Rock Band prove they've still got the goods.

Read More

Click the button below to apply the template mdl_card.

Apply Template

Using this pattern, you can focus on templates and components and progressively reshape your website/webapp and increase both your creativity and productivity.

Optimize speed and performance

Either you're writing a Progressive Web App (PWA) or a simple website, lazy loading is a built-in feature that can boost up site speed by loading content and components only when they come visible in the screen viewport.

The following code loads the view_pager component (from zKit) and adds 30 random pictures using the example random_image_item component.

ViewPager with lazy-loaded items
<div data-ui-load="@lib/controllers/view_pager"
     data-o-slide="true"
     data-o-paging="true"
     data-ui-lazyload="auto">
    <!-- Add 30 'random_image_item' -->
    {% set list = Array(30) %}
    {% for x in list %}
    <div data-ui-load="content/home/examples/view_pager/random_image_item"
         data-ui-lazyload="true"></div>
    {% endfor %}
</div>

The result of this snippet is the image strip shown below.

Drag or fast swipe over it horizontally fast_rewind fast_forward to actually see the lazy-loading in action.

Theme switching

Switch themes or apply different UI frameworks seamlessly.

The special @lib keyword is a relative or absolute URL path that can be used as a shortcut to load components from a configurable shared location.

Switching UI framework by changing @lib path
// using Material Design theme...
zuix.store("config", {
  "libraryPath": "https://myapp.site/lib/mdl"
});
// ...or to use Bootstrap theme
zuix.store("config", {
  "libraryPath": "https://myapp.site/lib/bootstrap"
});
Loading content using @lib keyword
<div data-ui-include="@lib/templates/spinkit/spinner_cubes"></div>

By default @lib points to zKit, a collection of example components.

More features

Just to name some, controllers overlapping and hot view swapping are unique zUIx features. The first one allows loading of multiple controllers on the same view element. The second one allow to dynamically replace a view with a different (or updated) template at any time.

zUIx is a lightweight library (13kB gzipped), though still offering a full feature set:

  • Content modules and Templates with CSS scoping
  • Components with fields caching
  • Events, Behaviors and Hooks
  • Automatic events unbinding
  • Integrated resources loader
  • Integrated jQuery-alike DOM helper
  • In-browser app-bundler
zUIx Web Starter

In addition to the core library, the zuix-web-starter project is an integrated solution for building and publishing any kind of web project, from a simple website or blog to more complex web applications:

  • Built-in web server and build scripts
  • Component-based architecture via zUIx with inline generation of components bundle
  • Modern CSS syntax via LESS with automatic compilation of .less to .css
  • Mixed HTML/Markdown mode
  • Static Site integration for generating static pages and featuring:
    Front Matter, Data Files, Collections, Swig Templates
  • Code checks and error reporting via ESLint, suitable for CI tools
  • Minification through HTMLMinifier
  • Optimized for Progressive Web Apps

Getting Started

Start using zUIx with the zUIx Web Starter project, or start from scratch by including it in your project using one of the methods described below.

Local copy

Download and copy the .js file to your project folder and include it in your HTML page:


    <script src="js/zuix.min.js"></script>
Download zUIx v0.4.9-56
Hosted

Link the .js file as an external resource from GitHub site:


    <script src="https://genielabs.github.io/zuix/js/zuix.min.js"></script>
NPM

Install from NPM for using in your project

npm install zuix-dist --save

Copy the library from node_modules/zuix-dist/js to your project folder and include it in your HTML pages:


    <script src="js/zuix.min.js"></script>
Bower

Install from Bower

bower install zuix-dist --save

Copy the library from bower_components/zuix-dist/js to your project folder and include it in your HTML pages:


    <script src="js/zuix.min.js"></script>

TypeScript integration

To use zUIx in a TypeScript project you can download and include the auto-generated module definition file which is located in the distribution folder of the master repo.

Examples

Contributing

See the CONTRIBUTING.md document.

zUIx @genielabs HomeGenie

Content management dashboard

With Content Management we are referring here to the capability of loading into the HTML document a content that is located in some other files, with no need for server side processing. It all happens in the client browser.

With such a feature, it is possible to structure a web site/application into modules that can be conveniently organized in the directory tree.

For instance, the following page template

header
main content
footer

could be implemented by the following files:

folder layout
 subdirectory_arrow_right header.html
 subdirectory_arrow_right footer.html
folder content
 subdirectory_arrow_right main.html
index.html

where the index.html is the main page that will include the other files.

Loading content

To include a content, we add a div (or any other tag supposed to be a container tag) setting the data-ui-include attribute with the path of the content that we want to be loaded. This can be either a path relative to the file requesting the content inclusion or an absolute path pointing to a different server, in which case CORS must be enabled on the server end.

EXAMPLE - HTML file index.html


<html>
    <head>
        <!-- ... Script/CSS includes ... -->
        <script src="js/zuix.min.js"></script>
        <!-- ... -->
    </head>
    <body>
        <!-- header -->
        <div data-ui-include="layout/header"></div>
        <!-- page content -->
        <div data-ui-include="content/main"></div>
        <!-- footer -->
        <div data-ui-include="layout/footer"></div>
    </body>
</html>

The data-ui-include attribute, shown at lines 9-11-13, will make zUIx to load the specified content into each div element.

Notice that the value of the data-ui-include attribute it is the path of the file to include without the .html extension. This value is also referred as the component identifier (componentId).

The following example shows how a div will looks like after the content content/docs/examples/links is included into it.

EXAMPLE - HTML file app/content/docs/examples/links.html


    <!-- examples/links --->
    <div layout="row center-spread">
        <a href="https://github.com/genielabs/zuix">ZUIX on GitHub</a>
        <a href="https://github.com/genielabs">@genielabs</a>
        <a href="https://genielabs.github.io/HomeGenie/">HomeGenie</a>
    </div>

Container element including the above content in the HTML page


    <!-- include common links -->
    <div data-ui-include="content/docs/examples/links"></div>

PROCESSED OUTPUT - resulting div HTML after the content is loaded into it


    <!-- include common links -->
    <div data-ui-include="content/docs/examples/links"
         data-ui-loaded="true">
        <!-- examples/links --->
        <div layout="row center-spread">
            <a href="https://github.com/genielabs/zuix">ZUIX on GitHub</a>
            <a href="https://github.com/genielabs">@genielabs</a>
            <a href="https://genielabs.github.io/HomeGenie/">HomeGenie</a>
        </div>
    </div>

We can also include a content that is located on a different server by specifying the absolute URL:


    <div data-ui-include="https://genielabs.github.io/zuix/app/content/docs/examples/links"></div>

RESULT

 

Options

When loading a content (or a component) we can also use the data-ui-options attribute to get more control over the loading process. The value of this attribute is a JSON object that must be accessible in the global scope (window). Fields that can be used for this object are described in the API {ContextOptions} section.

EXAMPLE - Use of data-ui-options attribute


<div data-ui-include="content/docs/intro"
     data-ui-options="my_loading_options"></div>

<script>
var my_loading_options = {
    lazyLoad: false,
    priority: -1,
    ready: function(ctx) {
        // ctx is the {ComponentContext} object
        // associated to the loaded content/component
        console.log('Loaded '+ctx.componentId+' as '+ctx.contextId+'.');
    },
    error: function(err) {
        console.log('Oh-oh!', err);
    }
}
</script>
Priority

With the data-ui-priority attribute we can change in which order components have to be loaded. Its value is indeed a number indicating the loading sequence order and that can also have negative values. The default value is zero and items with minor priority will get loaded first.

play_circle_outline Example on CodePen
Lazy loading

When dealing with big pages that load lot of content/components it is perhaps desirable to have the content loaded only when it actually comes into the user's view. This kind of on-demand content composition, is called lazy loading.

To enable this feature, we set the attribute data-ui-lazyload="true" on the element on which we want to enable lazy loading. Also its children will inherit lazy-loading unless the data-ui-lazyload is explicitly set to false on each of them.

So, elements with lazy-loading active will be actually loaded only if the element become visible. When the element visibility depends on a scrollable container (eg. on the BODY tag or a DIV with CSS overflow set to scroll) we can set the attribute data-ui-lazyload="scroll" on the scrollable container. This way lazy-loadable elements will be automatically loaded once they scroll into the view.

EXAMPLE - Use of lazy loading option


<div class="vertical-scrollable" data-ui-lazyload="scroll">
    <div data-ui-lazyload="true">
        <!-- the "content/preface" include will load anyway
              because of the 'data-ui-lazyload=false' option -->
        <div data-ui-include="content/preface"
             data-ui-lazyload="false"></div>
        <!-- following 'includes' inherits 'data-ui-lazyload' from
             the parent and these will be loaded only when the user
             scrolls the page down to them -->
        <div data-ui-include="content/chapter_01"></div>
        <div data-ui-include="content/chapter_02"></div>
        <!-- ... --->
        <div data-ui-include="content/chapter_12"></div>
        <div data-ui-include="content/appendix"></div>
    </div>
</div>
play_circle_outline Example on CodePen

 

Otherwise, if the element visibility depends on factors other than a scrollable container, in order to actually load the lazy element, the method zuix.componentize([<container>]) must be called.

play_circle_outline Example on CodePen
Styling content

When including a content, after loading the .html file, zUIx will also try to load a .css style file with the same location/basename, unless the css: false field is present in the data-ui-options object.

If the style file is found, all style definitions contained in it, will be applied to the container where the content has been loaded.

EXAMPLE - HTML file content/docs/examples/links.html


<!-- examples/links --->
<div layout="row center-spread">
    <a href="https://github.com/genielabs/zuix">ZUIX on GitHub</a>
    <a href="https://github.com/genielabs">@genielabs</a>
    <a href="https://genielabs.github.io/HomeGenie/">HomeGenie</a>
</div>

EXAMPLE - CSS file content/docs/examples/links.css


div[layout] {
    padding: 16px;
    margin: 24px;
    background-color: #1c88e6;
    -webkit-box-shadow: 9px 10px 36px -7px rgba(0,0,0,0.58);
    -moz-box-shadow: 9px 10px 36px -7px rgba(0,0,0,0.58);
    box-shadow: 9px 10px 36px -7px rgba(0,0,0,0.58);
}
a {
    color: white;
    font-size: 18px;
}

Container including the above:


    <!-- include common links -->
    <div data-ui-include="content/docs/examples/links"></div>

PROCESSED OUTPUT resulting div after content is loaded into it


<!-- include common links -->
<div data-ui-include="content/docs/examples/links"
     data-ui-component="content/docs/examples/links"
     data-ui-loaded="true">
    <!-- examples/links --->
    <div layout="row center-spread">
        <a href="https://github.com/genielabs/zuix">zUIx</a>
        <a href="https://github.com/genielabs">@genielabs</a>
        <a href="https://genielabs.github.io/HomeGenie/">HomeGenie</a>
    </div>
</div>
<style type="text/css">
[data-ui-component="content/docs/examples/links"] div[layout] {
    padding: 16px;
    margin: 24px;
    background-color: #1c88e6;
    -webkit-box-shadow: 9px 10px 36px -7px rgba(0,0,0,0.58);
    -moz-box-shadow: 9px 10px 36px -7px rgba(0,0,0,0.58);
    box-shadow: 9px 10px 36px -7px rgba(0,0,0,0.58);
}
[data-ui-component="content/docs/examples/links"] a {
    color: white;
    font-size: 18px;
}
</style>

RESULT

 

So, as shown in the processed output, the .css style definitions are applied only to the loaded content via the data-ui-component constraint, making possible to keep global style files separated from content-local style files (scoped CSS).

View templates settings_ethernet

A view template (or just view), is that particular kind of content where some elements in it are bound to fields of a data model and that so it dynamically changes the shown values accordingly to it.

The data-ui-field attribute, placed on elements of a view, is used to bind their values to the respective fields in the data model.

EXAMPLE - HTML template file templates/mdl_card.html


<!-- Template of a Material Design card -->
<div class="mdl-grid">
    <div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-shadow--8dp">
        <div class="mdl-card__title">
            <img data-ui-field="image" src="app/content/docs/examples/images/card_placeholder.jpg" class="portrait">
            <h1 data-ui-field="title" class="mdl-card__title-text mdl-color-text--white">Card title</h1>
        </div>
        <div data-ui-field="text" class="mdl-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Aliquam accusamus, consectetur.
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a data-ui-field="link_read" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--light-blue-900">Open</a>
        </div>
    </div>
</div>

TEMPLATE PREVIEW

 

To apply the template above with a different data model, we use the following code:

EXAMPLE - HTML


<div data-ui-include="templates/mdl_card">
    <h1 data-ui-field="title">Down the rabbit hole</h1>
    <img data-ui-field="image" src="./app/content/docs/examples/images/card_cover_2.jpg">
    <p data-ui-field="text">
        Luckily for Alice, the little magic bottle had now had
        its full effect, and she grew no larger&hellip;
    </p>
    <a data-ui-field="link_read" href="/#/docs">Read More</a>
</div>

RESULT

Down the rabbit hole

Luckily for Alice, the little magic bottle had now had its full effect, and she grew no larger…

Read More
Inline View Template

A View Template can be either implemented in a file, like already described for loading content, or as an inline view, that is hence placed in the same page rather than on a its own file.

An inline view is declared by adding the data-ui-view attribute to its root element. The value of this attribute is meant to be a unique identifier and shall not match the path of any other view placed in a file or inline in the same page, unless we want to override it.

EXAMPLE - HTML Inline view declaration


<!-- definition of a inline view template -->
<div data-ui-view="inline/common/contact_chip"
      class="mdl-chip mdl-chip--contact">
    <img class="mdl-chip__contact" src="images/avatar_01.png">
    <span class="mdl-chip__text">Contact Name</span>
</div>

Inclusion of the above view in the same page


    <div data-ui-include="inline/common/contact_chip"></div>
Contact Name

RESULT

Data Binding

So, in order to bind elements of a view to the fields of a given data model, we set the data-ui-field attribute on the view elements giving them the same name of the model field we want to bind to.

Basic Binding

When providing a simple data model like the one described in the previous example, the model field is automatically mapped to a certain element property depending on the type of the binding element. For instance, if the element is an img, then the mapped property will be .src, while for a div or a p it will be the .innerHTML property.

EXAMPLE - Inline View Template with data-ui-field fields.


<!-- definition of a inline view template -->
<div data-ui-view="inline/common/contact_chip"
      class="mdl-chip mdl-chip--contact">
    <img  data-ui-field="image"
          class="mdl-chip__contact"
          src="images/avatar_01.png">
    <span data-ui-field="name"
          class="mdl-chip__text">Contact Name</span>
</div>

When including the view template we can specify in its body a minimal markup declaring same fields as the template, whose values will be replaced in the template after it's loaded.

EXAMPLE - Inclusion of a view template with embedded data model.


<div data-ui-include="inline/common/contact_chip">
    <p data-ui-field="name">Mr. Brown</p>
    <p data-ui-field="image">images/avatar_02.png</p>
</div>

RESULT

before inclusion... ...after template inclusion

Mr. Brown

./app/content/docs/examples/images/avatar_02.png

Mr. Brown

./app/content/docs/examples/images/avatar_02.png

 

So this allows having a valid preview even before applying the view template (eg. if loading a view from file and the network is slow or JavaScript is disabled).


<div data-ui-include="inline/common/contact_chip">
    <div class="custom-style">
        <img data-ui-field="image" src="images/avatar_01.png">
        <span data-ui-field="name">Mrs. Black</span>
    </div>
</div>

RESULT

before inclusion... ...after template inclusion
Mrs. Black
Mrs. Black


play_circle_outline Example on CodePen

 

Another way of using basic binding is by employing the data-bind-model attribute as shown below:


<div layout="row center-spread">
    <!-- Foo Bar chip -->
    <div data-ui-include="inline/common/contact_chip"
         data-bind-model="foo_bar_contact"></div>
    <!-- Jane Doe chip -->
    <div data-ui-include="inline/common/contact_chip"
         data-bind-model="a_random_contact"></div>
</div>
<script>
// example inline data model
var foo_bar_contact = {
    image: 'images/avatar_02.png',
    name: 'Foo Bar'
};
var a_random_contact = {
    image: 'images/avatar_01.png',
    name: function(element, field) { element.html(a_random_name()); }
};
</script>

RESULT

Binding Adapters

Sometimes it might be required to have more control over how the value of a model field affects the view. For this purpose Binding Adapters can be used rather than Basic Binding.

A binding adapter is a function that gets called when the data model associated to a view is updated.

function vm_binding_adapter(element, field) {
    // adapter code ...
}

where element (ZxQuery) is the view element that needs to be updated, field is the name of the bound field in the model and the context object this, is the view itself.

EXAMPLE - Using a binding adapter


<div layout="row center-spread">
    <div data-ui-include="inline/common/contact_chip"
         data-bind-model="chip_adapter"
         data-id="0"></div>
    <div data-ui-include="inline/common/contact_chip"
         data-bind-model="chip_adapter"
         data-id="1"></div>
</div>
<script>
// items list
var chip_items = {
    "0": { name: 'Foo Bar', image: 'examples/images/avatar_02.png'},
    "1": { name: 'Jane Doe', image: 'examples/images/avatar_01.png'}
};
// example adapter
var chip_adapter = function(element, field) {
    // the context 'this', is the View itself
    const id = this.attr('data-id');
    // get the value of 'field' in the data model
    const value = chip_items[id][field];
    // use the value to update the bound 'element'
    switch (field) {
        case 'name':
            element.html(value);
            break;
        case 'image':
            // show place-holder if no image is provided
            if (value == '')
                element.attr('src', 'examples/images/chip_placeholder.png');
            else
                element.attr('src', value);
            break;
    }
};
</script>

RESULT

Behaviors

To determine how a view will behave upon certain events, like on user interaction events, a behavior handler is used. A behavior handler is a function that maps events of a view, to a visible feedback reaction. For example a view could animate if clicked.

EXAMPLE - Implmenting behavior handler


<div layout="row center-left">
<div data-ui-include="inline/common/contact_chip"
     data-id="2" data-bind-model="chip_adapter"
     data-ui-options="chip_view_options"></div>
</div>
<script>
var chip_view_behavior = {
    'mouseover': function () {
        this.css('cursor', 'pointer');
    },
    'mouseout': function () {
        this.css('cursor', 'default')
            .find('img')
            .animateCss('swing');
    },
    'click': function() {
        this.animateCss('pulse')
            .find('img')
            .animateCss('bounce');
    }
};
var chip_view_options = {
    css: false,
    behavior: chip_view_behavior
}
</script>

See the next example for the result.

Events

In a similar way to Behaviors, a event handler can be implemented to map events of a view to the expected action. For example by clicking a button, a link will open.

EXAMPLE - Implmenting both behavior handler and event handler


<div layout="row center-left">
<div data-ui-include="inline/common/contact_chip"
     data-id="2" data-bind-model="chip_adapter"
     data-ui-options="chip_view_options"></div>
</div>
<script>
var chip_view_behavior = {
    'mouseover': function () {
        this.css('cursor', 'pointer');
    },
    'mouseout': function () {
        this.css('cursor', 'default')
            .find('img')
            .animateCss('swing');
    },
    'click': function() {
        this.animateCss('pulse')
            .find('img')
            .animateCss('bounce');
    }
};
var chip_view_options = {
    behavior: chip_view_behavior,
    on: { // inline events mapping
        'click': function() {
            window.open('https://github.com/genielabs/zuix')
        }
    }
}
</script>

RESULT

Components extension

Exception made for handling of standard events and behaviors, a view template cannot implement a more complex UI logic.

This is where components come in handy. In addition to all the features of a view template, a component has a piece of JavaScript code associated to it and may so control any element in its view, make service calls and implement any kind of complex UI functionality.

This piece of JavaScript code is the Controller of the component.

Loading a component

To load a component the data-ui-load attribute is used in the same way described for data-ui-include attribute in content loading, so also the data-ui-options attribute may be used to provide options such as lazy loading and data binding.

EXAMPLE - HTML Loading a component


    <div data-ui-load="widgets/timeclock"></div>

RESULT

 

When loading a component zUIx will first try to get the controller script, then the view and finally the style, any of which can be defined either inline or in a file.

The example above is defined by the following files:

The Controller

When all elements of a component are loaded (js controller, html view, css style) the controller method create() is called. When otherwise a component is requested to unload, the destroy() method is called.

The following snippet is the skeleton of a controller declaration.

EXAMPLE Controller declaration


zuix.controller(function(cp) {

    /* private fields */
    // ...

    /* life-cycle handlers declaration */
    cp.init = function() { /* called before component is created and before applying options */ };
    cp.create = function() { /* called after loading, when the component is created */ };
    cp.destroy = function() { /* called when the component is destroyed */ }
    cp.update = function() { /* called each time the data model is updated */ }

    /* private functions */
    // ...

}).for('path/of/component');

The method call .for('path/of/component') is only required when the controller is defined inline rather than in a separate file.

The cp object passed to the controller handler is the {ContextController} object. Referer to the API page for a complete list of properties and methods of the {ContextController} object.

App bundling folder

Bundling is the process of collecting all resources used in a page and then compiling them into a single, optimized file. This will drastically reduce the number of network requests the browser will have to do to complete the page loading and that will so load the page faster.

There are actually two way of doing this:

This documentation will only cover the in-browser bundling method.

In-Browser bundling

Usually when a website or application is ready for production you can decide to bundle it in order to gain better performances. All of its components and resources will be crunched into a single file and loaded from memory rather than from network/localhost.

Step by step guide

Include the zuix-bundler extension script in your page right after the main zuix script inclusion:

<script src="js/zuix.min.js"></script>
<script src="https://genielabs.github.io/zuix/js/zuix-bundler.min.js"></script>

After adding this script you can reload the page and generate the application bundle by typing in the browser console the command

zuix.saveBundle()

This will create and save the app.bundle.js file to the Downloads folder.

Copy the generated file to your website root and include it right after the main zuix script inclusion.

<script src="js/zuix.min.js"></script>
<script src="app.bundle.js"></script>

Remove the zuix-bundler script inclusion from the page after the bundle is created.

Remarks

When using lazy-loading only components loaded so far will be included in the bundle (incremental bundling).

To force inclusion of all components/resources used in the page, issue the following commands in the console:

// disable lazy-loading
zuix.lazyLoad(false)
// force loading of all components
zuix.componentize()
// create the bundle
zuix.saveBundle()

Also external JavaScript libraries and CSS files can be included in the page bundle. In order to achieve this, remove the <script src="..."></script> or <link rel="stylesheet"> and use the method zuix.using(...) instead to load the script/css.

// Loading a .css style
const flaCss = 'https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css';
zuix.using('style', flaCss, function(res, styleObject) {
  console.log("Added Flex Layout Attributes CSS.", res, styleObject);
});
// Loading a .js script
const momentJs = 'https://momentjs.com/downloads/moment.js';
zuix.using('script', momentJs, function(res, scriptObject){
  console.log("Added Moment.js.", res, scriptObject);
});
// Loading a zuix component
zuix.using('component', '@lib/extensions/animate_css', function(res, componentContext){
  console.log("Added AnimateCSS extension for zUIx.", res, componentContext);
});

If the zuix.using method is called on a resource that was already loaded, it will just ignore the request.

This method is also used to create self-contained components that can be loaded without having to worry about external dependencies to include.

 

Introduction

This is a basic guide with examples, simple terminology and not so much technical stuff in a way that even with little HTML and JavaScript knowledge you can get started with component-based and modular web design.

You can use and remix examples available on Glitch to experiment while you read.

Index

Loading 'Content Management'...

Loading 'View Templates'...

Loading 'Components'...

Loading 'Zuix Bundler'...

 

 

zUIx Quick Start Guide. © genielabs 2016-2018.

Zuix class

This is the main framework class which is accessible though the global object zuix. The zuix object takes care of parsing all data-ui-load and data-ui-include attributes found in the HTML document and it loads components and contents accordingly.

Beside that, zuix offers a few methods that can be used in the JavaScript code to accomplish various tasks such as:

Building Zuix jsDoc...

 

ComponentContext class

The context of a component (or a content) is that object that manages and holds a reference to all the resources related to the component instance itself. So, when a component is loaded, the container/view element, the CSS style and the JavaScript controller will be accessible though its ComponentContext object.

A reference to a component context can be obtained in either one of the following ways:

arrow_right as the return value of the zuix.load(...) method, when loading a component from JavaScript.

// get component context as return value of the `zuix.load(...)` command
const ctx = zuix.load( ... );

arrow_right by using the zuix.context(...) method, when loading a component from HTML.

<div data-ui-load="path/to/component_name"
     data-ui-field="my-field-id"
     data-ui-context="my-context-id">
    <!-- ... -->
</div>
&lt;script&gt;
// Get the component context by using the assigned id
const ctx = zuix.context('my-context-id');
// OR by referencing its HTML element container
const componentDiv = zuix.field('my-field-id');
const ctx = zuix.context(componentDiv);
&lt;/script&gt;

arrow_right as the result of the {ContextReadyCallback} specified in the {ContextOptions}.

<div data-ui-load="path/to/component_name"
     data-ui-options="component_options">
    <!-- ... -->
</div>
<script>
var component_options = {
    ready: function(ctx) {
        console.log('Component loaded', ctx);
        // ...
    }
};
</script>

Building ComponentContext jsDoc...

 

ContextController class

This is the class that implements the component controller. After a component is loaded it will trigger the init function of the ContextController object and then, once the component view is ready, the create function. Methods of the controller object allow accessing and managing the view, events and all other aspect of a ZUIX component.

Building ContextController jsDoc...

 

ZxQuery class

ZxQuery is a class that implements a very lite subset of jQuery-like functionality. It can wrap elements of the DOM and provides useful methods for manipulating them.

Constructor

The constructor takes one optional parameter that can be a DOM element, a node list or any valid DOM query selector string expression. If no parameter is given, the ZxQuery will include the main document element.

const zxElement = new ZxQuery(element);

or

const zxElement = zuix.$(element);

which is the recommended way of creating ZxQuery objects.

Building ZxQuery jsDoc...

 

 

 

 

 

 

 

 

 

 

 

 

Utility methods

// TODO: document various 'zuix.$' utility methods ...

 

API