Book Image

Learning DHTMLX Suite UI

By : Eli Geske
Book Image

Learning DHTMLX Suite UI

By: Eli Geske

Overview of this book

JavaScript applications provide an excellent user experience for small to large scale enterprise applications. The amazing growth of JavaScript has opened the door for many great libraries such as DHTMLX. "Learning DHTMLX Suite UI" will teach you how to use these libraries effectively so you can make presentations that will take your employer's/ client's breath away! "Learning DHTMLX Suite UI" is a step-by-step guide that will teach you the basics of DHTMLX library components and how to apply them in a real-world scenario. This book will start with the installation of DHTMLX before moving on to explore the features of DHTMLX and helping you to create your first user management application. "Learning DHTMLX Suite UI" will guide you through the installation of DHTMLX as a single-page application. As you progress from one chapter to the next, you will gradually build a simple user management application. You will also learn how to create forums with validation and how to use grids to add and edit users. The book will also suggest the best practices for using toolbars and refreshing data. With "Learning DHTMLX Suite UI Guide", you will be inspired to come up with your own great ideas for your future application development projects.
Table of Contents (17 chapters)
Learning DHTMLX Suite UI
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

About DHTMLX


DHTMLX is a robust set of JavaScript components used for client-side, desktop-like web applications or websites. It also has server-side connection scripts to better help format the data structure to and from chosen types of server-side storage. Each of the DHTMLX's components can be used as individual features to your website or combined to create a full scale web application. All of these components work nicely together.

If you have been searching the Web for different components like grids or modal windows, you probably have seen some of the large variety of other options out there. There are jQuery-driven grids, custom JavaScript modal windows, and full scale libraries of components similar to DHTMLX.

DHTMLX and other component libraries

The major difference in the available JavaScript components is that most are small and contain only one or two different components. If you plan on just using a grid for a project, there are many good choices out there. Some of the better known smaller JavaScript component libraries for grids are jqGrid and SlickGrid.

Surprisingly, I have found that DHTMLX's grid has more options than even the single libraries specializing in grids. Also, one must be careful of choosing a standalone library, as the documentation and maturity can sometimes be an issue.

What about the more robust component libraries?

One of DHTMLX's comparable libraries is Sencha Ext JS . They both aim to give the developer the tools needed to build rich desktop-like applications in a web environment. They also provide both a free version as well as a paid version which includes support.

The major difference between these two component libraries is their documentation and coding structure. Sencha Ext JS has a very granular documentation that, when learned, is very beneficial. DHTMLX has a straight to the point list of available methods and events which are available for each component.

Today, more and more web designers want to make applications. These designers have a better understanding of a customer's needs and how to create a more user-friendly application. These designers may not have an in-depth understanding of programming and documentation. DHTMLX caters toward this very well.

The components

Let's get familiar with some of the components that DHTMLX has to offer and go over exactly what a component is.

A component in DHTMLX is a JavaScript object that is used to present and allow interaction of data to the end user in a clean and efficient manner. DHTMLX does all of the heavy lifting by creating the HTML in a presentable layout that is cross-browser friendly.

What is also important about a component is that they can be used together in a combination of components or separately in a block-level DOM element.

DHTMLX offers the following components:

  • Grid

  • Tree

  • Tree Grid

  • Layout

  • Windows

  • Toolbar

  • DataView

  • ColorPicker

  • Editor

  • Chart

  • Menu

  • Form

  • Combo

  • TabBar

  • Calendar

    Note

    The DHTMLX team is hard at work adding new components frequently, so it is beneficial to check their website for a list of currently available components.

DHTMLX also provides an online skin builder and a Visual Designer tool. The skin builder allows for editing the CSS of a current skin or downloading one of the many existing skins. For our application, we will use the default "Blue Sky" skin.

The Visual Designer tool is a graphical user interface that allows a user to create code without having to actually write it. This is free, and is available on the DHTMLX website.