Table Layout divides the space in to rows and columns, resulting in cells, and for most scenarios a six by six layout will be entirely adequate. However, sometimes it may be necessary to have a far greater level of control over a particular area.
Figure 16 – Nested Layouts
In Figure 16, the WebPage already has a 3 row, 3 column layout. A panel has been dropped on Row 2, Column 2, has been sized to fit the height and width, and has then been given its own nine by nine layout.
The result is an area of the page with a far more detailed layout that avoids the need to have the whole page covered with a 27 x 27 grid.
Note also here how the ribbon is now showing two sets of layout information. The left hand side allows the details of the 9x9 layout to be modified, while the right hand is dedicated to how the panel is laid out within the 3x3.
Embedding panels in to a layout is one option, but when constructing complex UI, it is often better to create reusable parts.
Figure 17 – Using separate parts
Figure 17 shows a more complex layout. While this is still relatively simple, it's beginning to become more complex, and over time it's likely that more functionality and features will be added. Given this, a good idea is to create multiple reusable parts to simplify the design process.
A simple split would be to make a header, list and editor, with each piece being designed to fill whatever space is available when it's used. This separation allows each piece to be worked on individually, simplifying the overall layout requirement.
The creation of multiple parts may seem to be unnecessary and a maintenance overhead, but this separation tends to result in less work long term. Each piece is dedicated to a task, making them smaller and far more manageable.
