My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians


joi, 26 noiembrie 2015

[JSF Page Author Beginner's Guide] JSF <outputScript> / HTML5 <script>

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:

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" "">
<html xmlns=""
  <title>JSF outputScript example (using name and library attributes)</title>
  <h:outputScript name="js/hello.js"/>
  <h:outputScript library="default" name="js/hello.js"/>
  You just saw some JS alerts!

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:

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;


<h:outputScript library="default" name="js/hello.js" target="body"/>


 <script type="text/javascript" src="/JSFOutputScriptExamples_1/javax.faces.resource/js/hello.js.xhtml?ln=default"></script>

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:


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):


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;

public class MyBean {

 private final String jqueryJS = "";

 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" "">
<html xmlns=""
  <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"/>
  You just loaded Bootstrap, Angular and jQuery from CDN.

This will be rendered in HTML as:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

Complete source code on GitHub.
Check the OmniFaces Showcase and Mastering OmniFaces to learn more.

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" "">
<html xmlns=""
  <title>JSF outputScript example (CombinedResourceHandler)</title>
  <h:outputScript name="js/hello.js" target="head"/>
  <h:outputScript library="default" name="js/hello.js" target="head"/>
  You just saw some JS alerts!

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:


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&amp;v=1448534403614"></script>

Complete source code on GitHub.
Check the OmniFaces showcase and Mastering OmniFaces to learn more.

See also
More resources on Constantin Alin, ZEEF page.
Script/Stylesheet Related in JSF Extension on JSF ShowCase ZEEF page.

Niciun comentariu :

Trimiteți un comentariu


Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors