PrimeFaces Mobile Dialog

Upcoming PrimeFaces Mobile features a Dialog component optimized for Mobile Devices. We’ve written a Mobile Renderer to the well known <p:dialog /> component that is commonly used in PrimeFaces Core.

There is also a dialog feature in jQuery Mobile however that doesn’t really fit JSF programming model as it displays whole pages in dialogs rather than any custom content, PrimeFaces Mobile Dialog however is based on simpledialog2 widget that enables the model PrimeFaces developers are used to which is displaying-hiding the content after an action. Dialog can also be embedded inside mobile views. Usage is as follows;

<h:form id="listNotesForm">
    <p:dataList id="notesList" value="#{notesView.notes}" var="note" type="inset">
        <p:commandLink value="#{note.shortText}" update=":listNotesForm:noteDetail" oncomplete="dlg.show()">
             <f:setPropertyActionListener value="#{note}" target="#{notesView.note}" />
        </p:commandLink>
    </p:dataList>

    <p:dialog header="Note Details" widgetVar="dlg">
        <f:attribute name="contentSwatch" value="e" />
        <p:outputPanel layout="block" style="padding:4px 10px">
           <h:outputText id="noteDetail" value="#{notesView.note.text}" />
        </p:outputPanel>
    </p:dialog>
</h:form>

PrimeFaces Mobile is under active development, although the next release will focus on performance optimizations and tuning (e.g. lightweight resources, lazy view loading), there are also nice features like this one.