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

  1. Select CimLayout Configuration in the CimLayout Configuration Editor.
  2. 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.

  3. Enter and select the following.
    Field Description
    Name Identifies the selected container.
    Type SplitterContainer
  4. 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.
  5. 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.

  6. Right-click Left/top in the CimLayout Configuration Editor left-pane.
  7. 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.

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

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

  10. Right-click Right/Bottom.
  11. Select CimLayout Configuration in the CimLayout Configuration Editor.

    An Add Configuration Object dialog box opens.

  12. Enter the following.
    Field Description
    Name Identifies the selected container.
    Type SplitterContainer
  13. 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