Online Help for the ADF UIX User Input Sample Application

What does this sample show?

This sample application demonstrates how to create a simple ADF application which will use a request object and a java bean to pass values between two ADF UIX pages. These two solutions, out of many, solve the problem to pass a value from one page to another - the value passed using the JavaBean can be used during the entire session and the value passed on the request object will be there only for that request. For this simple application we are using ADF UIX, Struts, and Java Beans.

Why is this important?

This example shows how easy it is to build a simple application and pass values from and to ADF UIX pages using the request object or java beans.

How was this sample application created?

This sample application was developed using ADF technologies including ADF UIX, which is the view portion, ADF Model for our data bindings, JavaBeans as our business services, and Struts which handles the controller portion.

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 - 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.

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 Java Class node and click OK.
   
   
   
3. In the Create Java Class dialog 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. 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

Now that you have created a simple Java bean that can set and get a string value, 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 diagram to control our page flow for our two pages.

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.
   Note: 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.
   Note: This will be the input page.
5. Repeat the step creating another Data Page and rename it to helloDP.
   Note: This will be the dispaly page.
6. Click on the Forward node in the Component palette and drag a link from mainDP to helloDP.
   Your diagram should look like this:
   

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. Double click 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 OKto create the new page. This will open the 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

1. In your Struts page flow double click on the /hello node in order to create your display page.
2. Change the name - hello.uix - and click OK.

Add a display field to the page

We now have a page called hello.uix, and we would like to use this page to display the value entered in the previous page - MyPage.uix. In order to achieve this we use the same data control as in the MyPage page - helloString.

1. In the Data Control Palette select the helloString located under the MyBeanDataControl node.
2. Change the "Drag and Drop As:" type to - MessageStyledText
   
   
   
3. Drag and drop the helloString node onto the page. Your page should look like this:
   
   
   
   
4. 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 new application by running it:

1. Open your Struts pageflow 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.uixpage in the visual editor.
   
   
    
2. Add a MessageTextInput and a submitButton to your page from the Component Palette. Make sure you have selected Forms Componentsin 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 Componentspage.
   
   
    
2. Change the following properties on the new MessageStyledTextcomponent:
   
   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 Salarybutton.
   
   
    
5. Resulting display page: