Building Tag Cloud Declarative ADF Component

When building a website, there could a requirement to add a tag cloud to let the users know the popular tags (or terms) used in the site. In this blog, we would build a simple declarative component to be used as tag cloud in the page.

To start with, we would first create the declarative component, which could display the tag cloud. We will do that by creating a new custom application from the new gallery.

Give a name for the app and the project and from the new gallery, let us create a new ADF Declarative Component

We need to specify the name for the declarative component, attributes in it etc. as follows

For displaying the tags as cloud, we need to pass the content to this component. So, we will create an attribute to hold the values for the tag. Let us name it as "value" and make it as java.lang.String  type.

Once after this, to hold the component, we need to create a tag library. This can be done by clicking on the Add Tag Library button.

Clicking on OK buttons in all the open dialogs would create a declarative component for us. Now, we need to display the tag cloud based on the value passed to the component. To do that, we assume that the value is a Tree Binding and has two attributes in it, say "Name" and "Weight". To make a tag cloud, we would put together the "Name" in a loop and set it's font size based on the "Weight". After putting our logic to work, here is how the source look

Attributes added to the declarative components can be retrieved by using #{attrs.<attribute_name>}. Now, we need to deploy this project as ADF Library Jar file, so that this can be distributed to the consuming applications.

We'll select ADF Library Jar as type and create the profile.

We would be getting the jar file after deployment.

To test the functionality, we could create a simple Fusion Web Application.

To add our custom component to the consuming application, we can create a file system connection pointing to the location where the jar file is and add it or, add through the project properties of the ViewController project.

Now, our custom component has been added to the consuming application. We could test that by creating a VO in the model project with a query like,

select 'Faces' as Name,25 as Weight from dual
union all
select 'ADF', 15 from dual  
union all
select 'ADFdi', 30 from dual
union all
select 'BC4J', 20 from dual
union all
select 'EJB', 40 from dual
union all
select 'WS', 35 from dual

Add this VO to the AppModule, so that it would be exposed to the data control. Then, we could create a jspx page, and add a tree binding to the VO created.

We can now see our Tag Cloud declarative component is available in the component palette.

 It can be inserted from the component palette to our page and set it's value property to CollectionModel of the tree binding created.

Now that we've created the Declarative component and added that to our page successfully, we can run the page to see how it looks.

As per the query, the Tags are displayed in different fonts, based on their weight.


Hello Arunkumar!
This is a great article! Thank you very much for sharing.

I tried to implement the same, but I get the error

javax.el.PropertyNotFoundException: /file:C:/xxx/AppData/Roaming/JDeveloper/system12.!/tagCloud.jsf @23,66 value="#{row.Name}": The class 'java.lang.String' does not have the property 'Name'.

tagCloud.jsf is the declarative Component page and the line that causes the error is the one of outpuText:
<af:iterator id="dc_i1" value="#{attrs.value}" var="row">
<af:outputText value="#{row.Name}" id="dc_ot1"
inlineStyle="font-size:#{row.Weight}%" />

Could you please advise me? I cannot figure it out...
Best Regards

Posted by Apostolos on November 29, 2013 at 03:50 PM IST #

Hi Apostolos,

My above example is under the assumption that the model contains two attributes with the names Name and Weight. I guess, the attributes that you have in your model might be different than this (especially the attribute Name). Check out the query that I used to build the VO. Your query might be different with different attribute names. In that case, you need to change the Declarative Component to use that attribute name instead of the one I've used in this example.


Posted by Arun on December 03, 2013 at 07:02 PM IST #

Post a Comment:
  • HTML Syntax: NOT allowed

Tips & Tricks from Arun on JDev ADF, Forms, SQL & PL/SQL.


« June 2016