Inserting a MessageLovChoice

To insert a messageLovChoice component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a messageLovChoice component.
In the Component Palette, select Form Components from the dropdown list, and then drag and drop the messageLovChoice component to the parent node of your choice.
The messageLovChoice node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the messageLovChoice component:
- prompt - Enter the prompt text that displays before the choice dropdown box.
- destination - Enter the URL that launches the page containing the LOV window (when the "More..." option is selected).
- name - (Required) Enter a name for the component.
- onLovInit - Enter the name of the JavaScript function to call before opening the LOV window.
- primaryClientAction - Enter the clientAction to fire when the user selects an option other than "More...". In the right column, click the 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 this option container.
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.

For information about message attributes, see Setting the Message Attributes for a Message Form Component. For information about other general attributes of message form components, see Setting the General Attributes for a Message Form Component.
To insert the options for the seeded list, see Inserting an Option.

Note that you are responsible for the following:

Using data binding to display the options in the choice dropdown box
Appending the user-selected options from the LOV window to the choice options (i.e., the user-selected options should be inserted between the last option and the "More..." option)

Example (UIX XML)


...
<content>
  ...
  <flowLayout id="mlovchFlowLayoutID">
    <contents>
      <messageLovChoice name="mlovch1"
                        destination="LOVChoiceDialogPage.uix"
                        selectedValue="${sessionScope.userDataForLovChoice.favoriteVacation.location}"
                        prompt="Your favorite vacation spots"
                        tip="Select More for more options">
        <contents childData="${sessionScope.userDataForLovChoice.vacationSpots}">
          <option text="${uix.current.location}" 
                  value="${uix.current.location}"/>
        </contents>
        <primaryClientAction>
          <firePartialAction targets="selectedValueTextID mlovchFlowLayoutID"
                             event="lovChoiceUpdate"/>
        </primaryClientAction>
      </messageLovChoice>
    </contents>
  </flowLayout>
  <messageStyledText prompt="The location you have chosen is:"
                     id="selectedValueTextID"
                     text="${sessionScope.userDataForLovChoice.favoriteVacation.location}"/>
  ...
</content>
<handlers>
  <!-- the examples require an HttpSession to be created for each user -->
  <event name="null">
    <method class="oracle.cabo.servlet.demo.lovchoice.LovChoiceEvents"
            method="createUserData"/>
  </event>
  <event name="lovUpdate">
    <method class="oracle.cabo.servlet.demo.lovchoice.LovChoiceEvents"
            method="handleLovUpdateEvent"/>
  </event>
  <!-- This event gets called from lovChoice when a selection is made from the choice other than More... -->
  <!-- Change the data depending upon what is selected, since other components on this page,
       like selectedLocation depend upon this data.-->
  <event name="lovChoiceUpdate">
    <method class="oracle.cabo.servlet.demo.lovchoice.LovChoiceEvents"
            method="handleLovChoiceUpdateEvent"/>
  </event>
  <event name="changeCheckState">
    <null/>
  </event>
</handlers>
...

This is the LOVChoiceDialogPage.uix file:


Example in UIX XML:

<page xmlns="http://xmlns.oracle.com/uix/controller"
      xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
      xmlns:demo="http://xmlns.oracle.com/uix/demo"
      xmlns:data="http://xmlns.oracle.com/uix/ui" expressionLanguage="el" 
      xmlns:ui="http://xmlns.oracle.com/uix/ui">
  <templates xmlns="http://xmlns.oracle.com/uix/ui">
    <templateImport source="lovChoice_TableLib.uit"/>
  </templates>
  <ctrl:content xmlns="http://xmlns.oracle.com/uix/ui">
    <dataScope>
      <provider>
        <data name="tableStates">
          <!-- This takes the inline data provider tableData and stores it on the session -->
          <method class="oracle.cabo.servlet.demo.lovchoice.LovTableState"
                  method="createTableState"/>
        </data>
        <!-- create some static data for the VacationSpots table -->
        <data name="VacationSpots">
          <inline>
            <row location="Hawaii" activity1="scuba" activity2="boogie-boarding" />
            <row location="Palm Springs" activity1="golf" activity2="lounging by the pool" />
            <row location="Bali" activity1="swimming" activity2="drinking from the pool bar" />
            <row location="Thailand" activity1="rock climbing" activity2="elephant viewing"/>
            <row location="Virgin Islands" activity1="sailing" activity2="snorkeling"/>
            <row location="Telluride, CO" activity1="hiking" activity2="biking"/>
            <row location="Steamboat Springs, CO" activity1="skiing" activity2="boarding"/>
            <row location="San Francisco" activity1="dining" activity2="shopping"/>
            <row location="Seattle, WA" activity1="dodging raindrops" activity2="coffee drinking"/>
            <row location="Hollywood, CA" activity1="star gazing" activity2="movie watching"/>
            <row location="Yosemite Valley" activity1="rock climbing" activity2="hiking"/>
            <row location="San Francisco Bay" activity1="sailing" activity2="windsurfing"/>
            <row location="Santa Cruz" activity1="surfing" activity2="disc golf"/>
            <row location="Austin, TX" activity1="club hopping" activity2="water skiing"/> 
            <row location="Everest" activity1="camping" activity2="mountaineering"/> 
            <!-- DataObjectList to provide information to the column header stamps -->
            <demoColumnHeaderData headerText="Location"/>
            <demoColumnHeaderData headerText="Activity1"/>
            <demoColumnHeaderData headerText="Activity2"/> 
          </inline>
        </data>
      </provider>
      <contents>
        <flowLayout>
          <contents>
            <listOfValues id="Lov1-target"
                          title="Adventure Vacation Spots" >
              <headerInstructions>
                <styledText text="This is a list of popular vacation spots. Pick your favorites!"
                            styleClass="OraInstructionText"/>
              </headerInstructions>
              <!-- This choice just pulls out the column headers -->
              <filterChoice>
                <choice name="categoryChoice"
                        multiple="false">
                  <contents childData="${uix.data.VacationSpots.demoColumnHeaderData}">
                    <option text="${uix.current.headerText}"/>
                  </contents>
                </choice>
              </filterChoice>
              <searchInstructions>
                <styledText text=" The search does not work in this demo."
                            styleClass="OraInstructionText"/>
              </searchInstructions>
              <contents>
                <flowLayout>
                  <contents>
                    <!-- Here's the table definition -->
                    <!-- This must be a form submitted proxied table -->
                    <!-- this template, demo:table, is very useful for keeping track of -->
                    <!-- the table's state. See the Table Example Development documentation -->
                    <!-- for very good details on how this works -->
                    <demo:table name="lovChoiceTable" id="lovChoiceTableID"
                                blockSize="5"
                                formSubmitted="true"
                                proxied="true"
                                tableData="${uix.data.VacationSpots.row}"
                                tableState="${uix.data.tableStates[0]}">
                      <contents>
                        <column>
                          <columnHeader>Location</columnHeader>
                          <contents>
                            <text text="${uix.current.location}"/>
                          </contents>
                        </column>
                        <column>
                          <columnHeader>Activity1</columnHeader>
                          <contents>
                            <text text="${uix.current.activity1}"/>
                          </contents>
                        </column>
                        <column>
                          <columnHeader>Activity2</columnHeader>
                          <contents>
                            <text text="${uix.current.activity2}"/>
                          </contents>
                        </column> 
                      </contents>
                    </demo:table>
                  </contents>
                </flowLayout>
              </contents>
            </listOfValues>
          </contents>
        </flowLayout> 
      </contents>
    </dataScope>
  </ctrl:content>
  <handlers>
    <!-- the examples in this file require an HttpSession to be created for each user -->
    <!-- handle all the table events -->
    <event name="goto sort show hide">
       <!-- the goto event gets called during table navigation. keep track of the table's state. --> 
      <method class="oracle.cabo.servlet.demo.lovchoice.LovChoiceEvents"
              method="handleTableEvent"/>
    </event>
    <event name="lovFilter">
      <!-- this is for the search's Go button. Since there is no search -->
      <!-- functionality in this LovChoice demo, I am setting this to null. --> 
      <null/> 
    </event>
    <event name="lovSelect">
      <!-- the lovSelect event gets generated when the user presses the Select button. -->
      <!-- this event handler should gather the selection information and add -->
      <!-- to the user's choice list -->
      <!-- ......................... -->
      <!-- After the lovSelect event is queued, the LOV window will be closed. -->
      <!-- On closing, the lovWindow will send an lovUpdate event (this should be handled in the main page). -->
      <!-- This event tells the developer that the LOV window has gone away,-->
      <!-- and it's time to update all data providers. -->
      <!-- This event submits the form on the main page in which the original -->
      <!-- LovInput element was drawn. -->
      <!-- The source parameter will contain the name attribute of the original lovInput element. --> 
      <method class="oracle.cabo.servlet.demo.lovchoice.LovChoiceEvents"
              method="handleLovSelectFromDialogEvent"/>
    </event> 
  </handlers>
</page>

This is the lovChoice_TableLib.uit file:


Example in UIX XML:

<templateLibrary xmlns="http://xmlns.oracle.com/uix/ui"
                 xmlns:demo="http://xmlns.oracle.com/uix/demo"
                 xmlns:data="http://xmlns.oracle.com/uix/ui">

  <templateDefinition targetNamespace="http://xmlns.oracle.com/uix/demo"
                      localName="table" expressionLanguage="el">
    <type base="data:table">
      <attribute name="tableState" javaType="oracle.cabo.servlet.demo.lovchoice.LovTableState"/>
    </type>
    <content>
      <table tableData="${uix.rootAttr.tableState.currentRecordSet}"
             detailDisclosure="${uix.rootAttr.tableState.detailDisclosureList}"
             blockSize="${uix.rootAttr.tableState.blockSize}"
             maxValue="${uix.rootAttr.tableState.lastIndex}"
             value="${uix.rootAttr.tableState.startIndex}">
       <tableSelection>
         <multipleSelection selected="${uix.current}" selection="${uix.rootAttr.tableState.selections}"/>
       </tableSelection> 
       <childList><rootChildList/></childList>
       <attributeMap><rootAttributeMap/></attributeMap>
       <childMap><rootChildMap/></childMap>
     </table>
   </content>
  </templateDefinition>
</templateLibrary>