Archive for JSF

Composite JSF Components

Writing a versatile input/output component for JSF, I realized two things:

  1. Composition works great. It is almost trivial to delegate encoding and decoding to existing components like the JSF core input tags via composition. Facelets templates offer this functionality in a declarative way without coding (or compiling), and I wouldn’t want to use JSF without them at all, but it’s nice that composition is rather easy in core JSF anyway.
  2. You don’t want to pull SelectMany values from ExternalContext#getRequestParameterMap(), but use ExternalContext#getRequestParameterValuesMap() instead.
  3. Doing a “render-time” iterator component similar to Facelets’ ui:repeat is insanely hard to do right. Really. Rendering the child components multiple times with different data is easy, but to let them perform correctly on every stage of the lifecycle is near to impossible without some intimate knowledge of JSF. I’d really like to read a book on these kinds of advanced JSF topics (and not on designing another calendar component), but I’ve yet to find one.
Advertisements

Leave a Comment

JSF/MyFaces f:selectItems and automatic converters

JSF converters provide a way for mapping complex Java types to the UI. A class converter is registered for a type and is then called every time an object of the given class is rendered to the UI (or posted from a form), unless another converter is specified. For example, registering the following converter in your faces-config.xml provides automatic conversion of Enum values (a similar converter is already included in JSF 1.2, but missing in 1.1):

<converter>
<converter-for-class>java.lang.Enum</converter-for-class>
<converter-class>com.dlicht.converter.EnumConverter</converter-class>
</converter>

With this, you can for example use Enums for selectItem values. What I did not fully realize and what cost me hours before I stepped through the MyFaces source is that the converter is determined through the input component’s value mapping type, not the value type of the selectItems themselves. Although this does make sense (because it’s the bean property that represents the the component value, and not the current selectItem, and the selectItem values of a select list don’t even have to be of the same type), it’s not entirely trivial. For example,

<h:selectOneListbox value=”#{myBean.enumProperty}”>
<f:selectItems value=”#{myBean.enumValues}”/>
</h:selectOneListbox>

works without an explicit converter, but

<h:selectOneListbox>
<f:selectItems value=”#{myBean.enumValues}”/>
</h:selectOneListbox>

does not.

Comments (1)

Ajax, JSF and JSON: JSON-RPC-Java

While ajax4jsf is a very nice Ajax framework for JSF, it’s sometimes too expensive to submit an entire form and re-render (parts of) the page just to update some data. For client-side components, like many of Dojo’s UI widgets, JSON is a simple and convenient way to represent data. It is especially useful for components that need to pull data from the server, such as a result table scrolling through thousands of rows. Instead of re-rendering the entire page, the required data is transferred via JSON and then the widget is re-rendered using JavaScript. JSON-RPC-Java provides a convenient wrapper for Java RPC (Remote Procedure Call) through JSON, i.e. both the server request and the response are encoded in JSON (instead of, say, XML).

In JSON-RPC-Java, remote procedure calls are routed through a single servlet. The server-side methods are implemented in POJOs and registered with the user session. Parameter types are determined with reflection and mapped to the corresponding JavaScript types. To get an impression of what this is about, consider this trivial (and somewhat useless) Java class implementing an uppercase service:

class MyObject {
public String toUppercase(String value) {
return value.toUpperCase(Locale.ENGLISH);
}
}

This code runs somewhere on your web server, giving you full access to any business data and methods necessary. A dynamic JavaScript proxy provided by JSON-RPC-Java allows you to call the remote procedure like a local function, e.g. to call MyObject#toUppercase(“sheep”) you would code in Javascript:

new JSONRpcClient("/jsonRpcServlet").MyObject.toUppercase("sheep")
-> "SHEEP"

In this case, the call is synchronous, i.e. the browser blocks until the response arrives. In most cases, this is not what you want for a responsive user interface. To make asynchronous calls, the first parameter to the remote procedure is a function reference. The JSON/RPC call will then proceed immediately, and the callback function will be executed when the server response arrives. For example:

function myCallback(result) { alert(result); };
new JSONRpcClient("/jsonRpcServlet").MyObject.toUppercase(
myCallback, "sheep")

Compared to using ajax4jsf, this is simple and efficient. However, there are two drawbacks: First, the remote procedure call likely returns raw data, not markup ready to be passed to the client. This is not an issue with Dojo widgets since they are pure client-side JavaScript components, but it prevents you from updating parts of the rendered page without writing Ajax-aware components (which is exactly what ajax4jsf allows you to do).

Second, and not so obvious, the servlet completely circumvents the JSF environment. That means no lifecycle, no phase events, and no JSF managed beans. You gain performance but lose access to any JSF-specific data or methods on the server side. However, it is possible to share data between JSF and JSON-RPC-Java objects using the user’s HttpSession. To allow access to the HTTP request and session objects, any HttpServletRequest or HttpSession parameters to a Java method are automatically set by JSON-RPC-Java. To give another entirely useless example, this remote method would return the current user’s session ID:

class MyObject {
public String getSessionId(HttpSession session) {
return session.getId();
}
}

So far, JSON-RPC-Java has worked great for existing JavaScript components that pull their data from JSON structures, like Dojo’s FilteringTable or TreeV3 widgets. It does, however, require some effort and manual programming for communicating with the server and updating the data, and does not integrate with JSF. It depends on the use-case whether this is worth the trouble – for many common uses of Ajax (form validation, partial page rendering) this is possibly not the case, but when dealing with lots of data it might well be.

Comments (6)

JSF and Ajax: ajax4jsf

Assuming that the component model of JSF is pretty well suited for Ajax applications, I found it surprisingly hard to find an Ajax framework that

  • has native support for JSF and the JSF lifecycle (unlike generic frameworks like AjaxAnywhere),
  • requires no custom Javascript coding for basic event/update mechanisms, and that
  • supports existing components unaware of Ajax.

There is a proof-of-concept implementation of a very JSF-centric approach proposed by Jacob Hokoom that fully utilizes the JSF component tree in the jsf-extensions project. Very promising, but it seems to be in a very early stage and requires JSF RI 1.2.

An existing alternative is Ajax4jsf, a rather mature and capable Ajax filter created and maintained by the Exadel people. Usage is fool-proof: using the a4j tag library, you either attach Ajax behavior to Javascript events (e.g. onchange) of existing input elements, or you add command buttons that emit Ajax calls when clicked, instead of reloading the whole page. When an Ajax event occurs, the form surrounding the element is submitted, making server-side handling identical to that of a common post-back. Ajax4jsf tags accept a list of component IDs to be re-rendered when the Ajax call was processed, automagically updating independent regions of the page. You don’t even have to identify those regions manually, for example, if a datatable should be updated – pass its ID to a4j and it will be updated when the server response arrives.

My only gripe so far is performance – by default, every request is routed through a Tidy filter, even for non-Ajax pages. This can be disabled by setting the forceparser init parameter to false (in the web.xml filter definition), which will only tidy up Ajax responses.

Oh, and if you’re using Facelets: read the docs ;). Remove the Facelets view handler from your faces-config.xml and set the org.ajax4jsf.VIEW_HANDLERS context parameter in the web.xml instead.

Besides possible performance concerns, I believe ajax4jsf’s interface is pretty much perfect for ajaxifying JSF applications without special needs – that is, wiring client-side events to JSF beans and rendering partial updates of a page. I’m all for simple, straight-forward solutions that just work – which is also the reason I was slightly disappointed of Pro JSF and Ajax with its clumsy (but surely more flexible) mabon. I guess I just don’t want to write more client-side Javascript than absolutely necessary for a pleasing user experience.

Comments (5)

Passing parameters to links in Facelets

I’m a JSF/Facelets newbie – so far there’s been a lot of cursing, but also some moments when I had the impression of “something done right”.

In JSF, command links are used to wire buttons to actions in backing beans. Unfortunately, you cannot pass parameters directly to the action method – but you can set parameters in your backing bean before calling the action. To set a parameter, add a f:param to the command link body – e.g.

<f:param name="myParameter" value="#{myValue}"/>

In the backing bean, the passed value can be retrieved from the faces context (similar to HttpServletRequest#getParameter for servlets). It works, but it’s inconvenient and errorprone, and requires conversion for all but string parameters.

Fortunately, there are alternatives. There’s the non-standard Tomahawk updateActionListener that directly works on bean properties. For example, you could just write

<t:updateActionListener 
   property="#{myBean.myProperty}" value="#{someValue}"/>

and forget about it. Unfortunately, Facelets doesn’t include the updateActionListener out of the box. But in JSF 1.2 there’s something even better – the setPropertyActionLister. It works exactly like the Tomahawk listener, but it’s standard and hey – it’s already been backported to Facelets 1.1:

<f:setPropertyActionListener 
   target="#{myBean.myProperty}" value="#{someValue}"/>

So far it’s worked great and it is definitely better than manually setting parameters via f:param.

Comments (14)