Where is the Details on how to use HTML Markup

Webix JS
1

I see VERY little on HTML markup usage besides the same ol:

<div data-view="rows" >
			<div>
				My header
			</div>
			<div data-view="toolbar" data-role="elements">
				<div data-view="button" data-width="150">Button</div>
				Press the button to run App
			</div>
			<div data-view="cols">
				<div data-view="list" data-select="true">
					Package: #Package# (#Version#)
				</div>
				<div data-view="list" data-width="320">
					#id#: #value#
					<ul data-role="datasource">
						<li id="9998">Item 1</li>
						<li>Item 2</li>
					</ul>
				</div>
			</div>
			<div>
				My footer
			</div>
		</div>

My question is… HOW DO YOU USE THE THING. WHERE IS IT DOCUMENTED
what are all the ‘data-’ stuff is and when to use.
For example the “elements”:

webix.ui({
    view:"toolbar", 
    width: 300,
    elements:[
        {view:"button", value:"OK", inputWidth:100},
        {view:"button", value:"No", inputWidth:100}
        ]
});

Here elements is property of the the json object that is an array.

but here elements is data-role=“elements”:

<div data-view="toolbar" data-role="elements">
				<div data-view="button" data-width="150">Button</div>
				Press the button to run App
</div>

HOW THE HECK AM I SUPPOSED TO KNOW THAT “data-role” tags is where
that goes in the HTML Markup version?

Plus… Interaction… is the the only interaction via the $$(‘myitem’).someMethod or someProperty

I dont mind paying for what looks a GREAT framework

So again… WHERE IS THE DOC ON HOW TO USE THE HTML SYSTEM.

2

there is webix.ui(...) method which accepts config object and creates a component (aka “view”) based on that config.

by default a view is created inside an HTML body object:

webix.ui({view: 'text', value: 'hello'})

else a view’s parent is specified by “container” property which may be an HTML element (referenced by an “id” HTML attribute) or another view (referenced by a view ID):

HTML:

<div id='myDiv'></div>

JavaScript:

webix.ui({view: 'text', value: 'hello', container: 'myDiv'})

docs:

if a “view” property hasn’t been specified it defaults to a “layout” view:

3

You can check

http://docs.webix.com/desktop__markup_init.html#markuppeculiarities
http://docs.webix.com/desktop__html_markup_init.html

And examples for all major components

http://docs.webix.com/samples/23_markup/01_html/index.html

There is really not so many info for this kind of initialization, as primary format for data initialization is JSON. You can look at any json based example and recreate the same with HTML

  • use the same attributes as in json, but add “data-” prefix to them
  • when you need to have some sub-elements, where in json you have “rows”, “cols”, “cells”, “elements” - use “data-role” with related value.
4

I understand the json config init… I have been using it in a GWT application
via JSNI… works great.

But i am trying to use the HTML markup tags “data-”
BUT THERE IS NO DOCS beside the couple of basic info pages listed above. But it did not explain (til now, according to maksim). But what is the use of data-role in HTML context vs JSON context.

So is data-role THE ONLY thing different about “data-” context… are there any other little undocumented “data-” tags that mean something?

So to summarize… the data-role is for where you have sub elements…
is there a list or something where i know all the possible values data-roles and when to use… For example you say sub items “rows”, “cols”, “elements”

but rows and cols are defined in markup as data-view not data-role.
Also, wouldn’t cols be a sub element of rows… So why is cols, a child of rows not marked as data-role=“cols”…

Im sorry… i just dont fully understand in HTML markup when i should use data-role=“xxxx” and what are all the possible values.

Without docs, i guess ill try try and keep hammering at the HTML markup
until i feel comfortable converting JSON config to HTML markup (i only need
this html markup initialization to be use in a simple HTMLPanel without using JavaScript or GWT JSNI just for view layout).