Ajax
Beans
Callbacks
Components
Events
Exceptions
Faces
Facelets
JSON
Hacks
State 
JNDI
Platform
Utils
Messages
MapWrapper
Reflection
Renderers
ResourcePaths
XML
Servlets
Arrays
Converters
Dates
Numbers
Objects
Strings
The <h:outputScript> renders an HTML "script" element
FOR DETAILS ABOUT VERSIONING AND [localePrefix/][libraryName/][libraryVersion/]resourceName[/resourceVersion] ANALYSYS PLEASE READ HERE.
The JS files used in the following example are stored locally in /resources folder, as in the below figure:
The JS files used in the following example are stored locally in /resources folder, as in the below figure:
Common/basic usage in JSF - loading JS files using the name and library (optional) attribute (notice that the library value represents the common library/module/theme name where all of those resources commonly belong to; nevertheless, if you decide to use a library name, but you don't have a clear purpose, then a name as default or common, or your company name may be a good choice):
<?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://xmlns.jcp.org/jsf/html">
<h:head>
<title>JSF outputScript example (using name and library
attributes)</title>
<h:outputScript
name="js/hello.js"/>
<h:outputScript
library="default" name="js/hello.js"/>
</h:head>
<h:body>
You just saw
some JS alerts!
</h:body>
</html>
Will be rendered in HTML as:
// without library
<script type="text/javascript" src="/JSFOutputScriptExamples_1/javax.faces.resource/js/hello.js.xhtml"></script>
// with library (notice the ln request parameter)
<script type="text/javascript" src="/JSFOutputScriptExamples_1/javax.faces.resource/js/hello.js.xhtml?ln=default"></script>
Data flow in image:
Complete source code on GitHub.
In addition, you can use target attribute to control where to output the JS file:
In addition, you can use target attribute to control where to output the JS file:
target="head" - display within the top of HTML head tag;
target="body" - display
at the end of the body tag;
no target – display at where the tag is placed;
no target – display at where the tag is placed;
Example:
<h:outputScript library="default"
name="js/hello.js" target="body"/>
Renders:
<body>
...
<script
type="text/javascript"
src="/JSFOutputScriptExamples_1/javax.faces.resource/js/hello.js.xhtml?ln=default"></script>
</body>
</body>
More examples:
Loading JS files from CDN URLs using OmniFaces CDNResourceHandler
By default, the <h:outputScript/> tag can load JS files that are stored locally in the /resources folder. Via the OmniFaces CDNResourceHandler resource handler we can configure CDN URL:
First step is to configure the CDNResourceHandler resource handler in faces-config.xml:
<application>
<resource-handler>org.omnifaces.resourcehandler.CDNResourceHandler</resource-handler>
</application>
The next step is to configure the CDN URLs in web.xml via org.omnifaces.CDN_RESOURCE_HANDLER_URLS context parameter (more details about this are available in OmniFaces Showcase):
<context-param>
<param-name>org.omnifaces.CDN_RESOURCE_HANDLER_URLS</param-name>
<param-value>
js/bootstrap.min.js=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js,
default:js/angular.min.js=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js,
default:js/angular.min.js=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js,
default:js/jquery.min.js=#{myBean.jqueryJS}
</param-value>
</context-param>
Notice that a CDN URL can also be set as a property in a managed bean, as you can see for the jquery.min.js file:
package beans;
import javax.enterprise.context.ApplicationScoped;
import javax.inject.Named;
@Named
@ApplicationScoped
public class MyBean {
private final String jqueryJS =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
public
MyBean() {
}
public String
getJqueryJS() {
return
jqueryJS;
}
}
Now, the JS files can be included in page as follows:
<?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://xmlns.jcp.org/jsf/html">
<h:head>
<title>JSF outputScript example
(CDNResourceHandler)</title>
<h:outputScript
name="js/bootstrap.min.js"/>
<h:outputScript library="default"
name="js/angular.min.js"/>
<h:outputScript library="default"
name="js/jquery.min.js"/>
</h:head>
<h:body>
You just loaded Bootstrap, Angular and jQuery
from CDN.
</h:body>
</html>
This will be rendered in HTML as:
<script type="text/javascript"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Combine all JS files in a single script using OmniFaces CombinedResourceHandler
The CombinedResourceHandler claims to considerably improve page loading. This is achieved by removing all the separate script and stylesheet resources which have the target attribute set to "head" from the UIViewRoot and create a combined one for all scripts and another combined one for all stylesheets. So, instead of firing a GET request per resource, the browser will fire a single GET request for all scripts, and another one for all stylesheets. Further, theCombinedResourceHandler is responsible to sequentially return all the resources combined in these requests. Visually speaking, something like below:
<?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://xmlns.jcp.org/jsf/html">
<h:head>
<title>JSF outputScript example
(CombinedResourceHandler)</title>
<h:outputScript
name="js/hello.js" target="head"/>
<h:outputScript
library="default" name="js/hello.js"
target="head"/>
</h:head>
<h:body>
You just saw
some JS alerts!
</h:body>
</html>
If we run the application and take a look at the HTTP requests fired, the time in milliseconds consumed by each request is illustrated below (6 ms):
The <h:outputScript/> tags will be rendered in HTML as:
<script type="text/javascript" src="/JSFOutputScriptExamples_1/javax.faces.resource/js/hello.js.xhtml"></script>
<script type="text/javascript" src="/JSFOutputScriptExamples_1/javax.faces.resource/js/hello.js.xhtml?ln=default"></script>
Now let’s add CombinedResourceHandler in the equation and configure it in faces-config.xml:
<application>
<resource-handler>org.omnifaces.resourcehandler.CombinedResourceHandler</resource-handler>
</application>
If you run the example again and look at the HTTP requests stats, you should see something like below (3 ms, so 3 ms faster!):
This time, instead of seeing multiple <script/> tags rendered in HTML, we see a single one:
<script type="text/javascript"
src="/JSFOutputScriptExamples_2/javax.faces.resource/eNrLKtbPSM3JydfLKq5JSU1LLM0pscpCiAEAv7QL8g.js.xhtml?ln=omnifaces.combined&v=1448534403614"></script>
More resources on Constantin Alin, ZEEF page.
Script/Stylesheet Related in JSF Extension on JSF ShowCase ZEEF page.
<h:inputText/> 
ZEEF JSF Beginner's Guide 
JSF 2 Tutorials at www.mkyong.com 
JavaServer Faces (JSF) Tutorial 
Postări
Niciun comentariu :
Trimiteți un comentariu