JSF inputtextarea html tag

by

JSF h:inputTextarea tag is used to render a HTML textarea field.

JSF tag:

<h:inputTextarea rows=”15” cols=”20” value="Hello world" />

Rendered HTML tag:

<textarea name="j_idt6:j_idt8" rows=”15” cols=”20” value="Hello world" />

Attributes of h:inputSecret tag.

Attribute Description
1. id id for the tag
2. binding Reference to the component used in a backing bean
3. rendered A boolean value; false would suppress rendering
4. styleClass Cascading stylesheet (CSS) class name
5. value value binding
6. valueChangeListener A method binding that responds to value changes
7. converter Converter class name
8. validator Class name of a validator attached to the component
9. required A boolean; if true, marks the tag as required
10. accesskey gives focus to an element
11. accept Comma-separated list of content types for a form
12. accept-charset Comma- or space-separated list of character encodings for a form.
13. alt Alternative text for nontextual elements such as images
14. border Pixel value for an element’s border width
15. charset Character encoding for a linked resource
16. Coordinates for an element whose shape is a rectangle, circle, or polygon
17. dir Direction for text. Valid values are ltr (left to right) and rtl (right to left).
18. disabled Disabled state of an input element or button
19. hreflang Base language of a resource specified with the href attribute;
20. lang Base language of an element’s attributes and text
21. maxlength Maximum number of characters for text fields
21. readonly Read-only state of an input field
22. style Inline style information
23. tabindex Numerical value specifying a tab index
24. target The name of a frame in which a document is opened
25. title A title used for accessibility. Browsers typically create tooltips for the title’s value
26. type Type of a link; for example, stylesheet
27. width Width of an element
28. onblur Event handler for losing focus
29. onchange Event handler for value changes
30. onclick Event handler for Mouse button clicked over the element
31. ondblclick Event handler for Mouse button double-clicked
32. onfocus Event handler for element received focus
33. onkeydown Event handler for Key pressed
34. onkeypress Event handler for Key pressed and released
35. onkeyup Event handler for Key released
36. onmousedown Event handler for Mouse button pressed
37. onmousemove Event handler for mouse moved
38. onmouseout Event handler for mouse left
39. onmouseover Event handler for mouse moved onto
40. onmouseup Event handler for mouse button released
41. onreset Event handler for form reset
42. onselect Event handler for Text selected
43. immediate Process validation early in the life cycle

 

Example explanation:

On “test.xhtml” page we have inputtextarea with value attribute. The value of the inputtextarea is binding with the description property of the Test.java class. Click “Check Description” button after entering the value in inputtextarea. JSF framework assign the inputtextarea value to the bean property and “inputtextarea ” method returns the “success”. This return value is matched with the navigation rules defined in faces-config.xml file and renders the welcome.xhtml page which shows the entered description value.

Example:

test.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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">
	<h:head>
		<title>JSF input area example.</title>
	</h:head>
    <h:body>
    	<h2>JSF input area example.</h2>
 
    	<h:form>
    	   <h:inputTextarea row="5" col="20" 
    	      value="#{test.description}"/>
    	   <br/> <br/>
    	   <h:commandButton value="Check Description" 
    	      action="#{test.checkDescription}"/>	
    	</h:form>
 
    </h:body>    
</html>

Test.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
/**
 * Managed bean.
 * @author w3schools
 */
@ManagedBean(name="test")
@SessionScoped
public class Test {
	private String description;
 
	public String getDescription() {
		return description;
	}
 
	public void setDescription(String description) {
		this.description = description;
	}
 
	public String checkDescription() {
		if(description == null || description.equals("")){
			return "fail";
		}else{
			return "success";
		}
	}
}

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
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_2_0.xsd">
 
<navigation-rule>
   <from-view-id>test.xhtml</from-view-id>
   <navigation-case>
      <from-outcome>success</from-outcome>
      <to-view-id>welcome.xhtml</to-view-id>
   </navigation-case>
 
   <navigation-case>
      <from-outcome>fail</from-outcome>
      <to-view-id>test.xhtml</to-view-id>
   </navigation-case>
 
</navigation-rule>
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	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-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    </servlet>
 
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

welcome.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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">
	<h:head>
		<title>JSF input area example.</title>
	</h:head>
    <h:body> 
    	 <h3>Description: <h:outputText value="#{test.description}"/></h3> 
    </h:body>
</html>

URL:

http://localhost:7001/JSFExample5/faces/test.xhtml

Output:

JSF example6-1
Enter Description.
JSF example6-2
Click on Check Description button.
JSF example6-3
 
Download this example.