Friday, March 9, 2012

ADF: Creating and Using an ADF Declarative Component

This tutorial shows you how to create ADF declarative component metadata, add ADF Faces components that make up the composite component, and use the declarative component on a JSF page.

In this post ADF: About JSF fragments, ADF regions, declarative components …, i wrote about different declarative component in ADF faces.

You will use wizards to quickly create applications and projects, and a declarative component definition consisting of an attribute, a facet and a method.

The declarative component you will create is panel box containing one label, list of input text, and button. The metadata for the declarative component definition will allow page authors to set the label for a panel box, attach a method to the button to print the input lists after modification, and use built in controllerContext to view page viewId as default value.

To create the declarative component layout, you will use design tools such as the visual editor, Component Palette, and the Property Inspector. Then you will deploy the project to an ADF Library JAR file. For an application to consume the declarative component, you will use the Resource Palette to add the deployed JAR, and then add the deployed JAR to the project that contains JSF pages.

To make use of the declarative component, you will add it to a simple JSF page, edit the pre-defined attributes, create a method and attach it to the declarative component. When you run the application, the page will look similar to this:



1- From the main menu, choose File > New. In the New Gallery, expand the General category and select Applications. Then in the Items list, select Fusion Web Application (ADF) and click OK.


2- I created a separate ADF ViewController project in my work space:


3- In this project open the Create JSF Declarative Component wizard:


4- The new declarative component I18NDef should have at least three attributes and one method:

  • Some string for label.
  • Attribute binding for input texts as Array list called dataI18Ns.
  • Some object for other with default value of "# {controllerContext.currentViewPort.viewId} ".
  • Method called doPrint of signature of " void method(javax.faces.event.ActionEvent) ":

The source code of I18NDef.jspx component looks like this:

5- The next step is to deploy the component into ADF Library. We have to add new deployment profile for the CSComponents project:




6- And let's deploy the project into library:



7- The following step is to define File System connection in the resource palette to the deployment path of CSComponents project:


8- After that we have to choose the project where we're going to use the new component (in my case Custom Components) and add CSComponents.jar library to it:


Now we can use I12NDef component in our page and drag it from the component palette:



In our CCTestPage.jsf page the source code is going to look like this:

And the following is the CCTestBean JSF 2 managed bean source:

The data that contained in the list is instance from the following object:

And after changing the data in the input boxes then press the print button you will see the reflected changes printed in the jdeveloper console as the following:






Summary
In this tutorial you defined an ADF declarative component and then used it on a JSF page. You learned how to:
  • Use JDeveloper wizards and dialogs to create applications and projects.
  • Define attribute, facet and method metadata for a declarative component, and the declarative component layout.
  • Define the tag library that will contain the declarative component.
  • Create a deployment profile for an ADF Library JAR.
  • Deploy the project that contains the declarative component definition to an ADF Library JAR.
  • Share the ADF Library JAR by adding a file system connection in the Resource Palette.
  • Add the ADF Library JAR to the application and project that will make use of the declarative component.
  • Add and modify the declarative component on a JSF page.
  • Use the Create Managed Bean dialog to add and attach a managed bean method.
  • Use Integrated WebLogic Server to run an ADF Faces application.
To learn more about using Oracle ADF Faces refer to: