Adding Custom JSF Components to Oracle JDeveloper 10g (10.1.3) Preview

Written by Jonas Jacobi, Oracle Corporation
January, 2005
Revision 1.3

Adding Custom JSF components

This HowTo explains how to add custom JavaServer Faces components  to Oracle JDeveloper 10g (10.1.3) Preview. This HowTo is divided into two parts - one that is explaining how to get Oracle ADF Faces components up and running and the second part is covering how to get other or your own custom components installed within Oracle JDeveloper 10g (10.1.3). For more information and HowTos, please, refer to the JDeveloper page on Oracle Technology Network (OTN).

Prerequisites
Adding ADF Faces components
Installing ADF Faces components
Building a page with ADF Faces components
Creating a new project with ADF Faces
Adding ADF Faces to an already existing project
Installing third party custom components
More information

Prerequisites

In order to follow this HowTo you need the Oracle JDeveloper 10g (10.1.3) Developer Preview, ADF Faces, and access to Internet.

Adding ADF Faces components

Update Center

Here is a solution to the problem of importing extensions and other upgrades to JDeveloper. The Check for Updates Wizard is used to download and install extensions and patches for Oracle JDeveloper 10g Developer Preview. You can choose whether to install updates from a remote Update Center or from a local update bundle.  

Installing ADF Faces components

With the release of Oracle JDeveloper 10g Developer Preview there is built-in support for visually building JavaServer Faces (JSF) applications. The release also contains a basic set of components provided by the JSF reference implementation (JSR 127). For developers looking at building enterprise applications with JSF it will most certainly include the use of custom components provided by third party component vendors.

To provide evaluation software to developers and architects Oracle has released parts of Oracle ADF, the Oracle ADF Faces components, as Early Access software on OTN. Oracle ADF Faces is a rich set of user interface components built on top of the new JavaServer Faces JSR-127 standard. Oracle ADF Faces provides various user-interface components with built-in functionality - such as data tables, hierarchical tables, and color and date pickers - that can be customized and re-used in your application ADF Faces is a subset of the complete Oracle ADF and is an extensive set of JavaServer Faces components.

Major ADF new features and enhancements are currently under development. As a result, the Oracle JDeveloper 10g 10.1.3 Developer Preview does not yet include Oracle Application Developer Framework (ADF).  A preview of Oracle ADF (10.1.3) is expected in the first half of CY 2005.

Important Installation Information - Due to an issue in the Preview version of JDeveloper, if you use the update center to update from a previous release of ADF Faces to EA12, you will no longer be able to run projects from the previous release through JDeveloper. Before you do the update you should close any projects you do not plan to upgrade to EA12.

Here is what you have to do in order to setup Oracle JDeveloper 10g (10.1.3) Developer Preview with ADF Faces components:

1. Download Oracle JDeveloper 10g (10.1.3) Developer Preview.
2. Select the Help menu and click on the "Check for Updates ..." menu option. The Check for Updates Wizard is launched.
3. Click Next to get to the first step in this wizard - Source. Here you can select from which Update Center you would like to get your extensions and/or patches.
4. Make sure the "Official Oracle Extensions" option is selected.
   
   
    
5. Click Next to go to Step 2: Updates. This will show a list of available updates from that Update Center.
   
   
   Note: The version number may be different depending on available ADF Faces version
    
6. Make sure that the ADF Faces option is selected (optionally deselect updates that you don't want) and click Next to install the ADF Faces components.
   
   
    
7. Finish the wizard after checking that your update was installed.

Building a page with ADF Faces Components

You have now installed a very rich set of JSF components that can be used developing J2EE applications. There is no re-start required to use these components nor do you need to create a new project.

Creating a new project

1. Select File menu and click on the New... option.
2. In the new gallery select the General category and in the Items list select Application. Click OK.
3. In the Create Application dialog enter a name and keep everything else as defaulted. Click OK.
   
   
    
4. In the Create Project dialog enter a name for the project and click OK.
5. Right click on the Project node and select New...
6. In the New gallery expand the Web Tier node and select the JSF category. In the Items list select JSF JSP to create a new page and click OK.
   
   
    
7. In the Create JSF JSP page wizard enter a name for you file and and click Next.
8. You should now see all available Tag Libraries including the newly added ADF Faces libraries. Use the shuttle control to move the two ADF Faces libraries over to the right side.
   
   
    
9. You can now finish the wizard by clicking Finish.
10. You can now start dragging ADF Faces components from Component Palette to your page.
    
    

Adding ADF Faces to an already existing project

Using the Update Center feature to add components to JDeveloper do not automatically add these components to your projects. Here is how you add components to an already existing project.

1. Double click on your project node. This will open the Project Properties dialog.
2. In left pane select the JSP Tag libraries node.
3. Click on the Add button available on the right side just below the currently available libraries.
4. Select the two ADF Faces libraries and click OK.
   
   
    
5. Click OK to close the Project Properties dialog. You should now be able to see your added components in the Component Palette.

For more information about ADF Faces please visit the Oracle ADF Faces EA page on OTN.

Adding Custom JavaServer Faces components

Installing JSF Components provided by other third party vendor

For most enterprise applications the Oracle ADF Faces components will be more than adequate, but in those rare occasions when a component outside the scope of ADF Faces is needed the Oracle JDeveloper 10g (10.1.3) Developer Preview will allow developers to visually build applications with these custom components.

To illustrate how to install a set of custom components we are going to use the sample components from Sun's reference implementation. Here is how you install custom components.

1. Download the custom component libraries you would like to use. In this case download the JSF v1.1.01 RI from Sun's website and unzip the file. We are going to refer to the root folder of the unzip source as [COMPONENT_HOME].
2. Start Oracle JDeveloper 10g (10.1.3) Developer Preview.
3. Select the Tools menu and click on the Manage Libraries option. This will launch the Manage Libraries dialog.
   
   
    
4. Select the JSP Tag libraries tab. We are now going to add the component tag library for these custom components.
5. In the JSP Tag libraries tab select the User node and click the New button.
   
   
    
6. In the launched dialog expand the [COMPONENT_HOME]/samples/ directory and select the demo-components.jar file. Then click Open.
   Note: Oracle JDeveloper 10g (10.1.3) Developer Preview will automatically detect any tag libraries (TLDs) available in this file.
   
   
    
7. Change the display name to "JSF Custom Components" and set prefix to "d".
8. Make sure that you check the "Execute Tags in JSP Visual Editor is selected before closing the dialog by clicking OK.
   
   
    
9. You are now done adding custom components to Oracle JDeveloper 10g (10.1.3) Developer Preview.

Building a page with the JSF Custom Components provided as samples by the JSF RI

To be able to fully use the newly added JSF custom components provided by JSF RI you will have to perform some additional steps. These steps are only required for these components since they have dependencies on images and styles provided by the sample component set.

1. After you have created your Application workspace and project you can create JSF JSP page by selecting File -> New Copy the images folder from the [COMPONENT_HOME]\samples\components\web directory and past it in your projects public_html folder.
2. Copy the following stylesheets to your public_html folder - stylesheet.css, result-set.css, and tree-control-test.css

More Information

For more information about JSF and Oracle JDeveloper 10g (10.1.3) Developer Preview please visit the Oracle JDeveloper home page at Oracle Technology Network.