Java Tutorial Blog

JSF 2 OutputLink Example

//  by 

Unlike <h:commandLink/> the <h:outputLink/> doesn’t generate JavaScript to make the link act like a submit button. The <h:outputLink/> component generates an HTML anchor element and its value attribute used for the anchor’s href attribute, and the contents of the <h:outputLink/> body are used to populate the body of the anchor element.

The using of <h:outputLink/> component does has the following uses:

  • Use the <h:outputLink/> component to create an anchor link for linking an external address.
  • Use the <h:outputLink/> component to create an anchor link for linking a parameterized external address.
  • Use the <h:outputLink/> component to create an anchor link for linking an internal resources (images,JavaScript, etc ..)
  • Use the <h:outputLink/> component to create an anchor link for linking an internal pages.
  • Use the <h:outputlink/> component to create an anchor link for internal link (#Identifier).

Also Read:

1. The View

index.xhtml

&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
	xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;
	xmlns:h=&quot;http://java.sun.com/jsf/html&quot;
	xmlns:f=&quot;http://java.sun.com/jsf/core&quot;
	xmlns:c=&quot;http://java.sun.com/jsp/jstl/core&quot;&gt;
&lt;h:form prependId=&quot;false&quot;&gt;
	&lt;h1&gt;
		&lt;h:outputText value=&quot;JavaBeat JSF 2.2 Examples&quot; /&gt;
	&lt;/h1&gt;
	&lt;h2&gt;
		&lt;h:outputText value=&quot;OutputLink Example&quot; /&gt;
	&lt;/h2&gt;
	&lt;table&gt;
		&lt;tr&gt;
			&lt;td&gt;
				Go To JavaBeat Site
			&lt;/td&gt;
			&lt;td colspan=&quot;2&quot;&gt;
				&lt;h:outputLink value=&quot;https://javabeat.net&quot; &gt;
					&lt;h:outputText value=&quot;Visit JavaBeat Site&quot;&gt;&lt;/h:outputText&gt;
				&lt;/h:outputLink&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;
				Search About JSF Posts Inside JavaBeat
			&lt;/td&gt;
			&lt;td colspan=&quot;2&quot;&gt;
				&lt;h:outputLink value=&quot;https://javabeat.net&quot; &gt;
					&lt;h:outputText value=&quot;Visit JavaBeat Site&quot;/&gt;
					&lt;f:param value=&quot;JSF&quot; name=&quot;s&quot;/&gt;
				&lt;/h:outputLink&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;
				Navigate Into Internal Address Page
			&lt;/td&gt;
			&lt;td colspan=&quot;2&quot;&gt;
				&lt;h:outputLink value=&quot;internalAddress.xhtml&quot; &gt;
					&lt;h:outputText value=&quot;Visit Internal Address&quot;&gt;&lt;/h:outputText&gt;
				&lt;/h:outputLink&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;
				Access The Image
			&lt;/td&gt;
			&lt;td colspan=&quot;2&quot;&gt;
				&lt;h:outputLink value=&quot;resources/images/JSF-Thumbnail.png&quot; &gt;
					&lt;h:outputText value=&quot;See JSF Image&quot;&gt;&lt;/h:outputText&gt;
				&lt;/h:outputLink&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;
				Go To Internal Link OutputText
			&lt;/td&gt;
			&lt;td colspan=&quot;2&quot;&gt;
				&lt;h:outputLink value=&quot;#internalLink&quot; &gt;
					&lt;h:outputText value=&quot;Go To The Internal Index At The Same Page&quot;&gt;&lt;/h:outputText&gt;
				&lt;/h:outputLink&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
	&lt;c:forEach var=&quot;i&quot; begin=&quot;1&quot; end=&quot;100&quot;&gt;
   		&lt;br/&gt;
	&lt;/c:forEach&gt;
	&lt;h:outputText id=&quot;internalLink&quot; value=&quot;Internal Link&quot;/&gt;
&lt;/h:form&gt;
&lt;/html&gt;

internalAddress.xhtml

&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
	xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;
	xmlns:h=&quot;http://java.sun.com/jsf/html&quot;
	xmlns:f=&quot;http://java.sun.com/jsf/core&quot;&gt;
	&lt;h1&gt;
	        &lt;h:outputText value=&quot;JavaBeat JSF 2.2 Examples&quot; /&gt;
	&lt;/h1&gt;
	&lt;h2&gt;
		&lt;h:outputText value=&quot;OutputLink Example&quot; /&gt;
	&lt;/h2&gt;
	&lt;h:outputText value=&quot;This is an Internal Address&quot;/&gt;
&lt;/html&gt;

2. The Deployment Descriptor (web.xml)

web.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;web-app xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;
	xmlns=&quot;http://java.sun.com/xml/ns/javaee&quot; xmlns:web=&quot;http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&quot;
	xsi:schemaLocation=&quot;http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id=&quot;WebApp_ID&quot; version=&quot;2.5&quot; metadata-complete=&quot;true&quot;&gt;
	&lt;context-param&gt;
		&lt;description&gt;State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2&lt;/description&gt;
		&lt;param-name&gt;javax.faces.STATE_SAVING_METHOD&lt;/param-name&gt;
		&lt;param-value&gt;client&lt;/param-value&gt;
	&lt;/context-param&gt;
	&lt;context-param&gt;
		&lt;param-name&gt;javax.faces.application.CONFIG_FILES&lt;/param-name&gt;
		&lt;param-value&gt;/WEB-INF/faces-config.xml&lt;/param-value&gt;
	&lt;/context-param&gt;
	&lt;servlet&gt;
		&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
		&lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt;
		&lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
	&lt;/servlet&gt;
	&lt;servlet-mapping&gt;
		&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
		&lt;url-pattern&gt;/faces/*&lt;/url-pattern&gt;
	&lt;/servlet-mapping&gt;
	&lt;servlet-mapping&gt;
		&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
		&lt;url-pattern&gt;*.xhtml&lt;/url-pattern&gt;
	&lt;/servlet-mapping&gt;
	&lt;listener&gt;
		&lt;listener-class&gt;com.sun.faces.config.ConfigureListener&lt;/listener-class&gt;
	&lt;/listener&gt;
&lt;/web-app&gt;

3. Directory Structure

The directory structure for the deployed application has the form that explained at the following snapshot.

JSF 2 OutputLink Example 1

4. JSF 2 OutputLink Demo

The below snapshot will demonstrate the all possibilities using of <h:outputLink/>.

JSF 2 OutputLink Example 2

  • The first link should lead us for https://javabeat.net
  • The second link should lead us for https://javabeat.net/?s=JSF
  • The third link should lead us for internalAddress.xhtml deployed page.
  • The fourth link should lead us for a deployed image.
  • The fifth link should lead us for internal link located on the same page.
[wpdm_file id=15]

About Amr Mohammed