Version 22
Created by artdaw on Apr 9, 2009 9:52 AM. Last modified by artdaw on Mar 8, 2012 11:06 AM.

    ← RichFaces FAQ

     

    Before 4.0 branch RichFaces is bundled with a number of JavaScript libraries: Prototype, jQuery, and Script.aculo.us. In order to prevent JavaScript versions conflict you should use only one version of the framework or library.If you want to use external library you should exclude built-in script in the web.xml:

    ...
    <context-param>
        <param-name>org.richfaces.ExcludeScripts</param-name>
        <param-value>Prototype,Scriptaculous</param-value>
    </context-param>
    ...

    NOTE not available in 3.3.x. Was removed after review and checking components affected in 3.1.x


    RichFaces components use Prototype and jQuery very unwillingly. There are many special patches for the components in every internal library, therefore using external scripts will break some of the components.

    RichFaces Framework contains the latest version of jQuery with some fixes. It can be used out of the box with one limitation: you should use jQuery().foo() instead of $.foo() in order to avoid conflicts with the RichFaces/Prototype library.

    There are two ways to call JavaScript API on components:

    1. using useful functions such as #{rich:clientId('id')}.component.foo() (#{rich:clientId('modalPanel')}.component.show() for example)
    2. using <rich:componentControl>
    <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>

    You can find real-live example of <rich:componentControl> usage at the RichFaces Live Demo page.

    In order to load JavaScript libraries and stylesheets from JARs you can use <a4j:loadScript> and <a4j:loadStyle> tags respectively.

    Example:

    …
    <a4j:loadScript src="resource://scriptaculous.js" />
    <a4j:loadStyle src="resource://main.css" />
    …

    Unfortunatelly some RichFaces components also influenced by the weird issue of IE6. First report was on simple toggle panel:

              <rich:simpleTogglePanel switchType="client">
               <f:facet name="header">
                    <span>
                    This is bare text. 
                    </span>
                    <div style="clear: right;"></div>                    
               </f:facet>
               <f:facet name="openMarker">
                    <img style="border: 1px solid red;" src=".." height="28" width="30" />
               </f:facet>
               <f:facet name="closeMarker">
                    <img style="border: 1px solid red;" src=".." height="28" width="30" />
               </f:facet>
               Some text goes here
          </rich:simpleTogglePanel>

    There we used

     

    <div style="clear:right"></div>

     

    because without it - header div does not consider relativelly positioned image size and does not stretched to its height.

    But after it's added - "Bare text" not shown.

    This cause by famous IE6 Peekaboou issue. Clearing div which placed right after div with float caused parent div with background-image to be rendered wrong.

     

    possible solutions:

    1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.
    2. Give both div#floatholder and div#float 'position: relative'. Be sure to fully test this method.
    3. Give div#floatholder hasLayout

     

    Additional details here and here.

    Components which could be also affected: layouts, dropDownMenu and scrollableDataTable.