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.

Skin Builder – Online Tool for Skin Assembling

Good news! Now you are able to define custom colors and fonts for a web interface created with the Webix library. We are releasing Webix Skin Builder – online tool, which you can use for interface customization.

IMG_18122013_164425

 

You may choose one of the eight predefined color schemes from the list of base skins (air, compact, clouds, glamour, light, metro, terrace and web) or create your own web app style.

Webix 1.3 Was Released with New 6 Skins and New UI Elements

Webix Team is happy to announce the release of Webix 1.3 with great updates and improvements. This version adds 6 new skins for Webix components, new ui elements and a few widgets improvements.

New Skins

With various 6 Webix skins, you can make your apps looking serious or on the contrary glamorous, soft or very bright. We tried to create the skins that will satisfy various style requirements. Moreover, you can change any skin element the way you like.

6_webix_skins

Integration with Third-Party Charts

It’s common knowledge that chart is a convenient tool for arranging and manipulating information. Charts can present large amounts of data in a simple schematic way. Keeping up with the times, Webix Library offers a possibility to integrate with popular charts of such Javascript libraries as D3, Raphael, Sigma and JustGage. At the same time, Webix has a collection of its own charts.

Building Chart View

You don’t need to write a lot of code in order to add third-party charts into a Webix application since it’s done with the help of dedicated Webix components.

However, these components aren’t included into the default lib package, so you have to download a JS file for the needed component from Webix open repository of helpers.

This special javascript file will connect your app to the necessary chart and autoload all the corresponding chart files.

Integration with Online Text Editors

There’s no doubt that a possibility to place an online text editor on the web page is a necessary and useful thing. Webix library offers a simple solution for such a task with just a bit of coding required.

For now, Webix provides support for such popular editors as Mercury, NicEdit, Tinymce, CodeMirror and CKEditor.

Mercury Text Editor

Integration with Online Geographical Maps

A possibility to add a location search mechanism to web pages is a frequently requested feature. Webix Library offers a simple and elegant solution for embedding online geographical maps into the web application.

This article will tell you how to add popular web maps such as Google, Nokia, OpenStreet and Yandex maps into a Webix app with just several lines of code.

Building Map View

Firstly, you should download the wrapper for the needed map from Webix open repository of helpers that connect your app to third-party applications without linking to them directly. Note that these extensions are not included into the default library package.

Secondly, once you’ve downloaded the necessary code file, you should include a link to it to the head section of your document. For instance, to embed Google Map you link to:

<script type="text/javascript" src="./googlemap.js"></script>

google_map

1 2 3 4