I am developing a domain-specific programming language called JS2DX written in Javascript. It is aimed at providing a simplified, shortened syntax for creating UI pages using DHTMLX components while fully compatible with native DHTMLX code. Multipart UI pages are coded within one JSON (or XML) struct using key-value pairs.

For example this is code of a three frame layout UI page with tree, grid and form:

layout: { id : 'A' ,pattern: '3L' ,cells : [{ caption: 'Locations' ,width : '220' ,attach : { tree : { id : 'navigate' ,source: {url:'./xml/regions.xml'} ,event : { type : 'onClick' ,action: function(id){ if (navigate.getLevel(id) == 1) return; list.clearAll(); list.loadXML('xml/list_'+id+'.xml'); } } } } },{ caption: 'List' ,attach : { grid: { id : 'list' ,columns: [ {name: 'Name', sort: 'str', filter: "#text_search"} ,{name: 'Mobile', sort: 'str', filter: "#text_search"} ,{name: 'DOB', sort: 'str', filter: "#text_search"} ,{name: 'DL', sort: 'str', filter: "#text_search"} ] ,event: { type: 'onRowSelect' ,action: function(id) { detail.clear(); detail.load('xml/detail_'+navigate.getSelectedItemId()+'_'+id+'.xml'); } } } } },{ caption: 'Details' ,attach : { form: { id : 'detail' ,fields: [ {type:'settings', labelWidth:110, inputWidth:150} ,{type:'input', name: 'name', label: 'Driver\'s Name:'} ,{type:'calendar', name: 'dob', label: 'DOB:', enableTime: false} ,{type:'input', name: 'mob', label: 'Mobile:'} ,{type:'input', name: 'dl', label: 'License #:'} ,{type:'button', name:'sav', width:150,offsetLeft:50, value:'Save', position:'label-center'} ,{type:'newcolumn'} ,{type:'input', name: 'make', label: 'Vehicle Make:'} ,{type:'input', name: 'mile', label: 'Mileage:'} ,{type:'input', name: 'note', label: 'Note:', rows:2} ,{type:'button', name:'can', width:150,offsetLeft:50, offsetTop:10, value:'Cancel', position:'label-center'} ] } } }] }



Looks interesting! Thanks for sharing your solution.


Thank you for your interest. The project is new and work is continuing. Only recently I further simplified JSON structure of UI pages. For example this code would generate a two-frame layout with a tree and Google map:

layout: { id : 'A' ,pattern: '2U' ,cells : [{ caption: 'Vehicles' ,width: 200 ,grid : { id: 'list' ,columns: [{name:' '}] ,url: './xml/2_list.xml' ,onRowSelect: function(id) { js2dx.load('map','xml/2_track_'+id+'.xml'); } } },{ caption: 'Map' ,map: { id: 'map' ,url:'./xml/2_all.xml' } }] }

This is in fact the entire code needed to program a UI page as demonstrated here: js2dx.com/dx/demo2.html