HAPPY BIRTHDAY, WEBIX! 12 YEARS Read More Up to 25% OFF on licenses and complex widgets! Offer valid from July 7 to July 15!

WEBIX BLOG

Webix UI 1.9: Hotkeys for Controls and Other UI Improvements

We are glad to introduce the release of Webix UI 1.9, a JavaScript library for building fast desktop and mobile apps. The new version includes some UI improvements that speed up apps development as well as enhancements of the skins and some bug fixes.

Hotkeys for Controls

The hotkey functionality was initially included in the Webix API. But you could implement hotkeys for controls only by using custom functions.

With the new version of the library, you get the possibility to define hotkeys for controls (inputs, buttons) in one line of code. Pressing a hotkey is fully equal to clicking on the corresponding input/control. It will bring focus to the input and invoke all the attached click handlers.

hotkey for webix control

Developing a Basic Website Functionality with Webix and Struts

Introduction

Day by day the world is getting faster. News is being spread around the world within minutes while the search for information is reduced just to surfing the Internet. Nowadays developers don’t spend months or years on the implementation of new ideas, this process can take just a couple of days or maybe weeks. At the same time, the process of developing web apps and sites is going up to a new speed level.The tools of building websites are getting smarter and even easier to use.

Code generators, autocomplete, code analyzers, libraries and frameworks have settled down in the developers’ life. They let reduce the time of site development to the minimum. The Internet itself is developing together with these tools.

Not long ago sites have presented static data while their functionality has been rather minimal. Today sites are fully-functional applications which allow performing the actions that earlier have been available on desktop only. One of the tools for fast building of a web app’s interface for both mobile and desktop devices is Webix, a JavaScript UI widgets library.

Let’s consider an example of creating a site aimed for announcing future conferences on front-end development with the help of Webix and a Java-framework Struts 2. It will look as follows:

website made with webix and struts

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.

Build Responsive Web Apps with Webix 1.8

Today Webix has been updated to the version 1.8 that brings some pleasant bonuses for our users. The new version includes UI improvements, bug fixes and a few techniques for building responsive apps.

Responsive web apps

Previously when you were developing Webix web apps for desktop you had a problem with adapting the same app for the mobile devices. These desktop web apps had screens too wide for mobile apps.

So in Webix 1.8 we’ve added 2 features that will make your web apps responsive and improve user experience on both desktop and mobile devices.

Let’s consider the responsive web app made with Webix to show you this functionality.

Here is the screenshot of desktop web app:

webix reponsive web app

Webix 1.7: New Skin for Desktop and Mobile Devices

Today our team is happy to announce the release of Webix 1.7 that includes a new appealing default skin, support for multiselect on touch devices, some UI improvements and bug fixes.

A new skin looks and runs great on both desktop and mobile devices. It is styled in a flat design that will make your web apps look trendy and user-friendly.

718_image_13_01

The main colors of Webix 1.7 skin are sky blue, snow-white ( the color of background), bright green (the color of controls and selection) and dark grey. This color palette reflects the vibrant colors of spring nature that will cheer up your users. To evaluate the flat skin please check our Webix demo.

Using Webix with NodeJS

NodeJS is one of the hottest programming technologies. It allows creating fully functional web apps in a few lines of code. What is more, apps on NodeJS platform can be made completely in JavaScript. Using the same language on client and server side gives us real bonuses.

Let’s see how the client-side code based on Webix UI can be connected to a database with the help of NodeJS.

nodejs webix

Webix Gets NuGet and Bower Packages

Good news! The installation of Webix is becoming easier. From today the library can be installed with the help of NuGet or Bower dependency management tools.

Nuget

NuGet is a package manager for the Microsoft development platform. You can install Webix by executing the following command line:

nuget install Webix

If you are a user of Microsoft Visual Studio, you should run the next command from Package Manager Console:

install-package Webix

Using Handlebars Templates with Webix UI

JavaScript UI library Webix allows redefining the appearance of many elements through templating. For example, in tree view we can define the look of item through the following template:

webix.ui({
    view:"tree", data:tree_data,
    template:"{common.icon()} #value#"
});

simple template

 

Here you can see the two main components of webix templates: common helpers and property placeholders. Common helpers are predefined pieces of logic which renders some common elements (tree icon in the above case). Property placeholders are markers that will be replaced with data from related data object.
By using html tags in the template we can change the look of component in many ways.

Webix 1.6 : Full Support for Windows 8 Touch Devices and REST API

Today we are thrilled to announce a new version of Webix.

Webix 1.6 runs properly on Windows 8 touch devices and supports drag-and-drop operations on all kinds of touch devices. Version 1.6 also brings several UI improvements and enhancements in server-side integration.

win 8 DND

Windows 8

After improving the work of the library on iOS and Android mobile devices we’ve passed on to enhancement of Webix support for Windows 8 touch devices.

Now you can develop web apps that support Windows 8 touch devices and show high performance.

DHTMLX Gantt Chart in Webix Web Apps

Modern project managers need a fast and easy-to-use tool that will allow them to manage projects: add new tasks, set time limits for them, create different relationships between the set tasks and etc.
Update of October 8, 2020

With the release of Webix 8.0 the original JavaScript Gantt Chart component has become available. Now Webix users can enjoy the native Webix Gantt. This component is created according to the canons of the Webix framework and it is intended for the integration into any business applications regardless of their architecture and system platform. 

Webix Gantt

1 28 29 30 31 32 33