Configuration

A grid control can be configured in different ways. An example configuration of the Desktop.view together with a grid control is explained below. Prior to this you should read the chapter on Positioning and calculation of the size of controls as the basis for this example.

1. Create a new project.

2. Open the Desktop.view.

The Desktop.view has a fixed size as a default setting. If the browser size changes, therefore, the Desktop.view and its contents do not adapt themselves. In the following steps the view will be adjusted so that it changes its size dynamically with the browser size.

3. Select the view.

4. Change the "Width" attribute to 100 %.

With this setting the size of the view adapts itself automatically to the size of the browser. The viewport of the graphic editor can now be used to simulate a desired browser size and test the effect on the visualization.

5. Add a grid control to the interface.

6. Change the following attributes: Left = 20 px, Top = 100 px, Right = 20 px.

7. Select the "Parent" mode for the "Width Mode" attribute.

With these settings the size of the grid control adapts itself to the size of the parent element accordingly. In this case the parent element is the Desktop.view.

8. Insert a second column with the help of the "Column Options" dialog.

9. Insert a text block in each column by drag and drop.

10. Change the position of both controls to: Left = 120, Top = 140

With these settings the right-hand cell will be shifted automatically to the row below if there is insufficient space in the browser to display both side by side. You can test this function by changing the width of the integrated LiveView window or the browser instance. So far the grid has not adapted itself automatically in height. The consequence of this is that only half of each of the two text blocks is displayed if the right-hand cell is displayed in the second row.

11. Select the "Content" mode in the "Height Mode" attribute of the grid control.

12. Also select the "Content" mode in the "Height Mode" attribute of the view.

With these settings not only will the grid be enlarged according to its contents, but also the view. In this way you can ensure that all contents are displayed so as to be reachable if the right-hand cell jumps to the row below. In order to be able to distinguish better between the two cells, their background colors will be set in the following.

13. Insert two cells with the help of the "Cell Options" dialog.

14. Change the first cell option to: Background Color = #FFCA0000, Column Index = 0, Row Index = 0

15. Change the second cell option to: Background Color = #FFFFFF00, Column Index = 1, Row Index = 0

At the moment, both cells close and thus the entire row are bordering the lowermost control. In the row settings, for example, a minimum row height can be specified.

16. Change the "Row Min Height" attribute of the row option to 300 px with the help of the "Row Options" dialog.

If the browser height is larger than the grid, a white border will be displayed at the moment. To make sure that the visu completely fills the browser with each browser size, the following step must be carried out.

17. Change the "Minimum Height" attribute of the view to 100 %.

In summary, you have created your first visualization with the help of the grid control according to the responsive design approach. This visualization fills the entire browser regardless of the browser size. If insufficient width is available, the content of the second column is automatically displayed in the row below. If on the other hand the height is insufficient, it will be expanded automatically according to the content to be displayed.

Sample project: Grid