Werners Blog

JSF Ajax and Multiple Forms

2011-11-25T05:09:00.000-08:00

This blogpost is about a problem which about 80% of all user problems regarding JSF Ajax in the myfaces mailinglist revolve around. Namely how do I handle the jsf ajax in a multiple form scenario.

JSF Ajax and multiple forms, a standard case, which should be easy right.
Let's have a small look at an example:

As we see here, two forms each updating a component in itself via ajax.
Now what happens if we submit the forms alternating.

After a while we run into a ViewRoot cannot be found Exception on the server side.

We did everything right, why do we face this issue?

The answer lies in a bug in the JSF Ajax protocol, more precisely the way the ViewState is processed.

Lets have a look at an Ajax response:

Here we see the root cause of the problem. There is a parameter defining the ViewState with the identifier javax.faces.ViewState, however it is not clear where it belongs to.

Practically a viewstate must be attached to a form. So the issuing form definitely must receive it. However what about the other forms?

And here is the root cause of the error. Only the issuing form is updated and the ViewState which is dependend on the viewroot not the form in the second form is not updated.

This image shows exactly what happens:

As you can see only one form is update the second form now has a viewstate which is not the current one and at one point is dropped from the ViewState history, a classical concurrency issue.

So the solution would be to update all forms in the html document, right?

Theoretically yes, but there is one API which prevents this simple solution. Portlets.
In a portlet environment you have multiple viewroots all belonging to different jsf session instances on the server.

The next logic solution would be to update all jsf elements under ViewRoot.

Again, a good idea, but the protocol prevents it. On the pure client side we do not have any marker or indicator, which tells the ajax code where the current ViewRoot begins.

To ease this protocol problem an extension to the jsf spec was added under 2.1 which eases this problem. According to the spec you have to add the second form manually as render target. Something which both implementations follow. Here is a snippet which shows the solution:

Here we can see, we have added the second form as render target.

Now both forms will be updated and the viewstate always will be up to date.

This solution while being spec compliant is not satisfactory. Sometimes you dont know if a certain form is still present after the ajax case. Is there still a way to update all forms in the page or at least to take the form id out of the equation?

Unfortunately not within the bounds of the specification. However, being aware of this issue, I have added in Apache MyFaces additionally to the spec behavior two other ways to resolve the issue.

First, you don't have to define the form as render target, but you can define any element within a form as render target and the form will be updated.

Secondly, the probably best solution. A configuration parameter which forces MyFaces to update all forms in a page.

With following code snippet you can enable this mechanism:

Once you have added this snippet of javascript, myfaces will be in no portlet mode and will enforce an update all forms with the viewstates policy.

Note: While this method wont break the code if you switch to mojarra, you will not get the benefits, because Mojarra does not yet have a similar solution to the issue.

JSF Ajax Encoding

2011-11-24T02:05:00.000-08:00

The entire story started when we got the request to encode everything in ISO-8859-51 including the ajax cycle. Well first I thought it was easy just change the encoding on the javascript side, let the server handle the rest. The encoding was easily detectable on the javascript side simply by checking the xhtmls encoding (the meta tag head encoding itself would have been another option, but since we are nailed down to xhtml anyway due to facelets we have an easier way)
Easy, I thought, but then I ran into browser hell.

The problem normally would be easily resolvable. The XHR object has the option of adding
xhr header content type:

xhr.setRequestHeader("ContentType", "application/x-www-form-urlencoded; charset=ISO-8859-15");

The problem now are the browsers themselves. By testing the dynamic encoding on various browsers following came out:

*Browser*	*Actual Encoding*
Mozilla 7	UTF-8
Chrome	UTF-8
IE	ISO-8859-15
Opera	ISO-8859-15

So what does this mean, only opera and IE got it right. Which means the path of allowing non UTF-8 submits is blocked for now.

However JSF automatically deals with the problem properly. While I implemented the most of the Ajax part of myfaces, I have to admit the actual encoding part was provided by another project, namely j4fry and its implementors worked on that part, so I never gave a second thought. However both implementations deal the same way with the issue.

First ajax submits are UTF-8 encoded, this at the first look could pose problems with non UTF pages. It turns out there are none.

The solution both implementations follow is to encode the actual key value pair parameters into a utf url encoded representation.

Both implementations seem to apply the encodeURIComponent function of javascript-
Now now matter what content type the page has, always a proper utf-8 representation of the original content will be passed down.

Given the response type also then is UTF-8 what happens with the response. After all the page needs to handle the response properly in its own encoding.
Well there MyFaces and Mojarra differ slightly. Both in compliance with the spec, encode the response in a XML CDATA block. However MyFaces does additional escaping of non ascii chars with their unicode representation, while Mojarra simply pushes the content byte per byte into the CDATA block.

Here is an example:

Mojarra:

Here it is clearly visible that the cdata block has a different encoding than the outer UTF-8 encoded xml. In the final page representation all the special chars are visible again as they should be.

However MyFaces goes one step further and escapes the content additionally to get rid of the non utf-8 representation of the characters.

However this comes from the fact that myfaces basically also does an escape of special chars at a full page refresh, so the core behavior regarding the partial response is the same.

So what happens for instance if you just tamper with the UTF header.
You automatically will run into problems due to the uri encoded UTF-8 representation of the parameters. In the worst case you will trigger a server error because of non decodable parameters, in the best case if you pass down ascii only chars you will get it through, in the normal case you will get junk in which is wrongly decoded.

See here an example on IE9 and Mojarra:

The question remains, are both save from a client point of view? Theoretically it should be since everything is embedded in a CDATA block.
However I cannot say if the browsers swallow really everything within their browser engines which is embedded in a CDATA block (aka every byte combination outside of their encoding).

It comes down again to the golden rule #1 in web programming, use UFT-8 and never bother with other encodings, if you can. If you have to, be prepared to enter the valley of tears, after all UTF-8 now has been for almost a decade the fix for all the encoding issues in the web space.

Introducing the MyFaces jsf.js Modular Includes

2011-11-08T07:34:00.000-08:00

Introduction:

Why modular jsf.js includes, there is one jsf.js file, right?

Since the beginning of the introduction of jsf.js in JSF there has been only one jsf.js file which serves all Ajax needs.
However, at least for Apache MyFaces there have been a lot of extensions added such as:

iframe ajax fileupload
html5 form detection
client side i18n message support for various languages (including chinese)
legacy browser support down to blackberry 4.7 and winmobile 6.5 and ie6
browser optimisations for browsers supporting dom level3
queue control for the ajax request queue
timeout handling
better error handling
delay handling
modular structure which can be changed at runtime to replace it with your own implementation of subparts
clear distinction between api and impl on codelevel

(More info on many of those extended features see following Link)

Most of those extensions will make it one way or the other into the official jsf spec. However different scenarii have different needs.
While most legacy mobile browsers are now slowly phased out (and is seen as deprecated) ie6 for the time being is still supported with a burden of legacy code.
However in a pure modern mobile environment for instance you need smaller files and no legacy code at all. Many users are also perfectly happy with a pure implementation of jsf.js according to the spec without any extra features. Other users only need a subset of those features and want to leave out the other (i18n support for instance)

The advantage of dropping code is smaller filesizes, faster code due to less lines which have to be processed and less fallbacks which have to be prechecked. Something worthwhile to explore given modern mobile browser environments and situations where you simply want to be as lean as possible.

So what is the solution for all this

The MyFaces jsf.js Modular Includes

As of MyFaces 2.1.4 a modular include system will be added. Simply by adding following parameter to your web.xml you will be able to determine what will be included

With the parameter

org.apache.myfaces.JSF_JS_MODE

and the allowed values of

normal
modern
minimal-modern

you will be able to adjust which version of jsf.js is included. If you need extra functionality you can include the subparts excluded from your version as separate Javascript resources via normal jsf mechanisms.

Following image shows the version of each file and the extra functionality:

Modular include parts

As you you can see you can stack and mix all the modules you need by simply choosing a base jsf.js and then you are able to stack the extra functionality needed by adding a separate include.

That way you have the choice between filesize, number of includes and features according to your needs.

Example on how to Enable the Modular Includes with Additional Features

The following example will include the minimal-modern jsf.js and will stack all the extra functionality on top of it.

web.xml

in your page template

As you can see all you need to to is to reference the correct js file additionally which is hosted under the resource module myfaces and you are ready to go.

Mojarra vs. MyFaces performance

2011-10-14T02:08:00.000-07:00

Hello and welcome.

Since Andy Schwarz posted following link in the MyFaces mailing list, with especially page #73 showing MyFaces in a relatively bad light compared to Mojarra without any further data given, I have become curious where we really stand. I could not believe the diagram shown here, because it did not resemble my personal day to day experience (the entire numbers shown also the html size etc..) seemed like a rather old build of MyFaces probably around 2.0.2-2.0.4.

My personal assumption was that the implementation used was a rather old MyFaces version.
We have made major performance improvements between 2.0.4 and the current snapshot version which is 2.1.4-SNAPSHOT and 2.0.10-SNAPSHOT and Mojarra on version 2.1.2.

So here is my test setup. I basically took an existing integration test suite I have had developed the last month and added client side timestamp performance measurements.
By comparing the succeeded tests on both platforms under identical conditions you can get a good overview over the client side and server side performance numbers of both implementations.

Both tests were run in Production mode which resembles a live system under the same setup, with all optimisations on, a Maven Jetty configuration was used as servlet runner. Test browser was the latest Mozilla Firefox, but on other browsers the results are pretty similar.

So here are the numbers:

Testcase	MyFaces (ms)	Mojarra
1. JSF Protocol Tests	239	207
2. Full Body Replacement	42	35
3. Multi form situation	4134	4426
4. Testing for decorated api calls	24	34
5. Double Eval Detection	2047	2060
6. Table Test, replacement of table elements	7289	9229
6. Partial Page Rendering Nav Case	2168	2308
7. Event Lifecycle test	130	131

Tests 1 and 2 are pure servlet based tests so they give a good indication about the javascript performance differences, which are roughly in a 10% margin. (with MyFaces being somewhat slower, but that is understandable given the extra functionality provided and the testing framework influencing slightly the performance of myfaces but not Mojarra (an issue already fixed))

The rest of the tests are slightly ahead of Mojarra, so the server seems to be under the same test setup conditions slightly ahead of Mojarra, here also in a 10-15% range.

On the page rendering side however the generated code from Mojarra seemed to be about 5-10% smaller than MyFaces´s code. The difference used to be much bigger but some improvements have been made in this area as well on our side.

To sum this up, performancewise you definitely cannot go wrong with any of both implementations.
And none of both implementations has a significant performance advantage over the other.

But back to the original article.

I really would like which version the authors used to come to their conclusion on page #73 and how it would look like with the latest codebase.

Marrying JSF with Scala - Part2

2011-07-14T03:27:00.000-07:00

View Controllers and Navigation

While part1 showed us how we can do managed beans in Javascript, we now will go a little bit deeper. In this part we will talk about view controllers and navigation implemented in Scala.

Short Introduction to ViewControllers

While JSF does not know the ViewController pattern, for JSF is everything a managed bean, it makes sense to name a certain set of managed beans ViewControllers.
Per definition in JSF a ViewController is a managed bean, which deals directly with the user interface interaction from the backend.

Such interactions are

Actions
Events
Listeners
etc...

A typical plain Java Viewcontroller

So a typical Java ViewController in a plain JSF environment looks like following.
Everyone who has programmed JSF is familiar with those patterns.

Sidenote: there are frameworks which add dedicated view controllers with dedicated callbacks for postCreate, preRender

ViewController in Scala

The question now is, how does this look in Scala. Again, this code is somewhat smaller thanks to the absence of setters and getters. However the structure of this class is not 1:1 translatable to Java due to following new construct:
So what is this object all about?
Scala does neither know static classes nor variables, instead it has singletons in its language core as companion pattern to classes. If a construct is defined via object instead of class, then the resulting object is a singleton. To make the code tighter, Scala also allows imports everywhere. Members of singletons can be imported simply by import <Singleton>._ so that we can call them directly in our code.
If you notice in our action callbacks we return the members of the singleton directly, like we would do it with static variables in Java.

MyFaces Codi Typesave Navigation

MyFaces Codi has an interesting feature, the so called typesave implicit navigation.

While JSF2 already eased the lives of developers by introducing an implicit navigation (aka return value of an action == page name if no navigation rule is given), MyFaces Codi goes one step further.
It maps pages to classes (page name must be the class name) and it allows the grouping of navigation elements in wrapper classes (follow this link for further reference).

While in my personal opinion, the class based navigation alone, it really shines once you add advanced codi features to it like the security handling or the View Controller extensions.
(For more Information please consult the MyFaces Codi documentation)

Here is a small example: This is a very basic example of two navigation cases

the first one points to /Wizard/Page1
the second one points to /Wizard/Page2

However to map this to scala we face a set of problems

We don't have interfaces, we have mixins, but they do not map straight to the structures we need
the interface classes are the same problem as the interfaces

So we have to find structures which Codi can follow but are buildable in Scala. Here we have the same example in Scala: Again we are able to map everything into singletons so we work with a set of objects instead of interfaces and interface classes.

That sums up part2 for now

Next week, I will talk about how to leverage Scalas very powerful trait feature to isolate common behavior.

Marrying JSF with Scala - Part1

2011-07-08T01:18:00.000-07:00

This is the first part of a mulitpart blogpost on how to marry JSF with Scala.

Why Scala? Java is fine

My personal opinion is, having done programs in many languages, that Scala is a huge step up from Java complexity-wise and many things are corner case fillers which probably could have been left out with a more lenient approach.
Nevertheless Scala has lots of merits as well.

The code reduction compared to Java on the average is 30-50% less thanks to better property handling and other things like closures.
The speed if touched right is about the same as Java (one of the complaints about groovy).
However, if you want to apply Scala you seriously have to touch it the way you would touch C++, make up your mind on what part of the language you really use and only touch others in rare cases.

But lets stop the criticism here. Scala has lots of merits especially for JSF:

Absence of setters and getters
Tight integration with Java
Isolation of common constraints via Mixins instead of base classes
Same or almost the same performance as java
Closures for things like iteration
etc...

So lets dig into JSF and Scala

Part 1, Managed Beans

The possible easiest entry into combining Scala and JSF is to create a managed bean. Every managed bean in JSF is a pojo with a handful of setters and getters. (and more depending on your functionality)
It probably is the easiest artifact within the JSF stack you can get.

Let us have a look at a simple Java managed bean:

The same now would be coded in Scala

Note for the people who are familiar with Scala, we took two assumptions here, first we are using for familiarity
reasons the Java mutable LinkedList and secondly we use BeanProperties
(we could resolve that with our own el resolver as well)

This is tightlier written, but what about data encapsulation what about setters and getters?
Scala follows a different route for data encapsulation. You can set properties but usually the data is public until you have overrides which cause the data encapsulation without any further code interference.

Also one thing noticeable is, that the implements Serializable has been replaced by a @serializable annotation. The rest of the annotations is applied as is.

So what about this @BeanProperty?

This is a special Scala annotation which tells the compiler to encapsulate the property and generate setters and getters for it.

I want to use CDI instead of ManagedBeans

CDI has been the new kid on the block and given that bigger projects nowadays either use Spring or CDI it makes sense to cover the CDI integration here as well.
To sum the CDI and Scala situation regarding managed beans, it is as seamless as it is with pure managed beans.

Here is an example:

Of course you still can use @Inject and other CDI constructs as well.

@BeanProperties is this really needed?

As you have seen @BeanProperties produces the connection between our properties and the EL by encapsulating the property and providing Java like setters and getters.
This is very inelegant, first of all, because to access those properties, you have to use the setters and getters on the Scala side as well, and the code is convoluted with annotations.

Wouldn't it be nice to simply have something like:

This works as expected, even the EL will pick up all properties, thanks to Scalas public per default convention. However we now face a problem, once we want to encapsulate for instance val1. If we now would make it private or protected the code definitely would be broken and the EL would not pick it up anymore. As long as you stay in Scala, you can use Scala properties, however the EL is implemented in Java and expects Java setters and getters.

So to make the EL scala aware we have to roll out a binding solution, but first, lets talk about Scala properties.

Scala properties are a different convention. From outside they are invisible by default but they still implement full isolation.

So, code like myobj.myprop = 1 still would be myobj.myprop = 1 after the isolation has been added.

So how do we do it?

the def val1: Int = _val1 is basically our new getter replacing our old val1 for read access
def val1_$eq (val1: Int) is basically a convention to open val1 for write access via the = operator.

This works within Scala seamlessly and for orm frameworks as well as long as they know the Scala convention (most do by now via plugins). But on the Java side you have to call those methods directly via <methodName> and <methodName>_eq.
The last remaining open problem is the Expression Language. The EL relies on setters and getters for accessing the properties.

Thankfully there is a way to override the ELs handling via a custom resolver tailored for Scala. Now this code would override the scope of this blog, but you can download the sources for this EL resolver here:
(note a link to an el resolver drop in project will be added later this month so check regularly)

You just have to integrate it into your project by adding following entry into your faces-config:

End of Part1

We now have reached the end of part1. The next part will be about the ViewController patterns. Page navigation Codi style in Scala, and what we can do with Scala traits in a JSF context. So stay tuned.

Extensive German JSF Tutorial

2011-07-07T03:56:00.000-07:00

If you are in need for an extensive JSF Tutorial and you can speak or read german, than head over to following site http://jsfatwork.irian.at. This is probably the most comprehensive JSF guide you can get for free currently.

Dynamic data definitions the Groovy way

2011-07-07T02:22:00.000-07:00

Hello everyone did you have ever had the need to define some data which quickly can be processed? Well there are myriads of ways. There is xml, and you can roll your own parser, you can use property files. But there is another way. You could do it in a dynamic scripting language.

Well we have Groovy and we could use the Groovy builders as shown here. The Problem with the builders is that you might lose some realtime syntax checking, some tools already have. I want to talk about a different way to describe data. A combination of properties and closures to keep the syntax lean. Lets have a look at an example.

Normally we would have to generate the class and set the properties or we would have to define constructors with property lists. There is another way, we can use closures to set the properties dynamically at object creation

What we do here is to generate a new object and dynamically set helloWorld which has a predefined value of "helloworld" to add. Another way to do the same would be following:

Or like following:

Same result different angle to the approach. What we do here is following we use the internal map semantics groovy uses to store properties to set the value of helloWorld to a new value. In the first example we do it explicitely in the second one via dynamic parameter maps for the constructor. Both cases would result in the same result! Lets have a look on how compact this approach is:

Now think how much more code you would have in xml or how much more effort this would be by rolling your own data definition language. The good thing is you can set your properties to predefined defaults and then use the closures to override the values you want to change. The best thing however is you can use all this seamlessly from java. A Java Class simply would have to call the setters and getters of the properties of the generated objects to access those values! The groovy compiler takes care of the rest!

Apache MyFaces jsf.js queue control

2011-07-07T01:49:00.000-07:00

Introduction

As some people might have noticed our javascripts are bigger than Mojarras. There is a reason for it, besides our internal structures completely different we have a set of extensions which yet have to make it into the official spec (all of it has been donated to the EG)

I already wrote about the fileupload via ajax, and again, I have to warn, if you use that stuff you are bound to MyFaces.

But nevertheless, partial page submit and queue control are two important features which have been enabled since 2.0.1:

Queue Control, what is it?

The official spec enforces following behavior: if you submit an Ajax post it is either sent directly if no other submit is running or enqueued until the running ajax submit has terminated and then the submit is issued.

Now this causes following problems

The typical fast typing Ajax input.

Here typing happens on the fly and a load of submits are issued, they are either queued or simply sent to the server causing constant loads.

The long running Request

Here a request hangs for a longer period of time, filling the client queue.

For those two szenarios we introduced (thanks to the j4fryguys Ganesh and Alax who donated the code), advanced queue control.

Here is the deal on how to use it (and again the obligatory you bind yourself to myfaces warning)

First a short introduction to our configuration system: We are very modular all layers are bound late via configuration and also vital parts of the system can be replaced without digging into the code internals that way, this configuration system also can be used to override certain default behavior.
Now there are to ways to override the configuration, you can do it globally under the myfaces.config namespace or locally by pushing another additional set of parameters in the options map under myfaces (example below)

An example for a global configuration for instance is:

an example for a local configuration override for a single request is:

Now we have following possibilities in our codebase:

timeout: describes a value of miliseconds upon the current request should be terminated for good and the next one be issued

delay: describes a delay period where the system waits for the next input before issuing the submitted. If an input is sent before the delay period is over the old request is canceled upfront and the new one is enqueued delayed.

queuesize: This limits the queue size of the request queue to the specified number of elements, if the queue is bigger than what is provided older elements are dropped until the queue size is fulfilled. If issued locally the reduction is only done temporarily.

For a typical ajax scenario following might be a viable approach:

Second Part, PPS

This solves following scenario, per spec definition the entire form passed down must be submitted at each Ajax scenario. Often this is unnecessary, especially if you only execute parts of the subtree. Unnecessary data is passed down and if you have something like a textfield in the form then it is even heavy on the server.

There pps helps. With pps you will just pass what is needed to be executed, you also can put the execute on a parent node and it determines which childs have to be passed down the execution chain and it only submits the parameters it really needs to pass down.

(note this does not work in the ajax fileupload case)

Here is an example on how to use it:

again this also can be set globally via
myfaces.config.pps = true

Hello and Welcome

2011-07-07T01:28:00.000-07:00

Hello and welcome, I have moved my blog now from jroller to Blogspot.

As first entry I want to show how to roll an testing ssl connector from Maven 3 with the Jetty Maven Plugin:

Here is the code:

As you can see it comes down to two things, generate a temporary public key for jetty in the build and then use the ssl connectivity in the jetty plugin to open the ssl port with the generated key.

If you use an older combination, you can use following code as blueprint:
(note the keystore setup stays the same)