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
295de7932006JaguarBrown
2f20253c1968AudiGreen
0e6969301983AudiRed
60e62a961972JaguarRed
25765a071981FiatGreen
5382bb752002VolkswagenSilver
1d0a23901966BMWSilver
aeb797501996HondaOrange
d72da1d71983FordYellow
ac1785fd1965MercedesWhite
<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.