Enterprise Java Technologies Tech Tips Tips, Techniques, and Sample Code Welcome to the Enterprise Java Technologies Tech Tips for February 25, 2006. Here you'll get tips on using enterprise Java technologies and APIs, such as those in Java 2 Platform, Enterprise Edition (J2EE) and Java Platform, Enterprise Edition (Java EE). This issue covers: * Using AJAX With Non-HTML Markup in JSF * Accessing a Secure Enterprise Bean From a Java Client or Through Java Web Start Technology These tips were developed using an open source reference implementation of Java EE 5 called GlassFish. You can download GlassFish from the GlassFish Community Downloads page (http://java.sun.com/javaee/glassfish/getit.jsp). You can view this issue of the Tech Tips on the Web at http://java.sun.com/developer/EJTechTips/2006/tt0225.html. You can download the sample archive for the tip "Using AJAX With Non-HTML Markup in JSF" at http://java.sun.com/developer/EJTechTips/download/ttfeb2006renderkits.zip. There are two sample archives for the tip "Accessing a Secure Enterprise Bean From a Java Client". One is for a standalone client example, the other is for a Java Web Start example. You can download the archive for the Java Web Start example at http://java.sun.com/developer/EJTechTips/download/ttfeb2006stand_alone_client.zip. You can download the archive for the standalone client example at http://java.sun.com/developer/EJTechTips/download/ttfeb2006acc-mejbClient.jar. Any use of this code and/or information below is subject to the license terms at http://developers.sun.com/dispatcher.jsp?uid=6910008. See the Subscribe/Unsubscribe note at the end of this newsletter to subscribe to Tech Tips that focus on technologies and products in other Java platforms. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - USING AJAX WITH NON-HTML MARKUP IN JSF by Roger Kitain JavaServer Faces (JSF) technology (http://java.sun.com/j2ee/javaserverfaces/index.jsp) is a framework that simplifies building user interfaces for Java EE and J2EE applications. The March 24, 2004 Tech Tip, "Introducing JavaServer Faces Technology" (http://java.sun.com/developer/EJTechTips/2004/tt0324.html#2) gave a brief overview of the technology. It also showed how to create a JSF application that includes GUI components that are modeled by the JSF framework. A later tip showed how to create custom components with JavaServer Faces technology (http://java.sun.com/developer/EJTechTips/2004/tt1123.html#2). Since the publishing of those tips, the technology has gone to the 1.2 level. One of the new features in JSF 1.2 (http://jcp.org/en/jsr/detail?id=252) is the ability to support multiple render kits in a single JSF application. In JSF, render kits are used to present the user interface in a markup such as HTML. JSF comes with an HTML render kit, but you could write a render kit to display user interface components in other markup languages such as Scalable Vector Graphics (SVG) or XML User Interface Language (XUL). You might want to take advantage of the strengths that each markup language provides by combining them in a single JSF application. For example, you can use SVG to create sophisticated graphics and animations for an application. However SVG does not have a widget set which includes buttons or other components. You have to create these widgets using a markup. In contrast, XUL has a complete set of user interface controls that can easily be used, but it lacks the graphical capabilities that SVG provides. Common to both of these markups is the lack of a built-in form submission mechanism like the one available in HTML. However Asynchronous JavaScript and XML (AJAX) can be used with some JSF 1.2 features to effectively produce form submissions from non-HTML markup. In this tip you'll see a demonstration that uses AJAX and three render kits (HTML, SVG, and XUL) in a JSF application. (For more information about AJAX see the November 22, 2005 Tech Tip, "Using AJAX with Java Technology".) JSF Life Cycle Example User interactions with a JSF application are processed in a series of steps known as the "JSF life cycle". Typically the life cycle is illustrated as a set of connected boxes, with each box identifying a phase in the process. Lines with arrows show the flow from one phase to the next. Accompanying this tip is an example JSF application that displays an animated version of the JSF life cycle. As mentioned earlier, the application uses the HTML, SVG and XUL render kits. The application begins with the display of an HTML page that gives some background and design details pertinent to the demonstration. This page is produced with the standard HTML render kit. If you click the Next button at the bottom of the page it displays an SVG page that is rendered with an SVG render kit. The SVG page graphically illustrates the JSF life cycle. If you click on any box that represents a life cycle phase (such as Restore View Phase), it uses AJAX to generate a form submission. In response, you should see an XUL page that displays more detail about that JSF life cycle phase. Below the JSF life cycle illustration is a larger box that contains various buttons with labels such as Initial Request and Validation Error. If you click on these buttons you'll see an animated display of a specific process flow through the life cycle phases (for instance, the process flow for handling an initial request). Let's take a look at some of the code for the demonstration. Posting From The Client First, let's examine the SVG page. Here is a snippet of the SVG page written with JSF tags: <%@ page contentType="image/svg+xml"%> <%@ taglib uri="http://java.sun.com/jsf/svg" prefix="g" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> ... ... ... Notice the page directive that indicates the content type of the page: <%@ page contentType="image/svg+xml"%> and the tag that indicates that SVG is the rendering technology for the page: You can learn more about the directives, tags, and attributes that need to appear on a page that uses a render kit such as SVG, in the article "Creating and Using a Custom Render Kit" (http://java.sun.com/j2ee/javaserverfaces/reference/docs/customRenderKit.html). In response to the information on the SVG page, the SVG render kit on the server produces the following SVG markup: ... ... Restore View ... _id4:_id6 SVG This code is produced by various renderers in the SVG render kit. The encodeBegin() method of the FormRenderer produces the following ECMAScript file references: and also the starting "form" group: The action attribute in the starting "form" group is used to identify this SVG element as a "form" element. The element is widely used in SVG. The ButtonRenderer and TextRenderer encode methods produce the starting and ending group elements for the button control, and the associated dimensions and label for the button control: Restore View Note that the onclick method name, form_post, is determined from the button control's parent form component: public void encodeBegin(FacesContext context, UIComponent component) throws IOException { ... UIComponent root = context.getViewRoot(); UIComponent myForm = component; while (!(myForm instanceof UIForm) && root != myForm) { myForm = myForm.getParent(); } String formMethodName = myForm.getClientId(context) + "_post(evt)"; writer.writeAttribute( "onclick", formMethodName, "onclick"); The FormRenderer.encodeEnd() method writes out page state and the ending group element for the form control: _id4:_id6 SVG It also produces the JavaScript function that will collect the post data and send the request: The mapping is such that the request goes to the JSF controller. The functions getForm, getPostData and sendRequest are all defined in the http-svg.es ECMAScript file. (You can find the http-svg.es file in the renderkits\src\script directory of the example JSF application.) For example, here's part of the definition of the getPostData function: function getPostData(form, control) { var formValues = new Array(); formValues[0] = new Object(); formValues[0].id = control.parentNode.id; formValues[0].value = control.parentNode.id; formValues[1] = new Object(); formValues[1].id = form.id; formValues[1].value = form.id; ... var postData = ""; for (var i=0; i