NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

WEBIX JAVASCRIPT LIBRARY BLOG

UI development best practices, front-end programming tips and news to speed up your Web development.

Follow us:

Write for us: learn about our guest posts guidelines.

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

Checkboxes in DataTables. Little-known techniques

You probably already know that DataTable 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 >>

Создание мобильного приложения с PhoneGap и Webix

С Webix вы можете создавать веб-приложения, которые будут работать одинаково хорошо как на мобильных, так и на декстопных устройствах. Однако данные приложения по-прежнему будут html5-приложениями. Для разработки нативных приложений вам понадобится такой инструмент, как PhoneGap.

PhoneGap – бесплатный фреймворк с открытым исходным кодом. С PhoneGap вы можете разрабатывать мобильные приложения со стандартным веб-API для всех используемых вами платформ. Кроме того, Phonegap работает на базе HTML5 и позволяет создавать нативные приложения для всех основных мобильных ОС: IOS, Android, Windows Phone и других.

В этой статье мы опишем процесс создания простого нативного приложения с помощью инструментов Webix и PhoneGap.

Получить окончательный код приложения можно на GitHub.

Creating a Mobile App with PhoneGap and Webix

With the help of Webix you can create a web app which will work equally well on both desktop and mobile devices. However, it still remains only an HTML page. In order to create a native app, you need some other tools.

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. Phohegap works on base of HTML5 and can be used to create native app for all major mobile systems – iOS, Android, Windows Phone and others.

webix and phonegap mobile app

In this tutorial we will describe the process of creating a simple native app by means of Webix and PhoneGap tools.
You can get the final code of the application from github.

1 2 3 4 5