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
de8c7d3f1962HondaBlack
a23a58331968MercedesBlue
4fb2621c1975FiatGreen
87c9d4811969MercedesMaroon
741886cd1970FiatOrange
ca9d5b5a1961VolkswagenSilver
c6958e971983VolkswagenOrange
fadaf9571974MercedesRed
75327fd91976FiatSilver
ad3262051989HondaRed
<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.