JARCH SHOWCASE
JARCH SHOWCASE
DataList DataList displays data in a list layout.
Basic
  1. Audi, 1961
  2. Audi, 1994
  3. Volkswagen, 2003
  4. BMW, 1987
  5. Jaguar, 1971
  6. Honda, 2001
  7. Volvo, 2000
  8. Ford, 1986
  9. Mercedes, 1971
  10. Fiat, 1994
Definition
Brand: , Year:
Brand: , Year:
Brand: , Year:
Brand: , Year:
Brand: , Year:
Paginator
Car Info
<a:form id="form">
    <a:dataList value="#{dataListView.cars1}" var="car" type="ordered">
        <f:facet name="header">
            Basic
        </f:facet>
        #{car.brand}, #{car.year}
    </a:dataList>

    <a:dataList value="#{dataListView.cars2}" var="car" type="definition">
        <f:facet name="header">
            Definition
        </f:facet>
        Brand: #{car.brand}, Year: #{car.year}
        <f:facet name="description">
            <a:graphicImage name="demo/images/car/#{car.brand}.gif"/>
        </f:facet>
    </a:dataList>

    <a:dataList value="#{dataListView.cars3}" var="car" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">
        <f:facet name="header">
            Paginator
        </f:facet>
        <a:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">
            <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
            <h:outputText value="#{car.brand}, #{car.year}" />
        </a:commandLink>
        <h:outputText value="#{car.brand}, #{car.year}" style="display:inline-block"/>
    </a:dataList>

    <a:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
        <a:outputPanel id="carDetail" style="text-align:center;">
            <a:panelGrid  columns="2" rendered="#{not empty dataListView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <a:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/>
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dataListView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dataListView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{dataListView.selectedCar.price}" />
            </a:panelGrid>
        </a:outputPanel>
    </a:dialog>
</a:form>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.