JS2DX – JavaScript Library API

| Comments (2)

One of the users of our DHTMLX library, Sergei Sheinin, has created a JavaScript Library API named JS2DX. We would like to present Sergei’s overview of it and we suppose that some of you will find JS2DX useful and appropriate for your own projects:

“While developing large quantity of database interfaces with DHTMLX framework I felt weighed down by verbosity of JavaScript syntax and having to reuse multiple lines of code that instantiated interface components. Another hurdle that stood out was that the interface components were not nested inside the code. For example a page with multi-cell layout containing several interface components would get written in one indent making it difficult to review and modify. And there was a need to constantly check the documentation for specifics of a multitude of commands.

JS2DX - JavaScript Library API

DHTMLX was the JavaScript Library of choice because of its speed and straight-forward syntax and there are similarly unfavorable shortcomings with other JavaScript Libraries. Something had to be accomplished to cut down development time, minimize and simplify code and make syntax memorization more intuitive.

The result is JS2DX – a lightweight JavaScript API integrated with DTHMLX code base. It consists of a programming language interpreter written entirely with JavaScript. With its help I was able to reduce code size and time required to write it.

JS2DX offers key-value pair syntax that is simple and with minimized verbosity. It presents a programmer with ability to instantiate GUI components in short statements. JS2DX code may be supplemented with native JavaScript Library commands and classic JavaScript wherever necessary.

For example instantiation of a Tree component with onClick event in JS2DX is accomplished using the following code:

{tree: {
id : 'myTree'
,url :'./xml/source.xml'
,onClick: function(id) { alert(id) }}}

JS2DX interpreter features a recursive command iterator. Thus GUI components may be nested enabling programmers to code complex pages with one JavaScript object. When loading a GUI page the interpreter refers to a map of JS2DX internal commands matched with their corresponding DHTMLX function calls. Having such command map simplifies procedure of adding support for DHTMLX functions. For example to support setting image path for the Tree component it is sufficient to add this entry to the command map:

FF:{ // internal address of the
// command in JS2DX interpreter
cmd:'setImagePath', // command native to DHTMLX
params:['imgPath'] // object key used in coding a JS2DX page
default:['./codebase/imgs/']}

JS2DX syntax for invoking DHTMLX setImagePath function becomes as follows:

{tree: {
id : 'myTree'
,imgPath: 'http://mydomain/images'
...}}

Commands contained in JS2DX interpreter are reused for various DHTMLX function calls. As command selection in the interpreter is expanded in ongoing JS2DX development the procedure of mapping DHTMLX functions progressively becomes more effortless.

JS2DX features automatic inclusion of JS and CSS files needed to instantiate page components. For example if a GUI page code contains Tree object then JS2DX will automatically add dhtmlxtree.js and dhtmlxtree.css to the document header. A programmer does not need to consider which JavaScript Library or CSS files are required to load a GUI page.

JS2DX is compact and fast. While the current version is integrated with DHTMLX support for various other JavaScript Libraries is planned. There are graphing component based entirely on JS/HTML and client-side database libraries in its feature pipeline. JS2DX became functional in December 2013. It is employed in a real-world project where it provides numerous database interfaces.”

More information and demo may be seen at http://js2dx.com

Comments

  1. Hayk June 20, 2014 at 2:06 pm

    Interesting, thanks for sharing.

    I can tell you what I’ve done for our corporate solutions. I’m using many datagrids and made a DB based constructor. I have table in DB that describes the grid with all its parameters, e.g. cell names, with, alignment, filtering, etc… not to hardcode everything and many times in JS I just use own function to get all that data from DB (ajax), then pass it to grid object as strings. And I have a specific grid with only one key-name. This allows to customize and save different set of fields for users and very easily add/manage fields in existing dhtmlxgrids (from DB)…

    feel free to ask questions, if interesting :)
    regards,
    –Hayk

    • DeepNN June 25, 2014 at 4:18 pm

      Hayk,
      it sounds very interesting. At leisure, I try to make some system for corporate purposes, using the DB and dhtmlxgrid, but I’m new to dhtmlx. Could you show some examples?

Leave a Reply