HTML Layouts with Webix

Where it may be useful

HTML5 provides multiple ways of arranging elements on the page. However, while building web apps we can still face tasks that can’t be solved with pure HTML and CSS. For example, there’s a problem of mixing percent and fixed size values in the same row. Another task that exercises the developers’ minds is making columns of equal height. The CSS Grid specification looks like a promising solution to such problems, but it’s currently at the draft stage and implemented only in Internet Explorer. If you need to have a greater layout flexibility here and now – that is where Webix Layouts can help.

Enhancing HTML layouts

The usage of Webix for HTML layouting starts from pure HTML code. Let’s look at the code snippet below. It looks like a normal HTML markup, just with extra data tags that define the roles of HTML elements:

To bring the above mentioned configuration to life you need to include webix.js and webix.css code files on the page, as well as to add the following line of JS code:

The preceding line initializes HTML markup on the page. As a result, you will have the view as follows:

Nothing special, just 3 columns in a row. Let’s add some “sparks” to the above HTML code. Look at the modified configuration:

We have fixed the width of the first column and added a resizer between the first and the second columns. To define Webix’s specific values we are using the attributes starting with “data-“. The view attribute specifies exactly on the Webix component. You can find the list of Webix components. You can check the list of additional attributes in the documentation. The implementation of the above code you may see in the demo:

Of course, you are not limited to column-based layout. A row-based layout can also be defined. By combining both column-based and row-based layout types you’ll define the necessary scheme of user interface. Check the next example:

In the preceding code snippet the attribute with value “rows” corresponds to the vertical layout and the attribute with value “cols”- to the horizontal layout, respectively. Thereby, the above mentioned markup places the vertical layout inside of the horizontal one. Such approach allows creating a layout of any complexity through nesting different layouts inside of each other. The above HTML code will produce the following result:

Tabbar and Accordion

When using Webix to lay out app’s UI we are not limited to placing elements next to each other. Webix offers more complex user interface patterns of arranging elements on a page. Two most common of them are tabbar and accordion, both of which can be easily created in the way similar to the configuration of patterns described earlier.

Thus, for creating tabbar we can use the following markup:

As you can see, this markup is similar to the code for a usual layout. We’ve added extra tags to define tab headers and also used different data-view values to specify the content of tabs. Take a look at the ready tabbar in the demo below:

The code configuration for accordion is exactly the same as the one we’ve used for creating tabbar. Just change the name of data-view to “accordion”:

The created accordion is presented in the demo below:

Webix components in HTML

Webix’s ability to integrate with HTML is not limited to layouts. You can define any Webix components in HTML: tree, chart, datatable, calendar, chart, etc. The key point is that you don’t have to spend time on writing a complicated code. Thus, if you want to get a calendar on the page, just write “calendar” in the data-view attribute. The next code will create a working calendar next to templates:

Check the demo to see the results produced by the above code:

Summary

The Webix library is intended for creating complex interfaces. However, it doesn’t mean that you must invent a complicated code to use Webix. The above mentioned examples prove that Webix can be used for simplifying HTML markup of a page leaving JavaScript code hidden from view.
The advantages of this approach:

• declarative description of interface
• the possibility of using Webix components together with custom HTML code
• Webix’s ability to work with client-side MVC frameworks (Backbone.js, AngularJS, etc.)

There is a couple of drawbacks:

• some complex parameters can’t be defined by means of HTML – in this case JS code is inevitable
• it’s impossible to attach handlers to events directly in HTML markup (perhaps, it isn’t a shortcoming at all, though)

Nevertheless, the power of using HTML together with Webix is obvious. With Webix, a simple HTML markup allows getting a variety of elements on the page, thus giving users the possibilities of JS code without its explicit usage.

In oncoming Webix 1.2 we are going to focus on the client side MVC frameworks such as Backbone.js and AngularJS, where HTML layouts will play a major role. Stay tuned.