Client - Layout
Description
Layouts are used within a client configuration to describe regions on the page that are available for embedding content, with the actual content being provided by Views. Each perspective in a client configuration has its own layout, allowing for multiple page layouts to be available within a single client configuration.
Each region within the layout can have a different type, where the type determines how the content added to the region is displayed, tab is the default if not set and the available types are:
Type | Description |
|---|---|
tab | Multiple views can be added to the region with tabs being added to the region to allow the user to switch between the contained content |
accordion | Multiple views can be added to the region with collapsible labels added to the region to allow the user to switch between the contained content |
fit | One view can be added to the regions and the view will be sized to take up the entire available area |
border | No views can be added to the region, instead the region is given its own layout and views are added to that layout |
...
One thing to remember is that every layout always must have a center region and this center region will fill up the space remaining from the other regions in the layout.
So the first thing is you need to do is set the type to border for the region you want to split, then the split has the same options as the main layout tag (i.e. it now has a center, north, south, west and east regions)
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<layout>
<center type="tab"/>
<west width="300" type="tab"/>
</layout>
|
which looks like 
| Info |
|---|
...
Note that we didn't provide any width or height information for the So you should always set a width for |
The next 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>
|
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<layout>
<center type="tab"/>
<west width="300" type="border">
<layout>
<center type="tab"/>
<south type="fit" height="200"/>
</layout>
</west>
</layout>
|
...
| 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>
|
...
| 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>
|
...
| 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>
|
...
| 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>
|
...