...
So if we have the following layout
| Code Block |
|---|
|
<layout>
<center type="tab"/>
<west width="300" type="tab"/>
</layout>
|
...
the first thing we do is to change the west type to border (which is temporarily invalid, because a border type always needs the layout content)
| Code Block |
|---|
|
<layout>
<center type="tab"/>
<west width="300" type="border"/>
</layout>
|
So the next thing we have to do is set the layout content for the west region
| Code Block |
|---|
|
<layout>
<center type="tab"/>
<west width="300" type="border">
<layout>
<center type="tab"/>
<south type="fit" height="200"/>
</layout>
</west>
</layout>
|
...
From here we could name the regions so later on we can refer to them using easy to remember names (plus we can change our layout without having to make sure we change the locations for any views that we've added to the region)
| Code Block |
|---|
|
<layout>
<center name="map" type="tab"/>
<west width="300" type="border">
<layout>
<center name="toc" type="tab"/>
<south name="logo" type="fit" height="200"/>
</layout>
</west>
</layout>
|
...
This can be applied recursively and to each of the five regions available in a layout
| Code Block |
|---|
|
<layout>
<center type="border">
<layout>
<center type="tab"/>
<west type="fit" width="100"/>
</layout>
</center>
<west width="300" type="border">
<layout>
<center type="tab"/>
<south type="fit" height="100"/>
</layout>
</west>
<south type="tab" height="200"/>
<east width="400" type="border">
<layout>
<center type="border">
<layout>
<east type="fit" width="100"/>
<center type="tab"/>
</layout>
</center>
<north type="fit" height="200"/>
</layout>
</east>
</layout>
|
...
Also, you should set a default height for north and south regions and a default width for east and west.
Further for north, south, east and west a minSize and maxSize should be provided if you set split to true. If split is false or not set then the region can't be resized.
You can also set collapsible to true to allow for easy collapsing of the region
| Code Block |
|---|
|
<layout>
<center name="map" type="tab"/>
<west width="300" type="border" split="true" minSize="100" maxSize="500" collapsible="true">
<layout>
<center name="toc" type="tab"/>
<south name="logo" type="fit" height="200"/>
</layout>
</west>
</layout>
|
And then finally you can add a toolbar and statusbar to each layout
| Code Block |
|---|
|
<layout>
<center name="map" type="tab"/>
<west width="300" type="border" collapsible="true">
<layout>
<toolbar>
<item action="..."/>
</toolbar>
<center name="toc" type="tab"/>
<south name="logo" type="fit" height="200"/>
</layout>
</west>
<statusbar>
<item component="..."/>
</statusbar>
</layout>
|
...