How To use the List Binding Editor with ADF UIX

An Oracle JDeveloper How To Document
Written by Jonas Jacobi
April 2004

Content

• Introduction
• Getting started
• Creating the Business Service
• Create a Struts Pageflow
• Create Input page
• Create a messageChoice field

Introduction

This HowTo demonstrates how to build an ADF UIX application that contains a messageChoice (or drop down list) component with Oracle JDeveloper 10g. This HowTo will show you how easy it is to create a messageChoice component with values that our dynamically populated in Oracle JDeveloper 10g. For more information and HowTos, please, refer to the JDeveloper HowTo documents on Oracle Technology Network (OTN). For this simple application we are using ADF UIX, Struts, and ADF Business Components.

Tasks

This session covers the following tasks:

• Create a simple business service with ADF Business Components
• Create a simple Struts pageflow diagram
• Create one ADF UIX page with a form containing a messageChoice component.
• Use the List Binding Editor to wire the messageChoice component up to a data source.

Prerequisites

In order to follow this HowTo and build this ADF UIX application you need the Oracle JDeveloper 10g production, and an Oracle database with the sample HR schema installed.

Getting started

Before we go on the path to create our views and pageflow we need some where to store our work in progress. 

Create a new Application Workspace

1. Create a new Application workspace (File -> New)
   
   
    
2. Select the Application Workspace node.
3. Click OK. This will launch a dialog which will allow us to define location, templates, and application package prefix.
   
   
    
4. Change the name of the Application workspace to - choiceApplication
5. Change the Application Template to Web Application [default] and click OK. On completion you should have an application named choiceApplication and two projects named Model and ViewController.
   Info: You can use the Edit Templates... button to change the names of your projects and define the technology scope for each project.)
   
   

Creating the Business Service

This is the first solution to pass string value from one page to another, and in this case the Java bean (and value) will exist during the entire session, whereas the second solution, which is covered later in this HowTo, the value only exist during the request.

This section is just going to cover how to generate a Java bean and make some small changes to it needed for this HowTo.

1. Right click on the Model project and select New. This will launch the New Gallery dialog
2. In the New Gallery dialog please select the Business Components node
3. In the Items pane select Business Components from Table node and click OK.
   
   
    
4. In the Business Components Project Initialization dialog please select your db connection and click OK.
5. In the Business Components from Table - Step 1 of 3 wizard select the Employees and Departments tables and click Next.
6. In the Business Components from Table - Step 2 of 3 wizard select both objects and click Next.
7. In the Business Components from Table - Step 3 of 3 wizard keep the defaults and click Finish.

Create a Struts Pageflow

Creating a Struts pageflow

The first step in our application is to create a Struts pageflow

1. In the ViewController project double click on the struts-config.xml file. This will open an empty Struts pageflow diagram.
2. On your right hand there should be a Component palette available. If not then you can open the Component palette from the View menu.
3. Click on the Data Page node and then on the empty Struts page flow.
4. Rename the node to mainDP

Create Input page

1. By double clicking on the Data Page node - / mainDP - you will be able to wire your page forward action to a specific page.
   
   Info: By default the name of the page will be the same as the page forward action, and depending on what type of technology you have set in your project there will be a list of available file types. Alternatively you can use the Browse button to open an already existing page.
    
2. For this application we are using UIX XML, so you should type in - main.uix - in the dropdown list.
    
3. Click OK to create a new page. This will open the UIX XML page in the visual editor.
   
   
   
   This is a UIX XML page and when you create a UIX XML page from the Strut pageflow diagram the page is empty apart from a few needed components - dataScope, Body, Form - which are applied to the page by default.

Add an Input form to your page

In the DataControl Palette you should see a list of all available data controls in your Application Workspace. In our case we can see one data control mapping to our Business Components - AppModule - in our Model project.

Note: If the Data Control Palette is not visible you can open the palette from the JDeveloper View menu.

1. Our Data Control has two nodes - EmployeesView1 & DepartmentsView1
   
   
   
   Note: For each data control there is a set of components that you can use to create your application.
    
2. Select the EmployeesView1 node under AppModuleDataControl and look at the different options available in the dropdown list " Drop As:"
3. Select the component type: Input Form (With Navigation)
4. Drag and drop the EmployeesView1 node into the center of your page. Your page should now contain one input form that can be used to enter values.
   
   Your page should look like this:
   
   
    

Create a messageChoice field

We now have a page called main.uix, and we would like to add a messageChoice field to this page for the Departments Id. This field will be used to enter and change the department for a particular employee. The messageChoice field should display the ID and Name of the department to make it easier the select the right department.

1. First we need to remove the current Department ID field. This field will be replaced with a new messageChoice field.
2. After removing the Department ID field in the form, select the DepartmentId attribute in the DataControl palette underneath the EmployeesView1 node.
3. Change the " Drag and Drop As:" type to - MessageChoice
   
   
    
4. Drag and drop the DepartmentId node onto the page.
    

List Binding Editor

When you drag and drop your messageChoice component on to the page the List Binding Editor will be launched. In this editor there are two options Enumeration and LOV mode. In Enumeration mode you can type in values directly for your component. With LOV mode you can have a data control as the source for your component.

1. Select LOV mode
   
   
   
   In the LIst Binding Editor you can now set messageChoice source iterator and the target iterator. In this case the target iterator is pre-selected for us, so we only need to select the source.
    
2. We would like to pull values from the Department table into our messageChoice component, so in the Source Data Collection select the DepartmentsView1 data control.
3. Click on the New... button to the right of the Select LOV Source Iterator drop down list
4. The Iterator Id dialog is displayed. Keep the default value and click OK.
   
   
    
5. Now add the source attribute and the targeted attribute by clicking on the Add button in the lower right corner.
   
   
    
6. Select the DepartmentId for the source attribute (LOV Attribute) and DepartmentId for the target attribute.
   
   
    
7. Now click on the LOV Display Attributes tab at the top of this dialog.
8. In this pane select the attributes that are going to be display in the messageChoice component.
   
   
    
9. Click OK
   
   Your page should look like this:
   
   
    
    
10. Save your work and Run your application from the Struts page flow diagram.
    
    Your page should look like this: