WEBIX BLOG

Please note that the article is outdated. There is a new article on the integration of Webix with dhtmlxScheduler.

All the working processes are connected with making plans and their fulfilling. To organize events and appointments or to manage and track the ongoing tasks, managers can use an interactive dhtmlxScheduler.

dhtmlxScheduler is a JavaScript multifunctional event calendar that allows adding a Google-like scheduler into your web app. It can create events, show a schedule for a day, week and month, display locations associated with the calendar events, display recurring events.

Nice news! You can easily use Webix with the above useful planning tool. This integration will empower your web apps with the multiple features of Scheduler leaving all great Webix functions.

Moreover, you don’t need to write tons of code to add Scheduler into a Webix app. You can use Scheduler as any other Webix component.

An Interactive tutorial is an easy-to-use and demonstrative way to learn JavaScript libraries from scratch. Developers may read the guide, code in the neighboring block and preview the results on the same page. All the mistakes that are made by “JavaScript students” are highlighted at once so that you can correct them.

Webix presents several detailed interactive tutorials that are divided into the following topics: a general tutorial for beginners, DataTable tutorial and Form controls guide.

One of the latest cool APIs of the modern web is web sockets API. It allows creating real-time apps, where users can collaborate, get notifications and data updates whenever the data is changed. This article will show how you can create a simple web chat by using Webix and web sockets API.

Web chat is a “hello world” for real-time web apps. You can grab the final code from github.

Are you looking for an easy-to-use tool for fast prototyping? Would you like to share your UI experiments in popular social nets?

Webix presents a live coding tool “Code Snippet” that allows you to code UI with Webix and see the results of your work immediately.

This tool enables you to code in JavaScript and HTML, load data in JSON and XML formats or apply 6 Webix skins to decorate your UI.

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.

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.

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:

Where it may be useful

HTML5 provides multiple ways of arranging elements on the page. However, while building web apps we can still face tasks that can’t be solved with pure HTML and CSS. For example, there’s a problem of mixing percent and fixed size values in the same row. Another task that exercises the developers’ minds is making columns of equal height. The CSS Grid specification looks like a promising solution to such problems, but it’s currently at the draft stage and implemented only in Internet Explorer. If you need to have a greater layout flexibility here and now – that is where Webix Layouts can help.

What the purpose is

Modern web apps can be rather complicated. It’s not uncommon that a single page can consume data from multiple sources, part of which can be provided by third party API or by a related application that resides on some other site. And that is where a problem occurs. A page hosted on one domain can’t access data from a different domain.

For example, if you have a page hosted on //app.mydomain.com, which tries to load data from the //data.mydomain.com, the data loading will fail. Any browser blocks such kind of data loading operation for safety reasons. Moreover, a request to a different port, such as //app.mydomain.com:5000 for example, will be blocked as well. URLs pointing to the same domain but to different ports are treated as URLs pointing to different domains.

The reason

Webix is mostly a UI framework, it is oriented for usage in complex client side apps with a lot of controls and complex business logic. At the same time, it can be effectively used for solving common tasks without the necessity of learning any third party libraries. Let’s check these Webix features by creating a simple “ToDo” app. The ToDo App is like a “Hello World” for frameworks. It is the basic app, which shows how the main functionality of the framework can be used.

You can grab the code of final version from GitHub or check the online demo.