JARCH ShowCase

manyCheckbox.xhtml
CheckboxView.java

<a:form>
    <h3 style="margin-top:0px">Basic Layout</h3>
    <a:selectManyCheckbox id="basic" value="#{checkboxView.selectedConsoles}">
        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
        <f:selectItem itemLabel="PS4" itemValue="PS4" />
        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
    </a:selectManyCheckbox>

    <h3>Grid Layout</h3>
    <a:selectManyCheckbox id="grid" value="#{checkboxView.selectedCities}" layout="grid" columns="3">
        <f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
    </a:selectManyCheckbox>

    <h3>Responsive</h3>
    <a:selectManyCheckbox id="grid2" value="#{checkboxView.selectedCities2}" layout="responsive" columns="3">
        <f:selectItems value="#{checkboxView.cities}" var="city" itemLabel="#{city}" itemValue="#{city}" />
    </a:selectManyCheckbox>

    <h3>Custom Layout</h3>
    <a:outputPanel id="customPanel" style="margin-bottom:20px">
        <a:selectManyCheckbox id="custom" value="#{checkboxView.selectedConsoles2}" layout="custom">
            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
            <f:selectItem itemLabel="PS4" itemValue="PS4" />
            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
        </a:selectManyCheckbox>

        <div class="ui-grid ui-grid-responsive">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4" style="text-align:center">
                    <h:outputLabel for="opt1" value="Xbox One" style="display:block;margin-bottom:8px"/>
                    <a:checkbox id="opt1" for="custom" itemIndex="0" />
                </div>
                <div class="ui-grid-col-4" style="text-align:center">
                    <h:outputLabel for="opt2" value="PS4" style="display:block;margin-bottom:8px"/>
                    <a:checkbox id="opt2" for="custom" itemIndex="1" />
                </div>
                <div class="ui-grid-col-4" style="text-align:center">
                    <h:outputLabel for="opt3" value="Wii U" style="display:block;margin-bottom:8px"/>
                    <a:checkbox id="opt3" for="custom" itemIndex="2" />
                </div>
            </div>
        </div>
    </a:outputPanel>

    <h3>Grouped</h3>
    <a:selectManyCheckbox id="grid3" value="#{checkboxView.selectedCars}" layout="pageDirection" columns="1">
        <f:selectItems value="#{checkboxView.cars}" var="car" itemLabel="#{car}" itemValue="#{car}" />
    </a:selectManyCheckbox>

    <a:separator />

    <a:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-check" />

    <a:dialog header="Values" modal="true" showEffect="clip" widgetVar="dlg" resizable="false">
        <a:outputPanel id="display">
            <a:dataList value="#{checkboxView.selectedConsoles}" var="console">
                <f:facet name="header">
                    Basic
                </f:facet>
                #{console}
            </a:dataList>
            <a:dataList value="#{checkboxView.selectedCities}" var="city">
                <f:facet name="header">
                    Grid
                </f:facet>
                #{city}
            </a:dataList>
            <a:dataList value="#{checkboxView.selectedCities2}" var="city">
                <f:facet name="header">
                    Grid
                </f:facet>
                #{city}
            </a:dataList>
            <a:dataList value="#{checkboxView.selectedConsoles2}" var="console">
                <f:facet name="header">
                    Custom
                </f:facet>
                #{console}
            </a:dataList>
            <a:dataList value="#{checkboxView.selectedCars}" var="car">
                <f:facet name="header">
                    Cars
                </f:facet>
                #{car}
            </a:dataList>
        </a:outputPanel>
    </a:dialog>
</a:form>

package com.jarch.showcase.view.input;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.model.SelectItem;
import javax.faces.model.SelectItemGroup;

@ManagedBean
public class CheckboxView {

    private String[] selectedConsoles;
    private String[] selectedConsoles2;
    private String[] selectedCities;
    private String[] selectedCities2;
    private List<String> cities;
    private List<SelectItem> cars;
    private String[] selectedCars;

    @PostConstruct
    public void init() {
        cities = new ArrayList<String>();
        cities.add("Miami");
        cities.add("London");
        cities.add("Paris");
        cities.add("Istanbul");
        cities.add("Berlin");
        cities.add("Barcelona");
        cities.add("Rome");
        cities.add("Brasilia");
        cities.add("Amsterdam");

        cars = new ArrayList<SelectItem>();
        SelectItemGroup germanCars = new SelectItemGroup("German Cars");
        germanCars.setSelectItems(new SelectItem[] {
            new SelectItem("BMW", "BMW"),
            new SelectItem("Mercedes", "Mercedes"),
            new SelectItem("Volkswagen", "Volkswagen")
        });
        
        SelectItemGroup americanCars = new SelectItemGroup("American Cars");
        americanCars.setSelectItems(new SelectItem[]{
            new SelectItem("Chrysler", "Chrysler"),
            new SelectItem("GM", "GM"),
            new SelectItem("Ford", "Ford")
        });

        cars.add(germanCars);
        cars.add(americanCars);
    }

    public String[] getSelectedConsoles() {
        return selectedConsoles;
    }

    public void setSelectedConsoles(String[] selectedConsoles) {
        this.selectedConsoles = selectedConsoles;
    }

    public String[] getSelectedCities() {
        return selectedCities;
    }

    public void setSelectedCities(String[] selectedCities) {
        this.selectedCities = selectedCities;
    }

    public String[] getSelectedCities2() {
        return selectedCities;
    }

    public void setSelectedCities(String[] selectedCities2) {
        this.selectedCities2 = selectedCities2;
    }

    public String[] getSelectedConsoles2() {
        return selectedConsoles2;
    }

    public void setSelectedConsoles2(String[] selectedConsoles2) {
        this.selectedConsoles2 = selectedConsoles2;
    }

    public List<String> getCities() {
        return cities;
    }

    public List<SelectItem> getCars() {
        return cars;
    }

    public void setCars(List<SelectItem> cars) {
        this.cars = cars;
    }

    public String[] getSelectedCars() {
        return selectedCars;
    }

    public void setSelectedCars(String[] selectedCars) {
        this.selectedCars = selectedCars;
    }
}