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.
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:
Everyday millions of employees have to analyze complex data, create reports. Pivot table is a perfect web solution for those professionals who work with huge amounts of data.
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.
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.
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.
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.
You can download the full sources of the actual working application from the github repo or go check a live demo.
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.
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.
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.
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:
Learn about our guest posts guidelines
