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.

Design standard for Page Templates and Sub flow calls in ADF 11g

ADF 11g provides effective ways of reducing development time by allowing to create page templates. So, a typical example of a page template is say your organization app has 20 pages and all having same header and footer (or at least same layout). Now to avoid repetition of designing or copy/pasting manually in all 20 pages you can simply create a page template and use it while creating your pages. Page templates are much more powerful than what I said above as it allows you to keep dynamic data as well. But lets understand it this way as the focus of this post is different.

When a Task Flow call is made from a page fragment which is inside a task flow then the Task flow being invoked is referred as Sub-flow. The design diagram usually represent it by a task flow call activity. So, one of the most typical mistake I have seen people doing in ADF world is wrong way of using the page template in the sub-flows.  You must make sure that if the parent flow is using a page Template A (say with two areas header and content area) then you must not use the same template Template A in any of the page fragment of the sub-flow. The simple obvious reason is: in that case the page fragment of subflow having Template A will be embedded in the parent task flow page fragment. Visually, It is like:

So, what is the right way? Well in case of sub flows you should only use the page Template A in the parent task flow's page fragments. For the subflow page fragments there should not be any page template or there should be another page Template B which is only the content part of the template A.

So, in other words you should create a page Template B with only content part of Template A. And then you should create another Template A with only header part and in the content area including template B. So, for parent flow page fragments Template A should be used and for sub flow page fragment's Template B should be used.

Updating a Declarative Component in ADF 11g

I have an adf application built in 11g. It uses a custom component which I developed for this app. Recently, I got the need to add an additional attribute in the component. So, thought to blog about the way I did it without any issues.

1. Open your custom declarative component project.

2. Add the desired attribute and deploy it to your desired path.

3. Stop the running wls.

4. Open your main project ( consumer project). Go to properties.

5. From the libraries and class path delete the existing entry for the component.

6. Save the changes and close the jdeveloper completely.

7. Open the consumer project's ViewController.jpr in a text editor.

8. Remove all the entries containing any reference to your custom component library.

9. Reopen jdev and then go to resource pallet.

10. Add a file system connection and select the directory you generated the custom declarative component jar.

That's it. It should reflect your new updates component nicely.