Layouts
There are a number of possibilities to layout a dynaWidget grid. The grid layout is based on floatable grid columns (html divs). Each grid can be set with a given width and height (grid-property "width", "height").Default layout
The default layout represents a grid with n grid-columns (grid-property "columns") and unlimited rows. You can also have columns with double the width of normal columns (grid-property "largeColumns").
columns="4" 
columns="3" largeColumns="2" 
More complex layouts
Special needs require more flexible layouts. That´s why we introduced a dynamic layout mechanism that allows implementing custom layouts on base of layout templates.DynaWidgets already comes with a number of layouts (grid-property "layout"). The following layouts are supported right away:
| layout | looks like |
| 3col01 |  |
| 3col02 |  |
| 4col01 |  |
| 4col02 |  |
| 4col03 |  |
| 4col04 |  |
| 4col05 |  |
| 5col01 |  |
| 5col02 |  |
| 5col03 |  |
How to implement your own layout
You can easily use your own grid layout by specifying a layout template (grid-property "layoutTemplate"). Right now, we will not describe the template format in detail but we show two examples from predefined layouts described above. This is the layout template of layout "3col01":
<div id="gridColumn1" class="gridColumn main" style="width:{columnWidth}"></div>
<div class="gridMultiColumn" style="width:{columnWidth}">
<div id="gridColumn2" class="gridColumn" style="width:{multiColumnWidth};margin-right:{columnMargin}"></div>
<div id="gridColumn3" class="gridColumn" style="width:{multiColumnWidth}"></div>
</div>
This is the layout template of layout "4col02":
<div id="gridColumn1" class="gridColumn main" style="width:{columnWidth};margin-right:{columnMargin}"></div>
<div class="gridColumnWrapper" style="width:{largeColumnWidth};float:left">
<div id="gridColumn2" class="gridColumn main" style="width:100%"></div>
<div class="gridMultiLargeColumn" style="width:100%">
<div id="gridColumn3" class="gridColumn" style="width:{multiColumnWidth};margin-right:{columnMargin}"></div>
<div id="gridColumn4" class="gridColumn" style="width:{multiColumnWidth}"></div>
</div>
</div>
What´s important here:
- You must not change the ids or class names
- class="gridColumn" represents a container for widgets that are numbered through their id
- the main grid columns that form the layout must be marked on class level with "main"
- stylesheet placeholders to be filled in dynamically are {columnWidth}, {largeColumnWidth}, {multiColumnWidth} and {columnMargin}