Module Paramerters

Web applications are all different, that's why CSS and javaScript of components can be changed (see part Customize Components ). RC Faces allows to gather its own CSS or JavaScript files in bigger files (modules) to optimize loading of resources.

Create a CSS repository

In the same package where you created the new CSS files (a good practice is to separate css for each component), create a XML file named repository.xml. All of our CSS files will be gathered in different modules


repository.xml example :


<?xml version="1.0" encoding="UTF-8"?>

<repository id="CssApp" 

      baseDirectory="com/myproject/jsf/rcfaces/css">

      <module id="myCssModule">

            <file name="rcfaces.css" />

 

            <file name="button.css" />

           

            <file name="ie_cadreRegroupement.css" />

   <file name="combo.css" />         

           

            <file name="grid.css" />

            <file name=grid_ie.css" userAgent="ie" />

 

            <file name="ie_hyperlink.css" />

           

            <file name="menuHorizontal.css" />

            <file name="menuVertical.css" />

      </module>

</repository>

 

Note: the baseDirectory attribute of the <repository> node is the package where this file is saved. 

Create a JavaScript repository

In the javascript file package container create another file named repository.xml which looks like this :


<?xml version="1.0" encoding="UTF-8"?>

<repository id="js"

      baseDirectory="com/myproject/jsf/rcfaces/js"

      convertSymbols="true" >

 

      <module id="MyJsModule">

            <file name="menuHorizontal.js">

                  <class name="ie_menuHorizontal">

                        <required-class name="f_component" />

                        <required-class name="fa_disabled" />

                        <required-class name="fa_readOnly" />

                        <required-class name="fa_selectionManager" />

                        <required-class name="fa_items" />

                        <required-class name="fa_itemClientDatas" />

                  </class>

            </file>

         

            <file name="menuVertical.js">

                  <class name="pe_menuVertical">

                        <required-class name="f_tree" />

                        <required-class name="fa_items" />

                        <required-class name="fa_itemClientDatas" />

                  </class>

            </file

            [�]

            <file name="messages.js">

                  <class name="ie_messages">

                        <required-class name="f_messageContext" />

                        <required-class name="f_messageObject" />

                        <required-class name="f_messages" />

                  </class>

            </file>            

      </module>

</repository>

 
Note : JavaScript classes are instances of f_class or fa_aspect object created by the API. 

Register a Repository in RC Faces context and Use it

The next step is to register these repositories in the RC Faces context. In the base directory src,  make a META-INF folder containing a XML file named rcfaces-config.xml with the following content:


<?xml version="1.0" encoding="UTF-8"?>

<rcfaces-config>

      <repositories>

            <repository>

                  <type>javascript</type>           

                  < location>com/myproject/jsf/rcfaces/js/repository.xml</location>

            </repository>


            <repository>

                  <type>css</type>

                  <location>com/myproject/jsf/rcfaces/css/repository.xml</location>

            </repository>

      </repositories>

</rcfaces-config>


 Finally in a JSP file: 


<header>

    <vh:init />

    <vh:cssStyle requiredModules="MyCssModule" />

    <vh:javaScript requiredModules="MyJsModule" />

</header>


After that, stylesheets and JavaScript are integrated in RC Faces context for having a better resource management.


Note : These tags must be inside the html <head> tag.