WEBIX BLOG

With the increase in using web applications, the need for a widget that allows working with hierarchical data becomes primary. A web-based file manager is a good solution for managing such type of data within any modern web browser.

Today we are glad to present you a new Webix widget intended for organizing your data in the Internet – JavaScript File Manager. It is a JavaScript and HTML5 component that allows you to manage hierarchical data, e.g. files and folders.

Webix features the drag-and-drop functionality that is available not only for desktop but also for mobile devices.

The library allows making drag-and-drop operations within a widget itself as well as between a few different widgets or even between the same widgets. In this article it goes about drag-and-drop operations within Webix data management widgets.

Learn how to implement this functionality with ease.

Drag-and-drop modes

Firstly, make sure that both target and source widgets have the drag property set to true. Basically, it is enough to enable drag-and-drop.

It is the last part of the tutorial that tells about developing a website by using Webix UI library and Java framework Struts 2. If you haven’t read the previous parts yet check the first and the second parts in the Webix blog.

Nowadays nobody is interested in static data. That’s why our website should be able to download a list of events and reports from database and save all the implemented changes. We will use the most popular database MySQL.

The database structure is simple. It is represented in the image below. We will use two tables for storing events and reports. Each record in the table “speakers” contains the event_id a certain report is related to.

This article is the continuation of the previous blog post that refers to developing a basic website functionality with Webix and Struts 2.

In this part you’ll know how to create the pages “Forthcoming Events” and “Contacts” as well as how to add the information about events and then manage it.

The page with coming events will look this way:

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:

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.

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.

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.

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:

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.

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. 

If you want to add JavaScript charts with main Pivot Table functions to your web app, you can use Webix Pivot Chart. This powerful component shows data series, categories and chart axes the same way a widget JavaScript Charts does and provides you with interactive filtering controls for quick dataset analyzing.

Pivot Chart delivers various types of charts: line and spline chart, area chart, bar chart, pie chart, 3d pie chart, donut chart, scatter chart, and radar chart.