Something missing with dynamic faces (Ajax) simple example

[Enrique Villamizar]

Hi everybody:

I am trying to understand how to use Dynamic Faces Extension (Ajax) with JSF.

Based on SimpleDynamicFaces Example I want to select a country and view its capital without refreshing the whole page but a ajaxZone. My example doesn't work, I have:

web. xml

  <?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <context-param>
        <param-name>com.sun.faces.verifyObjects</param-name>
        <param-value>false</param-value>
    </context-param>
    <context-param>
        <param-name>com.sun.faces.validateXml</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>client</param-value>
    </context-param>
    <!-- Initializing the Lifecycle Object :: Dynamic Faces-->
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <init-param>
            <param-name>javax.faces.LIFECYCLE_ID</param-name>
            <param-value>com.sun.faces.lifecycle.PARTIAL</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/welcomeJSF.jsp</welcome-file>
    </welcome-file-list>
</web-app>
  

faces-config.xml

  <faces-config version="1.2" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <managed-bean>
        <managed-bean-name>ApplicationBean</managed-bean-name>
        <managed-bean-class>ApplicationBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
</faces-config>  

welcomeJSF.jsp

   <jsfExt:ajaxZone id="zone1" execute="zone1" render="zone2">
                <h:selectOneMenu id="country" value="#{ApplicationBean.country}"
                                 valueChangeListener="#{ApplicationBean.updateCapital}">
                    <f:selectItems value="#{ApplicationBean.countries}"/>
                </h:selectOneMenu>
            </jsfExt:ajaxZone>
            <jsfExt:ajaxZone id="zone2">
                <h:outputText id="capital" value="#{ApplicationBean.stateCapital}"/>
            </jsfExt:ajaxZone>  

Manage Bean

 public class ApplicationBean implements ValueChangeListener {
    private SelectItem[] countries;
    private int country;
    private //pais seleccionado
    String stateCapital;
    /** Creates a new instance of ApplicationBean */
    public ApplicationBean() {
      country = 0;
      stateCapital = "Bogotá";
      countries = new SelectItem[3];
      countries[0] = new SelectItem("Colombia");
      countries[1] = new SelectItem("Venezuela");
      countries[2] = new SelectItem("Ecuador");
    }
    public void updateCapital(ValueChangeEvent e) {
        int i = getCountry();
        switch(i) {
            case 0: setStateCapital("Bogotá"); break;
            case 1: setStateCapital("Caracas"); break;
            case 2: setStateCapital("Quito");
        }
        
    }

//it also has setters/getters of course...
   

Tomcat Apache doesn't show any error ...but on the page I select a different country and nothing happens...the "zone2" doesn't re-render.

What Am I doing wrong...what is missing?

Please help me ... I've spent a lot time with no positive result.

[Enrique Villamizar]

Hi everybody:

After much time lost because of my ignorance... trying out and getting nothing, at last it worked.

  <jsfExt:ajaxZone id="zone1" execute="zone1" render="zone2"
                                 [b] action="#{ApplicationBean.updateCapital}">[/b]
                     <h:selectOneMenu id="country" value="#{ApplicationBean.country}">
                         <f:selectItems value="#{ApplicationBean.countries}"/>
                </h:selectOneMenu>
            </jsfExt:ajaxZone>

            <jsfExt:ajaxZone id="zone2">
                <h:outputText id="capital" value="#{ApplicationBean.capital}"/>
            </jsfExt:ajaxZone>   

I think using valueChangeListener doesn't work ( Who knows? - when do I have to use it?). So I changed the manage bean:

   public class ApplicationBean {
    private SelectItem[] countries;
    private int country;
    private String capital;
   ....
    public ApplicationBean() {
      country = 0;
      capital = "Bogota";
      countries = new SelectItem[3];
      countries[0] = new SelectItem(0, "Colombia");
      countries[1] = new SelectItem(1, "Venezuela");
      countries[2] = new SelectItem(2, "Ecuador");
    }

    public String updateCapital() {
        int i = getCountry();
        switch(i) {
            case 0: setCapital("Bogota"); break;
            case 1: setCapital("Caracas"); break;
            case 2: setCapital("Quito");
        }
        return null;
    } 
//setters and getters
}

The idea behind ajaxZones is easy but implementing it was driving me crazy. Does anyone know about a good book or tutorial which explain in details how to use dynamic faces ext.?

javapassion.com has good examples but they don't expalin them enough. Sometimes it's hard to find good tutorial for newbies.

[Enrique Villamizar]

Based on the simple example ( which finally runs well) I am trying to apply the same idea in a real example but I got the following error (on IE 8):

Message: 'null' is null or not an object
Line: 1
Character: 14509
Code: 0
URI: http://localhost:9085/vivienda/faces/static/META-INF/0.1-SNAPSHOT-rc7/com_sun_faces_ajax.js

I have no idea what is happening... does anyone could help me? Any ideas about what is going on?

Thanks very much...