4.2. CimLayout: Splitter Container
About this task
The CimLayout Splitter Container is the container that enables you to divide the CimLayout configuration into parts. Selecting the splitter container begins at the top level.
- Splitter Container: Top Level Split
- Splitter Container: Multiple Splits
Splitter Container: Top Level Split
When the splitter container is selected at the top level, the CimLayout configuration will be split into two parts. You define details, such as the position, size and orientation of these parts.
Procedure
-
Select CimLayout Configuration in the CimLayout Configuration Editor.
-
Do either of the following.
- Click Edit>Add Configuration Object on the CimLayout Configuration Editor menu bar.
- Right-click the selection; select Add Configuration Object on the Popup menu.
An Add Configuration Object dialog box opens.
-
Enter and select the following.
Field Description Name Identifies the selected container. Type SplitterContainer -
Click OK.
Two location nodes are attached to the layout section; either node can also be split or can be configured as a screen container..
Location options are as follows.
Location Description Left/Top Left or top side of the CimLayout section. Right/Bottom Right of bottom side of the CimLayout section. Note: The actual screen location (e.g. left or top) is determined by the selected orientation. -
Configure the object in the CimLayout Configuration Editor right-pane, as follows.
A Location/Orientation B Resizable/ResizeWeight Splitter bar container: Examples for two sections. A Location/Orientation The Location and Orientation refer to the splitter bar that divides the CimLayout container.
Location
The value entered in the Location field specifies the distance the splitter bar will be from the screen edge.
Important: The side the distance is measured from depends on the splitter bar's selected orientation and resize weight.Bar Orientation Resize/Weight Bar Distance is from: Vertical Left/Top Right Right/Bottom Left Both Left and Right Horizontal Left/Top Bottom Right/Bottom Top Both Top and Bottom Orientation
The splitter bar orientation is vertical or horizontal.
Vertical The CimLayout configuration is split vertically. Horizontal The CimLayout configuration is split horizontally. B Resizable/ResizeWeight One or both sides of the CimLayout container can be resized, as follows.
Resizable
The screen, in the selected ResizeWeight location is resized or not, as follows.
true Is resized when the CimLayout container is resized; it will automatically zoom up or down, as required. false Is not resized when the CimLayout container is resized; scroll bars will display if the allocated size in the container is smaller than the screen. Note: The container side that is resizable is affected by the splitter bar orientation.ResizeWeight
If resizable is set to True, the container side that users can resize during runtime is affected by the splitter orientation.
Section Location Splitter Bar Orientation Resizable Side Left/Top Vertical Left Horizontal Top Right/Bottom Vertical Right Horizontal Bottom Both Vertical Left and Right Horizontal Top and Bottom Result: CimLayout is split in two based on your specifications.
Splitter Container: Examples for Two Sections
- A CimLayout container includes one Splitter container that holds with two screen containers.
- The splitter bar distance from the side is 175.
- Where the distance is measured is based:
- On the splitter bar orientation
- If one or both screen containers can be resized during runtime.
Vertical Splitter Bar Orientation Resize/Weight is: Screen Containers Left/Top Right/Bottom Both Horizontal Splitter Bar Orientation Resize/Weight is: Screen Containers Left/Top Right/Bottom Both Example: Runtime
During runtime a CimLayout container displays the two screens based on the Splitter container configuration.
Item Description A Screen container Left/Top B Splitter bar Horizontal C Screen container Right/Bottom Splitter Container: Multiple Splits
A CimLayout container can be divided into more than two sections by adding a splitter container object to a splitter container object. Each new split is configured within the boundaries set by its parent split.
CAUTION: Make sure that your system resources can support the number of splits and the screens that are selected for the CimLayout container.Split Level Contains Splits Example A Top level Left/Top and Right/Bottom EAST: SECTOR B Left/Top Left/Top and Right/Bottom EAST: COOLING C Right/Bottom Left/Top and Right/Bottom EAST: HEATING Example Runtime four screen containers. A Top level split: Left/Top and Right/Bottom Because the top level split divides the screen into the two basic sections, the values entered at the top level define the sections in which additional splitting will be performed.
B Left/Top split: Left/Top and Right/Bottom One or both splits in the CimLayout container can be split again.
Note: This procedure description begins with splitting left/top; either can actually be split first.
- Right-click Left/top in the CimLayout Configuration Editor left-pane.
-
Do either of the following.
- Click Edit>Add Configuration Object on the CimLayout Configuration Editor menu bar.
- Right-click the selection; select Add Configuration Object on the Popup menu.
An Add Configuration Object dialog box opens.
-
Enter the following.
Field Description Name Identifies the selected container. Type SplitterContainer A new (Left/Top)
<
NAME>
splitter container now has its own Left/Top and Right/Bottom split. -
Configure the (Left/Top)
<
NAME>
container layout in context of where it is located and the allocated space that it has been assigned by the parent level split.guide: Guidelines- The child section's splitter bar location must be within the allocated location/orientation.
Note: The exact orientation and location will depend on how you want the split within the split to display.
- The child split that is being configured cannot be resized if either of the following has been configured as the parent level.
- Resizable is disabled for the CimLayout container.
- Resize/Weight is assigned to the other child split (e.g. Right/Bottom).
Examples: Left/Top (EAST: COOLING) Split Section in a CimLayout Container
Some examples of screen container positions in a (Left/Top)
<
NAME>
split container, before the (Right/Bottom)<
NAME>
split is configured, are as follows.Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Vertical 600 B Left/Top splitter bar EAST: COOLING Horizontal 300 C Screen container SYSTEM: COOLING Top 150 D Screen container RESERVOIR Bottom 150 Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Vertical 600 B Left/Top splitter bar EAST: COOLING Vertical 300 C Screen container SYSTEM: COOLING Left 150 D Screen container RESERVOIR Right 150 Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Horizontal 600 B Left/Top splitter bar EAST: COOLING Vertical 300 C Screen container SYSTEM: COOLING Left 150 D Screen container RESERVOIR Right 150 Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Horizontal 600 B Left/Top splitter bar EAST: COOLING Horizontal 300 C Screen container SYSTEM: COOLING Top 150 D Screen container RESERVOIR Bottom 150 C Right/Bottom split: Left/Top and Right/Bottom Creating another child split in the CimLayout container so the container will have four sections is performed using the same procedure as creating the first child split.
- Right-click Right/Bottom.
-
Select CimLayout Configuration in the CimLayout Configuration Editor.
An Add Configuration Object dialog box opens.
-
Enter the following.
Field Description Name Identifies the selected container. Type SplitterContainer -
Configure the (Left/Top)
<
NAME>
container layout in context of where it is located and the allocated space that it has been assigned by the parent level split.The Bottom/Right section location is configured within the section of the CimLayout area that is identified by its parent split levels location and orientation.
Examples: Right/Bottom (EAST: HEATING) Split Section in a CimLayout Container
Some examples of screen container positions in a (Right/Bottom)
<
NAME>
split container, after the (Left/Top)<
NAME>
split is configured, are as follows.Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Vertical 600 B Right/Bottom splitter bar EAST: HEATING Horizontal 300 C Screen container SYSTEM: HEATING Top 150 D Screen container CONTROL: HEAT Bottom 150 Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Vertical 600 B Right/Bottom splitter bar EAST: HEATING Vertical 300 C Screen container SYSTEM: HEATING Left 150 D Screen container CONTROL: HEAT Right 150 Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Horizontal 600 B Right/Bottom splitter bar EAST: HEATING Horizontal 300 C Screen container SYSTEM: HEATING Top 150 D Screen container CONTROL: HEAT Bottom 150 Item Example Orientation/Position Location/Height A Parent Splitter bar EAST: SECTOR Horizontal 600 B Right/Bottom splitter bar EAST: HEATING Vertical 300 C Screen container SYSTEM: HEATING Left 150 D Screen container CONTROL: HEAT Right 150 Example: Runtime Four Screen Containers
During runtime a CimLayout container displays the four screens based on the Splitter containers' configuration.
A Top Parent container: EAST: SECTOR. B Left/Top splitter container: EAST: COOLING. C Right/Bottom splitter container: EAST: HEATING. A Top Parent Container: EAST: SECTOR The top level parent CimLayout container (EAST: SECTOR) includes child splitter containers
The CimLayout container's splitter:
- Bar is vertical.
- Containers' positions are Left and Right.
B Left/Top Splitter Container: EAST: COOLING The parent CimLayout (EAST: SECTOR) container's Left/Top container includes its own child splitter container.
EAST: COOLING displays the following in the left side of the EAST: SECTOR container.
Item Example Orientation/Position Location/Height 1 Splitter bar EAST: COOLING Horizontal 300 2 Screen container SYSTEM: COOLING Top 150 3 Screen container RESERVOIR Bottom 150 C Right/Bottom Splitter Container: EAST: HEATING The Parent CimLayout (EAST: SECTOR) container's Right/Bottom container includes its own child splitter container.
EAST: HEATING displays the following in the right side of the EAST: SECTOR container.
Item Example Orientation/Position Location/Height 1 Splitter bar EAST: HEATING Horizontal 300 2 Screen container SYSTEM: HEATING Top 150 3 Screen container CONTROL: HEAT Bottom 150