6 Replies Latest reply: May 3, 2012 3:57 AM by Nicolas Daniels RSS

Configure richfaces resources plugin to generate custom javascript and css files in the one "FILE" (and not files)

Abdou K. Newbie

Hello,

i work with richfaces 4.2.

I have created a custom skin (ecss and js files) with maven-richfaces-resources-plugin.

But i have 2 questions:

 

1-the generated files are mapped in another files in staticResources folder(ex. file1.ecss --go to --> org.richfaces.staticResource/<version>/packed/<customskin>/cssfolder/file1.css

and file1.ecss ------> org.richfaces.staticResource/<version>/packed/<customskin>/cssfolder/file1.css)

Now, how can i configure the plugin to agragate all custom ecss files  in the same file such as done in richfaces-component-ui.jar (ex. set every ecss files in org.richfaces.staticResource/<version>/packed/<customskin>/packed/custompacked.css and set every custom javascript in org.richfaces.staticResource/<version>/packed/packed/custompacked.js)

 

2- the custompacked.js can be load automatically in the target xhtml page such as richfaces css packed files? how to do?

 

This is my pom.xml

 

<plugin>
                <groupId>org.richfaces.cdk</groupId>
                <artifactId>maven-richfaces-resources-plugin</artifactId>
                <version>4.2.0.Final</version>
                <configuration>
                    <skins>
                        <skin>macif</skin>
                    </skins>
                    <excludedFiles>
                        <exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
                        <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
                    </excludedFiles>
                    <includedContentTypes>
                        <include>application/javascript</include>
                        <include>text/css</include>
                        <include>image/.+</include>
                    </includedContentTypes>
                    <fileNameMappings>

                        <!-- Les images macif -->
                        <property>
                            <name>^.+macif.+/([^/]+\.(png|gif|jpg))$</name>
                            <value>fr.macif.images/$1</value>
                        </property>

                        <!-- Resources des composants richfaces -->
                        <property>
                            <name>^org\.richfaces\.ckeditor/([^/]+\.(png|gif|jpg))$</name>
                            <value>org.richfaces.ckeditor.images/$1</value>
                        </property>
                        <property>
                            <name>^org\.richfaces\.ckeditor/([^/]+\.css)$</name>
                            <value>org.richfaces.ckeditor.css/$1</value>
                        </property>
                        <property>
                            <name>^org\.richfaces\.ckeditor/([^/]+\.(js))$</name>
                            <value>org.richfaces.ckeditor.js/$1</value>
                        </property>
                        <property>
                            <name>^org\.richfaces/([^/]+\.(png|gif|jpg))$</name>
                            <value>org.richfaces.images/$1</value>
                        </property>
                        <property>
                            <name>^org\.richfaces\.images/([^/]+\.(png|gif|jpg))$</name>
                            <value>org.richfaces.images/$1</value>
                        </property>
                        <property>
                            <name>^org\.richfaces/([^/]+\.css)$</name>
                            <value>org.richfaces.css/$1</value>
                        </property>
                        <property>
                            <name>^org\.richfaces/([^/]+\.js)$</name>
                            <value>org.richfaces.js/$1</value>
                        </property>
                    </fileNameMappings>
                </configuration>
                <executions>
                    <execution>
                        <id>process-resources-Packed</id>
                        <goals>
                            <goal>process</goal>
                        </goals>
                        <configuration>
                            <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/Packed.properties</staticResourceMappingFile>
                            <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.0.Final/Packed/</resourcesOutputDir>
                            <staticResourcePrefix>org.richfaces.staticResource/4.2.0.Final/Packed/</staticResourcePrefix>
                            <pack>true</pack>
                            <compress>
                                false
                            </compress>

                        </configuration>
                    </execution>
                    <execution>
                        <id>process-resources-compressed</id>
                        <goals>
                            <goal>process</goal>
                        </goals>
                        <configuration>
                            <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/Compressed.properties</staticResourceMappingFile>
                            <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.0.Final/Compressed/</resourcesOutputDir>
                            <staticResourcePrefix>org.richfaces.staticResource/4.2.0.Final/Compressed/</staticResourcePrefix>
                            <pack>false</pack>
                            <compress>true</compress>
                        </configuration>
                    </execution>
                    <execution>
                        <id>process-resources-packed-compressed</id>
                        <goals>
                            <goal>process</goal>
                        </goals>
                        <configuration>
                            <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/PackedCompressed.properties</staticResourceMappingFile>
                            <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.0.Final/PackedCompressed/</resourcesOutputDir>
                            <staticResourcePrefix>org.richfaces.staticResource/4.2.0.Final/PackedCompressed/</staticResourcePrefix>
                            <pack>true</pack>

                            <compress>
                                true
                            </compress>

                        </configuration>
                    </execution>
                    <execution>
                        <id>process-resources-static</id>
                        <goals>
                            <goal>process</goal>
                        </goals>
                        <configuration>

                            <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/Static.properties</staticResourceMappingFile>

                            <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.0.Final/Static/</resourcesOutputDir>

                            <staticResourcePrefix>org.richfaces.staticResource/4.2.0.Final/Static/</staticResourcePrefix>

                            <pack>false</pack>

                            <compress>
                                false
                            </compress>

                        </configuration>
                    </execution>
                </executions>
            </plugin>

 

 

Thank you

  • 1. Re: Configure richfaces resources plugin to generate custom javascript and css files in the one "FILE" (and not files)
    Nicolas Daniels Newbie

    Hello,

     

    I've exactly the same issue, my custom skins ecss files are compressed but not packed (packed.css contains all richfaces ecss but not mine).

    Any clue on how to perform that ?

     

    Thanks a lot !

  • 2. Re: Configure richfaces resources plugin to generate custom javascript and css files in the one "FILE" (and not files)
    Nicolas Daniels Newbie

    I figured out that the custom skin needs a components targetting the new ecss to make it include it in packed.ecss. Maybe it has other way to fo it..

  • 3. Re: Configure richfaces resources plugin to generate custom javascript and css files in the one "FILE" (and not files)
    Lukáš Fryč Master

    Hey guys,

     

    currently, it's not possible to package list any custom dependencies in convenient way,

     

    but what a maven-richfaces-resources-plugin do is scanning for @ResourceDependency and @ResourceDependencies annotation through classpath.

     

    Could you try to add any class with these annotations pointing to your resources (resources must be on classpath too)?

     

    Please vote on this issue if you want to use more convenient way. :-)

    https://issues.jboss.org/browse/RF-11800

     

    Lemme know if it works, please.

  • 4. Re: Configure richfaces resources plugin to generate custom javascript and css files in the one "FILE" (and not files)
    Nicolas Daniels Newbie

    Hi Lukàs,

     

    Yes, as I said in my previous post, adding a component with @ResourceDependency pointing to my ecss is working fine.

     

    Actually, what I do now is overriding ecss from richfaces with my custom one. For this I don't need class with @ResourceDependency, but I need to use exactly the same path than in richfaces ui jar (except for my skin name) as my Packed.properties is read before richfaces one, and so my values are overriden. I don't know if it is the appropriate way to do this but it works.

     

    Thanks for your answer (issue voted :-))

  • 5. Re: Configure richfaces resources plugin to generate custom javascript and css files in the one "FILE" (and not files)
    Lukáš Fryč Master

    Hey Nicolas, it's really interesting.

     

    Any chance you could write a blog about it, so others could go your way?

     

    It isn't ideal but it's what we have right now for custom skins.

  • 6. Re: Configure richfaces resources plugin to generate custom javascript and css files in the one "FILE" (and not files)
    Nicolas Daniels Newbie

    I'm not 100% satified with my solution but I can write it here.

     

    What I wanted to do is creating my own skin which:

    1. have custom new ecss
    2. overrides some of the richfaces ecss

     

    Here is the file structure I did:

    • src/main/resources/META-INF
      • resources/eu.mycompany.myskin (whatever you want here)
        • popupPanel.ecss (override richfaces one)
        • myecss.ecss
      • richfaces
        • resource-mappings.properties (exactly this if you want resources optimization, otherwise whatever you want referenced in web.xml)
      • skins
        • myskin.properties
    • pom.xml

     

    Files:

     

    *.ecss

     

    Any (e)css rules. Except for those matching this bug (if resources optimization is used - until it is resolved).

     

    resource-mappings.properties:

     

    Contains the mappings to your resources, mainly to override richfaces ecss. If optimization is used, it needs to be exactly this name on this path, otherwise it is not loaded by maven-richfaces-resources-plugin (until a custom path can be specified on the plugin configuration), and your resources will not be packed.

     

    content:

     

    org.richfaces\:popupPanel.ecss=eu.mycompany.myskin/popupPanel.ecss
    eu.mycompany.myskin/myecss.ecss=eu.mycompany.myskin/myecss.ecss
    

     

    pom.xml

     

    This content is only for resources optimization. Be careful that all path must be exactly those, otherwise optimization will not work for your custom ecss, or override will not work.

     

     

    ...
    <dependencies>
         <!-- insert richfaces dependencies -->
    </dependencies>
    ...
    <build>
            <plugins>
                <plugin>
                    <groupId>org.richfaces.cdk</groupId>
                    <artifactId>maven-richfaces-resources-plugin</artifactId>
                    <version>4.2.1.Final</version>
                    <configuration>
                        <skins>
                            <skin>basic</skin>
                        </skins>
                        <excludedFiles>
                            <exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
                            <exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
                            <exclude>^jquery.js$</exclude>
                        </excludedFiles>
                        <includedContentTypes>
                            <include>application/javascript</include>
                            <include>text/css</include>
                            <include>image/.+</include>
                        </includedContentTypes>
                        <fileNameMappings>
                            <property>
                                <name>^.*showcase.*/([^/]+\.css)$</name>
                                <value>org.richfaces.showcase.css/$1</value>
                            </property>
                            <property>
                                <name>^.+/([^/]+\.(png|gif|jpg))$</name>
                                <value>org.richfaces.images/$1</value>
                            </property>
                            <property>
                                <name>^.+/([^/]+\.css)$</name>
                                <value>org.richfaces.css/$1</value>
                            </property>
                        </fileNameMappings>
                    </configuration>
                    <executions>
                        <execution>
                            <id>process-resources-packed</id>
                            <goals>
                                <goal>process</goal>
                            </goals>
                            <configuration>
                                <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/Packed.properties</staticResourceMappingFile>
                                <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.1.Final/Packed/</resourcesOutputDir>
                                <staticResourcePrefix>org.richfaces.staticResource/4.2.1.Final/Packed/</staticResourcePrefix>
                                <pack>true</pack>
                                <compress>false</compress>
                            </configuration>
                        </execution>
                        <execution>
                            <id>process-resources-compressed</id>
                            <goals>
                                <goal>process</goal>
                            </goals>
                            <configuration>
                                <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/Compressed.properties</staticResourceMappingFile>
                                <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.1.Final/Compressed/</resourcesOutputDir>
                                <staticResourcePrefix>org.richfaces.staticResource/4.2.1.Final/Compressed/</staticResourcePrefix>
                                <pack>false</pack>
                                <compress>true</compress>
                            </configuration>
                        </execution>
                        <execution>
                            <id>process-resources-packedcompressed</id>
                            <goals>
                                <goal>process</goal>
                            </goals>
                            <configuration>
                                <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/PackedCompressed.properties</staticResourceMappingFile>
                                <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.1.Final/PackedCompressed/</resourcesOutputDir>
                                <staticResourcePrefix>org.richfaces.staticResource/4.2.1.Final/PackedCompressed/</staticResourcePrefix>
                                <pack>true</pack>
                                <compress>true</compress>
                            </configuration>
                        </execution>
                        <execution>
                            <id>process-resources-static</id>
                            <goals>
                                <goal>process</goal>
                            </goals>
                            <configuration>
                                <staticResourceMappingFile>${project.build.outputDirectory}/META-INF/richfaces/staticResourceMapping/Static.properties</staticResourceMappingFile>
                                <resourcesOutputDir>${project.build.outputDirectory}/META-INF/resources/org.richfaces.staticResource/4.2.1.Final/Static/</resourcesOutputDir>
                                <staticResourcePrefix>org.richfaces.staticResource/4.2.1.Final/Static/</staticResourcePrefix>
                                <pack>false</pack>
                                <compress>false</compress>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
    </build>
    

     

    Problems with this solution:

     

    • There is no way to override static/packed/compressed resource mapping defined by richfaces. Actually, when resource optimization is enabled, it loads all mappings found from META-INF/richfaces/staticResourceMapping/%Features%.properties (hard coded path). Your mapping has to be on the same location to be loaded (defined by <staticResourceMappingFile> in pom.xml). So multiple mapping are loaded from the same resource path. If both contains the same resource mapping (popupPanel.ecss for instance), last one (or 1st one, I don't really know)  only is taken into account. So it depends on resources loading order.
    • As there is no way to override richfaces mapping when optimization is enabled, overriding ecss must be on the same location than the one specified in richfaces mapping. That's why <resourcesOutputDir> must be the same. In my case it loads mine but I guess it also depends on resources order (maybe I'm just lucky).

     

    Potential fixes:

    • Allow to specify resources mapping path inside skin.properties. This resources mapping will then be loaded by maven-richfaces-resources-plugin for packaging. It must of course overrides richfaces specific mappings, probably not the eventual custom mapping defined in web.xml
    • static/packed/compressed mapping path location should be somehow dependent from original mapping.properties. So it could be loaded from different location, and so overrides values if loaded in appropriate order. But I don't know exactly how to do this :-)