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'}
]
}
}
}]
}