Part 1. Create the app interface? Easily!

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:

  • Whatever component you're going to create it must be placed into view. View defines page appearance and contains all its elements.
dhx.ui({
..\\ here you will place all your components
})
  • Declare elements subject to their nesting, starting with the base.
  • Specify id to refer to element (it can be both master component and control). $$(“someID”) lets you refer to any element.
  • The alternative to onDocumentReady event is dhx.Ready(function(){…}). It will ensure that your code will be executed as soon as the page finishes loading.
  • You can define structure of the page in some var and then just put this var into view (dhx.ui(var)).

The situation: you have to create a simple contact book. You decided that the front-end of the app would contain:

  • a toolbar in the top (add(delete) contact buttons)
  • a grid contained a list of contacts
  • a detailed form

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