Sunday, July 01, 2012

JSF Tip of the Day: JSF 2.1 AJAX Examples with PrimeFaces 3.3 and Mojarra 2.1

I have been working with my team at the office to bring them up to speed on using JSF and AJAX. I have been encouraging them to use PrimeFaces to reduce the amount of code required to "AJAXify" JSF components. PrimeFaces has AJAX functionality built in, or uses a simple <p:ajax/> tag to enable it.

However, I think that it is important to be able to use the default Mojarra JSF RI implementation along with its <f:ajax/> functionality both as a tag, and as JavaScript. The code examples below use a combination of PrimeFaces and Mojarra to demonstrate the ease with which you can develop fully functional AJAX applications with JSF.

The examples are done using Apache Maven on NetBeans 7.2 RC 1 and deployed to GlassFish 3.1.2. using JSF 2.1.0 and PrimeFaces 3.3.1.

The code for the project can be downloaded here: ajax-examples.zip

index.xhtml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>JSF AJAX Examples</title>
    </h:head>
    <h:body>
        <h:form id="form1">
            <p:panelGrid id="panelGrid1" columns="1">
                <f:facet name="header">
                    <h:outputText value="PrimeFaces AJAX Example"/>
                </f:facet>
                <h:panelGroup>
                    <p:outputLabel for="selectBooleanCheckbox1" value="Enable and Render?"/>
                    <p:selectBooleanCheckbox id="selectBooleanCheckbox1"
                                             value="#{indexBean.selectedBoolean}">
                        <p:ajax event="change" update="panelGroup1 message1"/>
                    </p:selectBooleanCheckbox>
                </h:panelGroup>
 
                <h:panelGroup id="panelGroup1">
                    <p:inputText id="inputText1" disabled="#{!indexBean.selectedBoolean}"
                                 value="Hello World!"/>
                </h:panelGroup>
 
                <h:panelGroup id="message1">
                    <h:outputText id="outputText1"
                                  rendered="#{indexBean.selectedBoolean eq true? true: false}"
                                  value="I am message 1!"/>
                </h:panelGroup>
            </p:panelGrid>
        </h:form>
 
        <h:form id="form2">
            <h:panelGrid id="panelGrid2">
                <f:facet name="header">
                    <h:outputText value="<h:selectOneRadio/> example with <f:ajax/>"/>
                </f:facet>
                <h:panelGroup id="panelGroup2">
                    <h:outputLabel for="selectOneRadio1" value="Display Message?"/>
                    <h:selectOneRadio id="selectOneRadio1" value="#{indexBean.selectedRadioValue1}">
                        <f:selectItem itemLabel="Yes" itemValue="#{true}"/>
                        <f:selectItem itemLabel="No" itemValue="#{false}"/>
                        <f:ajax event="change" render="message2"/>
                    </h:selectOneRadio>
                </h:panelGroup>
 
                <h:panelGroup id="message2">
                    <h:outputText id="outputText2"
                                  rendered="#{indexBean.selectedRadioValue1 eq true ? true : false}"
                                  value="I am message 2!"/>
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
 
        <h:form id="form3">
            <h:outputScript name="jsf.js" library="javax.faces" target="head"/>
            <h:panelGrid id="panelGrid3">
                <f:facet name="header">
                    <h:outputText value="<h:selectOneRadio/> example with onchange event using jsf.ajax.request()"/>
                </f:facet>
                <h:panelGroup id="panelGroup3">
                    <h:outputLabel for="selectOneRadio2" value="Display Message 3?"/>
                    <h:selectOneRadio id="selectOneRadio2" value="#{indexBean.selectedRadioValue2}"
                                      onchange="jsf.ajax.request(this,event,{render:'@form'});return false;">
                        <f:selectItem itemLabel="Yes" itemValue="true"/>
                        <f:selectItem itemLabel="No" itemValue="false"/>
                    </h:selectOneRadio>
                </h:panelGroup>
 
                <h:panelGroup id="message3">
                    <h:outputText id="outputText3"
                                  rendered="#{indexBean.selectedRadioValue2 eq true ? true: false}"
                                  value="Hello John"/>
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
 
    </h:body>
</html>

IndexBean.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package com.bluelotussoftware.com.jsf.ajax;
 
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
 
/**
 *
 * @author John Yeary
 * @version 1.0
 */
@ManagedBean
@ViewScoped
public class IndexBean implements Serializable {
 
    private static final long serialVersionUID = 8156962940235133626L;
    private boolean selectedBoolean;
    private boolean selectedRadioValue1;
    private boolean selectedRadioValue2;
 
    public boolean isSelectedBoolean() {
        return selectedBoolean;
    }
 
    public void setSelectedBoolean(boolean selectedBoolean) {
        this.selectedBoolean = selectedBoolean;
    }
 
    public boolean getSelectedRadioValue1() {
        return selectedRadioValue1;
    }
 
    public void setSelectedRadioValue1(boolean selectedRadioValue1) {
        this.selectedRadioValue1 = selectedRadioValue1;
    }
 
    public boolean getSelectedRadioValue2() {
        return selectedRadioValue2;
    }
 
    public void setSelectedRadioValue2(boolean selectedRadioValue2) {
        this.selectedRadioValue2 = selectedRadioValue2;
    }
}
The pictures below demonstrate the before and after of clicking the checkbox, and radio buttons.

Before


After
Labels: , , , , , , ,

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Popular Posts