Creating a ContentContainer Using End

This topic describes the steps for creating a styled list of items in a contentContainer component

To create a contentContainer:

In the Design Structure Window of the desired file, expand the pageLayout node to locate the pageLayout named child node end.
If the pageLayout node is not visible, expand page | content | dataScope | document | body | form. The end node is under pageLayout Named Children in pageLayout.
Right-click the end node and choose Insert inside end | contentContainer.
The new contentContainer node is inserted and highlighted in the Structure Window. The Property Inspector displays the properties of the new component.
In the Property Inspector, set the following attributes for the contentContainer component:
- text - Enter the header text to display in the content container (optional).
- icon - Specify the location of an icon image (optional). The icon displays before the header text, if the text attribute is set.
- background - Specify the appearance of the content container. The available options are: light, medium, dark, and transparent. The default is light, if no background is set.
- width - Enter the width in pixels or as a percentage of the component that contains the content container.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the styledList component to the contentContainer node in the Design Structure Window.
The styledList node is inserted under the expanded contentContainer node.
Right-click the styledList node and choose Insert inside styledList | styledItem.
The styledItem node is inserted under the expanded styledList node.
Right-click the styledItem node and choose Insert inside styledItem | link.
The link node is inserted and highlighted in the Structure Window. The Property Inspector displays the properties of the link component.
In the Property Inspector, set the desired attributes for the new link component, for example:.
- text - Enter the text to display for the item.
- destination - Enter the URI for the item.
Repeat steps 5 to 7 to add the desired number of items.
Items are displayed in sequence vertically; the first item in the sequence is numbered 0, the second item is numbered 1, and so on.
To set an item style and a selected item in the content container, do the following:
1. In the Design Structure Window, select the styledList node.
2. In the Property Inspector, set the following attributes for the styledList component:
  - listStyle - Select a style. The available options are: disc (default), circle, square, decimal, lowerAlpha, upperAlpha, and none.
  - selectedIndex - Enter a value. Use the following values:
    - 0 - make the first item selected
    - 1 - make the second item selected
    - 2 - make the third item selected, and so on

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<pageLayout>
  
  <!-- Use end to insert content container -->
  
  <end>
    <contentContainer text="Put title here"
                      background="medium"
                      icon="images/info.gif"
                      width="25%">
      <contents>
        <styledList listStyle="circle" selectedIndex="0">
          <contents>
            <styledItem>
              <contents>
                <link text="Code Samples" destination="http://www.oracle.com"/>
              </contents>
            </styledItem>
            <styledItem>
              <contents>
                <link text="Documentation" destination="http://www.oracle.com"/>
              </contents>
            </styledItem>
          </contents>
        </styledList>
      </contents>
    </contentContainer>
  </end>
  
  <!-- REST OF PAGE LAYOUT -->
  
</pageLayout>
...