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.