tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/21-buttons-customizer/Customizer.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://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:c="http://java.sun.com/jsp/jstl/core">

  <p>The data of the model can also be loaded directly from the webapp directory.
    So we can define an item for each facelet matching buttons-item-*.xhtml.
    With this, we can create applications with pluggable UI. And we don't have to fight with bindings and
    creating components in Java code.</p>

  <tc:section label="Customizable Button Group">
    <p>This example shows a flexible possiblility, but for most cases there are much simpler solutions.</p>

    <tc:buttons id="buttons">
      <c:forEach items="#{customizer.list}" var="item">
        <c:if test="#{item.visible}">
          <ui:include src="#{item.name}"/>
        </c:if>
      </c:forEach>
    </tc:buttons>

    <tc:sheet var="item" value="#{customizer.list}" columns="1fr 1fr 1fr 1fr" id="sheet">
      <tc:column label="Item Name">
        <tc:out value="#{item.label}"/>
      </tc:column>
      <tc:column label="Visible">
        <tc:selectBooleanCheckbox value="#{item.visible}">
          <f:ajax render=":::buttons :::sheet"/>
        </tc:selectBooleanCheckbox>
      </tc:column>
      <tc:column>
        <tc:link actionListener="#{customizer.itemUp}" label="Up">
          <f:param value="#{item}" name="item"/>
          <f:ajax render=":::buttons :::sheet"/>
        </tc:link>
      </tc:column>
      <tc:column>
        <tc:link actionListener="#{customizer.itemDown}" label="Down">
          <f:param value="#{item}" name="item"/>
          <f:ajax render=":::buttons :::sheet"/>
        </tc:link>
      </tc:column>
    </tc:sheet>

    <tc:button label="Reset List" action="#{customizer.resetList}" image="fa-refresh"/>
  </tc:section>
</ui:composition>