How to present different views ?

This article covers multiview component usage. You will know how to create views and how to change them over.

We'll consider a simple example: 3 views which we change over by clicking on the appropriate multiview' item.

Our actions

Step 1. The first thing you must make is to define dhx.ready() function which ensures that our code won't be executed until the page has loaded.

dhx.ready(function(){
  dhx.ui({
  ..
  })
})

Step 2. As multiview inherits from layout, the next thing you must do is to define layout. Then, in one of its rows(cols) specify multiview. Remember about ids. Each tab must have id.

dhx.ready(function(){
  dhx.ui({
             container:"groupBox",
             rows:[{
                    gravity:2,  
                    view:"multiview",
                    cells:[{ template:"Monday", id:"tab_1"},
			   { template:"Tuesday", id:"tab_2"},
			   { template:"Wednesday", id:"tab_3"}]
             }]
  })
})

Step 3. After, you need to create element-changer. The handiest way is tabbar control (actually, exactly for this purpose it was developed).
In the parameters 'key' you need to specify ids of the tabbar tabs.
We'll create toolbar in the first row ( displace multiview to the second row)

dhx.ready(function(){
  dhx.ui({
             container:"groupBox",
             rows:[{ //the first row
                    view:"toolbar", 
		    type:"BigTabBar",
                    id:"topbar", 
                    data:[{ type:"tabbar", id:'tabbar', selected: 'tab_2', tabWidth:102, tabs: [   
                            	   { label: 'MONDAY', key: 'tab_1'},
                            	   { label: 'TUESDAY', key: 'tab_2'},
                            	   { label: 'WEDNESDAY', key: 'tab_3'}],
                    }]
             },
             { //the second row
                    gravity:2,  
                    view:"multiview",
                    cells:[{ template:"Monday", id:"tab_1"},
			   { template:"Tuesday", id:"tab_2"},
			   { template:"Wednesday", id:"tab_3"}]
             }]
  })
})

Step 4. All the needed elements are in their places. We are left to attach event and specify the appropriate handler.

$$("topbar").attachEvent("onBeforeTabClick",function(button,id){
                $$(id).show();
                return true
})

Step 5. It seems like it's all but if you run the app now, you'll see that the tab content doesn't conform to selected control's item. It's because of we won't make clicks yet and initial data was loaded. One more code line and everything will be correct.

$$("tab_2").show();

Full code of the example.

Addition

As element-changer (step 3) you can use toolbar's control segmented instead of tabbar. In this case, the code of the third step will look as:

dhx.ready(function(){
  dhx.ui({
             container:"groupBox",
             rows:[{ //the first row
                    view:"toolbar", 
		    type:"MainBar",// this type is more appropriate for segmented control
                    id:"topbar", 
                    data:[{ type:"segmented", segment:[
	                                 {key:"tab_1", label:"Monday"},
                                         {key:"tab_2", label:"Tuesday"},
                                         {key:"tab_3", label:"Wednesday"}]
	            }]
             },
             { //the second row
                    gravity:2,  
                    view:"multiview",
                    cells:[{ template:"Monday", id:"tab_1"},
			   { template:"Tuesday", id:"tab_2"},
			   { template:"Wednesday", id:"tab_3"}]
             }]
  })
})
  • In the parameters key we specify ids of the tabbar tabs as well.
  • label is the name of the individual segment.

Please note,full code of the example will be changed accordingly - full code of the example (using segmented control).