How to redefine components ?

In this article we'll tell you how to redraw initialized components if you'd like to change something (values of the buttons, windows etc).

The technique is the following:

  1. Set an id of the component object you need to change
  2. Set an id of the object's element
  3. 'tell' an object to redraw

There are two ways how to make this:

  • Full redefining
  • Redefining just one of the elements

Full redefining

This way must be used when you need to redefine the whole component with all the nesting staff.

$$(componentId).define("parameter", new_value);
$$(componentId).render();

Look at it in use:

Imagine, you have some toolbar, like this:

And when you click the button Choose it must be changed to :

So, we face the need to redefine the component.

Our actions (don't forget about ids):

  1. Set data for each view of the toolbar (config1, config2)
  2. Define a toolbar object
  3. Specify the function 'swap()' which will swap button's text (we'll make it by using 'click' parameter).
<body>
	<script type="text/javascript" charset="utf-8">
	    // data of the first toolbar	
	    var config1 = [	
                        {type:"label", label:"Backpackr", align:"left"},			
			{type:"segmented", id:"tabs2", segment:[
							{key:"tab_a", label:"Hotel"},{key:"tab_b", label:"Motel"},{key:"tab_c", label:"Hostel"}
			]},
			{type:"button", label:"Choose",align:"right", click:"swap"}, // here we specify our function swap(). It will be called on the button click.
                        {type:"roundbutton", label: "Photos", align:"right" },
			{type:"roundbutton", label: "Prices", align:"right" },  
			{type:"roundbutton", label: "Info", align:"right" }
            ];
            // data of the second toolbar
	    var config2 = [		
		        {type:"label", label:"Backpackr", align:"left"},
			{type:"segmented", id:"tabs1", segment:[
							{key:"tab_a", label:"Plane"},{key:"tab_b", label:"Train"},{key:"tab_c", label:"Bus"}
				]},
		        {type:"roundbutton", label: "Book seat", align:"right" }
	    ];
	dhx.ui({
		rows:[
			{view:"toolbar", id:"topbar", type:"MainBar", data:config1 },// toolbar, data of which we specify separately
		     ]
	});
        function swap(){
                  $$("topbar").clearAll();//clears old data
                  $$("topbar").define("data",config2); //redefining code mentioned at the top of the section.
		  $$("topbar").render();
        }
     </script>
</body>

Redefining just one of the elements

This variant is applicable in all other situations (when you needn't to redraw the whole component but one of its elements).

$$(componentId).item(elementId).someParameter =  new_value;
$$(componentId).refresh(elementId);

Let's again take a toolbar as an example.

On the toolbar you can see the button 'Full information'. What do we need? On the button click we want change the content of the displayed information: the full details to only the most important of them. Also, we want to change the button's text accordingly: 'Full information' to 'Short information'.

Our actions (remember about ids):

  1. Define the toolbar with the appropriate data
  2. Specify the function 'changeButton()' which will swap button's text (we will use 'click' parameter as well).
<body>
	<script type="text/javascript" charset="utf-8">
		dhx.ui({
			rows:[
				{view:"toolbar", type:"MainBar", id:"topbar", data: [	// defines toolbar with data
            {type:"label", label:"Backpackr", align:"left"},			
	    {type:"roundbutton", id:"InfoButton", label: "Full information", align:"right", click:"changeButton"}, // here we specify the function changeButton(). It will be called on the button click.
            {type:"button", label: "Help", align:"right" },
    	    {type:"button", label: "Upload GPS track", align:"right" },  
	    {type:"button", label: "Settings", align:"right" }	
            ]}
				]
		});
        function changeButton() {
		if ($$("topbar").item("InfoButton").label == "Full information") {
			    $$("topbar").item("InfoButton").label = "Short information"; // redefining code mentioned at the top of the section.
			    $$("topbar").refresh("InfoButton")
		}
		else{ 
		     $$("topbar").item("InfoButton").label = "Full information"; 
		     $$("topbar").refresh("InfoButton")
                }
	}
	</script>
</body>