JARCH SHOWCASE
JARCH SHOWCASE
Overlay Panel OverlayPanel is a generic container component that can overlay other components on page. Notable features are custom positioning, configurable events and effects. Lazy content loading to reduce page load time is also supported via dynamic option, when enabled overlayPanel will load the contents just before being shown.






DataTable Integration
IdYearBrandColor
845e90d61970MercedesOrange
09ffa1871964AudiBlack
b1e7a0eb1984AudiBrown
a495f2f81970VolvoYellow
e3b744331994VolvoOrange
e790321a1994HondaBlack
4b042dad2008RenaultYellow
752beb1b1971AudiGreen
f5dba1f62001HondaWhite
329fd9cc2006FiatGreen
<a:form>
    <a:commandButton id="imageBtn" value="Basic" type="button" />
    <a:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
        <a:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
    </a:overlayPanel>

    <a:commandButton id="movieBtn" value="Dynamic" type="button" />
    <a:overlayPanel id="moviePanel" for="movieBtn" hideEffect="fade" dynamic="true" style="width:600px">
        <a:dataTable var="movies" value="#{movieView.movieList}" rows="5" paginator="true">
            <a:column headerText="Movie">
                <h:outputText value="#{movies.movie}" />
            </a:column>

            <a:column headerText="Directed By">
                <h:outputText value="#{movies.directedBy}" />
            </a:column>

            <a:column headerText="Genres">
                <h:outputText value="#{movies.genres}" />
            </a:column>

            <a:column headerText="Run Time(min.)">
                <h:outputText value="#{movies.runTime}" />
            </a:column>
        </a:dataTable>
    </a:overlayPanel>

    <a:graphicImage id="img" name="/demo/images/images.png" style="cursor:pointer" title="Custom Options" />
    <a:overlayPanel id="imgPanel" for="img" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown"
                    dismissable="false" showCloseIcon="true">
        <a:imageSwitch effect="fade" style="width:300px;height:188px;">
            <ui:repeat value="#{imageSwitchView.images}" var="image">
                <a:graphicImage name="/demo/images/nature/#{image}" width="300" />
            </ui:repeat>
        </a:imageSwitch>
    </a:overlayPanel>
    
    <a:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
        <f:facet name="header">
            DataTable Integration
        </f:facet>
        <a:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </a:column>
        <a:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </a:column>
        <a:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </a:column>
        <a:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </a:column>
        <a:column style="width:32px;text-align: center">
             <a:commandButton update=":form:carDetail" oncomplete="PF('carOP').show('#{component.clientId}')" icon="ui-icon-search" title="View">
                <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
            </a:commandButton>
        </a:column>
    </a:dataTable>
            
    <a:overlayPanel widgetVar="carOP" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true">
        <a:outputPanel id="carDetail" style="text-align:center;">
            <a:panelGrid  columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <a:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                </f:facet>

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

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

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

                <h:outputText value="Price" />
                <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
            </a:panelGrid>
        </a:outputPanel>
    </a:overlayPanel>

</a:form>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.