Our sample application will display a list of products with related pictures. Each product will be composed of a name, a description, a price, a thumbnail, and some pictures. The thumbnail and the related pictures will be retrieved from the eXo Content Management system.<\/p>\n
The page will display the product\u2019s thumbnail and the product\u2019s characteristics. The related pictures will be available as links. A Content Detail portlet will be used to display each related picture.<\/p>\n
<\/p>\n
The source code for this tutorial is available here<\/a>.<\/p>\n In order for us to retrieve the contents easily, they should be organized correctly. Within the root folder (let\u2019s say repository:collaboration:\/sites content\/live\/acme\/documents\/products<\/span>), a folder will be created for each product, named with the product\u2019s ID. All product-related contents will be stored in the corresponding folder. The thumbnail will also be stored in the product\u2019s folder, but with the special name \u2018thumbnail\u2019 in order to distinguish it from the other pictures.<\/p>\n So, the content tree will look like this:<\/p>\n Instead of creating all the contents by hand, you can download this JCR export<\/a>. To use it:<\/p>\n Important:<\/strong> To ensure that all contents are in published state, you may need to republish them.<\/p>\n The first step is to add the eXo dependencies that will be used in our portlet. Edit your pom.xml file and add these lines:<\/p>\n In order to manage data displayed on our page, we need a managed bean:<\/p>\n (See the code here<\/a>)<\/p>\n This bean instantiates two services: one for the products (ProductService) and one for the contents (ContentService), which is initialized with the root folder in the content management system that houses the contents used in the store (retrieved from a portlet preference).<\/p>\n The bean exposes only one kind of data: the products, via the getProducts method. This method calls the ProductService object to retrieve all the products. The ProductService class simply returns sample products:<\/p>\n Then the managed bean calls the ContentService object to retrieve the contents relating to the products. This is the most interesting part as it deals with eXo Platform\u2019s content management features.<\/p>\n eXo Platform provides an API to interact with all content management capabilities<\/a> (contents, taxonomy, links, publication, SEO, \u2026). In our sample application we will use the WCMComposer API<\/a>, which allows us to work with contents.<\/p>\n eXo Platform\u2019s Content Management feature provides a utility method to easily instantiate a service:<\/p>\n This service is used in the two methods of ContentService: getProductThumbnailPath<\/span> and getProductPictures<\/span>.<\/p>\n The getProductThumbnailPath<\/span> method returns the path of the thumbnail of the product if it exists:<\/p>\n The WCMComposer API\u2019s getContent<\/span> method is used here. It allows us to retrieve content based on its path. Some filters can be added to select the right content base (for instance, based on its language, its version or its publication state).<\/p>\n The getProductPictures<\/span> method returns all the contents related to a product:<\/p>\n We now use the getContents<\/span> method, which is equivalent to getContent<\/span> but for multiple contents.<\/p>\n One really interesting point is that, by using this API, you can benefit from all the eXo Platform content management features. For example, by calling the getContents<\/span> method with the filter WCMComposer.FILTER_VERSION<\/span> set to WCMComposer.BASE_VERSION<\/span> and the filter WCMComposer.FILTER_MODE<\/span> set to the current mode (live or edit), only the link of the published pictures will be visible in live mode, whereas the link of the pictures in draft state will be visible in edit mode.<\/p>\n As you can see, the node\u2019s type is checked to distinguish the frozenNode case:<\/p>\n In fact, a frozenNode is a published version of an original node. A frozenNode references the original node (in our case, the picture node) through its jcr:frozenUuid<\/span> property. So we need to get this property to retrieve the original node and get its path.<\/p>\n The last part is to edit our JSF pages to display all the products. For this, a RichFaces data grid (rich:dataGrid<\/span>) is used:<\/p>\n The ui:repeat<\/span> property lists all links to the product\u2019s pictures. The link simply goes to the same page (because a Content Detail portlet will be added to this page) and passes the content-id parameter with the path of the content to display. The Content Detail will just look at this parameter and display the targeted content.<\/p>\n In order to display the products’ pictures we need to add a Content Detail portlet to the page:<\/p>\n Our store is ready!<\/p>\n Let\u2019s play with it!<\/p>\n Click on a picture link (for instance, the Photo 1 of Wolverine):<\/p>\n The picture is displayed below.<\/p>\n Let\u2019s now add a new picture. To do so:<\/p>\n The picture is now uploaded. Leave it in draft state and go back to the Comics store page. As you can see, your new picture does not appear in the Iron Man\u2019s pictures yet.<\/p>\n Now switch to edit mode by clicking on Edit > Content<\/span>.<\/p>\nAdding contents<\/h2>\n
![\"arbo\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/arbo.png\" "\\"arbo\\"")
<\/a><\/p>\n\n
Adding eXo dependencies<\/h2>\n
<dependency>\n <groupId>org.exoplatform.ecms<\/groupId>\n <artifactId>exo-ecms-core-publication<\/artifactId>\n <version>2.3.4<\/version>\n <scope>provided<\/scope>\n<\/dependency>\n<dependency>\n <groupId>org.exoplatform.ecms<\/groupId>\n <artifactId>exo-ecms-core-services<\/artifactId>\n <version>2.3.4<\/version>\n <scope>provided<\/scope>\n<\/dependency>\n<dependency>\n <groupId>org.exoplatform.ecms<\/groupId>\n <artifactId>exo-ecms-core-webui<\/artifactId>\n <version>2.3.4<\/version>\n <scope>provided<\/scope>\n<\/dependency><\/pre>\n
Using the eXo Content Management API<\/h2>\n
![\"code2\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/code2.jpg\" "\\"code2\\"")
<\/a><\/p>\npublic class ProductServiceImpl implements ProductService {\n @Override\n public List getProducts() {\n List products = new ArrayList();\n products.add(new Product(1, \"Ironman\", \"Ironman\", 12));\n products.add(new Product(2, \"Wolverine\", \"Wolverine\", 15.5));\n products.add(new Product(3, \"Spiderman\", \"Spiderman\", 13));\n products.add(new Product(4, \"Thor\", \"Thor\", 10));\n products.add(new Product(5, \"Hulk\", \"Hulk\", 11));\n products.add(new Product(6, \"Captain America\", \"Captain America\", 15));\n products.add(new Product(7, \"Human Torch\", \"Human Torch\", 11));\n products.add(new Product(8, \"Magneto\", \"Magneto\", 17));\n products.add(new Product(9, \"Dardevil\", \"Dardevil\", 16.5));\n return products;\n }\n}<\/pre>\nWCMComposer wcmComposer = WCMCoreUtils.getService(WCMComposer.class);<\/pre>\n
@Override\npublic String getProductThumbnailPath(int productId) {\n String thumbnailPath = null;\n\n \/\/ get wcmcomposer service\n WCMComposer wcmComposer = WCMCoreUtils.getService(WCMComposer.class);\n\n HashMap filters = new HashMap();\n \/\/filters.put(WCMComposer.FILTER_LANGUAGE, Util.getPortalRequestContext().getLocale().getLanguage());\n filters.put(WCMComposer.FILTER_MODE, Utils.getCurrentMode());\n \/\/ take the last published version\n filters.put(WCMComposer.FILTER_VERSION, null);\n\n try {\n Node productThumbnailNode = wcmComposer.getContent(workspace, path + productId + \"\/thumbnail\", filters,\n WCMCoreUtils.getUserSessionProvider());\n if (productThumbnailNode != null) {\n thumbnailPath = path + productId + \"\/thumbnail\";\n }\n } catch (Exception e) {\n e.printStackTrace();\n thumbnailPath = null;\n }\n\n return thumbnailPath;\n}<\/pre>\n@Override\npublic List getProductPictures(int productId) {\n List pictures = null;\n\n \/\/ get wcmcomposer service\n WCMComposer wcmComposer = WCMCoreUtils.getService(WCMComposer.class);\n\n HashMap filters = new HashMap();\n \/\/ content of the currently selected language\n \/\/filters.put(WCMComposer.FILTER_LANGUAGE, Util.getPortalRequestContext().getLocale().getLanguage());\n \/\/ live or edit mode (will respectively get draft or published content)\n filters.put(WCMComposer.FILTER_MODE, Utils.getCurrentMode());\n filters.put(WCMComposer.FILTER_VERSION, WCMComposer.BASE_VERSION);\n \/\/ order clauses\n filters.put(WCMComposer.FILTER_ORDER_BY, \"exo:dateModified\");\n filters.put(WCMComposer.FILTER_ORDER_TYPE, \"ASC\");\n\n try {\n \/\/ service call to retrieve the contents\n List picturesNodes = wcmComposer.getContents(workspace, path + productId, filters,\n WCMCoreUtils.getUserSessionProvider());\n pictures = new ArrayList();\n for (Node pictureNode : picturesNodes) {\n \/\/ exclude thumbnail\n if (!pictureNode.getProperty(\"exo:name\").getString().equals(\"thumbnail\")) {\n\n \/\/ In live mode, the last published version is a frozenNode, so\n \/\/ we need to get the node referenced by this frozen to get the real path\n String picturePath = null;\n if (pictureNode.isNodeType(\"nt:frozenNode\")) {\n String uuid = pictureNode.getProperty(\"jcr:frozenUuid\").getString();\n Node originalNode = pictureNode.getSession().getNodeByUUID(uuid);\n picturePath = originalNode.getPath();\n } else {\n picturePath = pictureNode.getPath();\n }\n\n Picture picture = new Picture(pictureNode.getProperty(\"exo:name\").getString(), picturePath, pictureNode.getProperty(\"exo:title\").getString());\n pictures.add(picture);\n }\n }\n } catch (Exception e) {\n e.printStackTrace();\n pictures = null;\n }\n\n return pictures;\n}<\/pre>\nif (pictureNode.isNodeType(\"nt:frozenNode\"))<\/pre>\n
<rich:dataGrid value=\"#{comicsStoreBean.products}\" var=\"product\" columns=\"3\" elements=\"6\" width=\"600px\" border=\"0\">\n <rich:panel bodyClass=\"pbody\">\n <f:facet name=\"header\">\n <h:outputText value=\"#{product.name}\"><\/h:outputText>\n <\/f:facet>\n <h:panelGrid id=\"product\" columns=\"2\" columnClasses=\"productThumbnailColumn, productDetailColumn\">\n <h:panelGroup>\n <h:panelGroup rendered=\"#{not empty product.thumbnailPath}\">\n <img src=\"\/rest\/jcr\/repository\/collaboration#{product.thumbnailPath}\" width=\"80px\"><\/img>\n <\/h:panelGroup>\n <\/h:panelGroup>\n <h:panelGrid columns=\"2\">\n <h:outputText value=\"Description:\" styleClass=\"label\"><\/h:outputText>\n <h:outputText value=\"#{product.description}\"\/>\n <h:outputText value=\"Price:\" styleClass=\"label\"><\/h:outputText>\n <h:outputText value=\"#{product.price} \u20ac\"\/>\n <h:outputText value=\"Photos:\" styleClass=\"label\"><\/h:outputText>\n <ui:repeat value=\"#{product.pictures}\" var=\"picture\" varStatus=\"status\">\n <h:outputLink onclick=\"window.location = window.location.pathname + '?content-id=\/repository\/collaboration#{picture.path}'; return false;\" value=\"#\">\n <h:outputText value=\"#{picture.title}\"><\/h:outputText>\n <\/h:outputLink>\n #{status.last ? '' : ' | '}\n <\/ui:repeat>\n <\/h:panelGrid>\n <\/h:panelGrid>\n <div class=\"buyButtonDiv\">\n <h:commandButton value=\"Buy\" styleClass=\"buyButton\"><\/h:commandButton>\n <\/div>\n <\/rich:panel>\n <f:facet name=\"footer\">\n <rich:dataScroller\/>\n <\/f:facet>\n<\/rich:dataGrid><\/pre>\nAdding Content Detail in the page<\/h2>\n
\n
![\"final\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/final.png\" "\\"final\\"")
<\/a><\/p>\n![\"final-wolverine1\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/final-wolverine1.png\" "\\"final-wolverine1\\"")
<\/a><\/p>\n\n
![\"final-addpicture\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/final-addpicture.png\" "\\"final-addpicture\\"")
<\/a><\/p>\n
![\"final-editmode\"](\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2013\/02\/final-editmode.png\" "\\"final-editmode\\"")
<\/a><\/p>\n