For this tutorial I’ll be using the latest patch set or Oracle JDeveloper 11.1.1.2 and Oracle XE Database.

What I’ll be demonstrating how to create a simple JSF (.jspx) web page that has two combo boxes that depend on one another. In other words, two combo boxes (af:SelectOneChoice) depend on each other and are automatically refreshed when selected.

Here is an index of each section in my article:

1. Create New Application
2. Setup Database Connection
3. Working with the Model
4. Creating the View / JSF Page
5. Creating the Navigation Form
6. Adding The Combo Boxes
7. Wiring the Combo Boxes

Create New Application

Alright, let’s get started by creating a new Application Fusion Web Application (ADF). I’ll call the application name DependentCombos, and my application package prefix will be org.k.tutorials.

I’ll leave the rest of the options and settings at their defaults and hit Finish on the next step. You can adjust the options and settings if you want to, you are totally allowed to (I can’t prevent you from doing it, do it, do it man ).

Setup Database Connection

Now let’s setup a connection to a database so we are able to create some Entities and View objects. For the purpose of this tutorial I used the famous HR Schema that exists in any Oracle Database.

To setup the connection to my database server I need to go to the Application Resources pane/panel on the left side (the Application Navigation area). It should be under the Projects panel. If it’s not there, go to View -> Application Navigation and the panels should appear on the left.

Inside the Application Resources panel right click on Connections and then select New Connection -> Database. Fill in the details, test the connection and you’re good to go.

Working with the Model

In the Projects panel on the left, right click on Model and click New. In the New Gallery screen that appears go to Business Tier -> ADF Business Components and then select Business Components from Tables on the right side and click OK. Now in the Initialize Business Components screen that appears after clicking OK, choose the connection we created above, leaving everything else to the defaults and hitting Next.

In step 1 (Entity Objects) enter org.k.tutorials.model.entities as the package name. Now click the Query button to populate the list of available tables and then let’s select Locations, Regions and Countries as the entities to use. Once you’ve selected/moved them over, rename each of the entities so their names are singular. In other words, change the “Entity Names” to Location, Region and Country. Click Next to proceed to step 2.

Now in step 2 (Updatable View Objects) enter org.k.tutorials.model.views as the package name. Next, select only Location, give it an Object Name of Locations and click Next to continue.

In step 3 (Read-Only View Object) enter org.k.tutorials.model.roviews as the package name. Next click the Query button and then select only Regions and Countries and rename them to be Regions, Countries instead of RegionsView, CountriesView. Click Next.

Finally in step 4 (Application Module) enter org.k.tutorials.model as the package name. I like to put this in the root of the structure with the name HrAppModule. So that’s it for now, in the model, click Finish and let’s start working in the ViewController.

Creating the View / JSF Page

Now we’re going to create the view in a similar fashion as we created the model. In the Projects panel, right click on ViewController and then click New. In the New Gallery screen that appears go to Web Tier -> JSF and then select JSF Page on the right side and click OK.

In the Create JSF Page screen that appears, enter MyPage.jspx as the file name, ensure Create as XML Document is checked and lets choose a template of your choice from the Quick Start layout (I personally use the one column with fixed header and scrollable auto body) and then click OK.

Creating the Navigation Form

In the Application Navigation structure on the left, expand the Data Controls panel and then expand HrAppModuleDataControl inside of it. Now ensure the MyPage.jspx Structure panel is open (it should be below the Data Controls panel). If it’s not, go to View -> Structure.

Once HrAppModuleDataControl is expanded in the Data Controls panel and the MyPage.jspx Structure panel is open, we need to drag Locations1 in Data Controls to f:view -> af:document -> af:form -> af:panelStretchLayout -> Panel Stretch Layout facets -> center in the Structure panel. You can also simply drag and drop Locations1 into the center working area column of JDeveloper when the MyPage.jspx tab is selected and in Design view — it’s the tab to the right of the DependentCombos Overview tab.

Whichever way you choose to perform the drag and drop a menu will appear and you should select Form -> ADF Form as shown below.

Next an Edit Form Fields dialog will appear. Let’s include navigation controls by checking it and then click OK.

Adding The Combo Boxes

Alright, lets get to business. Now we will drag and drop Regions1 (the first combo box) from Data Controls into the af:panelFormLayout that we just created above. When the menu prompts select Single Selection -> ADF Select One Choice.

Now in the Edit List Bindings dialog that appears we will set the Display Attribute (column) to be simply RegionName and then click OK.

Next we will add the Country Combo box, but we’ll do it in a slightly different fashion than the Regions Combo box. What we’ll do this time is drag and drop CountryId from inside of Locations1 to the same location in the Structure that you did the drag and drop with Regions1.

In other words, drag and drop HrAppModuleDataControl -> Locations1 -> CountryId in the Data Controls panel to center -> af:panelFormLayout in the Structure panel and when the menu prompts select singleSelection -> ADF Select one choice.

Now in the Edit List Bindings screen that appears click the Add button to the right of the “List Data Sources” menu. In the Add Data Source dialog that appears expand Regions1 and select Countries2 as the data source and click OK.

Next for the data mapping, let’s set the Data Value as CountryId and List Attribute as CountryId as well (this should already be populated). Down below under List Items set the Display Attribute to CountryName.

Doing so will effect like the following:

1- Make countryId in Locations1 Iterator take its value from CountryId of Countries2 Iterator

2- Make the visible combo box to user is the value of column CountryName from Countries2 iterator

3- After selecting one of Countries that will effect the changes to get The CountryId of the selected CountryName to bind it to CountryId of the Locations1 iterator

Also note, choosing Countries2 from under Region1 iterator means that Countries2 is a detail table for a master Region1, that way when Region combo Box is selected, the regionID is automatically appended in the Where Statement of Countries2 iterator SQL Query, and that way the Countries2 Iterator is filter depending on Region1 Combo Box value

Wiring the Combo Boxes

Okay so now we need to make the Combo boxes depend on each other. To do this we need to edit the source of MyPage.jspx, and we can do that by going to the MyPage.jspx tab in the center working area of JDveloper and then selecting Source down at the bottom.

In the source, scroll down to where our two af:selectOneChoice elements are located (the combo boxes). In the first combo box (Regions1 with id=”soc1″) add the attribute autoSubmit="true". Now in the second combo box (CountryId1 with id=”soc2″) add the attribute partialTriggers="::soc1".

We add “::” before the component ID in the partialTriggers attribute value so that an AJAX call occurs when the value of the Region combo box changes. When this happens, the Country combo box values are automatically updated according to the Region selected.

Here is what the source should look like when you finish modifying it.

Now let’s add a commit button to our form. To do this, drag and drop HrAppModuleDataControl -> Operations -> Commit in the Data Control panel to af:panelStrechLayout -> f:facet center -> af:panelFormLayout -> f:facet footer -> af:panelGroupLayout horizontal. When the menu prompts, select ADF Button.

Now go to the source code and remove the disabled attribute from the commit button you just added (af:commandButton / Commit). These are disabled by default for security purposes.

Alright, at this point everything we have is just a show, there isn’t any real database activity occurring. The combo boxes should be populated with data and so we can test our dependent combo’s as a proof of concept.

This article is published in ITNewb, view it on this link, check it its great.