RSS

Writing JSF applications for J2ME clients

October 26, 2010

J2ME, Java Server Faces (JSF)

«»

Login Application

In this section, we will see how to implement the login support for an application when accessed through J2ME. In this example, we will see how to define managed beans for managing the state of the user inputs. Also we will see how to define the navigation rules when the application is accessed. Specifically we will see and analyze the navigation cases for a successful and a failure login.

Download Sample Code for JSF Application for J2ME Clients

Configuration files

The web application’s deployment descriptor won’t be getting covered in this section as the content of it will be the very same that we saw in the earlier section, same is the case for the mobile faces configuration file.

Login Bean Model

The model for the login bean is defined below. It essentially declares two things. The first thing is for collecting the user input from the UI, it defines the properties ‘username’ and ‘password’ along with the getter and the setter methods. Also it provides a validation logic in the method ‘validateLogin()’ which validates the username and the password entered by the user.

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

package net.javabeat.articles.jsf.mobile.login;
 
public class LoginBean {
 
	private String username;
	private String password;
 
	public String getPassword() {
		return password;
	}
 
	public void setPassword(String password) {
		this.password = password;
	}
 
	public String getUsername() {
		return username;
	}
 
	public void setUsername(String username) {
		this.username = username;
	}
 
	public String validateLogin() {
 
		if (username != null && password != null) {
			if (username.equals("admin") && password.equals("admin")){
				return "success";
			}
		}
		return "failure";
	}    
}

Note that for simplification, we didn’t validate the username and the password by hitting the data layer. Instead the login credentials are hard-coded as ‘admin’ and ‘admin’ within the managed bean.

Index Page

The listing for the index page is shown below. As one can see it delegates the call to the login page. Note that this page will be handled by Faces Servlet as we have defined the corresponding mapping in the Web application’s deployment descriptor.

1

<jsp:forward page="/login.jsf" />

Login Page

The login page for the application that is used for collecting username and password information from the user is given below. Note that this is a basic form containing username/password textfields with the login button, the listing for the same is given below.

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

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="m" uri="http://www.ericsson.com/sn/mobilefaces"%>
<f:view>
	<m:doctype/>
 
	<m:html>
		<head>
			<m:title content="Login!"/>
		</head>
 
		<m:body>
			<h:form id="f">
 
				<m:h3>Login</m:h3>
				<p>
				Username:
				<h:inputText id="username" value="#{loginBean.username}" required="true" />
				<br/>
				Password:
				<h:inputText id="password" value="#{loginBean.password}" required="true" />
 
				<br/>
				<h:commandButton id="login" type="submit" value="Login"
				action="#{loginBean.validateLogin}"/>
				</p>
			</h:form>
		</m:body>
	</m:html>
</f:view>

Note that when this application is accessed through a WML browser, the response that will be rendered will be WML script. Note that the developer doesn’t need to worry about the translation mechanism done for rendering as the framework takes complete care on it. The content of the WML script corresponding to the login form is given below.

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

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> 
<wml> 
	<head> 
		<meta name="title" content="Login!" /> 
	</head> 
 
	<card id="WMLCard" title="WML PAGE"><p><b>Login</b><br /></p> 
		<p> 
		Username: 
		<input id="fausername" name="fausername" type="text" value="" /> 
		<br/> 
		Password: 
		<input id="fapassword" name="fapassword" type="text" value="" /> 
 
		<br/> 
		</p> 
		<p>
		<do type="accept" label="Login" id="f:login" name="f:login">
		<go method="post" href="/JSF-WML-Login/login.jsf;jsessionid=f5de0e83eded7042ee6c2d295dec">
		<postfield name="com.ericsson.sn.mfaces.FACES_VIEW_STATE" value="" />
		<postfield name="f:login" value="submit" />
		<postfield name="f:password" value="$(fapassword)" />
		<postfield name="f" value="f" />
		<postfield name="f:username" value="$(fausername)" />
		</go></do>
		</p>
	</card>
</wml>

The screenshot for the above page is given below.

Faces Configuration file

We use the faces configuration file for defining the managed bean and the list of navigation rules in this example. Have a look at the listing of the configuration file.

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

<?xml version='1.0' encoding='UTF-8'?>
<faces-config 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"
	version="1.2">
 
  <navigation-rule>
    <from-view-id>/login.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>
 
  <managed-bean>
    <description>Login Bean</description>
    <managed-bean-name>loginBean</managed-bean-name>
    <managed-bean-class>
        net.javabeat.articles.jsf.mobile.login.LoginBean
    </managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>
 
</faces-config>

Note that the navigation rule for this application is defined through the element ‘navigation-rule’. Here we have defined if the outcome from the view ‘login.jsp’ is success, then the view definition file that has to be rendered is “success.jsp”. Similarly for the outcome “failure”, the view “failure.jsp” has to be mapped and displayed. Have a look at the declaration of the login managed bean which is done within the elements ‘managed-bean’.

Success Page

When the user enters the username and the password details, the method ‘validateLogin()’ will be invoked on the Login Bean object. This method will validate for the correctness of the username and the password and if they are correct will return the string “success”. It is mentioned that for the outcome “success”, the view definition file that is mapped is “success.jsf” and the content of the same is given below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="m" uri="http://www.ericsson.com/sn/mobilefaces"%>
<f:view>
	<m:doctype/>
 
	<m:html>
		<head>
			<m:title content="Login Success"/>
		</head>
 
		<m:body>
			<m:h2>Congratulation! You login is successful</m:h2>
			<p><a href="login.jsf"><b>Login</b></a></p>
		</m:body>
	</m:html>
</f:view>

Note that the content that will be returned to the WAP browser is shown below which will decode and display the view as shown in the screenshot to the user.

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> 
<wml> 
	<head> 
		<meta name="title" content="Login Success" /> 
	</head> 
 
	<card id="WMLCard" title="WML PAGE"><p><strong>Congratulation! You login is successful</strong><br	/></p> 
		<p><a href="login.jsf"><b>Login</b></a></p> 
	</card>
</wml>

Failure page

When the user entered username/password seems to be invalid – i.e. in which case the method validateLogin() returns the string “failure”, then the failure view will be displayed to the user. The content of this view file is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="m" uri="http://www.ericsson.com/sn/mobilefaces"%>
<f:view>
	<m:doctype/>
 
	<m:html>
		<head>
			<m:title content="Login Failure"/>
		</head>
 
		<m:body>
			<m:h2>Sorry! Login credentials are invalid.</m:h2>
			<p><a href="login.jsf"><b>Try again</b></a></p>
		</m:body>
	</m:html>
</f:view>

The corresponding WML document that will be parsed and displayed in the target device is also shown here along with the screenshot.

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> 
<wml> 
	<head> 
		<meta name="title" content="Login Failure" /> 
	</head> 
 
	<card id="WMLCard" title="WML PAGE"><p><strong>Sorry! Login credentials are invalid.</strong><br /></p> 
		<p><a href="login.jsf"><b>Try again</b></a></p> 
	</card>
</wml>

Conclusion

This article started with the concepts of Renderer kits through which rendering JSF applications on multiple types of devices having different views is possible. It then went on explaining Mobile Faces – a distribution that contains an implementation for WAP support. For a basic demonstration, an illustration was given for displaying a text hello in a WAP browser thereby familiarizing with Mobile JSF and OpenWave. Finally the article concluded with Login application that explained the usage of Managed beans and Navigation rules.

email

«»

Comments

comments

Related posts:

  1. Introduction to J2ME
  2. J2ME User Interface
  3. Accessing Web Services from JSF applications
  4. How to write a Custom Plugin for Maven?
,

About krishnas

View all posts by krishnas →