Java Tutorial Blog

JSF 2 Button and Link Example

//  by 

By default, a JSF application makes a sequence of POST requests to the server each POST contains form data. This makes sense for application that collects user inputs. In the other hand many applications don’t work at this manner. Some other applications provide their users a simple browsing mechanism, in that no data from the user has been submitted and no data is collected. It’s not more than selecting links and navigating book markable pages, so that the user can return the same page when revisiting the URL.

Before JSF 2, each submitted forms were sent into server using POST, but since JSF 2 has been introduced, a new sending model has been implemented. JSF 2 provides two components that mainly used for achieving GET requests. The <h:button/> and <h:link/> are two different type of components used for making GET request into server. The <h:button/> and <h:link/> support the same navigation mechanism that already used by the <h:commandButton/> and <h:commandLink/>, it’s surely applicable to define an outcome for your <h:button/> and <h:link/> either by using fixed string or by using value expression (Navigation Handler will be discussed later). 

Also Read:

The most important difference between those actions defined in the commandButton and commandLink from a side and those that are defined in the button and link in the other side. The outcome attribute that’s defined in the button and link components is evaluated before the page is rendered, while the action that defined in the commandButton and commandLink is evaluated once the user has clicked on. For that reason the JSF specification uses term preemptive navigation for computing the target view IDs for GET request.

1. ManagedBean

IndexBean.java

package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class IndexBean {
	private String outcome = "index";

	public String getOutcome() {
		return outcome;
	}

	public void setOutcome(String outcome) {
		this.outcome = outcome;
	}
}

2. The View

index.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"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<title>JavaBeat JSF2 Button &amp; Link Components</title>
</h:head>
<h:body>
	<h:form>
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="Button &amp; Link Example" />
		</h2>
		<h:button value="Go To Navigated Page" outcome="navigatedPage"></h:button>
		<br/>
		<br/>
		<br/>
		<h:link value="Go To Navigated Page Through Parametrized Get Request" outcome="navigatedPage?param1=1">
			<f:param name="param2" value="2"></f:param>
		</h:link>
	</h:form>
</h:body>
</html>

navigatedPage.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"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<title>JavaBeat JSF2 Button &amp; Link Components</title>
</h:head>
<h:body>
	<h:form>
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="Button &amp; Link Example" />
		</h2>
		<h:link value="Go To Index" outcome="#{indexBean.outcome}"></h:link>
	</h:form>
</h:body>
</html>

3. 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>client</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>

4. JSF 2 Button and Link Demo

The below snapshots show you the complete scenario of using a and for initiating a GET request.

JSF 2 Button & Link Example 1

JSF 2 Button & Link Example 2

JSF 2 Button & Link Example 3

  • The first example shows you the <h:button/> and <h:link/> components. The button sends a GET request back into server, while the link send another parametrized GET request back into server. Those components are contains a fixed outcomes for achieving the desired navigation.
  • The second example shows you an <h:link/> component sends a GET request back into server. That component uses a value expression for assigning a value for the outcome attribute.
  • The third example shows you the parameters that are sent by the second link at that page designated in the first example. The param1 and param2 are teo different parameters that sent using different way of sending.
  • The requests that are sent are bookmarkable.
[wpdm_file id=17]

About Amr Mohammed