RichFaces and Prototype - how to avoid problems

Today I have had a strange problem with my RichFaces web application. In some cases widgets did not work as expected. For example the calendar components did not work - sometimes. The reason was the HTML design template I used. The template was provided by my customer and includes a lot of CSS and also javaScript pages. One of the JavaScirpt pages was a prototyp.js library (v 1.6.0.3).

And as RichFaces (3.3.3) is also using this protype version the libraries conflicts to each other.  But when I removed the prototype.js library form my template I run into the next problem. Now the JavaScript Navigationbar-provided by the customers HTML template - did no longer work. The reason was that RichFaces did not load all scripts per default but on demand. So in complex pages with a lot of RichFaces Widges everything works fine - the NavigationToobar loads. But in a simple welcome page my Navigationbar was missing the prototype scripts and throws an javascript error (method not found).

To solve this problem and also avoid the conflict of the RichFaces Prototype Library with an external Prototype library you can use the RichFaces config Param: org.richfaces.LoadScriptStrategy

If you set this param to "ALL" all scripts will be loaded in every page - so my external navigation bar was now happy with the prototype scripts provided by richtfaces.

So now I use the following setting in my web.xml file:

    <context-param>
        <param-name>org.richfaces.LoadScriptStrategy</param-name>
        <param-value>NONE</param-value>
    </context-param> 

RichFaces on Glassfish

Today I run into a deployment problem during I tried to install my RichFaces Application on Glassfish. The situation was realy crazy. At the first look everything works well. But when I tried to add the rich:tree component into one of my pages the page causes an error on my glassfish server.
Even when I select a Node of my Tree Component I got an  

NoClassDefFoundError: org/apache/xerces/xni/parser/XMLConfigurationException

First I tried to add the newest xerces version into my web app. But this generates more and more problems as the xerces lib conflicts with the xerces parser provided by glassfish.

After playing arround with the richfaces config params in the web.xml I found that the nikohtml library was the problem why glassfish did not run the application properply

I have had used the following additional richfaces configuration in my web.mxl (I did no know why)

   <context-param>
        <param-name>org.ajax4jsf.xmlparser.ORDER</param-name>
        <param-value>NEKO, TIDY</param-value>
    </context-param>

And this leads into a problem with the xerces parser included into glassfish.
The solution easy. I simply replaced the NEKO with TIDY

So now I use the following configuration in my web.xml

    <context-param>
        <param-name>org.ajax4jsf.xmlparser.ORDER</param-name>
        <param-value>TIDY</param-value>
    </context-param>

And now the tree component works perfect !

An usefull link will also be this blog:

http://www.javaplex.com/blog/optimizing-jsf-richfaces-applications/

RichFaces - SuggestionBox and hidden Field

Today I was faced with a problem implementing a suggestionbox in my JSF web application using RichFaces. There are a lots of examples and well documented api in the RichFaces Developer Guide. But my problem was that the seach phrase the user types into the input field was only for searching in the backend. After the user select one entry form the suggegstion box I need to set an internal key into a  property of my BackingBean. But this key should not be shown to the user. So the typical examples did not work for me:

<h:inputText value="#{bean.property}" id="suggest"/>
<rich:suggestionbox for="suggest" suggestionAction="#{bean.autocomplete}"  var="suggest">
        <h:column>
                <h:outputText value="#{suggest.text}"/> 
        </h:column>
</rich:suggestionbox>

The solution for me was to left the value binding of the input component. Instead of that I use the f:setPropertyActionListener to update my backing bean property. So I was able to display user-friendly values from my backend. After user select one entry I store the key of that entry into my backing bean.

<h:inputText id="suggest_input" />
   <rich:suggestionbox for="suggest_input" minChars="1"
       fetchValue="" nothingLabel="no entry found"
         suggestionAction="#{myMB.suggestData}" var="suggest">
         <h:column>
            <h:outputText value="#{suggest.firstname}" />
         </h:column>
         <h:column>
            <h:outputText value="#{suggest.lastname}" />
         </h:column>
            <a4j:support ajaxSingle="true" event="onselect"
                action="#{myMB.refreshData}" reRender="data_id">
            <f:setPropertyActionListener value="#{suggest.userID}"
                    target="#{myMB.userID}" />
         </a4j:support>
  </rich:suggestionbox>  

myMB is my BackingBean which processes the SQL Data lookup with the method "suggestData". The user enters first or last name and my suggestData method did a SQL search using some LIKE statements.

    public ArrayList<UserData> suggestData(Object event)
            throws SQLException {
        ArrayList<UserData> list = new ArrayList<UserData>();
        String sPref = event.toString();
        int iPref = -1;

        sQuery = "SELECT patID,firstname,lastname FROM userlist "
                + " WHERE firstname LIKE '"
                + sPref
                + "%' OR lastname LIKE '"
                + sPref
                + "%' "
                + " ORDER BY lastname ASC"; 
   .....
   ........

The BackingBean holds also the userID which is an internal primary key. But the suggestData method returns an Array of userData containing the First, Last and userID. But the userid is not displayed in the suggestionbox. When the user selects an entry the a4j:support Ajax Action is triggerd whid did some rerendering (but this is not the trick). The trick is to use the f:setPropertyActionListner to update the userID property form my backing bean myMB. The inputText component is not bound to any value of my backing beans. So this is a simple search input field.

Maybe this example could be useful for someone.

RichFaces - TinyMCE Support

Since the new version 3.3 of RichFaces JSF Framework was released the TinyMCE Editor is now included in RichFaces! This is a cool feature and allows you to use the full featured TinyMCE Editor in your richfaces webapp.

To activate the Editor use the following tag:

    <rich:editor  theme="advanced" 
           value="#{myMB.content}" /> 

also it is possible to customize the editor in any way TinyMCE allows customization. So I use the following configuration to change width attribute and toolbar options:

        <rich:editor id="details_id"  theme="advanced" 
            plugins="fullscreen" value="#{workitemMB.item['htmldetail']}">
            <f:param name="theme_advanced_buttons1"
                value="fullscreen,undo,redo,cleanup,|,formatselect,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,insertdate,inserttime,hr,outdent,indent,|,link,unlink" />
            <f:param name="theme_advanced_buttons2" value="" />
            <f:param name="theme_advanced_buttons3" value="" />
            <f:param name="theme_advanced_toolbar_location" value="top" />
            <f:param name="theme_advanced_toolbar_align" value="left" />
            <f:param name="width" value="95%" />
            <f:param name="height" value="260" />
        </rich:editor> 

RichFaces - Background for Input Fields

I played around a long time to found out to avoid RichFaces to set a background color for all input fields.

If you are using your own Skin all Input Fields will appear with a background image. This image has a "color-fading" effect. The effect can be general controlled by the following contxt-parameter in the web.xml file:

    <context-param>
        <param-name>org.richfaces.CONTROL_SKINNING</param-name>
        <param-value>enable</param-value>
    </context-param>

The image is generated by RichFaces from the skin property 'additionalBackgroundColor'. So my first thought was to set this attribute to 'FFFFFF'. After that each input field apears without the background. But a side effect of this change is that also all menues have no more mouse-over effect - every menue entry is now white (FFFFFF)  :-(

So it is no good idea to change the skin Attribute 'additionalBackgroundColor' to white!

So my solutions was to override the css definition of the input files using a custom css file like this:

textarea, textarea[type="textarea"], input[type="text"], input[type="password"], select {
    background-color:#FFFFFF;
    background-image: none;
    border-color: silver;
} 

It works fine for me and all input fields appear now with white background and a silver border.

RichFaces - How to handle external Login mechanism like OpenID

Today I found a solution for a login problem I was faced with since a long time using RichFaces and Facelets in my JEE Web App.
The problem was that my Login Form uses an external login mechanism (OpenID) to log in the user.
After the first successful login the RichFaces page is not loaded correctly (styles and scripts are not loaded). If the user reloads the page after the first login everything works well.
I saw that some people are faced with this problem in similar situations. So I will try to explain my solution I found today.

My application has to areas - a unrestricted (/*) and a restricted (/secured/*) area. So when the user try to access a restricted (RichFaces) page (e.g. /secured/page-a.jsf) my loginForm - located in the unrestricted area (/login.jsf) appears. So the user can first perform a login. Typical for OpenID the login mechanims is handled by a Servlet. The Servlet knows the first Request to the restricted page. After successful login the Servlet will redirect the user again to that restricted page. But this (RichFaces)page now will not be rendered correctly because the request goes no longer through the RichFaces Servlet Filter. So CSS and Scrips will not be loaded!
I solved this situation as I changed the startup mechanism of my application. The first thing the user will see is the Loginpage itself! The LoginPage is located in an unrestricted area. Now after the user logged in successfull, the login form (servlet) will redirect the user to an restricted RichFaces Page. And in this case the restricted RichFaces Page will be rendered correctly as the full request goes now through the RichFaces Servlet Filter. This works as there is no cascading redirect through different servlets.

I know that this sounds a little bit confusing but it works for me. If you have found other solutions for that problem please let me know.

RichFaces - Feature will not work in IE ...?

As I am working with RichFaces I run in a situation where a realy cool Drag&Drop feature supported by RichFaces works fine in Firefox but did not work in Internet Explorer. 

First I thougt it was a Bug from RichFaces and opend a new issue in the JBoss RichFacess Issue tracker.

But it is a known issue. Following the issue you can see that my problem is well known in a lot of other situations. Finally the problem occures if a RichFaces/Ajax JavaScript event trigers a page reload. For example after a DropEvent in my case. But it seems it can happen also in a lot of other situations. This is like my code looks that generated the bug in IE:

 <rich:dropSupport id="myprojects" acceptedTypes="project"
	dropListener="#{myProfileMB.processDropEventAdd}"						
	reRender="sidebar_menu_id, myprimprojects_menu_id"
	action="mydrop_action">
</rich:dropSupport>

The  problem was that the action "mydrop_action" seems not to be processed in IE but works fine in Firefox. If you have same problem the solution would be easy. You simply need to change the navigation rule in your faces-config.xml file. You only need to add a <redirect /> tag to the corresponding navigatino rule. So I changed my rule to:

 <navigation-case>
	<from-outcome>mydrop_action</from-outcome>
	<to-view-id>/pages/projects/myprojects.xhtml
	</to-view-id>
	<redirect/> 
</navigation-case>

And this soved the problem. Now the code works in firefox and IE. And RichFaces are really cool!

RichFaces - using custom Skinns

The current Version of RichFaces (3.2.1.GA) allows you to use skins in your web application in a much easier way as in the RichFaces versions before.

A detailed documentation about this feature can be found here:

http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/ArchitectureOverview.html#Skinnability

I used this in my own web application and did only two things:

1.) I created a custom skin property file. "myfirstskin.skin.properties" and placed this file into the /src/main/resources folder of my maven project (if you did not use maven put this file in the /META-INF/skins folder or classpath of your webapp)

You can also copy a existing skin property file to start. You will find skins form RichFaces in the richfaces-impl-3.2.1.GA.jar file under /META-INF/skins/.

This is a example for a skin.propertyfile (blueSky.skin.properties)

#Colors

headerBackgroundColor=#BED6F8
headerGradientColor=#F2F7FF
headerTextColor=#000000
headerWeightFont=bold
generalBackgroundColor=#FFFFFF
generalTextColor=#000000
generalSizeFont=11px
generalFamilyFont=Arial, Verdana, sans-serif 

controlTextColor=#000000
controlBackgroundColor=#ffffff
additionalBackgroundColor=#ECF4FE

shadowBackgroundColor=#000000
shadowOpacity=1
panelBorderColor=#BED6F8
subBorderColor=#ffffff

tabBackgroundColor=#C6DEFF
tabDisabledTextColor=#8DB7F3

trimColor=#D6E6FB
tipBackgroundColor=#FAE6B0 
tipBorderColor=#E5973E 
selectControlColor=#E79A00

generalLinkColor=#0078D0
hoverLinkColor=#0090FF
visitedLinkColor=#0090FF

# Fonts
headerSizeFont=11px

headerFamilyFont=Arial, Verdana, sans-serif
tabSizeFont=11
tabFamilyFont=Arial, Verdana, sans-serif
buttonSizeFont=11
buttonFamilyFont=Arial, Verdana, sans-serif
tableBackgroundColor=#FFFFFF
tableFooterBackgroundColor=#cccccc
tableSubfooterBackgroundColor=#f1f1f1
tableBorderColor=#C0C0C0
tableBorderWidth=1px

#Calendar colors
calendarWeekBackgroundColor=#F5F5F5
calendarHolidaysBackgroundColor=#FFEBDA
calendarHolidaysTextColor=#FF7800
calendarCurrentBackgroundColor=#FF7800
calendarCurrentTextColor=#FFEBDA
calendarSpecBackgroundColor=#E4F5E2
calendarSpecTextColor=#000000

warningColor=#FFE6E6
warningBackgroundColor=#FF0000
editorBackgroundColor=#F1F1F1
editBackgroundColor=#FEFFDA

#Gradients
gradientType=plain

2.) next I added two params into my web.xml file:

	<!-- ### Richt Faces params deepMarine #### -->
	<context-param>
		<param-name>org.richfaces.SKIN</param-name>
		<param-value>deepMarine</param-value>
	</context-param>
	
	<context-param>
		<param-name>org.richfaces.CONTROL_SKINNING</param-name>
		<param-value>enable</param-value>
	</context-param>
	

 The first param tells RichFaces to use a predefined or custom skin property file (the name is the first part of your .skin.property file)

And the second param (very important) tells RichFaces also to render standard HTML tags in this skin.

So if you use a standard JSF Tag like

	<h:outputLabel value="User name:" />
	<h:inputText id="j_username" />

	<h:outputLabel value="Password:" />
	<h:inputSecret id="j_password" />
 

these tags will also be renderd in new cool style!

RichFaces & Maven - easy setup!

The last days I read a lot about RichFaces and saw this cool live demo. RichFaces sparks my interest. As the JSF Framework RichFaces from JBoss supports much more components as other frameworks and also really cool Ajax features, I started to build my first jee web module using RichFaces.
First I read this quick guide which shows how to build a JEE Webmodul using RichFaces in general. But as I planed to integrate my first example into an existing JEE project build on maven I search a lot to find out how to setup a Maven Web module with RichFaces Support.

Here is my personal quick guide to setup a maven web app with RichFaces:

1.) Add the JBoss Maven repository to your Maven Installation:

first you need to add the following repository description into your setup.xml file located in your Maven root directory:

 	<!-- JBoss RichFaces Repository -->
	 <repository>
		 <releases>
		    <enabled>true</enabled>
		 </releases>
		 <snapshots>
		    <enabled>false</enabled>
		    <updatePolicy>never</updatePolicy>
		 </snapshots>
		 <id>repository.jboss.com</id>
		 <name>Jboss Repository for Maven</name>
		 <url>
		    http://repository.jboss.com/maven2/
		 </url>
		 <layout>default</layout>
	       </repository>
	</repositories>

So later maven will be able to download the necessary components. (I don't know why this framework is not included into the standard maven repository)

2.) Add the RichFaces Dependencies

the next (and final) step is to add the RichFaces Dependencies into your Maven Web Module (I assume that you know how to build a web module with maven).
To find out the right dependencies takes me the most time as I did not found an example on the JBoss RichFaces Homepage. But finally I found these dependency configuration which works fine:

   <dependencies>
        <dependency>
            <groupId>org.richfaces.ui</groupId>
            <artifactId>richfaces-ui</artifactId>
            <version>3.2.1.GA</version>
        </dependency>        
   </dependencies>

So add these three dependencies into your pom.xml.

That's really all!

I completed my first integration test with the Simple Ajax Echo example at it works perfect !

Now I begin to love RichFaces :-)

Tags

Search

Up to 10 Recent Entries

• Ubuntu 10.4, Glassfish V3 and Java.....
• EJB 3.0 and WebServices
• RichFaces and Prototype - how to avoid problems
• Imixs Workflow on JEE6
• AXIOM jar Conflict in Glassfish 2.1.1
• RichFaces on Glassfish
• JEE6 and packaging an EAR
• Imixs JEE Workflow 2.0.2 release
• Eclipse Galileo - JSF Content Assist for xhtml files
• Glassfish & OpenID - JSR-196 with OpenID4Java

Feeds

• Alle
• /General
• /Maven
• Comments

Categories

• Alle
• General
• Maven

Bookmarks

• imxis Workflow Blog (en)
• Open Source Workflow
• imixs Workflow Blog (de)
• imixs.com
• blogs.sun.com