Building a Simple Airport Weather Application using ADF

Introduction

This exercise demonstrates how to build an ADF JSP application which presents a databound dropdown list of airports where users can check the weather of the airports using an external Web Service.

The Struts Page flow will look like the following:

Getting Started

Travel Database

For this exercise you'll need to connect to the airport database which can be installed with this script: airport.sql

Once you've created the airport schema, make a connection in JDeveloper for this schema and name it " airport".rport

Airport Weather Web Service

Make a new Web Service connection to the Airport Web Service.

• Click on the Connections tab in the Navigator.
• Under the UDDI connections, do a search in the Microsoft registry for "airport". You should find the Airport Weather Webservice from Cape Clear software.
• Just add the business providing this service to the UDDI browser".

Initial Steps

• Build a new Application Workspace using the Default Web template.
• In your Model project, build business components just for the "airports" table. File->New->Business-Tier->Business Components->Business Components from Tables.
  • File->New->Business-Tier->Business Components->Business Components from Tables.
  • Select the airport table and the remaining defaults.
  • Save and compile.
  • (Note: You can also try this again with Toplink as the business-tier technology.)
• In your ViewController project, open the page flow editor. (Right-click on the project to open Page Flow editor)
• From the Component Palette, drag and drop a "DataPage". Name it: airport_select.jsp.
• Drop a "DataAction" onto the page flow as well.
  • Name it " getTempWS"
• Drop a "Page" onto the diagram as well.
• Name it: "results.jsp"

Building a Databound HTML Select list

Now build a basic HTML select but with dynamic data from ADF. This is a doable by first building a standard HTML select control and then databinding it with dynamic ADF data using JSTL .Here's an easy way to do this...

• In the Struts page flow, double-click the page airport_select.jsp to create it.
• In the JSP visual editor, add a banner like "Check Weather Temperature" and format it with <h3>.
• Now add an HTML select control to this page.
  • Drag and drop a "Dropdown" component from HTML Component Palette. Add the surrounding Form tag as well.
• Right-click and edit the tag.
  Set the name to " code".
  Set size to: 1
  Add a single option: {Value1 Caption1}
• To databind this select control, you can manually insert a JSTL foreach, out statements from the Component Palette, but an easier way is to just drag and drop a read-only table from the Data Control Palette to generate the necessary JSTL expressions which you can then copy onto your select. (Just place at the bottom of the page for now.)
• Once you've created your read-only table, copy the JSTL <Foreach..> and place it around your single select option.
• Set the "value" attribute to the Airport "Code" using a JSTL c:out.
• Replace the "Caption..", to display Airport "Name" with a c:out. Here's a hint: if you're confused..)
  
  
  • <select name="code" size="1"> <c:forEach var="Row" items="${bindings.AirportsView1.rangeSet}"> <select name="code" size="1"> <option value="<c:out value="${Row['Code']}"/>"><c:out value="${Row['Name']}"/></option> </select> </c:forEach>
    
    <c:out value="${Row['Name']}"/></option> </select> </c:forEach></c:forEach>
    </select> 
      
• When finished you should have an HTML select that renders the airport names and submits the airport code using the http parameter: "code".
• Add an HTML Submit button.
• Set the action on the HTML form to call the getTempWS.do struts action.
• And that's it for the databound HTML select. Here's what it will look like at runtime:
• When a city is selected, the airport "code" will be passed to the getTempWS.do action. This action will in turn call a Web service to get the temperature of the airport selected based on it's airport code.

Add a datacontrol for the Airport Web Service

Now create a Data Control for the Airport Web Service.

• In the Navigator, click on your Model project to select it. (We will be creating an ADF Data Control from the connections pane so we want it to be generated in the Model project.)
• Now click on the "Connections" tab in the navigator and locate the "Airport Weather" Web service under the "Cape Clear Software" node which you added previously.
  
• Right click the Web Service in the UDDI browser and select "Create Data Control".
• Click back to the Applications tab and observe the new code generated in the Model project. This is the ADF databinding to our airport Web Service. Also notice that we will be able to drag and drop data from this Web Service from the Data Control Palette.

DataBind the DataAction getTempWS

In the page flow, drag and drop the getTemperature service in the Data Control Palette as a method onto the getTempWS dataAction. This will allow the DataAction to call the airport WebService when it executes. The next step is to grab the "code" parameter, and send it off to the Web Service. This is done by setting a parameter attribute of the Action.

• To do this, click on the getTempWS dataAction in the page flow.

• In the Structure Pane on the lower left, click open the /getTempWS node (located under "Action Mappings") dit the ParamNames[0] attribute to capture the value of the select control: Set it to: "K${param.code}"
• Edit the ParamNames[0] attribute to capture the value of the select control: Set it to: "K${param.code}"
  Note: We are inserting a "K" before the code parameter. This is because the Airport Web Service will only accept the airport code with a K appended it.. For example LAX -> KLAX.

Create your results page

In this step we'll create a results.jsp page which prints the temperature from the Web Service. The first thing we have to do is create a "success" forward from the getTempWS DataAction pointing to our results.jsp.

• While editing the page flow (struts-config.xml), click on the "Forward" item on the Component Palette.

• Now click on the getTempWS DataAction.
• Connect the line to the results.jps page by clicking on the page.
• You should now have a line coming from the getTempWS DataAction pointing the results.jsp page. This line is labelled: "success".

Now let's create the results page and databind it with our airport weather data.

• Double-click the "results.jsp" page to create it.

• Add a banner such as Airport Tempurature.

• Now drop the results of the Airport WebService onto the page.

• Using the  DataControl Palette, click open the getTemperature service and select "return". Notice that you can "Drag and Drop as:" Show Result".

• Now drag and drop the "return" item onto your results page. You will see a new c:out expression on the page. This will render the temperature data.

At this point you should be done but before running the app, we can also add a link from this page back to the starting page.

• In the Page Flow editor, add a "Page Link" from the results page back to your airport_select page. This is done in the same manner as you added the "Forward" earlier.

• Now Save and Compile the entire application.
• To run, from the Page Flow editor, click on the airport_select.jsp and right-click select Run..