tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/20-selectOneChoice/Dropdown.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!--
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
-->

<ui:composition template="/main.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:tc="http://myfaces.apache.org/tobago/component"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

  <p>The tag <code class="language-markup">&lt;tc:selectOneChoice/&gt;</code> create a dropdown box,
    which contain<br/>
    <code class="language-markup">&lt;tc:selectItem/></code> for static entries or<br/>
    <code class="language-markup">&lt;tc:selectItems value="\#{controller.list}"/></code> for entries from
    a controller.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:selectOneChoice/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/selectOneChoice.html"/>
    |
    <tc:link label="&lt;tc:selectItem/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/selectItem.html"/>
    |
    <tc:link label="&lt;tc:selectItems/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/selectItems.html"/></p>
  <tc:section label="Basics">
    <p>Dropdown box with hardcoded items. The second item is disabled.
      To disable an item, use the <code>itemDisable</code> attribute.</p>
    <demo-highlight language="markup">&lt;tc:selectOneChoice label="Dropdown Box"/></demo-highlight>
    <tc:selectOneChoice id="s1" label="Dropdown Box">
      <tc:selectItem itemLabel="Item One" itemValue="one"/>
      <tc:selectItem itemLabel="Item Two" itemValue="two" itemDisabled="true"/>
    </tc:selectOneChoice>
    <tc:selectOneChoice id="s2" label="Read Only" readonly="true">
      <tc:selectItem itemLabel="Item One" itemValue="one"/>
      <tc:selectItem itemLabel="Item Two" itemValue="two"/>
    </tc:selectOneChoice>
    <tc:selectOneChoice id="s3" label="Disabled" disabled="true">
      <tc:selectItem itemLabel="Item One" itemValue="one"/>
      <tc:selectItem itemLabel="Item Two" itemValue="two"/>
    </tc:selectOneChoice>
  </tc:section>

  <tc:section label="Simple Usage">
    <p>Select a person. The label of the item is shown in the dropdown box.
      After submitting, the value of the item is shown in the output field.
      So, if 'Alice' is selected, the text in the output field is 'Alice Anderson'.</p>
    <demo-highlight language="markup">&lt;tc:selectItem itemLabel="Alice" itemValue="Alice Anderson"/></demo-highlight>
    <tc:selectOneChoice id="selectPerson" label="Person" value="#{selectOneChoiceController.person}">
      <tc:selectItem itemLabel="Alice" itemValue="Alice Anderson"/>
      <tc:selectItem itemLabel="Bob" itemValue="Bob Brunch"/>
    </tc:selectOneChoice>
    <tc:out id="outputPerson" label="Selected Person" value="#{selectOneChoiceController.person}"/>
    <tc:button id="submit" label="Submit"/>
  </tc:section>

  <tc:section label="Java enum as value">
    <tc:selectOneChoice id="selectSalutation" label="Salutation" value="#{selectOneChoiceController.salutation}">
      <tc:selectItems value="#{selectOneChoiceController.salutations}" var="s"
                      itemLabel="#{s.label}" itemValue="#{s}"/> <!-- don't use itemImage; TOBAGO-1937 -->
    </tc:selectOneChoice>
    <tc:out id="outputSalutation" label="Selected Salutation" value="#{selectOneChoiceController.salutation.label}"/>
    <tc:button id="submit2" label="Submit"/>
  </tc:section>

  <tc:section label="Ajax">
    <p>Select a planet and a moon. The list of moons depends on the selected planet.
      The planet-dropdownbox contain a <code class="language-markup">&lt;f:ajax render="moonbox"/></code>.
      With it, the moon-dropdownbox will be rerendered, after a value changed in planet-dropdownbox.</p>
    <demo-highlight language="markup">&lt;tc:selectOneChoice label="Planet"
      value="\#{selectOneChoiceController.planet}">
  &lt;f:selectItems value="\#{selectOneChoiceController.planets}"/>
  &lt;f:ajax render="moonbox"/>
&lt;/tc:selectOneChoice>
&lt;tc:selectOneChoice id="moonbox" label="Moon">
  &lt;f:selectItems value="\#{selectOneChoiceController.moons}"/>
&lt;/tc:selectOneChoice></demo-highlight>
    <tc:selectOneChoice id="selectPlanet" label="Planet" value="#{selectOneChoiceController.planet}">
      <f:selectItems value="#{selectOneChoiceController.planets}"/>
      <f:ajax render="moonbox"/>
    </tc:selectOneChoice>
    <tc:selectOneChoice id="moonbox" label="Moon">
      <f:selectItems value="#{selectOneChoiceController.moons}"/>
    </tc:selectOneChoice>
  </tc:section>
</ui:composition>