Prerequisites<\/h2>\n\n- Download the latest version of eXo Platform 3.5<\/a>.<\/li>\n
- Install and configure Apache Maven<\/a>.<\/li>\n<\/ul>\n
To be able to run a JSF application in a portal context, we need a JSF Portlet Bridge. This technology is also part of the JEE standard, and thus several implementations are available. For this tutorial the JBoss implementation<\/a> will be used, but you don\u2019t have to install anything as it will be added as a library in your portlet via Maven.<\/p>\nCreating the JSF Portlet Bridge project<\/h2>\n
The JBoss JSF Portlet Bridge project provides a Maven archetype to easily create a fresh JSF Portlet Bridge project with JSF 2.0 and the latest version of the Portlet Bridge (3.0.0.Beta1 at the time of writing). Type the following command:<\/p>\n
mvn archetype:generate -DarchetypeGroupId=org.jboss.portletbridge.archetypes -DarchetypeArtifactId=2.0-basic -DarchetypeVersion=3.0.0.Beta1 -DgroupId=org.exoplatform -DartifactId=exo-jsfportletbridge-portlet<\/pre>\nMaven will prompt you to change the default values of the project\u2019s properties. You can leave the defaults unchanged by simply pressing Enter.<\/p>\n
Your project is now created. However, some little changes need to be made to make it fully operational.<\/p>\n
portlet.xml<\/strong><\/p>\n\n- Change the portlet-app tag as follows:<\/li>\n<\/ul>\n
<portlet-app xmlns=\"http:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\"\n version=\"2.0\"\n xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:schemaLocation=\"http:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\n http:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\"><\/pre>\n
\n- Move the portlet-info tag under the supports tag.<\/li>\n<\/ul>\n
faces-config.xml<\/strong><\/p>\n\n- Remove everything under the faces-config tag:<\/li>\n<\/ul>\n
<faces-config xmlns=\"http:\/\/java.sun.com\/xml\/ns\/javaee\"\n xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:schemaLocation=\"http:\/\/java.sun.com\/xml\/ns\/javaee http:\/\/java.sun.com\/xml\/ns\/javaee\/web-facesconfig_2_0.xsd\"\n version=\"2.0\">\n<\/faces-config><\/pre>\npom.xml<\/strong><\/p>\nOptionally, the pom.xml file can be updated to use the latest available version of the JSF libraries by changing:<\/p>\n
<properties>\n <jsf.version>2.0.3-b03<\/jsf.version>\n<\/properties><\/pre>\nwith the new value. For example:<\/p>\n
<properties>\n <jsf.version>2.1.2<\/jsf.version>\n<\/properties><\/pre>\nYour project is now ready, and can be built to be deployed in eXo Platform. You can build your project by launching the following command at the root of your project: mvn clean install<\/span>.<\/p>\nA war file should be available in the target folder of your project (JSF2RIPortlet.war<\/span> by default).<\/p>\nDeploying the portlet in eXo Platform<\/h2>\n
The next step is to deploy the portlet in eXo Platform. To do so:<\/p>\n
\n- Start eXo Platform 3.5;<\/li>\n
- Once started, copy the war file of the portlet into the webapps directory. If the portlet deploys correctly, you should see the following lines in the console:<\/li>\n<\/ul>\n
[date] org.apache.catalina.startup.HostConfig deployWAR\nINFO: D\u00e9ploiement de l\u2019archive JSF2RIPortlet.war de l\u2019application web\n[date] com.sun.faces.config.ConfigureListener contextInitialized\nINFO: Initialisation de Mojarra 2.1.2 (FCS 20110610) pour le contexte \u00ab\/JSF2RIPortlet\u00bb\n[date] javax.portlet.faces.GenericFacesPortlet init\nINFO: Init GenericFacesPortlet for portlet riPortlet\n[date] javax.portlet.faces.GenericFacesPortlet calculateBridgeClassName\nINFO: Bridge class name is org.jboss.portletbridge.AjaxPortletBridge\n<\/pre>\nThe portlet has been deployed successfully in eXo Platform. It should now be added to a page of the portal:<\/p>\n
\n- Go to http:\/\/localhost:8080\/portal\/private\/acme<\/span>;<\/li>\n
- Connect with john\/gtn;<\/li>\n
- Go to the Application menu;<\/li>\n<\/ul>\n
![\"Application](\"https:\/\/www.exoplatform.com\/blog\/\/wp-content\/uploads\/2013\/02\/application-menu.png\" "\\"application-menu\\"")
<\/a><\/p>\n\n- Click on Portlets. The list of all the deployed portlets is available on the left side. We will now make the portlet addable to the portal\u2019s pages;<\/li>\n
- Select our portlet (RiPortlet<\/span> in the JSF2RIPortlet<\/span> category);<\/li>\n
- In the right part, click on \u201cClick here to add this portlet to a category\u201d;<\/li>\n
- Select a category (Adoption, for example);<\/li>\n<\/ul>\n
![\"registry](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/registry-category.png\" "\\"registry-category\\"")
<\/a><\/p>\n\n- Click on Save;<\/li>\n
- Come back to the acme site\u2019s home page (My Sites > acme<\/span> in the top bar).<\/li>\n<\/ul>\n
The next step is to create a page to contain our portlet:<\/p>\n
\n- In the top bar, click on Add Page<\/span> in Edit > Page<\/span>;<\/li>\n<\/ul>\n
![\"addpage](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/addpage-menu.png\" "\\"addpage-menu\\"")
<\/a><\/p>\n\n- In the left side, click on the up arrow to add the page at the root;<\/li>\n
- In the right side, enter \u201ccomics-store\u201d as the name and \u201cComics Store\u201d as the display name (guess what this tutorial will deal with!). Leave the other fields as they are. Note that you can easily define titles in other languages;<\/li>\n
- Click on Next;<\/li>\n
- We will use the default empty dashboard, so click on Next;<\/li>\n
- In the portlet catalog, find the RiPortlet and drag it onto the page;<\/li>\n<\/ul>\n
![\"dragdrop](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/dragdrop-portlet.png\" "\\"dragdrop-portlet\\"")
<\/a><\/p>\n\n- Click on the Save icon (upper right).<\/li>\n<\/ul>\n
The portlet is now available on our new page:<\/p>\n
![\"comicsstorepage](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/comicsstorepage-firstversion.png\" "\\"comicsstorepage-firstversion\\"")
<\/a><\/p>\nAdding RichFaces<\/h2>\n
RichFaces is a set of advanced JSF components. To use it in your project, edit your pom.xml<\/span> file to add the following dependencies:<\/p>\n<dependency>\n <groupId>org.richfaces.ui<\/groupId>\n <artifactId>richfaces-components-ui<\/artifactId>\n <version>4.1.0.Final<\/version>\n<\/dependency>\n<dependency>\n <groupId>org.richfaces.core<\/groupId>\n <artifactId>richfaces-core-impl<\/artifactId>\n <version>4.1.0.Final<\/version>\n<\/dependency><\/pre>\nThen, add the following lines to your web.xml<\/span>:<\/p>\n<context-param>\n <param-name>org.richfaces.resourceMapping.enabled<\/param-name>\n <param-value>false<\/param-value>\n<\/context-param>\n\n<context-param>\n <param-name>org.richfaces.skin<\/param-name>\n <param-value>ruby<\/param-value>\n<\/context-param><\/pre>\nFinally, in your JSF views, add the following namespace:<\/p>\n
xmlns:a4j=\"http:\/\/richfaces.org\/a4j\" xmlns:rich=\"http:\/\/richfaces.org\/rich\"<\/pre>\nYou can now use all the RichFaces components in your pages.<\/p>\n
As an example, we will add a tabPanel component to the page. The code is simply taken from the RichFaces demo website<\/a>. Just edit the src\/main\/webapp\/home.xhtml<\/span> file and add these lines before <\/h:body><\/span>:<\/p>\n<rich:tabPanel switchType=\"client\">\n <rich:tab header=\"Overview\">\n RichFaces is a component library for JSF and an advanced framework for\n easily integrating AJAX capabilities into business applications.\n <ul>\n <li>100+ AJAX enabled components in two libraries<\/li>\n <li>a4j: page centric AJAX controls<\/li>\n <li>rich: self contained, ready to use components<\/li>\n <li>Whole set of JSF benefits while working with AJAX<\/li>\n <li>Skinnability mechanism<\/li>\n <li>Component Development Kit (CDK)<\/li>\n <li>Dynamic resources handling<\/li>\n <li>Testing facilities for components, actions, listeners, and pages<\/li>\n <li>Broad cross-browser support<\/li>\n <li>Large and active community<\/li>\n <\/ul>\n <\/rich:tab>\n <rich:tab header=\"JSF 2 and RichFaces 4\">\n <p>We are working hard on RichFaces 4.0 which will have full JSF 2 integration. That is not all though, here is\n a summary of updates and features:<\/p>\n <ul>\n <li>Redesigned modular repository and build system.<\/li>\n <li>Simplified Component Development Kit with annotations, faces-config extensions, advanced templates\nsupport and more..<\/li>\n <li>Ajax framework improvements extending the JSF 2 specification.<\/li>\n <li>Component review for consistency, usability, and redesign following semantic HTML principles where\npossible.<\/li>\n <li>Both server-side and client-side performance optimization.<\/li>\n <li>Strict code clean-up and review.<\/li>\n <\/ul>\n <\/rich:tab>\n<\/rich:tabPanel><\/pre>\nBuild your war file and copy\/paste it into eXo Platform\u2019s webapps directory. There\u2019s no need to restart; the portlet is hot-redeployed!<\/p>\n
You should see the following message in the console:<\/p>\n
[date] org.apache.catalina.startup.HostConfig deployWAR\nINFO: D\u00e9ploiement de l\u2019archive JSF2RIPortlet.war de l\u2019application web\n[date] com.sun.faces.config.ConfigureListener contextInitialized\nINFO: Initialisation de Mojarra 2.1.2 (FCS 20110610) pour le contexte \u00ab\/JSF2RIPortlet\u00bb\n[date] org.richfaces.cache.CacheManager getCacheFactory\nINFO: Selected fallback cache factory\n[date] org.richfaces.cache.lru.LRUMapCacheFactory createCache\nINFO: Creating LRUMap cache instance using parameters: {facelets.DEVELOPMENT=false, org.richfaces.resourceMapping.enabled=false, javax.faces.FACELETS_VIEW_MAPPINGS=*.xhtml, org.richfaces.skin=ruby, javax.portlet.faces.RENDER_POLICY=ALWAYS_DELEGATE, javax.faces.STATE_SAVING_METHOD=server, javax.faces.DEFAULT_SUFFIX=.xhtml}\n[date] org.richfaces.cache.lru.LRUMapCacheFactory createCache\nINFO: Creating LRUMap cache instance of 512 items capacity\n[date] org.richfaces.application.InitializationListener onStart\nINFO: RichFaces Core Implementation by JBoss, a division of Red Hat, Inc., version v.4.1.0.Final\n[date] javax.portlet.faces.GenericFacesPortlet init\nINFO: Init GenericFacesPortlet for portlet riPortlet\n[date] javax.portlet.faces.GenericFacesPortlet calculateBridgeClassName\nINFO: Bridge class name is org.jboss.portletbridge.AjaxPortletBridge<\/pre>\nJust reload your portal page and the tabPanel component will appear:<\/p>\n
To be able to run a JSF application in a portal context, we need a JSF Portlet Bridge. This technology is also part of the JEE standard, and thus several implementations are available. For this tutorial the JBoss implementation<\/a> will be used, but you don\u2019t have to install anything as it will be added as a library in your portlet via Maven.<\/p>\n The JBoss JSF Portlet Bridge project provides a Maven archetype to easily create a fresh JSF Portlet Bridge project with JSF 2.0 and the latest version of the Portlet Bridge (3.0.0.Beta1 at the time of writing). Type the following command:<\/p>\n Maven will prompt you to change the default values of the project\u2019s properties. You can leave the defaults unchanged by simply pressing Enter.<\/p>\n Your project is now created. However, some little changes need to be made to make it fully operational.<\/p>\n portlet.xml<\/strong><\/p>\n faces-config.xml<\/strong><\/p>\n pom.xml<\/strong><\/p>\n Optionally, the pom.xml file can be updated to use the latest available version of the JSF libraries by changing:<\/p>\n with the new value. For example:<\/p>\n Your project is now ready, and can be built to be deployed in eXo Platform. You can build your project by launching the following command at the root of your project: mvn clean install<\/span>.<\/p>\n A war file should be available in the target folder of your project (JSF2RIPortlet.war<\/span> by default).<\/p>\n The next step is to deploy the portlet in eXo Platform. To do so:<\/p>\n The portlet has been deployed successfully in eXo Platform. It should now be added to a page of the portal:<\/p>\n The next step is to create a page to contain our portlet:<\/p>\n The portlet is now available on our new page:<\/p>\n RichFaces is a set of advanced JSF components. To use it in your project, edit your pom.xml<\/span> file to add the following dependencies:<\/p>\n Then, add the following lines to your web.xml<\/span>:<\/p>\n Finally, in your JSF views, add the following namespace:<\/p>\n You can now use all the RichFaces components in your pages.<\/p>\n As an example, we will add a tabPanel component to the page. The code is simply taken from the RichFaces demo website<\/a>. Just edit the src\/main\/webapp\/home.xhtml<\/span> file and add these lines before <\/h:body><\/span>:<\/p>\n Build your war file and copy\/paste it into eXo Platform\u2019s webapps directory. There\u2019s no need to restart; the portlet is hot-redeployed!<\/p>\n You should see the following message in the console:<\/p>\n Just reload your portal page and the tabPanel component will appear:<\/p>\nCreating the JSF Portlet Bridge project<\/h2>\n
mvn archetype:generate -DarchetypeGroupId=org.jboss.portletbridge.archetypes -DarchetypeArtifactId=2.0-basic -DarchetypeVersion=3.0.0.Beta1 -DgroupId=org.exoplatform -DartifactId=exo-jsfportletbridge-portlet<\/pre>\n
\n
<portlet-app xmlns=\"http:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\"\n version=\"2.0\"\n xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:schemaLocation=\"http:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\n http:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\"><\/pre>\n
\n
\n
<faces-config xmlns=\"http:\/\/java.sun.com\/xml\/ns\/javaee\"\n xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n xsi:schemaLocation=\"http:\/\/java.sun.com\/xml\/ns\/javaee http:\/\/java.sun.com\/xml\/ns\/javaee\/web-facesconfig_2_0.xsd\"\n version=\"2.0\">\n<\/faces-config><\/pre>\n
<properties>\n <jsf.version>2.0.3-b03<\/jsf.version>\n<\/properties><\/pre>\n
<properties>\n <jsf.version>2.1.2<\/jsf.version>\n<\/properties><\/pre>\n
Deploying the portlet in eXo Platform<\/h2>\n
\n
[date] org.apache.catalina.startup.HostConfig deployWAR\nINFO: D\u00e9ploiement de l\u2019archive JSF2RIPortlet.war de l\u2019application web\n[date] com.sun.faces.config.ConfigureListener contextInitialized\nINFO: Initialisation de Mojarra 2.1.2 (FCS 20110610) pour le contexte \u00ab\/JSF2RIPortlet\u00bb\n[date] javax.portlet.faces.GenericFacesPortlet init\nINFO: Init GenericFacesPortlet for portlet riPortlet\n[date] javax.portlet.faces.GenericFacesPortlet calculateBridgeClassName\nINFO: Bridge class name is org.jboss.portletbridge.AjaxPortletBridge\n<\/pre>\n
\n
<\/a><\/p>\n\n
<\/a><\/p>\n\n
\n
<\/a><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\nAdding RichFaces<\/h2>\n
<dependency>\n <groupId>org.richfaces.ui<\/groupId>\n <artifactId>richfaces-components-ui<\/artifactId>\n <version>4.1.0.Final<\/version>\n<\/dependency>\n<dependency>\n <groupId>org.richfaces.core<\/groupId>\n <artifactId>richfaces-core-impl<\/artifactId>\n <version>4.1.0.Final<\/version>\n<\/dependency><\/pre>\n
<context-param>\n <param-name>org.richfaces.resourceMapping.enabled<\/param-name>\n <param-value>false<\/param-value>\n<\/context-param>\n\n<context-param>\n <param-name>org.richfaces.skin<\/param-name>\n <param-value>ruby<\/param-value>\n<\/context-param><\/pre>\n
xmlns:a4j=\"http:\/\/richfaces.org\/a4j\" xmlns:rich=\"http:\/\/richfaces.org\/rich\"<\/pre>\n
<rich:tabPanel switchType=\"client\">\n <rich:tab header=\"Overview\">\n RichFaces is a component library for JSF and an advanced framework for\n easily integrating AJAX capabilities into business applications.\n <ul>\n <li>100+ AJAX enabled components in two libraries<\/li>\n <li>a4j: page centric AJAX controls<\/li>\n <li>rich: self contained, ready to use components<\/li>\n <li>Whole set of JSF benefits while working with AJAX<\/li>\n <li>Skinnability mechanism<\/li>\n <li>Component Development Kit (CDK)<\/li>\n <li>Dynamic resources handling<\/li>\n <li>Testing facilities for components, actions, listeners, and pages<\/li>\n <li>Broad cross-browser support<\/li>\n <li>Large and active community<\/li>\n <\/ul>\n <\/rich:tab>\n <rich:tab header=\"JSF 2 and RichFaces 4\">\n <p>We are working hard on RichFaces 4.0 which will have full JSF 2 integration. That is not all though, here is\n a summary of updates and features:<\/p>\n <ul>\n <li>Redesigned modular repository and build system.<\/li>\n <li>Simplified Component Development Kit with annotations, faces-config extensions, advanced templates\nsupport and more..<\/li>\n <li>Ajax framework improvements extending the JSF 2 specification.<\/li>\n <li>Component review for consistency, usability, and redesign following semantic HTML principles where\npossible.<\/li>\n <li>Both server-side and client-side performance optimization.<\/li>\n <li>Strict code clean-up and review.<\/li>\n <\/ul>\n <\/rich:tab>\n<\/rich:tabPanel><\/pre>\n
[date] org.apache.catalina.startup.HostConfig deployWAR\nINFO: D\u00e9ploiement de l\u2019archive JSF2RIPortlet.war de l\u2019application web\n[date] com.sun.faces.config.ConfigureListener contextInitialized\nINFO: Initialisation de Mojarra 2.1.2 (FCS 20110610) pour le contexte \u00ab\/JSF2RIPortlet\u00bb\n[date] org.richfaces.cache.CacheManager getCacheFactory\nINFO: Selected fallback cache factory\n[date] org.richfaces.cache.lru.LRUMapCacheFactory createCache\nINFO: Creating LRUMap cache instance using parameters: {facelets.DEVELOPMENT=false, org.richfaces.resourceMapping.enabled=false, javax.faces.FACELETS_VIEW_MAPPINGS=*.xhtml, org.richfaces.skin=ruby, javax.portlet.faces.RENDER_POLICY=ALWAYS_DELEGATE, javax.faces.STATE_SAVING_METHOD=server, javax.faces.DEFAULT_SUFFIX=.xhtml}\n[date] org.richfaces.cache.lru.LRUMapCacheFactory createCache\nINFO: Creating LRUMap cache instance of 512 items capacity\n[date] org.richfaces.application.InitializationListener onStart\nINFO: RichFaces Core Implementation by JBoss, a division of Red Hat, Inc., version v.4.1.0.Final\n[date] javax.portlet.faces.GenericFacesPortlet init\nINFO: Init GenericFacesPortlet for portlet riPortlet\n[date] javax.portlet.faces.GenericFacesPortlet calculateBridgeClassName\nINFO: Bridge class name is org.jboss.portletbridge.AjaxPortletBridge<\/pre>\n
![\"comicsstorepage](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/comicsstorepage-richfaces.png\" "\\"comicsstorepage-richfaces\\"")
<\/a><\/p>\n