Ajax Updates in PrimeFaces Mobile

When working on PrimeFaces Mobile, I’ve figured a couple of showstopper mismatch points between jQuery Mobile and JSF in general. One of them is the progressive enhancement jQuery Mobile applies to standard JSF components to optimize them for mobile screens. This enhancement happens only once during page load and any style/behavior is lost if the component is updated with ajax. PrimeFaces Mobile provides extensions to jQuery Mobile to solve issues like this. Here is an example;

<pm:view id="ajaxUpdate">
            <pm:header title="TODO">
                <f:facet name="left"><pm:button value="Back" icon="back" role="back"/></f:facet>
            </pm:header>

            <pm:content>

                <h:form>

                    <pm:field>
                        <h:outputLabel for="txt" value="Text:" />
                        <h:inputText id="txt" value="#{showcaseView.text}" />
                    </pm:field>

                    <pm:panelGrid columns="2">
                        <pm:commandButton value="PrimeFaces" actionListener="#{showcaseView.add}" update="txt txts" process="@form"/>

                        <h:commandButton value="JSF Impl" actionListener="#{showcaseView.add}">
                            <f:ajax render="txt txts" execute="@form"/>
                        </h:commandButton>
                    </pm:panelGrid>

                    <pm:listView id="txts" var="text" value="#{showcaseView.texts}" inset="true" title="Values">
                        #{text}
                    </pm:listView>

                </h:form>
            </pm:content>
        </pm:view>

And sample backing bean with view scope;

package org.primefaces.examples.mobile;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

public class ShowcaseView implements Serializable {

    private String text;

    private List<String> texts = new ArrayList<String>();

    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }

    public List<String> getTexts() {
        return texts;
    }

    public void add() {
        texts.add(text);
        text = null;
    }
}

This sample demonstrates the power of PrimeFaces Ajax extensions over JSF implementation client side ajax impl. When PrimeFaces button is used, styles and behaviors are preserved after ajax update however standard JSF update with f:ajax corrupts the page look and feel. You can try this example online at PrimeFaces Labs. Click the Ajax Updates link.

In summary, this is just one of the things PrimeFaces Mobile handles for you automatically behind the scenes, if plain jQuery Mobile is used with JSF, sure it will work but it will be harder as you will hit annoying issues. PrimeFaces Mobile solves these out of the box!

4 Responses to Ajax Updates in PrimeFaces Mobile

  1. Ronald van Kuijk says:

    R.E.S.P.E.C.T.

    You did not only solve this, but in a day (afaik) you added a lot of things to the showcase… Realy impressed. Richfaces does not even dare to have an online demo of normal components

  2. When we have a version available for download? Congratulations!

  3. You can always try the nightly builds.

  4. @Ronald, thanks for the great feedback🙂

%d bloggers like this: