Blog

Animation in Webix UI

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
Read more


Using Third-party Libraries with Webix UI

Webix UI provides a lot of widgets, but it is just a tiny bit, as compared to the massive amount of different Open Source libraries. Fortunately, it is quite easy to wrap any custom library in Webix UI control.

Konva.js

As an example, I will use Konva javascript library.

Konva is a javascript library that adds interactivity to HTML5 canvas. You can draw things on the stage, add event listeners to them, move them, scale them, and rotate them independently of other shapes. Thus, high performance animations are supported, even if your application uses thousands of shapes.

Check the image below. It is an active Canvas object and you can try to drag-n-drop stars.



You can check full source code of the demo at http://konvajs.github.io/docs/sandbox/Elastic_Stars.html.

Read more


How to Create Kanban Board with Webix

During the process of web development it’s highly important to organize the workflow and keep in touch with all members of the team. There are useful tools that allow visualizing all the stages of work and keeping track of each participant’s current workload. One of such tools is a popular Kanban board. It helps to control work processes and maintain steady progress, as you can see what stage of the project should be speeded up and which one is overloaded.

Webix Kanban Board is a great widget that can be used for creating powerful apps intended for managing the development process.

In this article we’ll describe the stages of creating a basic Kanban Board with the Webix library. Tasks on the board will be supplemented with tags, images and personal avatars for tasks’ assignees. There will be icons that allow opening a form for editing tasks. Besides, you’ll learn how to customize the styling of the board.

webix kanban board

You can check the live demo of the ready Kanban Board.

Read more


Material Design in Webix UI

Material Design is a visual language that was developed by Google and is becoming trendy in mobile and web apps development. It is aimed at increasing the usability of application interfaces while preserving simplicity and nice look and feel of the apps. Web apps with this design can easily adapt across various platforms and all types of devices.

material design

Webix team was inspired by Google Material Design and created a new skin in accordance with the described visual principles.
Read more


Checkboxes in DataTables. Little-known techniques

You probably already know that DataTable control has the ability to show checkboxes instead of plain text data. It allows you to provide a simple solution for status marking and data selection.

Basic checkboxes

The minimal code for initializing a DataTable with checkboxes will look as follows:

webix.ui({
  view:"datatable",
  columns:[
    { id:"status", header:"Is Active", width:80, css:"center",
        template:"{common.checkbox()}"},
    { id:"value", header:"Records", fillspace:1 },
  ],
  data: [
    { status:0, value:"Record A"},
    { status:1, value:"Record B"},
    { status:0, value:"Record C"}
  ]
});

It will result in a nice-looking JavaScript grid presented in the picture below. The “{common.checkbox()}” line in the template expands in a checkbox control.

Basic Webix Checkboxes

 

live demo: http://webix.com/snippet/f84d411f

Read more