Code Web apps using MyFaces

By : |July 13, 2005 0



Microsoft’s ASP.NET technology showcased Web forms, server-side controls, handling of events generated by Web UI components at the server side, and powerful yet easy-to-use validation controls. JavaServer Faces aka. JSF targets to bring similar technology to Web server side Java, ie, JSP or
Servlets. 

Sun has its own implementation of JavaServer Faces technology which can be used freely to develop JSF-based Web applications. But there is one downside, Sun’s JSF implementation is not re-distributable. This means, you will not be able to bundle it along with your Web application and distribute it. This is where we look at MyFaces, which is another implementation of JSF, developed under Apache Software License that allows it to be re-distributed. 

Direct
Hit!

Applies to: Java developers

USP: Use a re-distributable implementation of JSF to build web apps.

Primary Link:
www.myfaces.org

Google keywords: myfaces, JSF, JavaServer Faces

In this article we code a simple Web application using MyFaces. The Web application will contain a form which submits its data to a JavaBean (which can subsequently store the data in a database). Through this simple application, we see a glimpse of how server-side components (textfields and buttons) and validations work. We also see how easy and maintainable is to use a bean with JSF to store the data inputted on a Web form. And we will see how can you specify the page navigation of your Web application using an external XML file. Before going further we assume that you know theoretically what we mean by server-side Web components or preferably familiar with
ASP.NET.

Installation
We assume that you are running PCQLinux 2005. We also assume that you’ve installed Tomcat application server on PCQLinux (refer to the article JDBC Drivers in the March 2005 issue of PCQuest) Download the latest version (1.0.7 as of this writing) of MyFaces package from www.myfaces.org. Extract the archive which will produce a directory named myfaces-1.0.7. 

Set up a JSF app
On PCQLinux 2005, Tomcat gets installed under /opt/tomcat. Next we create a Web application directory structure under /opt/tomcat/webapps. Create a directory named myfaces under webapps. Subsequently create a subdirectory named WEB-INF in myfaces and subdirectories named classes and lib under
myfaces/WEB-INF. 

Copy all the .jar files-expect for jsp-2.0.jar-found in the directory myfaces-1.0.7/lib to /opt/tomcat/webapps/myfaces/WEB-INF/lib. Next copy the file named web.xml found in myfaces-1.0.7/ conf to to /opt/tomcat/webapps/myfaces/WEB-INF. Create a file named faces-config.xml with the following contents:

<?xml version=”1.0″?>
<!DOCTYPE faces-config PUBLIC
“-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN” “http://java.sun.com/dtd/web-facesconfig_1_1.dtd”>
<faces-config></faces-config>

Save this file under /opt/tomcat/webapps/myfaces/WEB-INF. We’ll use this file later to specify the class performing the business logic for the Web application and to specify the page navigation. 

Code the JSF app
Our Web application will consist of three JSP pages namely index.jsp, success,jsp and failure.jsp. The success.jsp and failure.jsp can contain standard HTML with success (upon login) and failure (upon authentication failure) messages. The index.jsp page will look as follows:

<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h”%>
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f”%> 
<html><head></head><body>
<f:view> 
<h:form id=”form”>
Username: <h:inputText id=”username” required=”true” />
<h:message id=”emailerror” for=”form:username” style=”color:red” /><br>
Password: <h:inputSecret id=”password” required=”true” />
<h:message id=”passworderror” for=”form:password” style=”color:red” /><br>
<h:commandButton value=”Login” action=”#{myForm.login}”/>
</h:form>
</f:view></body></html>

Note the inclusion of the tag libraries in the first two lines. These lines will be present in all the JSF pages. The subsequent lines start the HTML page. Of noteworthy is the tag pair <f:view> and </f:view>. All the JSF components (like <h:form>, <h:inputText>) must be specified within this tag pair. The <h:form> tag renders a HTML form. <h:inputText> renders a textfield within the form, <h:inputSecret> renders a password field and <h:commandButton> creates a button. Note that the action of the method is set to the method of an object named myForm. We will code the class for this object in a while. This means, when the button is clicked, the login( ) method of myForm will be invoked. Save the above file as index.jsp in the directory
/opt/tomcat/webapps/myfaces. 

Server-side validations
In the above form, we have shown a glimpse of how server-side validations work. Note the presence of the attribute — required=”true” – for the <h:inputText> and <h:inputSecret>. With these we specify that these two fields are mandatory. But what if the user does not fill in anything in these fields. In this case, we would like to display an error message. With JSF it is easy. With the ‘required’ attribute you already have specified that an error must occur if the user leaves the fields empty. The only task left is to display the error message. This can be done by using the <h:message> tag /component. The syntax is as follows:

<h:message id=”<any-unique-id>” for=”<form-id>:<field-id>”
style="color:red" />

Here for <field-id> we specify the id of the <h:inputText> and <h:inputSecret> along with the id of the form, like form:username and form:password. Now the error messages will appear in place on the page where you have typed in the <h:message> tag. In this case, we want the error messages to be displayed besides the respective fields. 

The business logic
For this Web application, the only business logic that we will be doing is to get the username and password filled by the user in the form and authenticate it against a database (say). The code for this will move into a class file called MyForm which looks as follows:

public class MyForm{
public String login(){
boolean found = false;
/* 
query database for the username and password
*/
if(found) return “success”;
else
return “failure”;
}}

The noteworthy point is, the method login return success in case of successful authentication else it returns failure. We will use these messages (success and failure) to setup page navigation for the Web application (see next section). Compile the above code and place the MyForm.class file in
/opt/tomcat/webapps/myfaces/WEB-INF/classes. Add the following lines between the <faces-config> and </faces-config> tags in
faces-config.xml. 

<managed-bean>
<managed-bean-name>myForm</managed-bean-name>
<managed-bean-class>MyForm</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Note the ‘managed-bean-name’ in the above lines. This is the name which we will use while referring to a method of the class, like
myForm.login. 

Page Navigation
With JSF you can specify the page navigation of your entire Web application in faces-config.xml. Add the following lines between the <faces-config> and </faces-config> tags in
faces-config.xml. 

<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/success.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/failure.jsp</to-view-id>
</navigation-case>
</navigation-rule>

What the above lines mean is if the outcome from index.jsp (the login page) is ‘success’ then redirect to success.jsp. If the outcome is ‘failure’ then redirect to failure.jsp. Recall that either of these two strings will be returned by the method login( ) when the button is clicked. All done, you can start/restart Tomcat and access the JSF application by keying in http://127.0.0.1:8080/myfaces/index.jsf. Those who want to go beyond the basics, excellent and in-depth tutorials on JSF are available at
www.jsftutorials.net

Source: PCQuest

No Comments so fars

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.