Creating a Clickable Text Declarative Component in ADF 11g

This post is on how to create a clickable text declarative component in ADF 11g.  Let me explain a bit on the exact requirements here.

So, we need a text component which shows a small cross icon on the top right corner. This cross icon on click should hide the component from the page. The rich adf faces libraries does not provide any component with this capability. However, it is very easy to create such components using the concept of 'Declarative Components'. I don't want to copy paste the steps from the dev guide which I followed to build this one. Here is the link for dev guide

Broader steps are:
1. Create a new project for your component. Choose option 'JSF Declarative Component'
2. Select or create a new tag library to contain the component.
3. Choose custom component class checkbox if you want to add some custom login in the component.
4. Add facets, attributes and methods to design the look and feel and behavior of your component.

Once you are done with your declarative component then it behind scene creates a metadata definition of the component. Once the component is created it can be deployed by packaging it as a ADF library jar. The details are again mentioned in the same section on the above provided link.

Let's talk about a bit on the design of the 'Clickable Text' component. Let call it Text comp for the simplicity.
1. Text Comp is designed by defining two attributes textValue (for holding the text value) and partialSubmit to expose the partialSubmit property of the close icon.
2. For design panelGroupLayout with default property is taken.
3. An outputText and a commandLink component is then dropped on it. CommandLink component further embeds the close icon.
4. To get the required alignment outputText is set with a top margin 50px in this case.
5. Another attribute of type method is created in the component definition with signature void method(javax.faces.event.ActionEvent) and bound to the action of the commandLink.

The resultant component looks like as follows:

You can grab this workspace for using this component or for a detailed reference of implementation here.

The target application where you want to use this component will need you to provide some default text for this component and binding the actionListener.