Building Apps with Webix UI

Simple way

Fast start

- grab http://webix.com/packages/webix-app-start.zip

- open index.html in the browser

- unzip

Alternative start

- run in the app's folder

npm install -g slush slush-webix
slush webix

- open index.html in the browser

Prerequisite

- nodejs

- bower

Alternative start

- run in the app's folder

npm install -g slush slush-webix
slush webix

Prerequisite

- nodejs

- bower

- open index.html in the browser

The App !

Codebase

app.js

/ views

/models

/helpers

/libs

- configs

- webix views

- data and data related logic

- other code

- webix, routie, requirejs, etc.

Views

Views - composition

//views/start.js
define([],function(){
	return {
		template:"Start page"
	};
});

//views/top.js
define(["views/start", function(start){
    return {
        cols:[
            { view:"menu" },
            start
        ]
    };
});

index.html#!/start

index.html#!/top

Views - routing

//views/top.js
define([], function(){
    return {
       cols:[
          { view:"menu" },
          { $subview: true }
       ]
    };
})

Views - routing

index.html/top/data

index.html#!/top/top/data

index.html#!/data

index.html#!/top

Shared Data

//views/data.js
define(["models/records"],function(records){
	var ui = {
		view:"datatable", autoConfig:true
	};

	return {
		$ui: ui,
		$oninit:function(view){
			view.parse(records.getData());
		}
	};
});

//models/records
define([],function(){
	var collection = new webix.DataCollection({ data:[
		{ id:1, title:"The Shawshank Redemption", year:1994 },
                /*...*/
	]});

	return {
		getData: function(){
                    return collection;
                }
	};
});

Dynamic Data

//views/data.js
define(["models/records"],function(records){
	var ui = {
		view:"datatable", autoConfig:true
	};

	return {
		$ui: ui,
		$oninit:function(view){
			view.parse(records.getData());
		}
	};
});

//models/records
define([],function(){
	return {
		getData: function(){
                    return webix.ajax("data.php");
                }
	};
});

Helpers

//helpers/math.js
define([], function(){
     return { 
         inc:function(a){ return a+1; }
     }
})

Server Side - REST

define([],function(){

	var collection = new webix.DataCollection({ url:"rest->/records", save:"rest->/records" });
	return {
		getData: function(){
                    return collection;
                }
	};
});

define([],function(){
	return {
                dataFeed: "/rest->data.php"
	};
});

define(["models/records"],function(model){
	return {
                view:"datatable", url:model.dataFeed, save:model.dataFeed
	};
});

Model

View

OR

This is All

Not really

View Handlers

Navigation

Application events

Deploy

Localization

For now this is all for sure

Skins

Scopes

View State

Complex navigation