tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/30-selectOneRadio/Radio.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"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:demo="http://myfaces.apache.org/tobago/example/demo">
  <ui:param name="title" value="Select One Radio: &lt;tc:selectOneRadio>"/>
  <p>A group of radiobuttons will be created with the <code class="language-markup">&lt;tc:selectOneRadio/></code> tag.
    Static entries are added with <code class="language-markup">&lt;tc:selectItem/></code> tag.
    A list from a controller is added with
    <code class="language-markup">&lt;tc:selectItems value="\#{controller.list}"/></code>.</p>
  <p>Tag Library Documentation:
    <tc:link label="&lt;tc:selectOneRadio/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/selectOneRadio.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>Radiobutton group with a label. The last item is disabled.
      Also the label set on top with the <code>labelLayout</code> attribute.</p>
    <demo-highlight language="markup">&lt;tc:selectOneRadio label="Radio Group" labelLayout="top"/></demo-highlight>
    <tc:segmentLayout large="4seg 4seg 4seg">
      <tc:selectOneRadio id="s1" label="Radio Group" labelLayout="top">
        <tc:selectItem itemLabel="Sun" itemValue="solis"/>
        <tc:selectItem itemLabel="Moon" itemValue="luna"/>
        <tc:selectItem itemLabel="Stars" itemValue="stella" itemDisabled="true"/>
      </tc:selectOneRadio>
      <tc:selectOneRadio id="s2" label="Read Only" labelLayout="top" readonly="true">
        <tc:selectItem itemLabel="Sun" itemValue="solis"/>
        <tc:selectItem itemLabel="Moon" itemValue="luna"/>
        <tc:selectItem itemLabel="Stars" itemValue="stella" itemDisabled="true"/>
      </tc:selectOneRadio>
      <tc:selectOneRadio id="s3" label="Disabled" labelLayout="top" disabled="true">
        <tc:selectItem itemLabel="Sun" itemValue="solis"/>
        <tc:selectItem itemLabel="Moon" itemValue="luna"/>
        <tc:selectItem itemLabel="Stars" itemValue="stella" itemDisabled="true"/>
      </tc:selectOneRadio>
    </tc:segmentLayout>
  </tc:section>

  <tc:section label="Inline">
    <p>To display the radio buttons horizontally use the <code>inline="true"</code> attribute.</p>
    <tc:selectOneRadio id="sInline" label="Radio Group" inline="true">
      <tc:selectItem itemLabel="Sun" itemValue="solis"/>
      <tc:selectItem itemLabel="Moon" itemValue="luna"/>
      <tc:selectItem itemLabel="Stars" itemValue="stella"/>
    </tc:selectOneRadio>
  </tc:section>

  <tc:section label="Images">
    <tc:selectOneRadio>
      <tc:selectItems value="#{currencyController.currencyItems}"
                      var="currency" itemValue="#{currency.currencyCode}" itemLabel="#{currency.displayName}"
                      itemImage="#{request.contextPath}/image/#{currency.currencyCode}-14.png"/>
    </tc:selectOneRadio>
  </tc:section>

  <tc:section label="Simple Usage">
    <p>Add number1 to number2 or subtract number2 from number1.</p>
    <p>The radiobuttons are hardcoded with
      <code class="language-markup">&lt;tc:selectItem itemLabel="1" itemValue="1"/></code>.
      The buttons trigger an action in the controller:
      <code class="language-markup">&lt;tc:button label="Addition" action="\#{selectOneRadioController.add}"/></code>
    </p>
    <tc:segmentLayout large="6seg 6seg">
      <tc:selectOneRadio id="selectNum1" label="Number 1" labelLayout="top" required="true"
                         value="#{selectOneRadioController.numberOne}">
        <tc:selectItem itemLabel="1" itemValue="1"/>
        <tc:selectItem itemLabel="2" itemValue="2"/>
        <tc:selectItem itemLabel="4" itemValue="4"/>
      </tc:selectOneRadio>
      <tc:selectOneRadio id="selectNum2" label="Number 2" labelLayout="top" required="true"
                         value="#{selectOneRadioController.numberTwo}">
        <tc:selectItem itemLabel="1" itemValue="1"/>
        <tc:selectItem itemLabel="2" itemValue="2"/>
        <tc:selectItem itemLabel="4" itemValue="4"/>
      </tc:selectOneRadio>
    </tc:segmentLayout>
    <tc:out id="resultOutput" label="Result" value="#{selectOneRadioController.result}"/>
    <tc:flowLayout>
      <tc:button id="submitAdd" label="Addition" action="#{selectOneRadioController.add}"/>
      <tc:button id="submitSub" label="Subtraction" action="#{selectOneRadioController.subtract}"/>
    </tc:flowLayout>
  </tc:section>

  <tc:section label="Ajax">
    <p>Select a planet on the left. One the right side, you can select one of the moons.</p>
    <p>The planets are added with
      <code class="language-markup">&lt;f:selectItems value="\#{selectOneRadioController.planets}"/></code>.
      The radiogroup of the planets also contain a
      <code class="language-markup">&lt;f:ajax render="moonradio"></code> element,
      which allows to rerender the radiogroup with the ID 'moonradio' every time, the value changed in the
      planet-radiogroup.</p>
    <tc:segmentLayout large="6seg 6seg">
      <tc:selectOneRadio id="selectPlanet" label="Planet" labelLayout="top" value="#{selectOneRadioController.planet}">
        <f:selectItems value="#{selectOneRadioController.planets}"/>
        <f:ajax render="moonradio"/>
      </tc:selectOneRadio>
      <tc:selectOneRadio id="moonradio" label="Moon" labelLayout="top">
        <f:selectItems value="#{selectOneRadioController.moons}"/>
      </tc:selectOneRadio>
    </tc:segmentLayout>
  </tc:section>

  <tc:section id="selectReference" label="Free layout with &lt;tc:selectReference>">

    <tc:segmentLayout medium="4seg 4seg 4seg">
      <tc:box>
        First and second giant planets:
        <tc:selectOneRadio id="giant0" value="#{selectOneRadioController.selectedGiantPlanet}" renderRange="0,1" labelLayout="segmentRight">
          <f:selectItems value="#{astroData.giantPlanets}"/>
        </tc:selectOneRadio>
      </tc:box>

      <tc:box>
        Discovered #{astroData.giantPlanets[2].value.discoverYear}:
        <tc:selectReference id="giant1" for="giant0" renderRange="2"/>
      </tc:box>

      <tc:box>
        Discovered #{astroData.giantPlanets[3].value.discoverYear}:
        <tc:selectReference id="giant2" for="giant0" renderRange="3"/>
      </tc:box>
    </tc:segmentLayout>

    <tc:button label="Submit">
      <f:ajax execute="selectReference" render="selectReference"/>
    </tc:button>

    <tc:out label="Selected:" value="#{selectOneRadioController.selectedGiantPlanet.name}"/>

  </tc:section>

  <tc:section label="Free layout with pure JSF (JSF 2.3 only)">

    <p>
      <span class="#{demo:bootstrapClass('BADGE')} #{demo:bootstrapClass('BADGE_DANGER')}">Attention!</span>
      This example is only temporary for testing purpose.
    </p>

    <h:selectOneRadio id="terrestrial0" group="terrestrial"
                      value="#{selectOneRadioController.selectedTerrestrialPlanet}">
      <f:selectItems value="#{astroData.terrestrialPlanets}"/>
    </h:selectOneRadio>

    <br/>
    <h:selectOneRadio id="terrestrial1" group="terrestrial"/>

    <br/>
    <h:selectOneRadio id="terrestrial2" group="terrestrial"/>

    <br/>
    <h:selectOneRadio id="terrestrial3" group="terrestrial"/>

  </tc:section>

</ui:composition>