Creating a List Using StyledList and StyledItem

To create a list using styledList and styledItem:

In the Design Structure Window of the desired file, locate the parent node in which you wish to insert a styledList component, e.g., sideBar or contentContainer.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the styledList component to the parent node of your choice.
The styledList node is inserted and highlighted under the expanded parent node.
Right-click the styledList node and choose Insert inside styledList | styledItem.
The styledItem node is inserted and highlighted under the expanded styledList node.
Right-click the styledItem node and choose Insert inside styledItem | link.
The link node is inserted and highlighted under the expanded styledItem node.
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 3 to 5 to add the desired number of items for the list.
Items of a list are displayed vertically in sequence; the first item in the sequence is numbered 0, the second item is numbered 1, and so on.
To set a style and a selected item for the list, 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 - Specify the style to use for the list. The available options are: disc (default), circle, square, decimal, lowerAlpha, upperAlpha, and none. Note that the letters used for lowerAlpha and upperAlpha are the 26 letters of the English language.
  - selectedIndex - Enter a value for the indexed child of the list that is to be rendered as selected. If the selected child is another styledList component, then the label child of that styledList will be rendered as selected. Use the following values:
    - 0 - make the first child of the list selected
    - 1 - make the second child selected
    - 2 - make the third child selected, and so on.

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

Example (UIX XML)


...
<pageLayout>

...

  <styledList listStyle="decimal" selectedIndex="1">
    <contents>
      <styledItem >
        <contents>
          <link text="Link 1 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
      <styledItem>
        <contents>
          <link text="Link 2 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
      <styledItem>
        <contents>
          <link text="Link 3 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
    </contents>
  </styledList>

...

  <!-- REST OF PAGE LAYOUT -->

<pageLayout>
...