Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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:
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
accordian:: 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

If no layout in configured in the client then a single center region will be created. The type of this default center region will be either tab or a fit depending upon the number of views that are added to it, if there's only one view then it'll be fit, but if there's more that one view then it'll be tab.

Once the layout has been configured the Views can be added to the client configuration and the location set in the view determines which region in the layout the view will be added to. If no location is set for a view then it will be added to the center region.

Nested Layouts

I'll try and give a quick overview on how to create a nested layout structure in the client.

By default each client perspective is broken into five regions, called north, south, east, west and center. These regions can be further sub-divided by changing their type to border, then you can apply a layout to the divided region.

One thing to remember is that every layout always must have a center region.

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)

So if we have the following layout

<layout>
	<center type="tab"/>
	<west width="300" type="tab"/>
</layout>

which looks like

{{LayoutSample1.png}}

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)

<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

<layout>
	<center type="tab"/>
	<west width="300" type="border">
		<layout>
			<center type="tab"/>
			<south type="fit" height="200"/>
		</layout>
	</west>
</layout>

{{LayoutSample2.png}}

So basically what used to be west is now west.center and we have a new west.south region (we could also add a north, east and/or west)

then when it's time to refer to the location in the view you now have

  • center
  • west.center
  • west.south

as the available locations (as opposed to center and west as in the original example)

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)

<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>

{{LayoutSample3.png}}

This can be applied recursively and to each of the five regions available in a layout

<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>

{{LayoutSample4.png}}

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

<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

<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>

{{LayoutSample5.png}}

Finally, keep in mind that the toolbar and statusbar added to the layout is in addition to the global toolbar and statusbar that are outside of the layout (not that you have to define any of them if you don't want to).

  • No labels