Panel Popup

Table of Contents

Panel Popup

The Panel Popup component will popup a panel designed by the developer in front of existing markup, disabling the background or existing markup.

This component is styled for the devices that this project supports to most look and feel like the native view on the devices/desktop browsers. As for all mobi components, use <mobi:deviceStylesheet to have proper css loaded for each device.
There is an option for clientSide which allows the user to interact with a popup panel without having to do the round trip to the server, however, if this option is used, note that the values on the server-side will not always be in sync with those on the client.

Usage

Basic Use (server side) just use a button or some other jsf component to trigger the "visible" property for the popup panel. Place items on the popup as you would any other panel. If dynamically showing the popup, it's best to toggle the 'visible' property, rather than the 'rendered' property.

             <mobi:commandButton style="margin-top:5px;float:left;"
                                    value="Show Popup"
                                    actionListener="#{panelPopupBean.toggleRendered}"/>
                <mobi:panelPopup id="panelConfirmation"
                                 style="width:300px"
                                 visible="#{panelPopupBean.rendered}">
                    <mobi:outputList inset="false">
                        <mobi:outputListItem group="true">
                            Panel Popup
                        </mobi:outputListItem>
                        <mobi:outputListItem>
                            <h:commandLink
                                    actionListener="#{panelPopupBean.selectListItemAction}"
                                    action="#{panelPopupBean.toggleRendered}">
                                <f:param name="listItem" value="System Update"/>
                                System Update
                            </h:commandLink>
                        </mobi:outputListItem>
                        <mobi:outputListItem>
                            <h:commandLink
                                    actionListener="#{panelPopupBean.selectListItemAction}"
                                    action="#{panelPopupBean.toggleRendered}">
                                <f:param name="listItem" value="Status"/>
                                Status
                            </h:commandLink>
                        </mobi:outputListItem>
                    </mobi:outputList>
                    <mobi:commandButton
                            actionListener="#{panelPopupBean.toggleRendered}"
                            buttonType="important"
                            value="Hide Popup"/>
                </mobi:panelPopup>

Basic Use (clientSide is true) Javascript api is exposed. Can still bind the visible property such that server-side push of values can also close the popup and client and server can stay in sync.

<h:form>
  <mobi:panelPopup id="panelPopClient" header="Popup Panel Client Side" clientSide="true"
                            autocenter="true"
                            visible="#{popup.visibleClient}">
              <mobi:fieldsetGroup>
                            <!-- Text input -->
                     <mobi:fieldsetRow>
                            <h:outputLabel for="textInput" value="Text:"/>
                            <mobi:inputText id="textInput"
                                                autocorrect="on"
                                                singleSubmit="true"
                                                type="text"
                                                style="float:right"
                                                placeholder="Text input"
                                                value="#{input.someText}"/>
                     </mobi:fieldsetRow>
                     <mobi:feildSetRow>
                                 <h:outputText value="Some valuable information about this input field in this popup"/>
                     </mobi:fieldSetRow>
             </mobi:fieldsetGroup>
         
             <a href="javascript:;" onclick="ice.mobi.panelPopup.closeClient('panelPopClient');">Close client popup </a>
            
  </mobi:panelPopup>
</h:form>

Component Documentation

panelPopup

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.