How to Build a Mobile Web App with Webix

One of the key advantages of the Webix library is the ability to work on both desktop and mobile devices. A web-based user interface created with Webix will work properly on both platforms. Still there are some recommendations which will help you to achieve a better user experience while developing your mobile web app.

In this article I’ll try to describe the most significant features of mobile applications development. Let’s go into details by creating a simple ‘contact list’ app. This is a common app that allows users to create a contact list, look up the necessary contacts and view their details.

mobile app

You can download the full sources of the actual working application from the github repo or go check a live demo.

Webix 1.1: Improvements in Server-side Integration

We are happy to announce the release of new Webix 1.1. This update results in improving server-side integration, fixing the detected bugs and enhancing performance of the Webix UI components.

UI Improvements

The ability to disable any view was added. It is an expected functionality for form controls, but it can be used with all other Webix’s views as well. For example, you can disable a part of layout, text input or datable.

disable functionality

Drag-and-Drop in Webix UI

Not so long ago, the drag-and-drop functionality was used in web apps quite rarely. With HTML5 coming on the scene, native drag-and-drop has become easily accessible and popular. The functionality that required lots of coding efforts before, now can be added with a few lines of HTML code. While developing the Webix library, we tried to keep all features and advantages of native drag-and-drop. At the same time, we’ve added new capabilities that might be useful in web app development.

Component Level Drag-and-Drop

While HTML5 drag-and-drop is focused on an HTML element, Webix drag-and-drop concentrates on the UI components. For example, try to drag items between the tree and the grid in the demo below:

Creating a custom view – HipChat integration

One of the Webix’s great advantages is the possibility to use the third-party components. Obviously, instead of reinventing the wheel, it is better to take advantage of reliable, ready to use solutions. Especially now when the open source community is actively developing and supporting a variety of interesting libraries.

The standard Webix pack already includes wrappers for such popular solutions as Google Maps, FCK Editor, D3 charts and lots of others. However, it is a drop in the ocean. Every day new js libraries appear, and it’s impossible to provide support to all of them out of the box. Instead of this, Webix allows creating new integration for any third party library by, literally, several lines. Lets check how it can be done.

Some Fixes and Updates for Webix Library

We would like to announce another Webix minor update (1.0.2) improving the following features of the library:

  • IE8 compatibility
  • Loading UI from XML
  • Security of data-saving operations.

Component styling pattern was considerably changed. The appearance of the components remains the same but now it is easier to customize them.

Furthermore few extra API methods were added in Version 1.0.2.

You are welcome to download the updated Webix library.

1 31 32 33 34