For detailed descriptions of Tag Cloud component use cases and examples, see Tag Cloud Use Cases and Examples in Developing Web User Interfaces with Oracle ADF Faces.

Visually compelling data visualization components enable end users to understand and analyze complex business data. The components are rich in features that provide out-of-the-box interactivity support.

For detailed descriptions of the end user and presentation features for the DVT tag cloud component, see End User and Presentation Features of Tag Clouds in Developing Web User Interfaces with Oracle ADF Faces.

A tag cloud is used to display tag information or website metadata in a free flow format. You can create a tag cloud by using the Data Controls panel.

1. From the Data Controls panel, select a collection.

   For example, to use the data control shown in this section, select CensusView1.

2. Drag the collection onto a JSF page and, from the menu, choose Tag Cloud.
3. In the Create Tag Cloud dialog, do the following to configure the tag cloud:

   • From the dropdown menu of the Text Value field, select an attribute to represent the text that will be shown in the rendered tag cloud.

     For example, to configure the tag cloud in the sample, select the State attribute.

   • To configure the tag sizes, select an attribute from the dropdown menu of the Relative Size field.

     For example, to configure the tag cloud in the sample, select the Population2006 attribute

   • To configure tag colors, create a rule under Grouping Rules and then create appropriate Value-Specific Rules. Use Match Rules to specify colors for simple true or false conditions or when you want to match a specific value. Use Exception Rules when you want to specify a color when the tag's grouped-by value meets a specific condition.

     For example, to configure the tag cloud in the sample, create a new Grouping rule. Under both Group by value and Legend Label, provide #{ent.Population2006 gt 5000000}.

     Then create two new Match Rules. For the first, provide a Group Value of true and a Property Value of #ed6647. For the second, provide a Group Value of false and a Property Value of #267db3.

     Figure 45-3 shows the Create Tag Cloud dialog that generates the sample tag cloud using the CensusView1 data control.

     Figure 45-3 Create Tag Cloud dialog for CensusView1

     
     Description of "Figure 45-3 Create Tag Cloud dialog for CensusView1"
4. Click OK.

Dropping a tag cloud from the Data Controls panel has the following effect:

• Creates the bindings for the tag cloud and adds the bindings to the page definition file

• Adds the necessary code for the UI components to the JSF page

The data binding XML that JDeveloper generates represents the physical model of the tag cloud you create. The example below shows the bindings that JDeveloper generated in the page definition file where a tag cloud was created using data from the State and Population2006 attributes in the CensusView1 data collection.

<tree IterBinding="CensusView1Iterator" id="CensusView1">
	<nodeDefinition DefName="view.CensusView" Name="CensusView10">
		<AttrNames>
			<Item Value="State"/>
			<Item Value="Population2006"/>
		</AttrNames>
	</nodeDefinition>
</tree>

The following example shows the code that is generated on the JSF page for the tag cloud:

<dvt:tagCloud id="tc1" var="ent" value="#{bindings.CensusView1.collectionModel}" layout="cloud">
	<dvt:tagCloudItem label="#{ent.State}" id="tci1" value="#{ent.Population2006}">
		<dvt:attributeGroups value="#{ent.Population2006 gt 5000000}" type="color"
												label="#{ent.Population2006}"	id="ag1">
			<dvt:attributeMatchRule group="true" id="amr1">
				<f:attribute name="color" value="#ed6647"/>
			</dvt:attributeMatchRule>
			<dvt:attributeMatchRule group="false" id="amr2">
				<f:attribute name="color" value="#267db3"/>
			</dvt:attributeMatchRule>
		</dvt:attributeGroups>
	</dvt:tagCloudItem>
</dvt:tagCloud>

After you create your tag cloud, you can modify the binding or add additional rules using the Edit Tag Cloud dialog. To open the dialog, use the Edit icon in the Properties window for the tag cloud component. You can also customize the attributes of the tag cloud directly in the code, in the visual editor, or by setting values in the Properties window.