In this tutorial you will learn about the JSF 2 h outputText tag.
JSF 2 h outputText
In this tutorial you will learn about the JSF 2 h outputText tag.
<h:outputText> tag of JSF 2 html tag library is used to show the text in the JSF view pages. This tag displays the plain text or if any attribute/s like dir, styleClass etc is present then these text are rendered and wrapped with the HTML span element. This tag can manipulate the dynamic value using the 'value' attribute of it's tag.
Attributes of JSF h outputText
- converter : This is not a required attribute. This
attribute is used when you are required to invoke a converter class in your
application when this link is clicked.
- id : This is not a required attribute. This attribute is
used to make the element uniquely identifiable within its closest parent. Value
of this attribute must be unique within its closest parent.
- rendered : This is not a required attribute. It evaluates a boolean expression. Presence of this attribute specifies that whether the
current component should be rendered in the Rendered Response phase or not or
worked on any later form submission. The default value of this attribute is
defined to true.
- value : This is not a required attribute. This attribute specifies the current value of the component.
- dir : This is not a required attribute. This attribute
evaluates to the java.lang.String value that suggests the direction for the text
which doesn't inherit the property of maintaining a direction. The allowable
values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
- escape : This is not a required attribute. This attribute is
used to specify whether the HTML, XML instructions must be escaped or not. If
this attribute is not used with this tag it is assumed that it's value is true
and the HTML, XML characters must not be executed.
- lang : This is not a required attribute. This attribute is used to specify the language code for the component.
- style : This is not a required attribute. This attribute
evaluates to a java.lang.String value, which specifies that the CSS style will
be applied to this component when rendered.
- styleClass : This is not a required attribute. This
attribute evaluates to a java.lang.String value specifies the applicable CSS style
space-separated list to applied at the time of rendering. "class" attribute must
be used to pass this value.
- title : This is not a required attribute. This attribute specifies the text information of the component as a tooltip when the mouse pointer is hover over this link.
- binding : This is not a required attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.
Example
A simple example is being given here which will demonstrate you about how to use the JSF 2 h outputText tag in the JSF applications. In this example I have created a JavaBeans with the property name and its setter getter method which value can be set and get through EL expression in the JSF view pages. Then created the JSF view pages. In the input.xhtml page I have used the <h:outputText> text to show the static text and the <h:inputText> to take the value and set it for the JavaBeans property value dynamically. In the output.xhtml page I have used the <h:outputText> tag to retrieve the JavaBeans property value dynamically.
Directory Structure
NameBean.java
package devmanuals;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name="nameBean")
@RequestScoped
public class NameBean {
String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
input.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>JSF 2 h outputText Example</title>
</head>
<body>
<f:view>
<h:form>
<h:outputText value="Enter Your Name : "/>
<h:inputText value="#{nameBean.name}"/>
<h:commandButton value="submit" action="output" />
</h:form>
</f:view>
</body>
</html>
output.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>JSF 2 h outputText Example</title>
</head>
<body>
<f:view>
<h:outputText value="Your Name is : #{nameBean.name}"/>
</f:view>
</body>
</html>
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_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jsfHOutputText</display-name> <welcome-file-list> <welcome-file>input.xhtml</welcome-file> </welcome-file-list> <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> <url-pattern>*.jsf</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <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.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> </web-app>
How To Run
After copying the above code paste them to the respective files or by downloading the code from Download Source Code start your web server and then use the following link http://localhost:8181/jsfHOutputText//input.xhtml in the address bar of the web browser.
Output
When you will execute the above code you will get the output as follows :
In the above page when you will input the value into the text box and click on the button named 'submit' then the output will be as follows :
[ 0 ] Comments