• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JSF 2 JavaScript Namespaces Example

March 31, 2014 //  by Amr Mohammed//  Leave a Comment

Already you’ve seen the implementation of monitoring Ajax (request/response) using monitor JavaScript function. That method is fragile, however, because it can be overwritten by another JavaScript method of the same name. To prevent that replacement from happening, you could name your function something more unique, such as net.javabeat.monitor.

For protecting our JavaScript from being overwritten, we implement a simple map that serves as namespace. it seems we’ve two newly concepts must be defined. When you implement a custom components that maintain data on the client. Putting that data in a map, keyed by the client identifier of the component to which the data is associated, is a way to ensure that multiple Ajax-based custom components of the same type that store data on the client, can exist in a single page.

1. The View

index.html

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<script>
		if(!net) var net = {}
		if(!net.javabeat){
			net.javabeat = {
				monitor:
				function (data){
					var loading = document.getElementById("image");
					if(data.status == "begin"){
						loading.style.display = "block";
					}
					else if(data.status == "success"){
						loading.style.display = "none";
					}
				}
			}
		}
	</script>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Using JavaScript Namespace Example</h2>
		<h:form prependId="false">
			<h:inputText id="input" value="#{indexBean.message}"/>
			#{' '}
			<h:commandButton value="Display Text" action="#{indexBean.action}">
				<f:ajax execute="@this input" render="output" onevent="net.javabeat.monitor"></f:ajax>
			</h:commandButton>
			#{' '}
			<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
			<h:graphicImage id="image" value="#{resource['images:ajax-loader.gif']}" style="display:none;"></h:graphicImage>

		</h:form>
	</f:view>
</h:body>
</html>

2. Managed Bean

package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class IndexBean {
	private String message;

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String action() throws Exception{
		// Do heavy processing, simply 🙂
		Thread.sleep(6000);
		System.out.println(message);
		return "";
	}
}

3. The Deployment Descriptor (web.xml)

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_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<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.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<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>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

4. JSF2 JavaScript Namespace Demo

The below snapshots show you how can you employ the concept of JavaScript Namespace for preventing conflict naming of JavaScript function by providing a keyed map.

JSF 2 JavaScript Namespace Example 1

 

JSF 2 JavaScript Namespace Example 2

JSF 2 JavaScript Namespace Example 3

[wpdm_file id=47]

Category: JSFTag: JSF 2

About Amr Mohammed

Previous Post: « @FunctionalInterface Annotation in Java 8
Next Post: JSF 2 Composite Component Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact