Initializing from markup will stop working in Webix 7.0.
Library components are JSON objects in essence. Each of them is constructed from a set of key:value pairs that describe their properties.
webix.ui({
view:"toolbar",
width: 300,
elements:[
{view:"button", value:"OK", inputWidth:100},
{view:"button", value:"No", inputWidth:100}
]
});
The toolbar from above has three properties: view, width and elements. The last option is an array containing two elements - two buttons.
At the same time, components can be initialized not only by literal notation, but also within HTML and XML markup.
Bonuses of markup initialization
License restrictions
XML and HTML markup initialization can totally replace JSON configuration for people who are more used to working with markup languages. It has simpler syntax, so you are less likely to get lost among brackets and commas. Such functionality can be useful when you code the page with the help of server scripts since it's easier to get XML (HTML) data from them than JSON.
In general, the markup can be taken from:
HTML and XML markup get peculiar tags to serve the needs of Webix object initializing (described later).
Webix HTMLform component is more likely to be initialized from HTML and XML, though any component is subject to this technique.
To init Webix components from HTML or XML, you should work with webix.markup class that offers a pattern for markup processing.
The main methods here are init(node, target) and parse(node) where arguments mean:
Initializing and parsing serve different purposes:
The simplest initialization script looks as follows:
// data is taken from document body and component is initialized there
webix.ready(function(){
webix.markup.init();
});
External-file or server-side data is loaded to the page by Ajax. Here you should specify path to the file(script) and set initialization pattern in a callback.
In the code below, the data comes from an external XML file, the node is the incoming data, while the target is the body of the current document.
webix.ajax("data/config.xml?!", function(text, data){
var config = webix.markup.parse(text, "xml");
webix.ui(config);
});
Related sample: Load UI by AJAX
You can use markup initialization by parsing markup to the necessary part of the Webix script thus creating a Webix object.
webix.ui({
rows:[{}, {id:"placeholder", template:"html->dummy"}]
});
function load_grid(){
webix.ajax("data/gridconfig.xml", function(text, data){
webix.ui(
webix.markup.parse(text, "xml"), //source
$$("placeholder")) //target
})
};
The target is not defined within the parse() function, yet it is specified in the webix.ui() constructor as $$('placeholder').
The rules of HTML and XML initialization differ, so you should consult dedicated articles.