First of all we need a little bit Javascript, i use the Masked Input Component from Jonas Raoni Soares Silva:

[sourcecode language='javascript']

addEvent = function(o, e, f, s){
var r = o[r = "_" + (e = "on" + e)] = o[r] || (o[e] ? [[o[e], o]] : []), a, c, d;
r[r.length] = [f, s || o], o[e] = function(e){
try{
(e = e || (window.event ? (arguments = [].slice.call(arguments)).unshift(e = event) || 1 && e : {})).preventDefault || (e.preventDefault = function(){e.returnValue = false;});
e.stopPropagation || (e.stopPropagation = function(){e.cancelBubble = true;});
e.target || (e.target = e.srcElement || null);
e.key = (e.which + 1 || e.keyCode + 1) - 1 || 0;
}catch(f){}
for(d = 1, f = r.length; f; r[--f] && (a = r[f][0], o = r[f][1], a.apply ? c = a.apply(o, arguments) : (o._ = a, c = o._(e), o._ = null), d &= c !== false));
return e = null, !!d;
}
};
removeEvent = function(o, e, f, s){
for(var i = (e = o["_on" + e] || []).length; i;)
if(e[--i] && e[i][0] == f && (s || o) == e[i][1])
return delete e[i];
return false;
};
MaskInput = function(f, m){
function mask(e){
var patterns = {"1": /[A-Z]/i, "2": /[0-9]/, "4": /[\xC0-\xFF]/i, "8": /./ },
rules = { "a": 3, "A": 7, "9": 2, "C":5, "c": 1, "*": 8};
function accept(c, rule){
for(var i = 1, r = rules[rule] || 0; i <= r; i<<=1)
if(r & i && patterns[i].test(c))
break;
return i <= r || c == rule;
}
var k, mC, r, c = String.fromCharCode(k = e.key), l = f.value.length;
(!k || k == 8 ? 1 : (r = /^(.)\^(.*)$/.exec(m)) && (r[0] = r[2].indexOf(c) + 1) + 1 ?
r[1] == "O" ? r[0] : r[1] == "E" ? !r[0] : accept(c, r[1]) || r[0]
: (l = (f.value += m.substr(l, (r = /[A|9|C|\*]/i.exec(m.substr(l))) ?
r.index : l)).length) < m.length && accept(c, m.charAt(l))) || e.preventDefault();
};
for(var i in !/^(.)\^(.*)$/.test(m) && (f.maxLength = m.length), {keypress: 0, keyup: 1})
addEvent(f, i, mask);
};
[/sourcecode]

then we define the inputfield:

[sourcecode language='html']

[/sourcecode]

and last a little bit JS-Code which decorates the current formulare after each rerender, but it at the end of your page:

[sourcecode language='html']



[/sourcecode]

That's it :) Every time A4J rerenders the page the decorator search all marked elements and creates a MaskInput object for the elements.

Try it!

For Myfaces, both 1.1 and 1.2 specification, there is a component library named RichFaces. The components there are nice to use for adding ajax-features to your application, and there are also possibilities of adding those capabilities to non-ajax components in myFaces or Tomahawk libraries.

You can download the libraries from here: RichFaces. Depending on the version of Myfaces you use, you need to get different RichFaces version. For MyFaces 1.1 core you need the RichFaces 3.1.X libraries, for Myfaces 1.2 core you can get the 3.2.X libaries. The 3.2.X libraries does NOT support Myfaces version 1.1

Then, to make use of the new library you need to add the following to your web.xml:

[sourcecode language='xml']

RichFaces Filter
richfaces
org.ajax4jsf.Filter


richfaces
Faces Servlet
REQUEST
FORWARD
INCLUDE

[/sourcecode]

On the top of your jsps you need to include the taglibraries by inserting these lines:
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>

So, when it comes to the actual reRendering of components or part of your page, there are several different ways of doing this.

In its simplest form, you can use the a4j:support to add ajax capabilities to ordinary myfaces components. In this example we use it on an inputText. You set the event property (javascript events), give the id of the component(s) you want to reRender, and then you go. Everytime a user releases a key, the reRender will be called, and getting the outText component again:

[sourcecode language='xml']

[/sourcecode]

If you use componentBindings, and create those components programmatically, you need to do your custom modification of that component in the setter-method of this component to let the reRendering work. Let's say you have a panelGrid, and you create it java-side and add two outPutTexts to it. If the value of those outputTexts change, and you want to reRender the panelGrid to display this, then the setter of this component is invoked as long as the getter returns null. So you should do like this:

Jsp:

[sourcecode language='xml']

[/sourcecode]

Java:

[sourcecode language='java']
public HtmlPanelGrid getHtmlPanelGrid()
{
return htmlPanelGrid;
}

public void setHtmlPanelGrid(HtmlPanelGrid htmlPanelGrid)
{
//Clean exisiting children
htmlPanelGrid.getChildren().clear();

//Add your modifications
htmlPanelGrid.getChildren().add(createOutputText("out1","#{myBean.myProperty1}"));
htmlPanelGrid.getChildren().add(createOutputText("out2","#{myBean.myProperty2}"));

this.htmlPanelGrid = htmlPanelGrid;
}

private UIComponent createOutputText(String id, String valueBinding)
{
HtmlOutputText out = new HtmlOutputText();
out.setId(id);
ValueBinding vb = FacesContext.getCurrentInstance().getApplication().createValueBinding(
valueBinding);
out.setValueBinding("value", vb);

return out;
}
[/sourcecode]

It is also possible to create the a4j:support programmatically, like this:

[sourcecode language='java']
HtmlAjaxSupport ajaxSupport = new HtmlAjaxSupport();
ajaxSupport.setEvent("onchange");
ajaxSupport.setId("ajaxSupport");
ajaxSupport.setFocus("myForm:theIdOfComponentIWantToFocusOnAfterAjaxSubmit");
ajaxSupport.setReRender("myForm:idOFComponentIWantToReRender");

myUiComponent.getChildren().add(ajaxSupport);
[/sourcecode]

There is also a component that creates a javascript-function for you which you can use to pass properties to your bean, execute actions and finally reRender components. It's called a4j:jsFunction. Let's say I have a h:commandButton, and when I click it I want to set a value to a property in my bean, I want to run an action, and then display the results. I could have done this with an t:updateActionListener, but then I would have been forced to do a full submit of the whole page. Instead, I can do it like this:

[sourcecode language='xml']

//Define javascriptFunction with parameter

[/sourcecode]

Notice that I set return false in the onclick of the commandButton to avoid it from submitting. I'll let ajax handle that.

If you create the a4j:support-object progammatically, I've experienced that it doesn't always find the id of the component you have specified to reRender. To solve this, you can use a combination of this one and the javascript function just described:

[sourcecode language='java']
HtmlAjaxSupport ajaxSupport = new HtmlAjaxSupport();
ajaxSupport.setEvent("onchange");
ajaxSupport.setId("ajaxSupport");
ajaxSupport.setFocus("myForm:theIdOfComponentIWantToFocusOnAfterAjaxSubmit");

//We don't specify reRender id here, but set a javascript function to run when completed
//ajaxSupport.setReRender("myForm:idOFComponentIWantToReRender");
ajaxSupport.setOncomplete("setParameterAndRerender('MyValue');");

myUiComponent.getChildren().add(ajaxSupport);
[/sourcecode]

So, what about the RichFaces library? In all components the ajax capabilities are included, you don't have to use a4j:support. When using one of the components the submit will always be an ajax submit, so you can just specify which components to reRender. As a short example, instead of using a h:commandButton you can use a4j:commandButton, like this:

[sourcecode language='xml']


[/sourcecode]

Also, if you have a part of a page that always should be ajaxRendered, and you are tired of of writing Ids to reRender, simply wrap that part of the page inside an a4j:outputPanel and set the ajaxRendered property to true. In my a4j:commandButton, I don't have to set the reRender property as this panel is now always reRendered by ajax submits:

[sourcecode language='xml']

[/sourcecode]

I hope this have given you a brief idea of what is possible to do with ajax/richFaces and also how to do it :)

I suggest you to check out the livedemo page to see all the different components that RichFaces give you: Live demo

So I decided to look at it from a totally different angle - what is the first thing you think of when you want "desktop-like" functionality for your application ? Yes, unfortunately you're right - JavaScript. Now, I don't want to hear any of "JS is overhead", "JS slows down your browser"; yes, it does, but all "faces" also generates JS so STFU. Ok, maybe they generate LESS JavaScript but they also have... less features:). That's why I decided that ExtJS would make a good team with Spring. Of course there are many other JS frameworks out there but ExtJS just captured my attention. Yes, I know Dojo integrates better with Spring but i *really* hate Dojo.

All said and done, now I'm really trying to understand Spring. My past experience consists in coding some components for a Spring-based web application, but I didn't get the chance to "see" the whole picture so it's like learning to walk again. ExtJS is next and then some JSON because apparently that's the way you integrate ExtJS with Spring.

Wish me luck...

Feature-to-feature both Ice and Rich faces are pretty much the same, so I decided to run a simple performance test...

I coded a small application that queries an EMC Documentum repository. The query is fairly simple, just a plain "SELECT (some fields) FROM dm_document". The result set has about 90000 (yeah, ninety thousand) documents. Of course, it's a bit extreme, no one in his right mind will never run a query like this in a production application but what the heck ? life is short.

The implementation is really straight-forward - iterate the collection, fill some beans that put everything in an ArrayList and throw it in a dataTable (with pagination enabled). The constructor of the backing bean takes care of the query and initializes the ArrayList.

For RichFaces I used a ScrollableDataTable. This component is the only data table implementation that supports row selection (click, ctrl+click, shift+click... and double click... D'you hear that, IceFaces ?!?). It also features scroll bar (doh, it's a ScrollableDataTable) and you can even define a DataTableScroller for your convenience. Running the query against all dm_document objects resulted in a OutOfMemory error. I increased the heap size, then re-ran the query - everything worked fine and the table displayed correctly. To my astonishment though the framework re-initiates the table every time I navigate through the pages. This means that every time I navigate through the pages the backing bean gets re-constructed, which totally sucks. Bad RichFaces, bad. Sit !

For IceFaces I used a DataTable with a DataPaginator. The data layer remained the same - the Documentum access layer, the backing bean... The table component in IceFaces supports row selection (single / multiple) by simply clicking the rows - no windows-like selection (ctrl+click, shift+click). I ran into the same problem here too (heap space) when I queried all dm_document objects, but this is not an issue. As I mentioned before, working with 90000 documents result sets it's a bit extreme. It was a pleasant surprise to see that IceFaces does not re-initialize the backing bean every time I navigated to another page, which is a good thing.

From a performance point of view both tables rendered in the same time (give or take a few milliseconds). Querying the repository and generating the ArrayList took about 28 seconds. A big minus for RichFaces - I don't need my bean re-initialized each time I move through the pages.

Ok IceFaces, how about that double-click !?

Both projects are big, both projects are important and both projects are applications built "from scratch". No WDK, no Webtop customization just our team and the plain old java web applications. Which brings us to an interesting decision... Which framework should we use ?

In the past we used Struts, Spring, some Dojo, we even gave GWT a test-run. Now we are looking at more custom projects so we'll have to choose a framework and stick to it. Which brought me to the coin flipping thing...

First it was IceFaces. I ran some of the samples, built some samples (did I mention how SHORT our research time is ?!) and took a quick-look on how our customer's expectations are met by this marvel of the brave new world. The customer needed dynamic columns in a table - no biggie, IceFaces can do that, but it's a big pain in the behind. We also needed row selection using left-click (perfectly doable) and other combination known to any "point-and-click" interface user - ctrl+right-click (no way) and shift+right-click (not a chance). Double-clicking on a row is completely out of the question. I tried fixing this by poking arount the TableRenderer and generating my own event but it turns out that I need to be a) guru or b) IceSoft. So I gave up and turned to...

RichFaces. Quick demo on the site, interesting things to see - contextual menus, row selection and double-clicking (sic !), full AJAX support etc. I spent a whole day trying to set up my Eclipse IDE to work with JBoss Tools and I finally managed to do it.  On the downside... documentation is either scarce or non-existant. While IceFaces had a lot of documentation floating around, a sample webapp from which you could learn some interesting things RichFaces has a "community driven" documentation with little to no examples. Just the TLD and the "references" - no tutorials, no how-to's, nothing, nada, zip, el zilcho. They have a deployable war with the demos too, but again - not documented at all.

I'm still flipping the coin between those two. They both do THE SAME thing and I am totally aware of the fact that using JSF + some AJAX support + a good JS/CSS/HTML professional I'd accomplish the same thing as with the two framework but you see, good JS/CSS/HTML professionals don't grow on trees and our time is slowly ticking away...

<body>
<f:view>
<h:form>
<h:inputText id="oneA" value="#{bean.tf1}"/>
<br/>
<h:inputText id="oneB" value="#{bean.tf2}"/>
<br/>
<a4j:commandButton value="Submit2" process="oneB" ajaxSingle="true"
reRender="three1, three2"/>
<br/>
one : <h:outputText id="three1" value="#{bean.tf1}"/>
<br/>
two : <h:outputText id="three2" value="#{bean.tf2}"/>
</h:form>
</f:view>
</body>

<body>
<f:view>
<h:form>
<h:inputText value="#{bean.text}">
<a4j:support event="onkeyup" ajaxSingle="true"></a4j:support>
<a4j:status startText = "S" stopText = "R"></a4j:status>
</h:inputText>
<br />
</h:form>
</f:view>
</body>

]]> http://rememberoneanother.wordpress.com/?p=24 Mon, 07 Jul 2008 19:02:28 +0000 jobber http://rememberoneanother.wordpress.com/?p=24 For the past two weeks or so I have been frenetically learning Ajax for Java and RichFaces. The available components shine on the view, adding speed, simplicity, and functionality to our application.

Unfortunately, the fact that two weeks have passed since I began work on the core page of the application signals that there are problems. Certainly, some of them are due to my lack of experience, and are to be expected. Others, however, have been caused or aggravated by implementing a4j and RichFaces.

While RichFaces is documented, there seem to be unmentioned complexities to the implementation of almost every component. When used in the environment for which they were designed, each component works excellently, but when we used them in conjunction with other components and other code implementations, time-consuming problems arose.

For instance, components such as rich:modalPanel rendered lightening fast on Internet Explorer but crawled in Firefox, while commandLinks in rich:dataTables worked on Firefox, but not IE!

As a detailed example of our troubles, and as today's Note for Dense Summer Inters, we spent several hours working with Tamper Data and Eclipse console to determine what exactly was failing in a rich:dataList. The list contained links with a4j:actionparams that assigned the current variable object to the bean, for purposes of reRendering a view of the object's details. It was only after wasting about a day that we discovered that the actionParam was not sending the object at all. Apparently, a4j:actionParam cannot assign as a value the variable of a rich:dataList, only properties of that variable. We switched to a rich:dataTable, and all was snazzy site design once again.

Today we decided that, until we got farther down the road of functionality, it was only shooting ourselves in the proverbial feet to struggle through a4j implementation and basic site design simultaneously. For now, we plan to drop RichFaces and use simple JSF until such a time as we have a functional site to which we wish to add a4j. At that point we must decide what component library to use. Among our options are first, of course, RichFaces, but also IceFaces and Dojo (which has an extra-impressive showcase!). RichFaces may be difficult to integrate with any portal other than JBoss portal, and Mr. Chandler believes we may in some future release want to implement LifeRay. This would be a vote in favor of IceFaces, which supports LifeRay explicitly.

So we sadly bid a4j farewell, for the time being.

Studying (or should I say geeking out over) various a4j graphic component libraries today, I came across the phrase "Lorem ipsum dolor sit amet consectetuer" etc one several occasions. Mr. Chandler told me it is the standard filler text for graphic artists. Curious, I looked it up, and here it is as the Filler Text of the Day: First, an article article describing the history of the phrase's usage, giving a full translation of the standard text and the Cicero text it stems from, and offering to generate some random ipsum just for you!

<a4j:outputPanel ajaxRendered="true">
<h:messages />
</a4j:outputPanel>

"limitToList" attribute allows to dismiss the behavior of the <a4j:outputPanel> "ajaxRendered"
attribute. "limitToList" = "false" means to update only the area(s) that mentioned in the "reRender"
attribute explicitly. All output panels with "ajaxRendered"="true"is ignored. An example is placed
below:

<h:form>
<h:inputText value="#{person.name}">
<a4j:support event="onkeyup" reRender="test" limitToList="true"/>
</h:inputText>
<h:outputText value="#{person.name}" id="test"/>
</form>

Demonstration :

<body>

<f:view>
<h:form>

This value Will Render 'X' and 'Y' : <h:inputText value="#{bean.text}">
<a4j:support event="onkeyup" reRender="y" ajaxSingle="true"></a4j:support>
</h:inputText>
<br />
This value Will Render only 'X' : <h:inputText value="#{bean.text}">
<a4j:support event="onkeyup" reRender="y" ajaxSingle="true" limitToList="true"></a4j:support>
</h:inputText>
<br />

<a4j:outputPanel ajaxRendered="true">Return By Ajax <br/>X : <h:outputText id="x" value="#{bean.text}"></h:outputText></a4j:outputPanel>

<br />
Return By Ajax <br/>Y : <h:inputText id="y" value="#{bean.text}"></h:inputText>
</h:form>
</f:view>
</body>

Before half an hour passed, I knew I needed to study RichFaces. We hope to use a lot of rich components in the application, enabling the user to make changes large or small without refreshing the entire page, and to facilitate easy searches and selections. so I looked up the RedHat team's RichFaces Live Demo, and spent the better part of the morning "geeking out" over all the exciting components they offer. It was so much fun that it is the Website of the Day!

Then it was time for a simple test; I decided I would add rich validation to the account creation page, telling the user on screen if his or her field entries were too short or too long, saving the trouble of waiting through an entire refresh to find out.

This test was successfully completed approximately six hours later. Lack of RichFaces knowledge led me on a merry chase for the correct functionality. With Mr. Chandler's help, I made several useful discoveries.

First, in order to implement a4j and RichFaces, certain filters and context parameters are required in the web.xml, and they can be order-sensitive.

Second, in order to work properly, RichFaces must be allowed to access a file in the server path.
Our filter was intercepting this call. We fixed it by making the filtered path one step more specific, excluding the one called by RichFaces.

Finally, I discovered that a functional RichFaces validation on a simple field can be accomplished using the following simple process.

In our xhtml page, we first added the following line inside our input box tags:

<a4j:support event="onkeyup" reRender="passwordMsg" requestDelay="1000" />

This instructs a4j to wait 1000 milliseconds after the first keystroke in the input box is released, and then to reRender the component with the id 'passwordMsg'. The requestDelay is included to prevent the server from processing requests generated by every keystroke.

Second, we added the following code after the closing tag for the input box.

<a4j:outputPanel id="passwordMsg">

<h:message for="password" showDetail="true" style="color:red;" />

</a4j:outputPanel>

This is the panel reRendered by the support component. The h:message simply begins a normal validation process.

In conclusion, I am happy to say that today was tidy, encapsulated by the accomplishment of a single goal.

Today's Note for Dense Summer Interns: The solution to your RichFaces problem is probably just one webpage away. Don't keep experimenting with complicated solutions when you could be exploring more rich components!

[sourcecode language="html"]
stateAdvisor="#{treeStateAdvisor}"
nodeSelectListener="#{treeMgrt.onSelect}">

[/sourcecode]

The method in my tree manager onSelect(...) looks like this:
[sourcecode language="java"]
public void onSelect(final NodeSelectedEvent event) {
final UITree theTree = this.getTree(event);
if (null == theTree) {
return;
}
final Object rowKey = theTree.getRowKey();
// this works better
final Object rowData = theTree.getRowData(rowKey);
if (rowData instanceof ProductNode) {
this.selectedNode = (ProductNode) rowData;
}
}
[/sourcecode]

Normally you can use theTree.getTreeNode(); but with a recursive tree model which method returns alway null. Instead of this I have used the getRowData() method which works for me.
I have filed a bug for richfaces. Hope the problem becomes shortly a solution.

Last week Geertjan Wielanga released a plugin he'd been working on for RichFaces tag support in NetBeans. I gave it a shot and its not bad.

Its meant to provide tag support as well as drag and drop of RichFaces controls on the palette. Interestingly this support is meant for both jsps and facelets. But seriously speaking, how many people are using RichFaces on jsps instead of on Facelets? Since this plugin only works with NetBeans 6.1 and the facelets support plugin does not work with 6.1, I really wonder what use it is to me and to a significant number of others.

This is really causing me to worry for Sun. Anyone doing anything new in JSF is not going with JSPs if they really know what is best for them, but rather with Facelets. If Sun really wants JSF to catch up (alongside using NetBeans as their preferred JSF development tool) then they should provide us developers with at least some of what JBoss Tools provides - visual editing. I've been waiting for Sun's Visual JSF to now support Facelets, cos there's no way I'm sticking with Rave. I think a lot of people share this sentiment and it is the reason why everyone is praising Seam for the good work its doing.

If Sun has seen it fit to bring Jacob Hookom onto the JSF 2 EG as a sign of respect for what Facelets stands for, then it should stop sitting on the sidewalk with Facelets support in NetBeans and get some decent support for it (and I mean not just tag support). Most of us NetBeans fans are in a love hate relationship with it because of such political (in)decisions. Sun should continue taking developers seriously and see how to improve on it's technologies with already proven ones instead of trying to stuff things down our throats that we don't want to swallow.

Ah. I just came across a release of the Facelets support for NetBeans 6.0 rebuilt to work with NetBeans 6.1. Good job by http://ifnu.artivisi.com. Here is the download. And thanks to Po-Ting Wu for the rebuild instructions.

Thanks also to Geertjan for the work on Richfaces support. JSF development will get better and easier!

Implementation

I extend org.ajax4jsf.model.SerializableDataModel class as usual. But the tricks lie in overridden walk method. A general fetch list of ExtendedFetchList is used to access data instead of a specific fetch list. ExtendedFetchList interface declares all the necessary methods for dynamic data accessing. See the following codes and usage example.

ExtendedListDataModel:

public class ExtendedListDataModel extends SerializableDataModel {
private boolean detached = false;
private BigDecimal currentPk;
private Map wrappedData = new HashMap();
private List wrappedKeys = null;
private ExtendedFetchList fetchList = null;
private int rowIndex;
private static final long serialVersionUID = 1L;
/* (non-Javadoc)
* @see org.ajax4jsf.model.SerializableDataModel#update()
*/
@Override
public void update() {
// TODO Auto-generated method stub
}
/* (non-Javadoc)
* @see org.ajax4jsf.model.ExtendedDataModel#getRowKey()
*/
@Override
public Object getRowKey() {
// TODO Auto-generated method stub
return currentPk;
}
/* (non-Javadoc)
* @see org.ajax4jsf.model.ExtendedDataModel#setRowKey(java.lang.Object)
*/
@Override
public void setRowKey(Object key) {
// TODO Auto-generated method stub
this.currentPk = (BigDecimal)key;
}
/* (non-Javadoc)
* @see org.ajax4jsf.model.ExtendedDataModel#walk(javax.faces.context.FacesContext, org.ajax4jsf.model.DataVisitor, org.ajax4jsf.model.Range, java.lang.Object)
*/
@Override
public void walk(FacesContext context, DataVisitor visitor, Range range, Object argument) throws IOException {
int firstRow = ((SequenceRange)range).getFirstRow();
int numberOfRows = ((SequenceRange)range).getRows();
if (detached) { // Is this serialized model
// Here we just ignore current Rage and use whatever data was saved in serialized model.
// Such approach uses much more getByPk() operations, instead of just one request by range.
// Concrete case may be different from that, so you can just load data from data provider by range.
// We are using wrappedKeys list only to preserve actual order of items.
for (BigDecimal key:wrappedKeys) {
setRowKey(key);
visitor.process(context, key, argument);
}
} else { // if not serialized, than we request data from data provider
wrappedKeys = new ArrayList();
for (Object obj:fetchList.fetchList(firstRow, numberOfRows)) {
wrappedKeys.add(fetchList.getPk(obj));
wrappedData.put(fetchList.getPk(obj), obj);
visitor.process(context, fetchList.getPk(obj), argument);
}
}
}
/* (non-Javadoc)
* @see javax.faces.model.DataModel#getRowCount()
*/
@Override
public int getRowCount() {
// TODO Auto-generated method stub
//return fetchList.getListSize();
return fetchList.getMaxListSize();
}
/* (non-Javadoc)
* @see javax.faces.model.DataModel#getRowData()
*/
@Override
public Object getRowData() {
// TODO Auto-generated method stub
if (currentPk == null) {
return null;
} else {
Object ret = wrappedData.get(currentPk);
return ret;
}
}
/* (non-Javadoc)
* @see javax.faces.model.DataModel#getRowIndex()
*/
@Override
public int getRowIndex() {
// TODO Auto-generated method stub
//throw new UnsupportedOperationException();
return rowIndex;
}
/* (non-Javadoc)
* @see javax.faces.model.DataModel#getWrappedData()
*/
@Override
public Object getWrappedData() {
// TODO Auto-generated method stub
throw new UnsupportedOperationException();
}
/* (non-Javadoc)
* @see javax.faces.model.DataModel#isRowAvailable()
*/
@Override
public boolean isRowAvailable() {
// TODO Auto-generated method stub
if (currentPk == null) {
return false;
} else {
return wrappedData.containsKey(currentPk);
}
}
/* (non-Javadoc)
* @see javax.faces.model.DataModel#setRowIndex(int)
*/
@Override
public void setRowIndex(int arg0) {
// TODO Auto-generated method stub
//throw new UnsupportedOperationException();
rowIndex = arg0;
return;
}
/* (non-Javadoc)
* @see javax.faces.model.DataModel#setWrappedData(java.lang.Object)
*/
@Override
public void setWrappedData(Object arg0) {
// TODO Auto-generated method stub
throw new UnsupportedOperationException();
}
public SerializableDataModel getSerializableModel(Range range) {
if (wrappedKeys != null) {
detached = true;
// Some activity to detach persistent data from wrappedData map may be taken here.
// In that specific case we are doing nothing.
return this;
} else {
return null;
}
}
/**
* @return the fetchList
*/
public ExtendedFetchList getFetchList() {
return fetchList;
}
/**
* @param fetchList the fetchList to set
*/
public void setFetchList(ExtendedFetchList fetchList) {
this.fetchList = fetchList;
}
}


ExtendedFetchList

public interface ExtendedFetchList {
public List fetchList(int startRow, int size);
public BigDecimal getPk(Object obj);
public void update();
public int getListSize();
public int getMaxListSize();
}


Usage: An Example

AnExampleListModel:

public class AnExampleListModel implements Serializable {
private ExtendedListDataModel exampleList = new ExtendedListDataModel();
private ExtendedFetchList fetchList;
private static final long serialVersionUID = 102136548978979L;
/**
* @return the exampleList
*/
public ExtendedListDataModel getExampleList() {
return exampleList;
}
/**
* @param exampleList the exampleList to set
*/
public void setExampleList(ExtendedListDataModel exampleList) {
this.exampleList = exampleList;
}
/**
* @return the fetchList
*/
public ExtendedFetchList getFetchList() {
return fetchList;
}
/**
* @param fetchList the fetchList to set
*/
public void setFetchList(ExtendedFetchList fetchList) {
this.fetchList = fetchList;
exampleList.setFetchList(fetchList);
}
}


AnExampleFetchList:

public class AnExampleFetchList implements ExtendedFetchList, Serializable {
private static final long serialVersionUID = 1L;
private int listSize;
private int maxListSize;
public List fetchList(int startRow, int size) {
List list = new Vector();
//call some method here to populate the list
//For example
RangeQueryResult rqr = foo.getBars(startRow, size);
list = rqs.getResultList();
setListSize(list.size());
setMaxListSize(rqr.getMaxResult());
return list;
}
@SuppressWarnings("unchecked")
public BigDecimal getPk(Object obj) {
Map columns = (Map) obj;
return new BigDecimal(columns.get("id").toString());
}
public void update() {}
public int getListSize(){
return listSize;
}
public int getMaxListSize(){return maxListSize;}
/**
* @param listSize the listSize to set
*/
public void setListSize(int listSize) {
this.listSize = listSize;
}
/**
* @param maxListSize the maxListSize to set
*/
public void setMaxListSize(int maxListSize) {
this.maxListSize = maxListSize;
}
}


Bean Definitions:

<managed-bean>
<managed-bean-name>exampleListModel</managed-bean-name>
<managed-bean-class>
com.mycompany.web.model.AnExampleListModel
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>fetchList</property-name>
<property-class>
com.iecb.web.model.AnExampleFetchList
</property-class>
<value>#{exampleFetchList}</value>
</managed-property>
</managed-bean>
<managed-bean>
<managed-bean-name>exampleFetchList</managed-bean-name>
<managed-bean-class>
com.iecb.web.model.AnExampleFetchList
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>


Example Template:
<h:panelGrid id="exampleContainer" columns="1">
<rich:dataTable id="exampleListDT" value="#{exampleListModel.exampleList}" var="item" rows="25" style="width:100%">
<h:column>
<f:facet name="header">
<h:outputText value="Column1" />
</f:facet>
<h:outputText value="#{item['column1']}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Column2" />
</f:facet>
<h:outputText value="#{item['column2']}" />
</h:column>
</rich:dataTable>
<rich:spacer height="5" />
<rich:datascroller align="left" for="exampleListDT" maxPages="10" ajaxSingle="false"/>
</h:panelGrid>


Entretanto, é bom lembrar que, por trás de todas estas maravilhas da praticidade moderna que o RichFaces oferece, ainda temos o bom e velho JavaScript por baixo dos panos. É esta incrível linguagem, que somente recentemente começou a ganhar o prestígio merecido, que move a maioria das funcionalidades mágicas dos componentes. Para tal, os desenvolvedores da biblioteca utilizaram-se de dois frameworks JavaScript bastante conhecidos: Prototype e Script.aculo.us (baseado no primeiro).

Estes dois já foram (e alguns ainda os consideram) os preferidos para auxiliar no desenvolvimento de soluções em JavaScript. Por causa disso vários outros projetos incorporaram estas bibliotecas para agregar comportamentos diversos a por exemplo: componentes JSF. E adivinha quem também fez essa escolha? o pessoal do RichFaces...

Muito bem, mas e o jQuery? Onde ele entra nessa história toda?

Acontece que o jQuery e seus diversos plugins estão cada vez mais na cabeça (e nos códigos) dos desenvolvedores web. Ele vai além do Prototype em vários aspectos: ganhou inúmeros admiradores e contribuidores, e é hoje uma opção mais conveniente para a adição de comportamentos à paginas web.

Resumindo então o cenário: temos os componentes prontos do RichFaces que encapsulam transparentemente códigos que utilizam Prototype e Script.aculo.us e, caso necessário, podemos adicionar outros comportamentos necessários com jQuery.

Qual o problema então?

O "problema" é que um importante método tanto do Prototype quanto do jQuery possuem nomes iguais!

A principal função do Prototype, e que é utilizada basicamente para reduzir o tamanho dos códigos de manipulação de elementos da árvore DOM, é a $(). Esta pequena função substitui o longo método original para a busca de elementos da página por seu id: document.getElementById().

No jQuery, a função $() é o grande coringa: serve para buscar elementos da página através de seletores CSS, para criar novos elementos para serem adicionados à página ou para definir funções que devem ser executadas assim que a árvore de elementos tiver sido carregada pelo navegador (depois providencio um post mais detalhado sobre esta função tão versátil).

Então não é possível usar as duas ao mesmo tempo? E já que RichFaces utiliza Prototype, não posso usar jQuery quando empregar seus componentes? Mas é claro que pode!!

É possível utilizar as funcionalidades das duas bibliotecas com uma pequena adaptação: definindo um nome alternativo para a função $()do jQuery e utilizando-a sem a preocupação com conflitos com o Prototype. Veja o código abaixo como esta alternativa pode ser utilizada:

[sourcecode language='jscript']
var $j = jQuery.noConflict();

$j("div").hide();
$('rodape').show();

[/sourcecode]

Neste exemplo, a função $j() irá funcionar com o comportamento desejado para o jQuery e a função $() funciona como a sua definição original do Prototype. Simples assim!

Agora você pode usufruir do melhor dos dois mundos: a praticidade dos componentes prontos e a flexibilidade de definir novos comportamentos ou utilizar os plugins prontos do jQuery.

Acho que para um primeiro post "de verdade" este até que ficou bem longo... A idéia parecia bem simples no começo, mas a necessidade da contextualização acrescentou algumas linhas a mais...

E no caso de alguma dúvida, o espaço para comentários está aí para ser utilizado! :)

As a big fan of MDA, after designing the model I have immediately generated the database structure, Hibernate POJOs and EJB (at that moment, still undecided which direction should be followed). The whole work took about 30 minutes, with Apache Maven and AndroMDA.

But what about the user interface? AndroMDA offers something similar to "scaffolding" of Ruby on Rails. My problem with this scaffolding is that a number of files are only generated once, subsequent changes will not reflect them self on the existing generated sources. With other words, it sucks, since I am sure my model is not final, customers will perform lots of changes until it goes into production.

Following the speculation path (yes, I do use Agile PM), I have taken the simplest entity, which only has three columns (2 strings and a boolean) and attempted to see how easy is to have an AJAX based table to perform CRUD (create read update delete) on this table.

The first choice would be ZK, an open source AJAX library. Because of their GPL license, which forces me either to publish my sources or to acquire their commercial license, I have considered another AJAX engine, RichFaces.

RichFaces has a nice comprehensive demo and a bad written manual; as a beginner in RichFace, I find it unreadable because of cyclical definitions (such as: "bypassUpdates attribute allows to bypass the Update Model phase" and no definition of Update Model is given) and employment of too many undefined concepts. Maybe my further contacts with RichFaces will allow me to read their manual with other eyes. I have found a nice sample explaining tables with editable cells. It looks nice, but, it doesn't store the changed data! The inquiry on the RichFaces forum had was immediately answered by some more advanced user, which acknowledged the issue and provided a solution. I was just one step away of abandoning the RichFaces track and moving to other AJAX engine, but their vibrant community convinced me indirectly not to switch.

After successfully building and running the web application within Maven, my approach is to connect the table to a list of EJB3 entities. The plan is to build a transaction on each change since it is not usual that users will perform a lot of changes here, and this avoids the usage of a "Commit" button people can forget to press while jumping to another page.
I also plan to have a "New Item" and "Delete Item" button. Delete seems to be easy to implement, while adding a new item can be a pain - since the table has a paged scroller and after adding the new item, the scroller should jump at its page. Also, the newly inserted item has an "uncommitted" state until all of its items are filled with data.

Well, after reviewing the findings in this loop, I remember 18 years old technology named "FoxPro". This technology powered my first business. It didn't have funny programming features such objects, no enterprise capabilities (they were added afterwards). It doesn't run through a web interface or even within a windowing system (but on a 80x25 character screen). This tool could easily handle an editor with millions of entries on an Intel 80286 processor based machine, and this with a simple BROWSE command. Now, I read blogs of ajaxians complaining about performance of Ajax tables containing 500 entries! If FoxPro would be hypothetically transformed in a client server engine, considering an average refresh rate of the screen to one second, it would use only a 32kbit bandwidth to run through a terminal. An ajax application uses much more bandwidth, even in the context Ajax reduces the amount of data transacted (and if properly coded, the number of transactions) between server and client.

So, what is the direction our technology evolution follows? Do we sacrifice the simplicity of design and implied simplicity of deployment and usability to acquire some obscure targets such as "transactionability" or "service oriented architecture"? I see now more than ever web sites crashing with errors like "Invalid Transactional State" or "Session Expired" (although I didn't time it out). I try to imagine what platform did the developers of these sites use and what mistake they done and the answer is from day to day harder to find.

[sourcecode language='java']
public class DownloadBean {

// actionListener="#{bean.execute}"
public void execute (ActionEvent event) {
download();
}

// action="#{bean.download}"
public String download() {
final FacesContext facesContext = FacesContext.getCurrentInstance();
// XXX create temp. filecontent ... resultFile
writeOutContent(getServletResponse(), new File(this.resultFile), "file.xml");
facesContext.responseComplete();
// dont use jsf-navigation-rules
return null;
}

void writeOutContent(final HttpServletResponse res, final File content, final String theFilename) {
if (content == null)
return;
try {
res.setHeader("Pragma", "no-cache");
res.setDateHeader("Expires", 0);
res.setContentType("text/xml");
res.setHeader("Content-disposition", "attachment; filename=" + theFilename);
fastChannelCopy(Channels.newChannel(new FileInputStream(content)), Channels.newChannel(res.getOutputStream()));
} catch (final IOException e) {
}
}

void fastChannelCopy(final ReadableByteChannel src, final WritableByteChannel dest) throws IOException {
final ByteBuffer buffer = ByteBuffer.allocateDirect(16 * 1024);
while (src.read(buffer) != -1) {
buffer.flip();
dest.write(buffer);
buffer.compact();
}
buffer.flip();
while (buffer.hasRemaining()){
dest.write(buffer);
}
}
}[/sourcecode]
Now the facelets snipplets: Not Working - Javascript Error :-(
[sourcecode language='html']

[/sourcecode]
Not Working - Download is shown in the current page - the ajax page will replaced with the download-content :-(
[sourcecode language='html']

[/sourcecode]Working :-)

[sourcecode language='html']




[/sourcecode] [sourcecode language='html']




[/sourcecode]

The a4j:htmlCommandLink was made for this szenario.

Notice: the fast channel copy routine was introduced by waffel.

Imagine a local deployed jsf application "hello-world.war". You can start browsing at http://localhost:8080/hello-word/. The browser handles the absolute paths for css and javascript-libs correctly and all forms will work. Remeber that all resource-urls converted to a "contex-absolut-url" by the jsf-framework.

If you open http://localhost:8080/hello-world/index.jsf the the client html will contains resources like this:

<link rel='stylesheet' type='text/css'
href='/hello-world/a4j_3_1_3.GAcss/tabPanel.xcss/DATB/eAGTWzQ.BgAD.AG8.jsf'>
<script type='text/javascript' src='/hello-world/a4j_3_1_3.GAorg.ajax4jsf.javascript.PrototypeScript.jsf'>
<form id="j_id14" name="j_id14" method="post" action="/hello-world/index.jsf">

(Note: I use richfaces 3.1.4 in the example)

The browser will append each absolute url (starting with '/') to the host to make the request. And here is the problem if you want to use this jsf-application behind a reverse proxy. Then all absolute URLs pointing to a wrong resource and nothing will work. To try this you can install a local apache web server the following to the httpd.conf:

Listen 9090
ProxyRequests On
ProxyPreserveHost On
ProxyVia full
ProxyPass /external-path/hello-world http://localhost:8080/hello-world/

(This will start the apache at localhost:9090 to avoid port-conflicts)

If you open http://localhost:9090/external-path/hello-world/index.jsf the the client html contains the same absolute urls and the browser try to load these resource from the "wrong server": http://localhost:9090/hello-world/. If you imagine a real world szenario then the reverse proxy will use a "real world domain" and the urls looks like this http://www.mycompany.de/external-path/hello-world/.

So whats the solution for this? I try my own ViewHandler to convert absolute to relative urls. Two things must be done:

1. Implement the ViewHandler

2. Register the ViewHandler

First the code ... we extend javax.faces.application.ViewHandler and overwrite the two methods getActionURL and getResourceURL.

package de.ahoehma.jsf;

public class ReverseProxyViewHandler extends ViewHandler {

 @Override
 public String getActionURL(final FacesContext context, final String viewId) {
  return getRelativeURL(context, this.defaultHandler.getActionURL(context, viewId));
 }

 @Override
 public String getResourceURL(final FacesContext context, final String path) {
  return getRelativeURL(context, this.defaultHandler.getResourceURL(context, path));
 }

 /**
  * Transform the given URL to a relative URL <b>in the context of the current
  * faces request</b>. If the given URL is not absolute do nothing and return
  * the given url. The returned relative URL is "equal" to the original url but
  * will not start with a '/'. So the browser can request the "same" resource
  * but in a relative way and this is important behind reverse proxies!
  *
  * @param context
  * @param theURL
  * @return
  */
 private String getRelativeURL(final FacesContext context, final String theURL) {
  final HttpServletRequest request = ((HttpServletRequest) context.getExternalContext().getRequest());
  String result = theURL;
  if (theURL.startsWith("/")) {
   int subpath = StringUtils.countMatches(getPath(request), "/") - 1;
   String pathPrefix = "";
   if (subpath > 0) {
    while (subpath > 0) {
     pathPrefix += "/..";
     subpath--;
    }
    pathPrefix = StringUtils.removeStart(pathPrefix, "/");
   }
   result = pathPrefix + result;
  }
  return result;
 }

 /**
  * Get the url-path from the given request.
  *
  * @param request
  * @return clean path
  */
 private String getPath(final HttpServletRequest request) {
  try {
   // TODO handle more than two '/'
   return StringUtils.replace(new URI(request.getRequestURI()).getPath(), "//", "/");
  } catch (final URISyntaxException e) {
  // XXX URISyntaxException ignored
  return StringUtils.EMPTY;
  }
 }
}

The absolute2relative-algorithm prepends for each "/" in the current request-url a "../" to the resource/action-url ... thats all :D

And last register the view-handler. If you use A4J you have to add this to your web.xml:

<context-param>
<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
<param-value>de.ahoehma.jsf.ReverseProxyViewHandler</param-value>
</context-param>

That's all :D

Now if you open http://localhost:9090/external-path/hello-world/index.jsf the client html contains only relative urls:

<link rel='stylesheet' type='text/css'
href='../hello-world/a4j_3_1_3.GAcss/tabPanel.xcss/DATB/eAGTWzQ.BgAD.AG8.jsf'>
<script type='text/javascript' src='../hello-world/a4j_3_1_3.GAorg.ajax4jsf.javascript.PrototypeScript.jsf'>
<form id="j_id14" name="j_id14" method="post" action="../hello-world/index.jsf">

Let me use this simple scenario to display what I needed to do. Assuming you were keeping a shopping cart. After users select an item they want to buy, you want them to specify the quantity of that item following which their total charge is calculated for them on the fly. This I thought of doing using two DataTables just like the <rich:listShuttle/> appears but on a sleeker (or is it cruder?) level.

I defined an interface with a simple set of methods which I felt would do the trick called InPlaceEditing.

public interface InPlaceEditing {

void editSelection();

void addSelection();

void removeSelection();

void cancelSelection();

}

Here is my”shopper” Seam component which implements the interface. Notice the use of 2 DataModels “products” and “selectedItems” and their corresponding DataModelSelections. This is to enable me select from one table to another.

@Name("shopper")

@Scope(ScopeType.CONVERSATION)

public class Shopper implements java.io.Serializable, InPlaceEditing {

private boolean edit;

@In

EntityManager entityManager;

@In

FacesMessages facesMessages;

@DataModel

List<Product> products;

@DataModelSelection("products")

private Product product;

@DataModel

private List<CartItem> selectedItems;

@DataModelSelection("selectedItems")

private CartItem selectedItem;

@Out(required = false)

private CartItem cartItem;

private BigDecimal total = new BigDecimal(0.0);

private static int count = 0;

@Begin(flushMode=FlushModeType.MANUAL)

public void beginShopping() {

products = entityManager.createQuery("Select p from Product p").getResultList();

selectedItems = new ArrayList<CartItem>();

}

The beginShopping() method starts a conversation and FlushMode is set to MANUAL. This means that all changes made to entities will be made persistent only if I call flush() on entityManager. Seam defaults to AUTO which means all changes to all managed entities are merged into the persistence context after every Seam action call. Trust me, for the purposes of this trick, you DON'T want automatic persistence context merging! Anyway this action populates the “products” DataModel with products already entered into the database. The result is the table below.

<a:outputPanel id="productPanel">

<rich:dataTable value="#{products}" var="product">

<h:column>

<f:facet name="header">Product</f:facet>

<a:commandLink value="#{product.name}" actionListener="#{shopper.editSelection}" reRender="editPanel"/>

</h:column>

<h:column>

<f:facet name="header">Price</f:facet>

#{product.price}

</h:column>

<h:column>

<f:facet name="header">Stock</f:facet>

#{product.stock}

</h:column>

</rich:dataTable>

</a:outputPanel>

A look at the section of the shop.xhtml facelet shows an <a:commandLink/> - an Ajaxified version of the <h:commandButon/>. This supplies our “shopper” component with the selected product through the “product” data model selection through Ajax. Also take note of the “reRender” and <a:outputPanel/> tags, which specify which areas of our page should be Ajax refreshed after certain actions are called. In the editSelection() action a new CartItem (a join entity between a product and a shopping cart) containing the selected product is created and outjected.

public void editSelection() {

if (edit == false) {

cartItem = new CartItem();

cartItem.setId(count++);

cartItem.setProduct(product);

cartItem.setSelected(true);

return;

}

cartItem = selectedItem;

cartItem.setSelected(true);

edit = true;

}

I want to use the same action to represent selecting a new product (from “products”) and editing an already existing CartItem (from “selectedItems”). This is achieved with a private “edit” boolan field, which by default is false. Also since proper behaviour of DataModel and DataModelSelections depends on a properly implemented equals() method (i.e. instance uniqueness) I assigned artificial ids with the static “count” to each CartItem. Note that without setting flushMode to MANUAL, doing this will cause exceptions to be thrown down the lane somewhere. Finally setting the CartItem's “selected” field to true enables the rendering of the panel in which the quantity of that product will be entered.

Once the quantity is specified, the addSelection() action is called. Because of the boolean “edit” we are able to determine if this is a new product selection or one from the existing list and respond appropriately, calculating the total cost of the users purchases so far and modifying the corresponding DataModels appropriately. In the case of an edit, the old computed cost of a product is deducted from the total, and re-computed and added to the total. To guarantee that the change in costs will reflect properly, the edited “cartItem” is removed and re-inserted in to the “selectedItems” DataModel.

It is also very easy to remove an already configured CartItem, again with the combination of <a:commandLink/> and the “selectedItem” DataModelSelection.

public void removeSelection() {

total.subtract(selectedItem.getCost());

selectedItems.remove(selectedItem);

}

Finally, the user may save their selection. This involves the creation of a new Cart object, which is persisted to get an ID and associated with the CartItems in the “selectedItems” DataModel. Note here that the fake Ids I generated for the CartItems will cause maximum trouble in the database, and so I set them to null to force the persistence context to generate proper Ids for them. Don't forget the all important “entityManager.flush()” to make all changes permanent.

Finally I raise an event (“shopper.events.CartEdit”) which is being observed by the “shopList” Seam component's list() action causing the “carts” DataModel to be refreshed with fresh data.

@Factory("carts")

@Observer("shopper.events.CartEdited")

public void list(){

Contexts.getSessionContext().set("carts", null);

carts = entityManager.createQuery("Select c from Cart c").getResultList();

}

The Job Is Done. This is use of Ajax and DataTables is quite simplistic, but I've used it in some really tight corners for some advance stuff. One scenario that I can see with this example is the requirement to remove a product from the list of products once selected and configured, or to put it back once it has been removed from the configured ones. Another will be how to edit an already persisted cart to remove or add products to that cart. I've just laid the foundation. With some tricks of your own, you should be able to achieve some serious magic.

The upload-button depends on a bean-property 'uploadedFilename' which is sync via AJAX.

So it is possible to enabled the upload-button before the file is really uploaded to the server.
We have a jsf-bean:

public class FileUploadBean  {

  private UploadedFile uploadedFile;
  private String uploadedFilename;

  // ... setter and getter ...

  public void uploadFile(final ActionEvent event) {
    if (null != this.uploadedFile) {
      LOG.debug("file-size '"+this.uploadedFile.getSize()+"'");
    }
  }
}

and the facelets-page:

<ui:component
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:t="http://myfaces.apache.org/tomahawk"
  xmlns:a4j="http://richfaces.org/a4j">

<c:set var="controlId" value="controls" />

<a4j:form>
  <a4j:jsFunction name="updateFilename" reRender="#{controlId}">
   <a4j:actionparam name="filename" assignTo="#{FileUploadBean.uploadedFilename}" />
  </a4j:jsFunction>
</a4j:form>

<h:form enctype="multipart/form-data">
 <t:inputFileUpload id="fileupload"
                    size="40"
                    value="#{FileUploadBean.uploadedFile}"
                    storage="file"
                    required="true"
                    onchange="updateFilename(this.value)"/>

 <h:panelGroup id="#{controlId}">
   <c:choose>
     <c:when test="#{!empty FileUploadBean.uploadedFilename}">
       <!-- User has selected a File - enable Upload-Control -->
       <h:commandLink value="Upload enabled ..."
                      actionListener="#{FileUploadBean.uploadFile}"/>
     </c:when>
     <c:otherwise>
       <!-- User doenst have selected a File - DISABLE Upload-Control -->
       <h:outputText value="Upload disabled"/>
     </c:otherwise>
   </c:choose>
 </h:panelGroup>
</h:form>

</ui:component>