Maksim Kozhukh, Author at Webix Blog

Complex Content in DataTable

By Maksim Kozhukh | November 19, 2015

JavaScript Table is the most popular widget of Webix UI framework. It is fast, flexible and can be used in many different scenarios. By default, it shows only a text content in its cells. Nevertheless, you can use cell templating to show a more complex content in the cells of DataTable. Icons, buttons, and even other widgets can be used as cell templates.

Let’s look how it can be done.

Checkbox and Radio buttons

The most common use-case is the adding of a checkbox into a cell of a DataTable. It is so common, that we have added a ready-to-use shortcut. Just write the cell template as follows:

template:"{common.checkbox()}"

and you will get a fully-functional checkbox input.

Working with nested data in Webix UI

By Maksim Kozhukh | October 15, 2015

We all like to use simple apps where an interface is easy and straight. Creating such apps is a breeze, just put some HTML tags, add a UI framework of your choice, something like Bootstrap, for example, and the app is ready. In real every-day development, things are bit different. It is common for a business app to work with complex data, that requires some advanced UI to represent it. A nested data is one of such use-cases. There is no a ready to use solution to show such kind of data in raw HTML or in Bootstrap. For such kind of task, you need a more powerful tool. Something like Webix UI.

Tree

The simplest widget that can be used to show nested data is a Tree. It is common UI element for desktop apps, but still rare in web apps. Webix Tree has all common functionality of tree widget; it allows to represent the hierarchical data as a tree, where branches can be expanded or collapsed. Additionally, Webix Tree is really fast. It renders thousands of items in less than 1 second. And if that is not enough, you can utilize a dynamic loading feature to load data on demand.

webix.ui({
view: "tree", data: nested_data
});

Ace Editor for Webix UI

By Maksim Kozhukh | April 9, 2015

Ace is a handy JavaScript code editor. It combines the possibilities and behavior of popular editors like Sublime, Vim and TextMate. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. You can build Ace into your web page or app with ease.

And now it is possible to use Ace Editor with Webix UI.

Using Webix with Ace code editor

Age of Dynamic Web Pages – FireBase

By Maksim Kozhukh | April 1, 2015

Firebase adapter for Webix UI

TL; DR Grab the final package from https://github.com/webix-hub/webix-firebase

Dynamic Web

Not so long ago web apps were slow and phlegmatic. The whole page had to be reloaded to update information. AJAX has only slightly improved this situation. Now we update separate blocks instead of reloading the whole page. Hardly had we got used to this technique, when a new web transformation appeared on the scene. It is dynamical web, where the content of pages updates by itself.

Now you can find such elements on Facebook or Twitter pages, for example. Data are changed there without our participation. As soon as someone has added a comment or re-tweeted the post, the changes are reflected on the page immediately.

There are several technologies behind dynamical web. WebSockets are the most important of them. You can read how to use them with Webix here. However, web sockets present a very low level of abstraction. Fortunately, it’s possible to get all the benefits of dynamic updates without diving so deeply into the details of data synchronization. There are several great solutions created by web enthusiasts. They allow avoiding difficulties and creating cool dynamic apps.

Animation in Webix UI

By Maksim Kozhukh | March 10, 2015

While providing many UI options, Webix is quite short of animations. It can be easily changed though. Let’s check how to add nice animation effects for different Webix controls.

Carousel, MultiView, TabView

TabView is one of two components that have a built-in support for animation. When you are changing the active tab, a new one is shown with some animation. You can use the animate property to configure the details of animation

Code of demo

WEBIX JAVASCRIPT LIBRARY BLOG