JSF 2.0 – Images, CSS and Java Script

July 2, 2010

Integrating JavaScript and JSF

JSF and JavaScript can combine their forces to develop powerful applications. For example,
let’s see how we can use JavaScript code with h:commandLink and h:commandButton to
obtain a confirmation before getting into action.

Getting ready

We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0
classes were obtained from the NetBeans JSF 2.0 bundled library.

How to do it…

As you know the h:commandLink takes an action after a link is clicked (on the mouse click
event), while h:commandButton does the same thing, but renders a button, instead of
a text link. In this case, we place a JavaScript confirmation box before the action starts its
effect. This is useful in user tasks that can’t be reversed, such as deleting accounts, database
records, and so on.

Therefore, the onclick event was implemented as shown next:



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

			<title>JSF and JavaScript example</title>

		</h:head>

		<h:body>

			<!– using h:commandLink and JavaScript –>

			<h:form id=”myCLForm”>

				<h:commandLink id=”cmdlinkID” value=”Delete record”

					onclick=”if (!confirm(‘Are you sure you want to delete the

					current record?’)) return false”

					action=”#{bean.deleteRecord}”/>

			</h:form>

			<!– using h:commandButton and JavaScript –>

			<h:form id=”myCBForm”>

				<h:commandButton id=”cmdbtnID” value=”Delete record”

					onclick=”if (!confirm(‘Are you sure you want to delete the

					current record?’)) return false”

					action=”#{bean.deleteRecord}”/>

			</h:form>

		</h:body>

	</html>

How it works…

Notice that we embed the JavaScript code inside the onclick event (you also may put it
separately in a JS function, per example). When the user clicks the link or the button, a JS
confirmation box appear with two buttons. If you confirm the choice the JSF action takes
place, while if you deny it then nothing happens.

There’s more…

You can use this recipe to display another JS box, such as prompt box or alert box.

Getting a JSF inputText value from JavaScript

In the next example we will type text in a JSF h:inputText component, and after each
character is typed, a JavaScript alert box will reveal the text inserted so far.

Getting ready

We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0
classes were obtained from the NetBeans JSF 2.0 bundled library.

How to do it…

The secret of our recipe consists in using the onkeyup event for calling a JavaScript function.
Here it is the code:



	<h:head>

		<script type=”text/javascript” language=”javascript”>

			function getInputText(text)

			{

				alert(text.value);

			}

		</script>

	</h:head>

	<h:body>

		<h:inputText id=”inputId” value=”"

			onkeyup =”getInputText(this);”/>

	</h:body>

How it works…

When a character is typed in the h:inputText , the onkeyup event is fired and the
JavaScript getInputText function is called. This JS function extracts the text from the
JSF h:inputText through the received argument. Notice that the this keyword is used.