Initialization from XML markup will stop working in Webix 7.0.
Available only in PRO Edition
See also general rules of markup initialization that are described in a separate article.
Initialization from XML is simpler in terms of syntax while at the same time tags feature greater semantic value than HTML, yet XML is not that popular due to its "strict" nature.
To integrate this functionality with IE8, set the initial page tag as < html xmlns:x > instead of < html >.
Below the peculiarities of initialization for different Webix components are listed.
XML Toolbar, List and Form
<x:ui>
<x:rows>
<x:template>My header</x:template>
<x:toolbar>
<x:button width="150">Button</x:button>
<x:label>Press the button to run App</x:label>
</x:toolbar>
<x:cols>
<x:list url="data/data.json" select="true">
<x:template>Package: #Package# (#Version#)</x:template>
</x:list>
<x:htmlform>
<input type="submit" />
</x:htmlform>
<x:list width="320">
<x:template>#id#: #value#</x:template>
<x:data>
<li id="9998">Item 1</li>
<li>Item 2</li>
</x:data>
</x:list>
</x:cols>
<x:template>My footer</x:template>
</x:rows>
</x:ui>
Related sample: XML Initialization
Accordion features an array of accordionitems, each of which has a header and body where any Webix component can be placed.
JS initialization
{
view:"accordion", rows:[
{
header:"Section A",
body:{
view:"list",
url:"data/data.json",
template:"#id#: #Package#"
}
},
{...}
]
}
XML initialization
Remember that anything you initialize from XML, should be among < x:ui > tags!
<x:accordion>
<x:body header="Section A">
<x:list width="320" url="data/data.json"> #id#: #Package# </x:list>
</x:body>
</x:accordion>
Or:
<x:headerlayout stack="cols">
<x:body header="Section A">
<x:list url="data/data.json"> #id#: #Package# </x:list>
</x:body>
</x:headerlayout>
Related sample: XML Initialization: Accordion
Related sample: HTML Initialization: Accordion
Datatable features an array of columns each of which has a set of configuration options:
JS Initialization
{
view:"datatable",
autowidth:true, autoheight:true,
columns:[
{id:"rank", header:"", width:250, sort:"int"},
{id:"title", header:"Film title", width:200, sort:"string"}
]
}
XML Initialization
<x:datatable autowidth="true" autoheight="true">
<x:column id="rank" header="" width="50" sort="int"></x:column>
<x:column id="title" header="Film title" width="200" sort="string"></x:column>
</x:datatable>
Related sample: XML Initialization: DataTable
If placed in layout rows or cols, form can be initialized with standard HTML tags. Standalone form not placed in layout requires tags with x: prefix.
<x:form id="log_form" width="300">
<x:text label="Email"></x:text>
<x:button value="Login" type="form"></x:button>
</x:form>
Related sample: XML Initialization: Fieldset
HTMLform has its own initializing patterns including via webix markup class.
TabView is a hybrid layout that features several view cells and dedicated tabs to switch between these cells.
JS initialization
Tabs and cells are connected by their IDs that must coincide.
{
view:"tabview",
tabs:[
{ value: 'List 1', id: '1'},
{ value: 'Text 2', id: '2'}],
cells:[
{ view: 'list', id: '1', url:"ata/data.json", template:"#id#: #Package#"}
{ view: 'template', id: '2', template:"Just some text here"}]
}
XML Initialization
During XML initialization you needn't define IDs - just place necessary components within body tags that substitute cells. At the same time, header attribute of this tag defined text value for a tab.
<x:tabview>
<x:body header="List 1">
<x:list url="data/data.json"> #id#: #Package# </x:list>
</x:body>
<x:body header="Text 2">
<x:template>Just some text here</x:template>
</x:body>
</x:tabview>
Related sample: XML Initialization: Tabbar
You can change the default x: namespace as well as completely get rid of it. You need to define the new namespace before initialization from markup:
webix.markup.namespace = ""; //empty namespace
webix.markup.namespace = "wx"; //new namespace
webix.markup.init();
From now on, you can use initialize Webix components using standard tags, or tag with your custom namespace:
Empty Namespace
<ui>
<form id="log_form" width="300">
<text label="Email"></text>
</form>
</ui>
Related sample: XML Initialization: Empty Namespace
Custom Namespace
<wx:ui>
<wx:form id="log_form" width="300">
<wx:text label="Email"></wx:text>
</wx:form>
</wx:ui>
Related sample: XML Initialization: Custom Namespace
Back to top