Related sample: tutorial/quick_start/part1.html
Firstly, before developing, carefully think about future elements and their disposal: which components to use, what functionality they must implement (to estimate available API) and where they will be located on the page. And only after, start developing.
Our notes:
dhx.ui({ ..\\ here you will place all your components })
The situation: you have to create a simple contact book. You decided that the front-end of the app would contain:
The solution:
Create a view | ![]() | dhx.ui({ //just a clean page }) |
---|---|---|
Create a layout | ![]() | dhx.ui({ rows:[ //the first (top) row { }, {cols:[ //divides the second row into 2 columns { // the first column }, { // the second column }] }] }) |
Create a toolbar | ![]() | dhx.ui({ rows:[ { view:"toolbar", type:"MainBar", // creates toolbar in the first row elements:[{view:"button", type:"round", label:"Add"}, // specifies toolbar controls {view:"button", type:"round", label:"Delete"}] }, {cols:[ { }, { }] }] }) |
Create a grid | ![]() | dhx.ui({ rows:[ { view:"toolbar", type:"MainBar", elements:[{view:"button", type:"round", label:"Add"}, {view:"button", type:"round", label:"Delete"}] }, {cols:[{ }, // creates grid in the second column of the second row {id:"grid", view:"grid", header:true, fields:[{ id:"Name", // specifies the first column of the grid, its id and name label:"Name", }, { id:"email", //specifies the second column of the grid label:"email", }] }] }] }) |
Create a form | ![]() | dhx.ui({ rows:[ { view:"toolbar", type:"MainBar", elements:[{view:"button", type:"round", label:"Add"}, {view:"button", type:"round", label:"Delete"}] }, {cols:[ //creates a form with 2 text fields in the first column of the second row {view:"form",elements:[{view:"text", label: 'Name', position: "label-left"}, {view:"text", label: 'email', position: "label-left"}] }, {id:"grid", view:"grid", header:true, fields:[{ id:"Name", label:"Name", }, { id:"email", label:"email", }] }] }] }) |
Related sample: tutorial/quick_start/part1.html
Part 1. Create the app interface? Easily! → Part 2. Some actions