In this tutorial you will learn about the JSF 2 html outputScript tag.
JSF 2 h outputScript
In this tutorial you will learn about the JSF 2 html outputScript tag.
<h:outputScript> tag of JSF 2 html tag library is rendered to the HTML <script> element. In simple you can say that this tag is used to include your Javascript file into your JSF application. Using the 'target' (optional) attribute of this tag you can specify that within which element your Javascript shall be rendered. You can see the effect of use of 'target' attribute by viewing the HTML source code of the view page.
Attributes of JSF 2 h outputScript
- converter : This is an optional attribute. This attribute is used when you are required to invoke a Converter class for this component.
- id : This is an optional attribute. This attribute is used
to make this component uniquely identifiable within its closest parent
component. Value of this attribute must be unique within its closest parent.
- rendered : This is an optional 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 an optional attribute. This attribute specifies the current value of the component.
- library : This is an optional attribute. This attribute is
used to specify the libraryName. This library should be reside in the
'resources' folder. (For detail see the directory Structure).
- name : This is an optional attribute. This attribute is used to specify the resourceName. (for example name.js).
- target : This is an optional attribute. This attribute is
used to specify the resource's target area within which element the resource
will be rendered. (for example value of target may be the "head", "body" etc.
- binding : This is an optional attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.
Example :
In this tutorial I am giving a simple example which will demonstrate you about how to use the JSF 2 h outputScript tag in JSF applications. In the example given below you will see that a Javascript code will be executed when a button on the view page will be clicked. For this I have created a JavaBeans named 'NameBean.java' with the property 'name' of variable type String and their setter-getter method. Then created a Javascript file named 'name.js' which will be called on clicking of button. Next I have created a JSF view page where I have used the <h:outputScript> tag to embed the Javascript code into the JSF application and used the <h:inputText> tag to input the value by the user at run time and also used the <h:commandButton> tag with the attributes 'value' and 'onclick' to submit the value of form. Value entered to the textbox will be fetched in the Javascript code and it will be displayed in the alert box when the sbumit button will be clicked.
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;
}
}
name.js
function hello(name)
{
var name = document.getElementById('form1');
alert('Hi, '+ name.elements[1].value);
}
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">
<h:head>
<title>JSF 2 h outputScript</title>
</h:head>
<h:body>
<h:outputScript library="js" name="name.js" target="head"/>
<h:form id="form1">
<h:outputText value ="Enter Your Name : " />
<h:inputText id="text1" value="#{nameBean.name}" />
<h:commandButton value="submit" onclick="hello()"/>
</h:form>
</h: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>jsfHOutputScript</display-name> <welcome-file-list> <welcome-file>output.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/jsfHOutputScript/output.xhtml in the address bar of the web browser.
Output
When you will execute the above example code you will get the output as follows :
1. The main page will be displayed to input the name into the textbox as follows :
2. When you will input the value into the provided textbox and clicked on submit button then the output will be as follows :
HTML source code when the 'target' attribute of this tag is set to 'head'
<!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"> <head> <title>JSF 2 h outputScript</title> <script type="text/javascript" src="/jsfHOutputScript/javax.faces.resource/name.js.xhtml?ln=js"></script> </head> <body> <form id="form1" name="form1" method="post" action="/jsfHOutputScript/output.xhtml" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="form1" value="form1" /> Enter Your Name : <input id="form1:text1" type="text" name="form1:text1" value="" /><input type="submit" name="form1:j_idt8" value="submit" onclick="hello()" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAALVVQWgTQRSdpE1rayu11VoVi0gsWGVLkUqxiI02pcFYg6nF2kOcZqfNtJuddeZvuilY9CyC4EGEihcPgt48eVGkiCC0oCCC4s2roqAXvTgzSbMppg0eHNhh9u//f97///2/j7+gkCM42j6Lc9hwgVrGCBaZs9gJ1X94sdx++U0NCg6jRothcxingfEYaoAMJyLDLNNzTg4itZrmt8i9RT51gLZOM57tPQ7Eg16Xo7bJuHZuYXvGODc1S9IwcGv14v0WccgKIuQ50qrWvYIWUY08BUunkCNX6a1+kaNu5cczpnGaCCPNsg6ziQ3GhVjMdlwIJzhzCIf8GZIXqLha5QUcbfMBRG03W/7RAdRssTS2xrHlkiSBUjK0+inGLILtlf382rulX1+DKHAJhXJKVeJeVOC2gBZQU6i3poDEeXgjnOdc2AyoctAARf85jmpzjJrIX55MiNJp1ptEXjeboib0VU1eSIIyNgJ1eu1cDVcjBuB0ygUidKyoWPw6XXz1BAB1SteGcO3iRWq3ZFKNSCIRj0WHZHb7NtCgWccyhsg0di0YLgjDEcex8mNsjtg/Hx6ZWBqcHWxSaZjfhZp7mE6m4WUga8mr+78/ePTC82Skff8WaYLTHAZSIeAdfsBjGQwRXuRHm98sEc5xPk4FeNff7rv7Ct+rQYEYqhV0gWhiB+dr1S6NuiqjSoK8e0T2EuFJnCN84vWTE7eXVs4GUTCOGtIWFmIUZwmgVt1FPYqVPUkJy54ZiKNGIW1M7QNQe0GDsp4k4VRScgFPWWRAsianAgrronVpBnVK4Rp9jlWkj2zcHZMVOrfj+e/k57mPr9c6N+BbS8aGy4MkORVgggmImOYYG6dkPqpE3248ffm+5cnToO7Nrr9NSnVK5gWQrDZ6NtP/Y3x1fFvBaN/fRmW6B+fuLNNPu1cLujv9aumvhUDiNxtGO7JXH+o4dGbCZeXyM9VdOAOKVmdVJdyKG8QmPGJiBwj3s7Xmt3d9O3BiSyrMUTAUr1NTWNC0kUxz6sB5/YlwRya6c/MRs25oqLFRqvbR6sNCHfZu1OGaPWrbr7vkQPXUlREupCD0+giUbLeOJKUjSalJDJTZqZFoZKikV7f+T/B/8OlhvgdQEy+meSzvECXbqaftZkC9PxJveJpGBwAA" autocomplete="off" /> </form> </body> </html>
HTML source code without using the target attribute.
<!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"> <head> <title>JSF 2 h outputScript</title> </head> <body> <script type="text/javascript" src="/jsfHOutputScript/javax.faces.resource/name.js.jsf?ln=js"></script> <form id="form1" name="form1" method="post" action="/jsfHOutputScript/output.jsf" enctype="application/x-www-form-urlencoded"> <input type="hidden" name="form1" value="form1" /> Enter Your Name : <input id="form1:text1" type="text" name="form1:text1" /><input type="submit" name="form1:j_idt8" value="submit" onclick="hello()" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVUT0hUQRgfV9dyNdlsMwv0ZEEQb1nCkCRyyRWXVl16JokHm90d3dl9f6aZ7+2+FRI6RxB0iMDo6qFOnrwUIREICQURFN26BgV16tLMrPo2XJEG3se8me+b7/f7vt/M8+8ozARHx0u4gg0PqGVMYFGcxCx85PPrzd7b71tRaBxFLBcXxnEeXJ5GHVDkRBRdq+Czq6NIja7qUWmj8gsD6lx0uZ24DMSHhMfRifmMPtzCzpIxnSuRPIw83L71LCrOWyGEfCaj2pgcgNpLC7QAQ94dtIJa5XJobxZWDsHfCkeGOtQ3FnGeCCPv2sx1iAPGzfS13flglruMcKhdJzWBdkaPzMhRd4Ao5Xh246aEEcEAnOY8IEKolGiHZbtmqb4WQAMypyE8ZweBshYBYSSz2Uw6NSZrOnSAB7WZZYyRRexZMF5fHEwyZtVm3DJxfq9dmFsdLY12KSzVU+hY3PWAeWD4RbAtmXr45wvjo+/LEgz9XwmynFYwkEayil0EUCwgPFPEkOTElEBl6wJVJDnHtQwV4N/70P/kLX7ailrSqE3QZaI7GKq2KSuDzjVHZYLMPSFFQ7iJK4TPba1febT6bjKEQhnUkbewEFPYJoB6tFziqjlxU8JylkYyKCJkTEGfAai37kHduEk4xRZdxjmLjPiMVRShmG5aL1O22w90damprqRCY/NNJNr36o/5rfxla1eiLUF0haPBRpKkoghmXQHJQmHGnaWkmlJLP+5vvPkUXd8Iac2d2x+y1yezJoDYOujl0vCv2e3Z7npQ//6gBt+z5ceb9Ovp7brvyaBberdOJPOgY6rPvrumeejKxBraFVTqTH0OKHW4qprhVtogDuHJAmZAeFCt3XMT/14HThwphTIFQ+l6IYcFzRtmnlMGN/QW4UwWeuAgNNP6VqBg+MxvfEUuHv6KqEnnQTdcq0eZqL4lPYeXrkFwYQUhESBgzP8LKFLp4GoFAAA=" autocomplete="off" /> </form> </body> </html>
[ 0 ] Comments