Online Help for the ADF UIX MessageChoice Sample Application

What does this sample show?

The goal of this sample application is to demonstrate how to create a simple ADF application with dropdown list (messageChoice component) that will be used to populate an input field with Department numbers in the ADF UIX application.

Why is this important?

This example shows how you in a declarative and easy way can wire up a common Web application component - dropdown list. A seemingly small task that in other technolgies and IDEs requires a massive amount of work to achieve.

How was this sample built?

This sample was built using ADF technologies including Struts, which is the controller portion, ADF Business Components which is the middle-tier .Business Services, and ADF UIX which is the View portion of this application.

What are the interesting parts that I should look at?

In this sample the interesting component to look closer at is the messageChoice - Department Id - field located in the index.uix file. When you create a messageChoice field from the Data Control Palette the IDE will launce a dialog called the List Binding Editor. This will create a List itterator that binds the attributes of the data source collection to the attributes displayed by the messageChoice component.he

How to build this sample

Getting started

Before we go on the path to create our views and pageflow we need somewhere 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, 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 sample.

  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: