Working the Grid - trying to make a complex lay out

[jeroenvandera]

There it is. Your blanco app screen. but how far can you go making a complex lay-out?

With just a few elements (grid, pagebook, texts) the possiblities seem endless as you can embed them and create all kind of relationships.

Just to find out i tried to make a menu with a table like appearance to the right.. The table is embedded so you can swipe it away

The result looked like this

The main item is a Grid that separates the screen in a menu and a contents part

The properties are that the height and with are set to auto and the margins are set to 0. This will ensure the entire

screen is filled with this grid

in the property number of columns i've put 2 and the first column has a relative value of 1 and the second 4. This will make sure the screen width is 20% menu and 80% contents

To have the background colors i've put in a text box "Menu_Background"

in the CSS style i have entered background-color:#567156; 

In the Pagebook there are 2 pages.

Again both have a background in the same way as i stated earlier.

but now with color : background-color:#8FBC8F; in the CSS style property

In the page is also a grid. this grid has 15 rows, divided evenly. Again the property of width and height is auto, to ensure they will keep the background filled.

Every 2nd row has a text box so the rows have an alternating color.

the color used is background-color:#81A981;

I've tried to fill each line with graphs, but to make it really table like i needed to define

a datasource for every line in the table. Also i would like to edit texts in each line, but that proved to be quite difficult as SetText (GetDataAsString) only gives you measures.

I  could go on with this. With a colleague i discussed the possibility to position centrally in your screen, whatever the screen size.

Make  a grid with 9 columns, evenly distributed and put the buttons in column 5.

set the width on auto  (left and right margin 0) and the grid will grow and shrink with the screensize, forcing the buttons to stay in the middle.

Lessons Learned

As i said earlier : Auto is your friend. By applying these you can influence the behaviour of your elements on screen a lot. Keep in mind that these properties are in reference to the parent object. margin 10 within a cell means that if that cell is positioned with a left margin of 100 that your element will be placed at 110.

Naming. As the number of elements grow, the need for clear naming increases. i tried some naming as "PAGE_2_TABLE_GRID".  I know i didn't rename Text_14 properly 🙂

Future functionality

I hope the grid will gain additional properties. The grid itself doesn't have style properties and the cells don't have properties at all. The placing of text elements to make backgrounds is a bit of a work-around, but in the future i would like to do these lay-out actions directly in the grid.

It would also be nice to have some data binding in the cell numbers. In this application Row 1 could be connected to row 1 in the datasource and Row 2 to DS row 2 and so on. That would make it simple to put a graph in each row that would show a trend for that particular record.