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
10c6adee2003FiatWhite
9d2baffa1970JaguarSilver
14a4492d1976RenaultWhite
6091df251971MercedesBlack
fe4376011993MercedesBrown
5c7191ed1982AudiMaroon
396bbdae1981RenaultMaroon
e9e963292009FordBrown
48169cd41974JaguarOrange
ed3718ff1996VolkswagenGreen
<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.