JSF 2 ViewScoped Example

View scope was added in the JSF 2.0. A bean in view scope persists while the same JSF view (page) is re displayed. Once the user has navigated into another view the viewscoped bean goes out of scope. If your application has a page has been getting re displayed, then you can put the data for this page into view scope, thereby reducing the size of the session scope. You can put the managed bean in the view scope using the @ViewScoped annotation. This scope lies between the request and session scope.

Also Read:

1. Managed Bean

IndexBean.java

package net.javabeat.jsf;

import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class IndexBean implements Serializable{

	private static final long serialVersionUID = 1L;
	private int index = 1;
	private String answer;
	private String question;
	private Map<String,String> questions = new HashMap<String,String>();
	private Map<String,String> answers = new HashMap<String,String>();

	public IndexBean(){
		this.questions.put("1", "What's the most tutorial that you loved on the JavaBeat site ?");
		this.questions.put("2", "What's the most example that you loved on the JavaBeat site ?");
		this.questions.put("3", "What's the most JPA tutorial that you experienced on the JavaBeat site ?");
		this.question = this.questions.get("1");
	}

	public int getIndex() {
		return index;
	}

	public void setIndex(int index) {
		this.index = index;
	}

	public String getAnswer() {
		return answer;
	}

	public void setAnswer(String answer) {
		if(this.index == 1){
			this.answers.put(String.valueOf(index), this.answer);
			this.index++;
			this.question = questions.get(String.valueOf(index));
			this.answer = "";
		}
		else if(this.index == 2){
			this.answers.put(String.valueOf(index), this.answer);
			this.index++;
			this.question = questions.get(String.valueOf(index));
			this.answer = "";
		}
		this.answer = answer;
	}

	public String getQuestion() {
		return question;
	}

	public void setQuestion(String question) {
		this.question = question;
	}

	public Map<String, String> getQuestions() {
		return questions;
	}

	public void setQuestions(Map<String, String> questions) {
		this.questions = questions;
	}

	public Map<String, String> getAnswers() {
		return answers;
	}

	public void setAnswers(Map<String, String> answers) {
		this.answers = answers;
	}

	public String next(){
		if(index != 3)
			return null;
		else{
			this.question = "Thanks For Your Time";
			return "";
		}

	}

	public String reset(){
		return "";
	}
}

2. The Views

questionare.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 ViewScoped Example</h2>
		<h:form prependId="false">
			<h:outputText value="JavaBeat Questionare"/>
			<br/>
			<br/>
			<h:outputText value="Please Answer Questions Below:" rendered="#{indexBean.index != 3}"/>
			<br/>
			<br/>
			<h:outputText value="Question #" rendered="#{indexBean.index != 3}"/>
			#{' '}
			<h:outputText value="#{indexBean.index}" rendered="#{indexBean.index != 3}"/>
			<br/>
			<br/>
			<h:outputText value="#{indexBean.question}"/>
			<br/>
			<br/>
			<h:inputText value="#{indexBean.answer}" rendered="#{indexBean.index != 3}"/>
			<h:commandButton value="Next Question" action="#{indexBean.next}" rendered="#{indexBean.index != 3}"/>
			<h:commandButton value="Go To Anonymous View" action="/anonymousView.xhtml"/>
		</h:form>
	</f:view>
</h:body>
</html>

anonmymousView.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 ViewedSCoped Example</h2>
		<h:form prependId="false">
			<h:outputText value="Anonymous View"/>
			#{' '}
			<h:commandButton value="Go To Questionare" action="/questionare.xhtml"/>
		</h:form>
	</f:view>
</h:body>
</html>

3. Faces Configuration File

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	version="2.2">
<application>
	<resource-bundle>
		<base-name>net.javabeat.jsf.application</base-name>
		<var>msg</var>
	</resource-bundle>
</application>
</faces-config>

4. The Deployment Descriptor

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>server</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

5. JSF2 Viewed Scoped Demo

The below snapshots show you the impact of using the @ViewedScoped on the managed bean.

JSF 2 ViewedScoped Example 1

  • The first access for the JavaBeat questionare.

JSF 2 ViewedScoped Example 2

  • The user has answered the first question.
  • The user has activated the next question.

JSF 2 ViewedScoped Example 3

  • The user has answered the second question.
  • The user has activated the next question.

JSF 2 ViewedScoped Example 4

  • The user has finished the questionare.
  • The system was displayed a thanks message for the user.
  • The system provide the user the capability to navigate into another view.
  • This kind of navigation will make the managed beans that held by the ViewedScoped to be destroyed.

JSF 2 ViewedScoped Example 5

  • The questionare view has left by the user into next anonymous view.
  • The user has the ability to navigate into the questionare once again.

JSF 2 ViewedScoped Example 6

  • Cause the questionare.xhtml has been associated with a view scope managed bean, the managed bean has been destroyed and hence the properties are reset.

Comments

comments

About Amr Mohammed

Speak Your Mind

*