Ajax Java Server Faces Frameworks

Inhaltsverzeichnis
Zuletzt aktualisiert
by Tom (30 Aug)
Misc (Software Development)
by Tom (12 Jun)
Content (Software Development)
More information about several JSF Frameworks on my matrix: http://www.jsfmatrix.net

Table Of Content

JavaServerFaces Frameworks

1. Introduction

1.1. JavaServerFaces

JavaServerFaces (JSF) is a web application framework which provides prewritten items for a GUI.

The offered components improves the quality and speed of creating websites without the need to know what is going on in the background of this code.

1.2. Tips for Installation under Windows

Generally you should try to find a WAR for each framework.
They work using Apache Tomcat for sure instead of trying to copy libraries into the correct paths.
The structure of the directories and files can be seen in a WAR and what is more important you already have the correct properties in the web.xml.

Now I would like to show you a way how to enable and disable a webproject under tomcat again.

First of all download and install Tomcat to a directory of your choice.

To seperate Tomcat and the root-directory where all JSP will be placed create a directory like c:/jsf-root/.
Originally the directory {TOMCAT_DIR}/webapps/ is used for your webapplications but there we only want to put WARs to have an overview about the packets.

So open the file {TOMCAT_DIR}/conf/server.xml and scroll down until you reach </Host>.
Before this tag add the following line:

e.g.:

<Context docBase="c:/jsf-root/myfaces" path="/myfaces" />

For each projects you can add a new <Context> to enable it or you can comment it out with <!-- <Context ... /> -->.
Thus you have the full control with Tomcat which of your directories is online and can be reached.

Finally you can start your Tomcat by running {TOMCAT_DIR}/bin/startup.bat.

Links:

1.3. Installing application using a WAR

If you found a WAR from a framework you got luck. The installation is very easy and you do not have to edit any configuration file.
Just copy your WAR-file into {TOMCAT_DIR}/webapps. Take a look at the console and wait a second. Everything will be done for you.

Now you can start your browser and type the URL:

http://localhost:8080/{NAME_OF_WARFILE}

e.g.

adf-faces-demo-ea20-SNAPSHOT.war

http://localhost:8080/adf-faces-demo-ea20-SNAPSHOT/

1.4. Installing application without WAR

If you are not able to find any WAR for your framework then it can be quite difficult.
There is no perfect manual how to configure JSF packets for Tomcat but here are some hints which helps you:

  • Copy all libraries from /lib/*.jar of your framework to {TOMCAT_DIR}/shared/lib/.
    If one file already exists then check whether they have the same date and size.
    This ensures that both frameworks can work with the same lib which spends storage space and memory.
    When both files are different then put the newer file to /{JSF_DIR}/{PROJECT_DIR}/WEB-INF/lib.

  • Copy all class-files from /classes/* of your framework to {TOMCAT_DIR}/shared/classes/.
    Do the same steps like above with the libraries except using /{JSF_DIR}/{PROJECT_DIR}/WEB-INF/classes as directory.

  • Get a working example
    A lot of errors occur because the web.xml in /{JSF_DIR}/{PROJECT_DIR}/WEB-INF/ is not configured correctly.
    It is horrible to find the error or the correct attributes. The only possibility which remains if there is no documentation on the website of your framework is to use Google.




2. Popular Frameworks in Detail

2.1. myFaces

2.1.1. Description

Apache MyFaces is the first free open source Java Server Faces (JSF) implementation.

JSF is a web application framework in Java which can be used to create prewritten items in websites without coding a lot.
These frameworks offers objects for your own purpose without knowing what is going on in the background.

2.1.2. Analysis

simple installation
easy to code
good documentation

Just simple HTML-objects available
Includes only a few basic items

2.1.3. Summary

Links

Website: http://myfaces.apache.org/

Demo: http://www.irian.at/myfaces/home.jsf

WAR: http://archive.apache.org/dist/myfaces/binaries/myfaces-1.1.1-examples.zip (simple.war)

Tutorial: http://www.heise.de/ix/artikel/2006/04/136/

TLD: http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/index.html

Tags
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
Libraries
  • myfaces-api-1.1.2.jar
  • myfaces-impl-1.1.2.jar




2.2. Tomahawk

2.2.1. Description

Tomahawk is a JSF implementation based on MyFaces.
It will be installed with MyFaces (Package: all) and offers some more items for the developer.

2.2.2. Analysis

simple installation
easy to code
good documentation

More objects but still too simple
Layout might break with some elements

2.2.3. Summary

Links

Web: http://myfaces.apache.org/tomahawk/index.html

Download: http://www.apache.org/dyn/closer.cgi/myfaces/binaries/myfaces-core-1.1.3-bin.tar.gz http://www.apache.org/dyn/closer.cgi/myfaces/binaries/tomahawk-1.1.2-bin.tar.gz

WAR: http://archive.apache.org/dist/myfaces/binaries/myfaces-1.1.1-examples.zip (simple.war)

JavaDoc: http://myfaces.apache.org/tomahawk/apidocs/index.html

TLD: http://myfaces.apache.org/tomahawk/tlddoc/index.html

TLD Core: http://myfaces.apache.org/impl/tlddoc/index.html

Tags
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
Libraries
  • tomahawk.jar
Used frameworks

Kupu: http://kupu.oscom.org/demo/




2.3. Sandbox

2.3.1. Description

Sandbox is an additional framework which has a relationship to Tomahawk.
New created objects are tested in Sandbox before they might be approved to Tomahawk.

During the last time a lot of new objects were published in Sandbox and the community grows.
New features like AJAX are already tested and surely will be accepted by its bigger brother.

2.3.2. Analysis

well written components
a huge amount of new items in the last weeks

items are often replaced or exist only for a short time
documentation is out of date

2.3.3. Summary

Links

Website: http://myfaces.apache.org/sandbox/index.html

Demo: http://www.irian.at/myfaces-sandbox/home.jsf

WAR: http://archive.apache.org/dist/myfaces/binaries/myfaces-1.1.1-examples.zip (sandbox.war)

Tags
<%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s"%>
Libraries
  • sandbox.jar
Used frameworks

http://www.dojotoolkit.org/




2.4. Tobago

2.4.1. Description

The developement of this framework started in 2002 and was designed for using different themes without changing the own JSP.

2.4.2. Analysis

Easy change to new designs
Website can be switched to different languages

Complex way of installation using Mavon
Slow rendering

2.4.3. Summary

Links

Web: http://myfaces.apache.org/tobago/index.html

Demo: http://tobago.atanion.net/tobago-example-demo/faces/overview/intro.jsp

Download: http://www.apache.org/dyn/closer.cgi/myfaces/binaries/myfaces-tobago-1.0.7-bin.tar.gz

WAR: -

Installation: http://myfaces.apache.org/tobago/getting-started.html

Tags
<%@ taglib uri="http://myfaces.apache.org/tobago/component" prefix="tc" %>
<%@ taglib uri="http://myfaces.apache.org/tobago/facelet-extension" prefix="tx" %>
Libraries
  • tobago-core-1.0.7.jar
  • tobago-theme-richmond-1.0.7.jar
  • tobago-theme-scarborough-1.0.7.jar
  • tobago-theme-speyside-1.0.7.jar
  • tobago-theme-standard-1.0.7.jar

2.4.4. Installation

I was not able to get the current binary distribution running without errors. So I choose another way to install Tobago.
But before I needed some more programs:

and a SVN client like TortoiseSVN:

At the beginning check out the sources of Tobago:

svn checkout http://svn.apache.org/repos/asf/myfaces/tobago/trunk/ tobago

In TortoiseSVN:
right click > SVN Checkout > URL of repository: _http://svn.apache.org/repos/asf/myfaces/tobago/trunk/_

After downloading change into the main directory and type:

mvn install

This proccess takes a while because Maven downloads all needed frameworks and compiles the sources of Tobago.

If you see an error message like this:

[INFO] ------------------------------------------------------------------------
[ERROR] BUILD ERROR
[INFO] ------------------------------------------------------------------------
[INFO] Error building POM (may not be this project's POM).


Project ID: org.apache.maven:maven-model

Reason: Error getting POM for 'org.apache.maven:maven-model' from the repository
: Error transferring file
  org.apache.maven:maven-model:pom:2.0

from the specified remote repositories:
  central (http://repo1.maven.org/maven2),
  apache.snapshots (http://svn.apache.org/maven-snapshot-repository),
  snapshots (http://snapshots.maven.codehaus.org/maven2)



[INFO] ------------------------------------------------------------------------
[INFO] For more information, run Maven with the -e switch
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 51 seconds
[INFO] Finished at: Mon Jun 12 14:16:28 CEST 2006
[INFO] Final Memory: 4M/7M
[INFO] ------------------------------------------------------------------------

Just ignore it and run mvn install once again until all files are downloaded.
It might happen sometimes but Maven continues the download on another server then.

In the end change into the demo directory example/demo and run

mvn package

A nice WAR will be built and this is exactly what we want to have.
If the progress is finished you can put the new package into {TOMCAT_DIR}/webapps.




2.5. Trinidad (ADF)

2.5.1. Description

Trinidad formerly known as Abstract Design Framework (ADF) is supported and developed by the help of Oracle.
It is the default GUI framework in Oracle JDeveloper for creating websites beside the original MyFaces.

2.5.2. Analysis

Nearly no documentaion
Strange behaviour of Ajax requests?

2.5.3. Summary

Links

Tutorial: http://www.oracle.com/technology/products/adf/learnadf.html http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/index.html

Download: http://www.oracle.com/technology/products/jdev/howtos/10g/adfjsf/how-to-adf-faces-10gjdev.htm (I have been using the adf-faces-demo-ea20-SNAPSHOT.war from Tom, should be the same like on this link) http://www.oracle.com/technology/products/adf/index.html (is part of the Oracle JDeveloper 10g)

Docs: http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/index.html#Documentation

Tags
<%@ taglib prefix="af" uri="http://xmlns.oracle.com/adf/faces" %>
<%@ taglib prefix="afh" uri="http://xmlns.oracle.com/adf/faces/html" %>
Libraries
  • adf-faces-api-ea20-SNAPSHOT.jar
  • adf-faces-impl-ea20-SNAPSHOT.jar




2.6. ZK1 / ZK2

2.6.1. Description

ZK is the most active project on SourceForge.net.
Shortly the latest version 2.00 has been published with a few .

2.6.2. Analysis

Full AJAX support
Highly designed components
Big community
Great documentation

Demo is not compatible with Opera, functionality with this browser is completely broken with ZK2 demo.

2.6.3. Summary

Links

Website: http://zk1.sourceforge.net/

Demo: http://www.potix.com/zkdemo/userguide

Download: http://sourceforge.net/project/showfiles.php?group_id=152762

WAR: http://sourceforge.net/project/showfiles.php?group_id=152762 (demo/bin/zkdemo.war)

API: http://zk1.sourceforge.net/javadoc/index.html

Commercial Licence: http://zk1.sourceforge.net/buy/pricing.html

Tags

None... ZK uses ZUL instead of JSP.
ZUL is a XML file format that is a derivative of XUL.

Used frameworks

http://www.dojotoolkit.org/




2.7. ICEfaces

2.7.1. Description

The Company ICESoft is responsible for this application framework which has its focus especially on AJAX and the communication between server and client.
All useful standard components for creating websites are available in this package thus all general items can be used.

2.7.2. Analysis

Full AJAX support
Highly designed components

Cache depends on cookies, site can be out-of-date
Cookies are required
CSS is always required on components

2.7.3. Summary

Links

Website: http://www.icesoft.com/products/demos_icefaces.html

Demo: http://demo.icesoft.com/component-showcase/

WAR: http://www.icesoft.com/downloads/reg.php?id=1 (samples/component-showcase.war)

Tags
<%@ taglib prefix="ice" uri="http://www.icesoft.com/icefaces/component" %>
Libraries
  • icefaces.jar
  • icefaces-comps.jar
Used frameworks

http://script.aculo.us http://mir.aculo.us




2.8. NetAdvantage

2.8.1. Description

2.8.2. Analysis

Great tree using Ajax to fetch needed data

2.8.3. Summary

Links

Website: http://www.infragistics.com/products/NetAdvantage/JSF/

Download: http://www.infragistics.com/downloads/details.aspx?productid=134

WAR: http://www.infragistics.com/downloads/details.aspx?productid=134 (demos/war/j2ee.1.4/infragistics-netadvantage.war)

Tags
<%@ taglib prefix="ig" uri="http://www.infragistics.com/faces/netadvantage"%>
Libraries
  • infragistics-netadvantage.jar
  • infragistics-shared.jar
  • infragistics-webbar.jar
  • infragistics-webgrid.jar
  • infragistics-webinput.jar
  • infragistics-webmenu.jar
  • infragistics-webtab.jar
  • infragistics-webtree.jar




3. Comparison between different frameworks

3.1. Overview

  Tomahawk Tobago Trinidad ZK2 ICEfaces Netadvantage
Introduction            
Installation easy easy (SVN / MVN) difficult, but easy with WAR easy with WAR easy with WAR easy with WAR
Documentation good bad bad good good middle
API            
Components            
Tree
(only tabs use Ajax)

(strange Ajax)

(Ajax during reload)

(Ajax)

(Ajax)
Livedata
(Ajax)

(Ajax)
Drag & Drop
(Ajax, changes will not be saved)
Tabs
(Ajax)

(Ajax)

(Ajax)
Autocomplete
(Ajax)
Misc            
Ajax
(officially yes)
Menu
Time to render fast slow middle fast middle middle
Time to code less much much less much less
Difficulty easy difficult difficult easy middle easy
Themes
(CSS only)

(skins)

(CSS only)

(CSS)

(CSS only)
Localisation
(WEB-INF/i3-label.properties)
Bookmarking
(tabs)

(tabs)

(tabs)

(tabs)
Saving session
(selected language only)

(with the same browser yes)
Back-Button
(officially yes)
Pathrestrictions at demo
Input: Keyboard
Right-Mouse-Click
Licence Apache License Apache License Freeware ? GPL (+ Commercial Licence) Community (free)
Commercial (purchase)
Purchase
free Beta ?

3.2. Further information

Opera
The browser "Opera" needs to be verified that frameworks can be used with it.
Firefox and IE work well in nearly 100% with the components.
Additional Hints
ZK2
  • An error might occur while using inline HTML (unknown tags + codes)
  • Session is added to URL if cookies in browser is disabled

ICEfaces

  • Session is attached on Cookie (is needed!)
  • Code depends too much on CSS
  • Cache depends on Cookie (often out-of-date without cookie)

Netadvantage

  • Cache depends on Cookie (often out-of-date without cookie)
  • Changes in web.xml: set javax.faces.STATE_SAVING_METHOD to client for using website without cookies




4. Using a JSF framework in a hybris extension

4.1. Create a new extension using extgen

It is not that difficult to combine JSF and a self-made extension for the hybris platform.
For the beginning set up a new extension with extgen. If you use extgen for the first time then take a look at the following site: [Extension Concept]

Now it is time to show you a small example using one of the listed frameworks above.
You may choose of course another one but here is a tutorial for NetAdvantage:

4.2. Setting up the libraries

  • Download the framework at: Infragistics
    User: nomoleste
    Pass: nomoleste

  • Unpack NetAdvantage_JSF_20061_BETA.zip and change into the directory {NETADVANTAGE_ZIP}/demoswar/j2ee.1.4./
  • Rename infragistics-netadvantage.war to infragistics-netadvantage.zip and unpack the file using WinRAR or WinZIP.
  • Change into {NETADVANTAGE_WAR} and copy the complete directory WEB-INF to {HYBRIS_DIR}/extensions/{YOUR_EXTENSION}/web/webroot/WEB-INF/

4.3. Build up the structure

  • Create a new JSP called index.jsp at {HYBRIS_DIR}/extensions/{YOUR_EXTENSION}/web/webroot/ and paste the content below into the file
  • Copy all further files under {NETADVANTAGE_WAR}/resources/ to {HYBRIS_DIR}/extensions/{YOUR_EXTENSION}/web/webroot/resources
  • Copy and rename {NETADVANTAGE_ZIP}/demos/src/web/webtree/overview/index.jsp to {HYBRIS_DIR}/extensions/{YOUR_EXTENSION}/web/webroot/index2.jsp

index.jsp:

<html>
<head>
<title>NetAdvantage: Example </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="refresh" content="0; URL=index2.faces">
</head>

<body>
<p>Loading...</p>
</body>

</html>
We will use this file to redirect the webuser to a site with the needed file extension .faces.

4.4. Configure JSP for our hybris platform

  • Open the file {HYBRIS_DIR}/extensions/{YOUR_EXTENSION}/web/webroot/index2.jsp and add the following line into the declarations of your JSP header:
<%@ include file="head.inc" %>

Now the beginning should look like this:

...
<%@ page contentType="text/html" language="java"%>
<%@ include file="head.inc" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="ig" uri="http://www.infragistics.com/faces/netadvantage"%>
...

At the end of this file add one last line to cleanup the JaloSession which has been created from head.inc:

<%@ include file="foot.inc" %>
  • Open head.inc and remove all tags which are not concluded by JSP-Tags. These are just HTML-Tags which already exists in your index2.jsp.
  • Open foot.inc, remove all lines and just leave:
<%
	JaloSession.deactivate();
%>

4.5. Set a filter to prevent JaloSession errors with Ajax-Requests

Sometimes we get an internal server error as a page during some requests with Ajax:

500 Internal Server Error
javax.faces.el.EvaluationException: de.hybris.jakarta.jalo.JaloSystemException:
JaloSession.getCurrentSession(): No current session available. To activate a session use session.activate().

The message occurs when trying to use a JaloSession at this website before the head.inc could be included.
To solve the problem follow the next steps:

  • Open {HYBRIS_DIR}/extensions/{YOUR_EXTENSION}/web/webroot/WEN-INF/web.xml and add the following lines to the <web-app>-tag:
	<!-- filters -->
	<filter>
		<filter-name>initfilter</filter-name>
		<filter-class>ybluestorepackage.filter.YBluestoreInitFilter</filter-class>
	</filter>

	<!-- filter mappings -->
	<filter-mapping>
		<filter-name>initfilter</filter-name>
		<url-pattern>*.faces</url-pattern>
	</filter-mapping>

After inserting this code we need of course the depending filter.

  • Copy the complete directory {HYBRIS_DIR}/platform/ext/bluestore/web/webroot/WEB-INF/classes/ybluestorepackage to {HYBRIS_DIR}/extensions/{YOUR_EXTENSION}/web/webroot/WEN-INF/classes/ybluestorepackage

Now we got everything we need to launch our application!

4.6. Run our extension

  • Type ant in your {HYBRIS_DIR}/platform directory
  • Finally start the hybris platform
  • Check out your extension using NetAdvantage with:
http://localhost:9001/{YOUR_EXTENSION}




5. Other frameworks

5.1. Ajax4jsf

An Open Source Framework that enables AJAX in JSF Applications.

Web: https://ajax4jsf.dev.java.net/

Demo: http://livedemo.exadel.com/vcpDemo/demo.jsf

This framework offers only simple objects and requests.
Features are:

  • Skins
  • Drag & Drop
  • Liveinput (Filterlist)

5.2. Eba's AJAX JSF component library

Eba has one single Combobox.

Web: http://labs.ebusiness-apps.com/wiki/default.asp?AjaxJsfComponents

5.3. Rialto JSF

JSF encapsulation of Rialto.
Rialto be used with:

  • JSF
  • PHP
  • JS
  • Python
  • .NET

Web: http://rialto.application-servers.com/wiki/jsf

Demo: http://rialto.application-servers.com/NewsReaderPHP/index.php http://rialto.application-servers.com/NewsReaderJSF

5.4. WebGalileo Faces

Customizable reusable user interface components with support for JSF.

Uses:

  • JSP
  • JSF

WebGalileo Faces is slow and contains only a few components which use Ajax.

Web: http://www.jscape.com/webgalileofaces/

Demo: http://jscape.webappcabaret.net/webgalileofaces/

5.5. Xulfaces

Web: http://xulfaces.sourceforge.net/

Demo: http://xulfaces.sourceforge.net/live-demo.html

WAR: http://sourceforge.net/projects/xulfaces

5.6. Backbase AJAX Java Edition

Introduces a AJAX-based single page interface to JSF.
Backbase can be used with:

  • PHP
  • JS
  • JSF
  • .NET

Nice componenents which try to emulate a desktop with a taskbar, icons and Windows.

Web: http://www.backbase.com/#home/products/editions/java_edition.xml

Stichwörter:

Geben Sie Stichwörter ein, die dieser Seite hinzugefügt werden sollen:
Wait Image 
Sie suchen ein Stichwort? Beginnen Sie einfach zu schreiben.