tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/50-selectManyCheckbox/Multi_Checkbox.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">

  <p>With <code class="language-markup">&lt;tc:selectManyCheckbox/></code>, you can create a group of checkboxes.
    The items are added via <code class="language-markup">&lt;tc:selectItem/></code> for static entries or
    <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:selectManyCheckbox/>" image="#{request.contextPath}/image/feather-leaf.png"
             link="#{apiController.tldBase}/#{apiController.currentRelease}/tld/tc/selectManyCheckbox.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>Checkbox Group with two items. The second one is disabled.</p>
    <demo-highlight language="markup">&lt;tc:selectManyCheckbox label="Checkbox Group"></demo-highlight>
    <tc:selectManyCheckbox label="Checkbox Group">
      <tc:selectItem itemLabel="Item One" itemValue="one"/>
      <tc:selectItem itemLabel="Item Two (disabled)" itemValue="two" itemDisabled="true"/>
    </tc:selectManyCheckbox>
    <tc:selectManyCheckbox label="Read Only" readonly="true">
      <tc:selectItem itemLabel="Item One" itemValue="one"/>
      <tc:selectItem itemLabel="Item Two (disabled)" itemValue="two" itemDisabled="true"/>
    </tc:selectManyCheckbox>
    <tc:selectManyCheckbox label="Disabled" disabled="true">
      <tc:selectItem itemLabel="Item One" itemValue="one"/>
      <tc:selectItem itemLabel="Item Two (disabled)" itemValue="two" itemDisabled="true"/>
    </tc:selectManyCheckbox>
  </tc:section>

  <tc:section label="Inline">
    <p>To display the radio buttons horizontally use the <code>inline="true"</code> attribute.</p>
    <tc:selectManyCheckbox id="sInline" label="Checkbox Group" inline="true">
      <tc:selectItem itemLabel="One" itemValue="one"/>
      <tc:selectItem itemLabel="Two" itemValue="two"/>
      <tc:selectItem itemLabel="Three" itemValue="three"/>
    </tc:selectManyCheckbox>
  </tc:section>

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

  <tc:section label="Simple Usage">
    <p>Select an animal. The selection is shown in the output field, after pressing 'Submit'.</p>
    <p><code
            class="language-markup">&lt;tc:selectManyCheckbox label="Checkbox Group" value="\#{selectManyCheckboxController.animals}"></code>
      save the selected value in the controller.
      The available items are added with <code class="language-markup">&lt;tc:selectItem .../></code>.
      The
      <code class="language-markup">&lt;tc:out ... value="\#{selectManyCheckboxController.animal}"/></code>
      get the value from the controller.</p>
    <tc:selectManyCheckbox id="animals" label="Checkbox Group" value="#{selectManyCheckboxController.animals}">
      <tc:selectItem itemLabel="Cat" itemValue="Cat"/>
      <tc:selectItem itemLabel="Dog" itemValue="Dog"/>
      <tc:selectItem itemLabel="Fox" itemValue="Fox"/>
      <tc:selectItem itemLabel="Rabbit" itemValue="Rabbit"/>
    </tc:selectManyCheckbox>
    <tc:out id="animalsOutput" label="Selected Animals" value="#{selectManyCheckboxController.animal}"/>
    <tc:button id="submit" label="Submit"/>
  </tc:section>

  <tc:section label="Ajax">
    <p>Select a number. Those numbers are added and displayed in the
      <code class="language-markup">&lt;tc:out id="resultOutput" .../></code>.
      <code class="language-markup">&lt;tc:selectManyCheckbox .../></code> contain a
      <code class="language-markup">&lt;f:ajax render="resultOutput"/></code>, which rerenders the output field after
      check/uncheck a checkbox.</p>
    <tc:selectManyCheckbox id="numbers" label="Checkbox Group" value="#{selectManyCheckboxController.numbers}">
      <tc:selectItem itemLabel="One" itemValue="1"/>
      <tc:selectItem itemLabel="Two" itemValue="2"/>
      <tc:selectItem itemLabel="Three" itemValue="3"/>
      <tc:selectItem itemLabel="Four" itemValue="4"/>
      <f:ajax render="resultOutput"/>
    </tc:selectManyCheckbox>
    <tc:out id="resultOutput" label="Result" value="#{selectManyCheckboxController.result}"/>
  </tc:section>

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

    <p>
      <span class="#{demo:bootstrapClass('BADGE')} #{demo:bootstrapClass('BADGE_DANGER')}">Attanion!</span>
      The <code class="language-markup">&lt;tc:selectReference></code> currently works only, when the referenced
      component <code class="language-markup">&lt;tc:selectManyCheckbox></code> has
      set <code class="language-markup">labelLayout="skip"</code>.
    </p>

    <tc:segmentLayout medium="4seg 4seg 4seg">
      <tc:box>
        First and second giant planets:
        <tc:selectManyCheckbox id="giant0" value="#{selectManyCheckboxController.selectedGiantPlanet}" renderRange="0,1"
                           labelLayout="skip">
          <f:selectItems value="#{astroData.giantPlanets}"/>
        </tc:selectManyCheckbox>
      </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 value="Selected: #{astroData.namesFromArray(selectManyCheckboxController.selectedGiantPlanet)}"/>

  </tc:section>

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

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

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

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

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

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

  </tc:section>

</ui:composition>