Coding your first RichFaces page

Ok. Now we're ready to test that your set up was correct. Add a simple test.xhtml page to your web root:


<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <f:view>
 <h:head></h:head>
 <h:body>
    <rich:panel header="Richfaces running on JBoss AS 7">

      <ul>
        <li>RichFaces is a component library for JSF</li>
        <li>easily integrating AJAX capabilities.</li>
     </ul>
    </rich:panel>
  </h:body>
 </f:view>


</ui:composition>

Notice the ui:composition tag which points out the name space definitions for JSF and Richfaces tags.

We will see if JBoss AS 7 (Beta2) can digest Richfaces stuff. Export your application in a sample.war archive and place it under the deployments folder of the standalone server.

 

 If you deploy a packaged archive it will be automatically deployed by JBoss 7. Expanded directories would require a xxx.war.dodeploy empty file in the deployments folder.

 

Request your page with http://localhost:8080/sample/test.jsf

This would produce the following not-so-rich HelloWorld page:

richfaces 4 tutorial

Besides this simple stuff, you can extend your JSF 2 capabilities with lots of new features, including a full set of Ajax enabled components, the new client-side validation expanding the JSR 303 bean validation, Push components and Advanced queueing.

Following here is a sample demo which contains JSR 303 Bean validation on the Name field and auto-field completion on the State field:


<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <f:view>
 <h:head></h:head>
 <h:body>


 <rich:panel header="Richfaces sample validation and auto-completion">
   <h:form>
     <h:outputText value="Enter your name" />
     <h:inputText id="name" value="#{userBean.name}">
        <rich:validator />
     </h:inputText>

     <rich:message for="name" />
     <br />


     <h:outputText value="Enter your state" />
     <rich:autocomplete value="#{userBean.state}" minChars="1" autocompleteMethod="#{userBean.autocomplete}" />


   </h:form>
 </rich:panel>


 </h:body>
 </f:view>
</ui:composition>

The ManagedBean UserBean contains the method autocomplete which has the ArrayList of suggestions for the "state" field. It contains also the "name" field which has a validation expression coded on it:


@ManagedBean
public class UserBean {

    public List<String> autocomplete(String prefix) {

        ArrayList<String> result = new ArrayList<String>();
        result.add("England");
        result.add("France");
        result.add("Germany");
        result.add("Italy");
        result.add("Spain");

        return result;
    }

    @Size(min=3, max=12,message="Must be between 3 and 12 chars")
    private String name;

    private String state;

    public String getState() {
        return state;
    }

    public String getName() {
        return name;
    }

}

When requested, the sample page would produce for the field name:

richfaces 4 tutorial

And for the state field:

richfaces 4 tutorial

0
0
0
s2smodern