Creating an image gallery using the Navigation Model and the Content Presenter

Often you see that a portal has an image gallery of some sort. WebCenter unfortunately does not have an out of the box image gallery. Luckily there is some god news because it is not hard to create your own custom image gallery by just using the navigation model and the content presenter and a few lines of code. Navigation models tend to be used to create navigation models... Hence the name. With some creativity we also can use the navigation model for other cool stuff like an image gallery. The advantage of this is that we can easily modify the content of the image gallery by just editing the navigation model. All the content that we will be using is stored in UCM so we can just keep on using the features of UCM to have a good lifecycle of your images. You also can make use of the security of UCM so people can only see the images they should see. So how do you create an image gallery in WebCenter... We will start by creating the navigation model. In your Webcenter portal project right click on the navigations folder and select new. Select Portal from the list on the left and Navigation from the list on the right: Specify a name for your navigation model and press OK The way that we will add content to the image gallery is by adding folders to it. You should create a connection to your UCM server and drag and drop folders that contains images to your navigation model: As shown in the image above, i have to folders names FolderA and FolderB. I will drag & drop them onto the root node of the newly created navigation model. This will end up in following navigation model: As you can see, each folder will be added as a Content to your navigation model. This navigation model is the repository for our image gallery. If you want to add folders than you can do so by adding those folders to the navigation model. This can be done both at design time or at runtime. This way the image gallery is quiet flexible. A next thing we need to do is create the page that will use the navigation model. Just as a side note, in this blog post I show you this technique how to create an image gallery on a single page but you can easily to the exact same on a taskflow so the image gallery can be reused on other pages and people can just drop them on the pages when you add the image gallery taskflow to your resource catalog. So, create a new JSPX page in the pages folder of your portal application: The page for the image gallery will contain a panelSplitter. The first facet will contain the items from the navigation models while the second facet will contain the content presenter that will show the images from the selected folder. I will first show the code and explain each part below: Line 4: In the items of the forEach component, we reference the navigation model by specifying the exact path to the navigation model. The includeStartNode=false is needed because we don't want to include the root node of the navigation model. By setting it to false, the folders will be the at the first level of the navigation model and directly accessible in the forEach loop. Line 5: the commandLink is just a link containing the title of the node which we specify in the navigation model. It will not show the name of the folder from UCM but the value specified in the title attribute of the navigation model. In the actionListener we will reference a managed bean which i will discuss later on. Basicly, the actionListener will refresh the parameters of the content presenter task flow and refresh it so it will show the new images. Line 7: the We need an extra attribute because we need to know the exact folder that we have clicked so we can pass this to the content presenter. This is also used in the actionListener which i will discuss in a few moments. Drop the content presenter taskflow on the second facet. This will invoke the popup to input the parameters of the content presenter taskflow:

• taskflowInstId: you can specify whatever you want here. THis is just a unique name that identifies the taskflow instance
• datasourceType: dsTypeFolderContents: this will tell the taskflow that we will specify the ID of a folder and the content presenter will get the content of that folder and use it in its template
• datasource: #{pageFlowScope.bean.ucmId}: this is one of the most important parts of our image gallery. This value is set when we click on a link from the first facet. This part will also be explained in a few moments
• templateView: oracle.webcenter.content.templates.default.list.carousel: the carousel template is ideal for our image gallery. it will show the images in a carousel view. Of course you can create your own template and specify it here.
• regionTemplate: ${false}: this tells the content presenter that the templateView specified is not a regionTemplate from siteStudio.

Because we modify the parameters of our taskflow in a managed bean, we need to tell the taskflow that he needs to refresh when needed. This is done in the bindings. Select the content presenter taskflow in the Executables table in the bindings and set the Refresh value to ifNeeded in the property inspector: As a reference, this should be the source of the taskflow entry in the bindings: A last thing we need to do is creating the managed bean that will contain the actionListener and the methods to pass the new folder id to the content presenter. Right click on the Portal project and select New from the context menu. From the General section select Java and select Java Class from the right list. Specify Bean as the name of the class. Specify portal.beans for the package and press the OK button to create the class: Use following code for the bean: public class bean { private String ucmId = "UCM#dCollectionID:487901785247000201"; private RichRegion cp; public bean() { super(); } public void doRefresh(ActionEvent e) { this.ucmId = (String)e.getComponent().getAttributes().get("ucmId"); AdfFacesContext.getCurrentInstance().addPartialTarget(this.cp); } public void setUcmId(String ucmId) { this.ucmId = ucmId; } public String getUcmId() { System.out.println("getting ID: " + this.ucmId); return ucmId; } public void setCp(RichRegion cp) { this.cp = cp; } public RichRegion getCp() { return cp; } } The most important part is the doRefresh method. Basiclly what the method does is just getting the attribute we have added using the clientAttribute from the commandLink. We put this value in the ucmId property because this property is the one that drives the content in the content presenter. Remember that we have set #{pageFlowScope.bean.ucmId} as the datasource of the content presenter. When we press a commandLink that has been generated by the navigation model, the doRefresh method pops in and sets a new value in the ucmId value. We then send a notification to the content presenter taskflow saying that he needs to refresh. By sending this notification in combination with the ifNeeded value of the refresh property, the content presenter will notice the new value of the datasource property and use the new value of the ucmId to drive the content for the carousel template. You might also notice that we preset the value of the ucmId in the bean. This is needed because when we first load the page, we haven't selected a folder so we need something to pass to the content presenter. The value we set there, is from the same format as the value of the clientAttribute. The format is something like this: #dCollectionID: So in my case the name of the connection is UCM and the id of the folder in UCM is 487901785247000201. Because we use the addPartialTarget from our managed bean, we need to bind the region that contains the content presenter to a property of our managed bean so change the af:region and add bindings="#{pageFlowScope.bean.cp} This should be the complete snippet for the second facet containing the content presenter: Now add the managed bean to your adfc-confix.xml: Now add the gallery.jspx to your page hierarchy and run the portal. This is how it looks: So as you can see, the navigation model can be quiet powerful and you can use it for just more than navigations. If something is not working of you don't understand, please leave a comment so i can clarify or change the explenation.