Inserting a Shuttle

To insert a shuttle component:

  1. In the Design Structure Window of the desired file, locate the node in which you wish to insert a shuttle component.
  2. In the Component Palette, select Form Components from the dropdown list, and then drag and drop the shuttle component to the parent node of your choice.

    The shuttle node is inserted and highlighted under the expanded parent node.

  3. In the Property Inspector, set the following attributes for the shuttle component:
  4. To create the leading list or trailing list, do the following:
    1. In the Design Structure Window, expand the shuttle node to uncover the shuttle Named Children node. Then expand the shuttle Named Children node to locate the leading or trailing node.
    2. Right-click the leading or trailing node and choose Insert inside leading | list or Insert inside trailing | list .

      The list node is inserted and highlighted under the expanded parent node.

    3. In the Property Inspector, set the following attributes for the leading or trailing list:
      • name - (Required) Enter a name for the component.
      • multiple - Select true to allow multiple items to be selected.
      • size -Enter the number of items that should be visible.
      • selectedIndex - Enter the index of the globally selected item. Use one of the following values:
        • 0 - make the first item selected
        • 1 - make the second item selected
        • 2 - make the third item selected, and so on
      • selectedValue - Enter the value of the globally selected item.
      • selection - Enter the selection information for the option container.
    4. In the Design Structure Window, right-click the list node and choose Insert inside list | option .

      The option node is inserted and highlighted under the expanded list node.

    5. In the Property Inspector, set the following attributes for the item:
      • text - Enter the item text to display in the list box.
      • selected - Default is false. Select true to display this item text as selected in the list box. For single selection list boxes, this attribute takes precedence over the selectedIndex attribute of messageList.
      • value - Enter the value that identifies this item when the parent control is submitted to the server.
    6. Repeat step 4d and step 4e to add the desired number of items for the leading or trailing list.
  5. To create a footer area, do the following:
    1. In the Design Structure Window, expand the shuttle node to uncover the shuttle Named Children node. Then expand the shuttle Named Children node to locate the leadingFooter or trailingFooter node.
    2. Right-click the leadingFooter or trailingFooter node and choose Insert inside leadingFooter | flowLayout or Insert inside trailingFooter | flowLayout.

      The flowLayout node is inserted and highlighted under the expanded parent node.

    3. Right-click the flowLayout node and choose Insert inside flowLayout.

      The Create dialog displays for you to select a component for insertion. Select the button or image component, then click OK.

      If inserting an image, the Insert Image dialog displays for you to enter the required attribute, source . Click OK when done.

    4. Repeat step 5c to add other buttons or icons as desired.
  6. To create a filter area, do the following:
    1. In the Design Structure Window, expand the shuttle node to uncover the shuttle Named Children node. Then expand the shuttle Named Children node to locate the filter node.
    2. Right-click the filter node and choose Insert inside filter | messageChoice.

      The messageChoice node is inserted and highlighted under the expanded parent node.

    3. In the Property Inspector, set the following attributes for the messageChoice component:
      • prompt - Enter the prompt text that displays before the control.
      • name -(Required) Enter a name for the component.
      • primaryClientAction - Enter the client action to fire on the client. In the right column, click the Ellipsis button icon to enter a ClientAction. See Editing the PrimaryClientAction Attribute for details. Alternatively, use the Advanced tab to enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
      • selectedIndex - Enter the index of the globally selected option. Use one of the following values:
        • 0 - make the first option selected
        • 1 - make the second option selected
        • 2 - make the third option selected, and so on
      • selectedValue - Enter the value of the globally selected option.
      • selection - Enter the selection information for the option container.
    4. In the Design Structure Window, right-click the messageChoice node and choose Insert inside messageChoice | option.

      The option node is inserted and highlighted under the expanded parent node.

    5. In the Property Inspector, set the following attributes for the item:
      • text - Enter the item text to display in the choice box.
      • selected - Default is false. Select true to display this item text in the dropdown box when the page is first viewed in a browser. This also specifies that this item is selected. This attribute takes precedence over the selectedIndex attribute of messageChoice.
      • value - Enter the value that identifies this item when the parent control is submitted to the server.
    6. Repeat step 6d and step 6e to add the desired number of options.

Tip: For an option to be rendered as selected, ADF UIX uses these attributes in this order of precedence: selection attribute on option container, selected attribute on option component, selectedValue attribute on option container, selectedIndex on option container.

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

Example (UIX XML)


...
<shuttle name="shuttle1"
         leadingHeader="Header 1"
         leadingDescShown="true" 
         trailingHeader="Header 2"
         size="5">
  <leading>
    <list>
      <contents>
        <option text="option 1"/>
        <option text="option 2"/>
        <option text="option 3"/>
        <option text="This is a very very long option 4"/>
      </contents>
    </list>
  </leading>
  <trailing>
    <list>
      <contents>
        <option text="2option 1"/>
        <option text="2option 2"/>
        <option text="2option 3"/>
        <option text="2option 4"/>
        <option text="2option 5"/>
      </contents>
    </list>
  </trailing>
  <trailingFooter>
    <flowLayout>
      <contents>
        <button text="A button"/>
      </contents>
    </flowLayout>
  </trailingFooter>
  <filter>
    <messageChoice name="mc1"
                   prompt="Filter">
      <contents>
        <option text="filter 1" value="filter 1"/>
        <option text="filter 2" value="filter 2"/>
      </contents>
    </messageChoice>
  </filter>
</shuttle>
...    

About Shuttle

Working with Form Components

 

Copyright © 1997, 2004, Oracle. All rights reserved.