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.
