Simple ADF UIX User Input Application

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

Content

• Introduction
• Getting started
• Creating the Java Bean
• Create a Struts page flow
• Create Input page
• Create Display page
• Navigation between two pages
• Using the Request Object to pass a String value

Introduction

This HowTo demonstrates how to create a simple ADF UIX User Input application with Oracle JDeveloper 10g.  This HowTo will show two solutions, of out of many, which solve the problem passing a value from one page to another - one solution is using a JavaBean to store a value that then can be used during the entire session, and one solution is to pass a value on the request object that will be there only for that request. For more HowTos about working with Oracle JDeveloper 10g, please, refer to the JDeveloper HowTo documents on Oracle Technology Network (OTN). For this simple application we are using ADF UIX, Struts, and Java Beans.

Tasks

This session covers the following tasks:

• Create a Java bean to set and get a string value
• Register the bean as a data control
• Create a Struts page flow diagram
• Create two ADF UIX pages, one with a input field and a submit button and one page with a display field
• Use the request object to pass a string value

The Struts page flow of this simple ADF UIX application

Below is a screenshot of the page flow for this ADF UIX application. This application contains two UIX XML pages - hello.uix, MyPage.uix, one JavaBean, and two Struts actions that will be used for navigation and submitting our data.

Getting started

Before we go on the path to create our views and page flow 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 Application Name to - HelloApplication
5. Change the Application Template to Web Application [default] and click OK. On completion you should have an application named HelloApplication and two projects named Model and ViewController.
   Info: You can use the Manage Templates... button to change the names of your projects and define the technology scope for each project.)
   
   

Creating the Java Bean

This is the first solution to pass a 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 Java Class node and click OK.
   
   
    
3. In the Create Java Class dialog please enter a name for your class - MyBean
   
   
    
4.   Click OK. This will create a stub for your Java bean.

Adding GET and SET methods to the Java class

There are two ways to add a set method and a get method to your class. One is the manual way and the other is to use the Class Editor. In this example we will use the manual way since we are not going to add much code.

1. In the Code Editor please paste the following code after the MyBean constructor:
   
   public String getHelloString()
   {
   return helloString;
   }
   
   public void setHelloString(String newHelloString)
   {
   helloString = newHelloString;
   }
   
    
2. Before we continue we need to declare the helloString variable. Paste the following code above the MyBean constructor
   
   private String helloString;
    
3. Your code should look like this:
   
   package model;
   
   public class MyBean
   {
   
     private String helloString;
   
     public MyBean()
     {
      }
   
     public String getHelloString()
     {
     return helloString;
     }
   
     public void setHelloString(String newHelloString)
     {
     helloString = "Hello " + newHelloString;
     }
   
   }
   
    
4. Save and compile your work

Register the Java bean as a data control

We have now created a simple Java bean that can set and get a string value. Now we need to register this bean as a Data Control for our application. This will allow us to reuse the bean and access it from the Data Control palette.

1. In the Application Navigator right click on the MyBean.java node and select Create Data Control.
   
   

You will now be able to access the Java bean from the Data Control Palette.

Create a Struts page flow

Creating a Struts page flow

The first step in our application is to create a Struts page flow

1. In the ViewController project double click on the struts-config.xml file. This will open an empty Struts page flow 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
5. Repeat the step creating another Data Page and rename it to helloDP.
6. Click on the Forward node in the Component palette and drag a link from mainDP to helloDP.
   Your diagram should look like this:
   
   
   Info: If you click on the diagram while dragging a link between two nodes you can bend your link.
    

Create Input page

When creating a new page from the Struts diagram the 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 - JSP, HTML, and UIX. Alternatively you can use the Browse button to open an already existing page.

1. By double clicking on the Data Page node - / mainDP.
    
2. By typing directly in the Page Name field you can define your own name for the new page and file type. For this application we are using UIX XML, so type in - MyPage.uix- in the dropdown list.
   
   
    
3. Click OK to create a new page. This will open the empty UIX XML page in the visual editor.
   
   

Add a pageLayout component

The PageLayout component could be compared to a page template that has a set of empty slots or place holders, such as the corporateBranding slot or the pageButton slot. In ADF UIX these slots go under a common name - Named children. A developer can use these slots - Named Children - to add other components such as images, tables, buttons etc... to the page. If not used they will not be rendered during runtime.

To add a pageLayout component to the page:

1. Select the pageLayout component from the Component Palette and drag it onto the center of the new empty page.
   Your page should look like this:
   
   

Note: If you do not want to see the place holders during design time you can switch them off by clicking on the button in the lower right corner of the visual editor.

Add a text field and a submit button to the input 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 Java bean - MyBean - in our Model project. To be useful the input page needs a text field and a submit button to collect input from the user.

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

1. Our Data Control has one node - helloString
   
   
   
   Note: For each data control there is a set of components that you can use to create your application.
    
2. Select the helloString node under MyBeanDataControl and look at the different options available in the dropdown list Drag and Drop As:
3. Select the component type: MessageTextInput
4. Drag and drop the helloString node into the center of your page. Your page should now contain one input text field that can be used to enter a string value.
   
   
   
    
5. Add a submitButton to your page from the Component Palette. Make sure you have selected Forms Components in the Component Palette.
   
   
    
6. Your page should look like this:
   
   
    

Using the Property Inspector

1. Click on the title of your new text field.
   
   You should now see a dotted border around your text field and in the Structure Window (in the lower left corner of the IDE) you should see that the messageTextInput component is selected, and you should also see the available properties for this component in the Property Inspector.
   
   
    
2. In the Property Inspector change the Prompt property to - Type text, and the Tip property to - Ex. Your name
3. Change the text property of the submitButton component to - Submit
4. Make sure you save your project.

Create the Hello display page

Add a display field to the page

To use this page to display the value entered in the previous page - MyPage.uix, we use the same data control as in the MyPage page - helloString.

1. In your Struts page flow double click on the /helloDP node in order to create your display page.
2. Change the name to - hello.uix - and click OK.
3. In the Data Control Palette select the helloString located under the MyBeanDataControl node.
4. Change the Drag and Drop As: type to - MessageStyledText
   
   
    
5. Drag and drop the helloString node onto the page. Your page should look like this:
   
   
    
    
6. Save your work.
   (Optional: You can change the prompt, and tip property to something more descriptive)

Navigation between two pages

This chapter will focus on wiring up our two pages, so that the end user can navigate from the Input page - MyPage.uix - to the Display page - hello.uix.
Note: This illustrates two ways of navigating  between pages - one shortcut which will be demonstrated in the first sample with the java bean, and one where we need to explicitly specify where to go in the UIX page.

Using the JavaBean to pass a String value

1. On the MyPage.uix page select Submit.
2. In the Property Inspector specify an event by entering a value for the event property - success. The controller will catch this event and know that it should navigate according to the Data Page - mainDP - edge with the name success.
   
   
    
3. Save your work.

Run the application

Test your application by running it:

1. Open your Struts page flow diagram
2. Right click on the action you want to run - mainDP
3. Select Run /mainDP
   
   
    
4. Test you application by typing in your name in the text field and click Submit.
   
   
    
5. Resulting display page:
   
   

Using the Request Object to pass a String value

This time we are going to use the request object to pass a string value instead of using a java bean. Reuse some of the pieces you've already created, and add two new fields and a button to our application.

Add a text field and a submit button to the input page

1. Open the MyPage.uix page in the visual editor.
   
   
    
2. Add a MessageTextInput and a submitButton to your page from the Component Palette. Make sure you have selected Forms Components in the Component Palette.
   
   
    
3. Change the following properties of the MessageTextInput: the name to - salaryInput, the prompt to - Enter Salary, and remove the Tip.
4. Change the text property of the submit button to - Submit Salary.
   Your page should look like this:
   
   
    

Creating an event to pass the string on the request

In order for us to pass the value of our salary field, and navigate to the display page, we need to raise an event, catch the event, set a property on the request and specify where to go when the event occur.

1. On the MyPage.uix page select the Submit Salary button.
2. In the Property Inspector specify an event by entering a value for the event property - goSalary.

Creating an event handler

Now we need to create an event handler. At the bottom of the tree in the Structure Window there is node called handlers. Under this node you will find all event handlers used by this page.

Note: We will be using EL expressions to specify a property - mySalary - on the request scope with a value from the MessageTextInput - salaryInput - field.

1. Right click on the handlers node in the Structure Window
2. Select Insert inside handlers.
3. Select Event.
   
   
    
4. Give the event the same name as the event property for the Submit Salary button - goSalary.
5. Click OK to close the dialog.
6. Right click on the new event and select Insert inside event.
7. Select UIX Servlet and in the list of available behaviors select a set element.
8. In the Property Inspector set the following properties:
   
   Property = mySalary
   Target = ${requestScope}
   Value = ${param.salaryInput} 
    
9. Right click on the goSalary event and insert inside a go element.
10. In the Create <go> dialog that appears set the name property of the go behavior to the same name as the name of the link created in the Struts page flow to navigate from the MyPage.uix page to the Input Form page - success.
11. Click OK.
12. Save your work.

Modifying the hello.uix page

We now have to modify the hello.uix page to be able to display the value sent with the request.

Add a display field to the page

1. From the Component palette, drag and drop a MessageStyledText component onto the page. You will find the component under the General Components page.
   
   
    
2. Change the following properties on the new MessageStyledText component:
   
   Prompt = Salary
   Text = ${requestScope.mySalary}
    
3. Your page should look like this:
   
   
    
    
4. Save your work.

Run the application

Test your application by running the it:

1. Open your Struts page flow diagram
2. Right click on the action you want to run - mainDP.
3. Select Run
   
   
    
4. Test you application by typing in a salary in the new field and click the Submit Salary button.
   
   
    
5. Resulting display page: