1. From the main menu, choose File > New. In the New Gallery, expand the General category and select Applications. Then in the Items list, select Custom Application and click OK.

   
The JDeveloper application is the highest level in the organizational structure. While you are developing your application, it stores information about the objects you are working with. Read more... At the same time, it keeps track of your projects and all environment settings.

Based on prebuilt templates, a JDeveloper application allows you to specify a predefined type of environment, depending on the type of application you want to create (web application, Java application, and so on). Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of features already specified. The application template also filters the work you do in JDeveloper such that the choices available are focused only on the features you are working with.

In this tutorial, you will use the Custom Application template, which makes available objects associated with all the features that JDeveloper supports in a single project.

Once you have created an application using a suitable template, you can still add new projects to the application and specify what features are to be included. To do this, in the Application Navigator, right-click the application name and choose New Project. In the New Gallery, you can select any type of project in the Items list.

2. To follow along with the example, enter WSDataControlApp as the application name and click Next.

   
The application template you select determines the initial project structure, that is, the named project folders within the application workspace, and the application libraries that will be added. Read more... The project or projects in the application define the associated features.

A JDeveloper project, which is used to logically group files that are related, keeps track of the source files, packages, classes, images, and other elements that your program may need. Projects manage environment variables such as the source and output paths used for compiling and running your program. Projects also maintain compiler, runtime, and debugging options so that you can customize the behavior of those tools per project.

You can add multiple projects to your application to easily access, modify, and reuse your source code. Different projects might contain files representing different tiers of a multi-tier application, for instance, or different subsystems of a complex application. These files can reside in any directory and still be contained within a single project.

3. Enter Model as the project name.
   
   

4. Click Finish.
   
   The Projects panel in the Application Navigator should look like this:
   
   

A new application created from a template appears in the Application Navigator already partitioned into tiered projects, with the associated features set in each project. Read more... Projects are displayed as the top level in the hierarchy in the Application Navigator. The Custom Application template that you used for your application creates one project using a default project name (or the project name you entered).

In the Application Navigator you can collapse and expand any panel. You adjust the size of panels by dragging the splitter between two panels. To group and sort items in the Projects panel, use the Navigator Display Options dropdown menu. For application operations, you can click Application Menu and choose an option from the dropdown menu.

JDeveloper has the capability of recognizing many different file types, displaying each in its appropriate viewer or editor when you double-click the file in the Application Navigator. Closing an application or project closes all open editors or viewers for files in that application or project and unloads the files from memory.

Note: Nodes in italics in the Application Navigator mean that the elements have not yet been saved. A project node is bold when a file in the project is selected.

From the main menu, choose Application > Show Overview. The Application Overview window opens in the editor window area.



All objects that you create within JDeveloper appear in the Application Overview file summary pages, arranged by object type. As you create new files and artifacts, you can view them filtered by status and project.

You can optionally close the Application Overview window, since you will not be using it to create objects for this application.

1. From the main menu, choose Tools > Preferences. In the Preferences dialog, click Web Browser and Proxy on the left, then select Use HTTP Proxy Server on the right to have the server use a proxy to access the internet. Enter the URL or DNS name of your organization's proxy server, and the port number your machine uses to access the proxy server.

When accessing an external web service and your machine is behind a firewall, you may need to change your JDeveloper's proxy setting. Read more...

By default, JDeveloper uses the proxy settings from the default browser on the same machine. If you are having connection problems, you might need to modify the settings.

By default JDeveloper also picks up the proxy exceptions set for your browser the first time JDeveloper is started. You can amend the list to add exceptions to proxy servers for accessing internal sites using "|" to separate entries.

2. In the Application Navigator, right-click the project and choose New > Business Tier > Data Controls > Web Service Data Control, then click OK.
   
   

3. On step 1 of the wizard, Data Source, enter GetWeather as the data control name.

4. In the URL field, enter the WSDL URL http://www.webservicex.net/WeatherForecast.asmx?WSDL.

WSDL or web service description language, is a description language that defines how to communicate with a web service. Read more...

JDeveloper allows you to create a data control for an existing web service using just the WSDL for the service. When you use the Create Web Service Data Control wizard to generate a data control, you need to reference the WSDL URL of the external web service you wish to use.

5. Press Tab.
   
   Depending on how busy the service is, it may take a while to see {http://www.webservicex.net}WeatherForecast populated in the Service dropdown list.
   
   

6. Click Next after the Service dropdown has been populated.

7. On step 2, Data Control Operations, under WeatherForecastSoap12, shuttle the operation GetWeatherByZipCode from the Available pane to the Selected pane.
   
   

8. Click Finish.
   
   JDeveloper adds the data control definition file (DataControls.dcx ) to the project, and opens the file in the overview editor.
   
   

9. Click Save All to save your work.

10. In the Application Navigator, expand the Data Controls panel.
    
    
    
    If you don't see the data control you created, click Refresh on the panel toolbar.

The Data Controls panel shows the GetWeather data control you have created and made available to the application. Read more...

The new files added to the Model project include:

• DataControls.dcx: Serves as a "table of contents" listing all the data controls in the project. The DCX file is created the first time you register a data control on a business service. The DCX file contains information to initialize data controls to work with session beans.

• adfm.xml: Is the registry used by the Data Controls panel in JDeveloper to locate the data controls that appear in the application. This file is not used at runtime.

You will create two JSF pages using the default page flow diagram.

1. From the main menu, choose File > New > General > Projects > ADF ViewController Project, then click OK.
   
   

2. Accept ViewController as the project name.
   
   

3. Click Finish.
   
   You should see the ViewController project in the Application Navigator.
   
   

4. In the Application Navigator, ViewController project, double-click adfc-config.xml under WEB-INF to open the default page flow diagram.
   
   Initially, the diagram is a blank canvas. If the diagrammer is not the current editor, click the Diagram tab at the bottom of the editor window.

   
By default JDeveloper includes an empty unbounded task flow (source file adfc-config.xml) in a ViewController project. Read more... An unbounded task flow contains the entry point or points to the application. An entry point is a view activity that can be directly requested by a browser.

ADF task flows provide a modular approach for defining control flow in an ADF web application. Instead of representing an application as a single large JSF page flow, you can break it up into a collection of reusable task flows.

There are two types of task flows:

• Unbounded task flow: A set of activities, control flow rules, and managed beans that interact to allow a user to complete a task. An unbounded task flow consists of all activities and control flows in an application that are not included within any bounded task flow.

• Bounded task flow: A specialized form of task flow that, in contrast to an unbounded task flow, has a single entry point and zero or more exit points. It contains its own set of private control flow rules, activities, and managed beans. A bounded task flow allows reuse, parameters, transaction management, and reentry.

5. In the Component Palette, ADF Task Flow page, Components panel, Activities section, drag and drop View on the diagram, then rename the view activity. Do this two times, using the following view activity names for the pages:
   
   InputPage
ResultsPage

   
The primary type of task flow activity is a View, which represents a JSF page. On a task flow diagram, you typically define activities and control flow rules that interact to allow end users to complete a task. Read more... After defining two view activities, you will connect them to represent a simple page flow for navigating back and forth between an InputPage and a ResultsPage.

Initially both page icons on the task flow diagram have yellow warning symbols, which indicate that the view activities are not yet associated with any physical page files (for example, InputPage.jsf). Once the page files are created, the yellow warning symbols on the page icons will be removed.

6. In the Component Palette, Components panel, Control Flow section, click Control Flow Case. On the diagram, click the InputPage page icon, then click the ResultsPage page icon. Rename the control flow case element to show.

7. In the Component Palette, click Control Flow Case again. On the diagram, click the ResultsPage page icon, then click the InputPage page icon. Rename the control flow case element to back.
   
   

8. On the diagram, double-click the InputPage page icon to open the Create JSF Page dialog.

9. Select Facelets as the document type and accept the default file name of InputPage.jsf.

   
The JSF pages you create for your application can be Facelets documents (which have file extension .jsf) or JSP documents written in XML syntax (which have file extension .jspx). Read more...

You can create both types of JSF pages with the Create JSF Page dialog, opening it from:

• The New Gallery

• The JSF navigation diagrammer

• The ADF task flow diagrammer (available only in the Studio edition of JDeveloper)

10. On the Page Layout page, select Blank Page. On the Managed Bean page, select Do Not Automatically Expose UI Components in a Managed Bean.

In the Create JSF Page dialog, you can optionally define some aspects of the look and feel for the new page (PageLayout tab), and you can specify whether or not components on the page are exposed in a managed bean (Managed Bean tab). Read more...

By default components are not exposed to managed beans. If you wish to bind components to managed beans, select one of the automatic binding options on the Managed Bean page in the dialog. When you use an automatic binding option, JDeveloper automatically creates a backing bean for any new JSF page that you create, and associates every UI component in the page to a corresponding property in the backing bean for eventual programmatic manipulation.

But if you intend to add ADF bindings to a page, do not use the automatic binding feature. If you use the automatic binding feature, you will have to remove the managed bean bindings later, after you have added the ADF bindings.



11. Click OK.
    
    By default JDeveloper displays the new JSF Facelets page in the visual editor.

    
When you create a new JSF page as a Facelets document type (with file extension .jsf), JDeveloper automatically creates a starter page structure Read more... with one xmlns attribute for the JSF Core tag library and one xmlns attribute for the ADF Faces tag library. The other elements included in a starter file are elements for laying out a page, specifically everything else within <f:view> and </f:view>.

To view the page code, click the Source tab to switch from the visual editor to the XML editor. For example, the following code is generated for the new page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core"
        xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:document title="InputPage.jsf" id="d1">
    <af:form id="f1"></af:form>
  </af:document>
</f:view>

12. In the editor window, select the document tab adfc-config.xml to bring the diagram forward. Double-click the ResultsPage page icon to open the Create JSF Page dialog.
    
    

13. Select Facelets as the document type. Accept the default file name of ResultsPage.jsf. On the Page Layout page, select Blank Page. On the Managed Bean page, select Do Not Automatically Expose UI Components in a Managed Bean. Then click OK.

14. In the Component Palette, ADF Faces page, Layout panel, drag Panel Stretch Layout and drop it on the blank page in the visual editor.
    
    When you drag the component to the visual editor, you should see a target rectangle with the name Form on the page; this means the component you are dragging will be inserted inside that target component.
    
    

15. Click Save All to save your work.

When you complete the steps for creating a page flow and the JSF pages, the ViewController project in the Application Navigator should look something like this: Read more...



In the project, the folders and files are:

• Web Content folder: Contains the pages you create, along with other files that must be visible to the client browser (such as stylesheet files and images) for your application.

• /WEB-INF/ folder: Contains the required Web Application Deployment Descriptor (web.xml) and the JSF configuration file (faces-config.xml).

• web.xml file: The web application deployment descriptor for your application. This is an XML file describing the components that make up your application, along with any initialization parameters and container-managed security constraints that you want the server to enforce for you.

• faces-config.xml file: Where you register the JSF application's configuration resources, such as validators, converters, managed beans, and navigation rules.

• trinidad-config.xml file: Where you configure ADF Faces features such as skin family and level of page accessibility support.

• adfc-config.xml file: The default unbounded task flow in a project that includes the ADF Controller. In an application that uses ADF data bindings and ADF task flows, managed beans should be registered in either the configuration file adfc-config.xml or a task flow definition file.

On the first page you will add a form that allows end users to enter a zip code. The form has an input text field and a command button. When the button is clicked, the application navigates to the second page, where the input value is passed.

1. In the editor window, click the InputPage.jsf tab at the top to bring the page forward.
   
   
   
   If not already open, double-click InputPage.jsf in the Application Navigator, ViewController project, to open the page in the visual editor.

2. In the Data Controls panel, expand GetWeather.

   
A data control is a representation of a business service, and comprises a hierarchical display of available business objects, including collections, attributes, and methods. Read more... You use the Data Controls panel to insert databound UI components into your JSF page in the visual editor. You cannot use the data control itself to create UI components, but you can use any of the child objects listed under it.

In the example, the GetWeather data control has a GetWeatherByZipCode method, which accepts one parameter (ZipCode) and returns a collection object.



With the aid of the Data Controls panel, UI design is a series of drag-and-drop steps. The list of available UI components appears when you drop a selected data object from the panel into the page. Only the UI components that are appropriate to display the chosen data object will appear in the list for selection.

3. Drag the GetWeatherByZipCode(String) method node and drop it on the page in the visual editor. From the Create context menu, choose ADF Parameter Form.
   
   

4. In the Edit Form Fields dialog, accept the default values and click OK.
   
   
   
   The page in the visual editor should look like this:

   
When you create a parameter form using the Data Controls panel, JDeveloper adds the following ADF Faces tags to your page: Read more...
• <af:messages> used at the top of an application page to give users important messaging information.

• <af:panelFormLayout>, used to position input components so that labels and fields line up vertically.

• <af:inputText>, used to create a browser input text field.

• <af:commandButton>, used to create a button that generates an action event when clicked.
When you insert components using the Data Controls panel, JDeveloper automatically creates the code and objects needed to bind the components to the data control you selected. To see the Oracle ADF data bindings defined for the page, click Bindings at the bottom of the visual editor.



The page definition file, InputPagePageDef.xml, defines the ADF binding container for the page. The binding container provides runtime access to all the ADF binding objects for a page. For every page that has ADF bindings, there must be a corresponding page definition file that defines the binding objects used by that page.

On the page, the inserted components contain references to ADF bindings. ADF data binding expressions are added to every component attribute that will either display data from or reference properties of a binding object. You can examine the component attributes and ADF data binding expressions in the XML editor by clicking Source in the editor window. The binding expressions, which use EL (expression language), are evaluated at runtime. Values are pulled from the binding objects to populate the components with data when the page is displayed.

A typical ADF data binding EL expression uses the following syntax to reference any of the different types of binding objects in the binding container:

#{bindings.BindingObject.propertyName}

bindings is a variable that identifies that the binding object being referenced by the expression is located in the binding container of the current page. All ADF data binding EL expressions must start with the bindings variable.

BindingObject is an ID or unique name of the binding object as it is defined in the page definition file of the JSF page. Examples of binding objects include parameters and executables.

propertyName is a variable that determines the default display characteristics of the databound component or specific parameters, and sets properties for the binding object at runtime. There are different binding properties (for example, label and inputValue) for the different types of binding objects.

5. In the visual editor, select the input field on the page. In the Property Inspector of Input Text, delete the binding value in the Label field and replace with the text Enter zip code.

   
Note the binding on the Value attribute of the Input Text component: Read more...

#{bindings.ZipCode.inputValue}

Recall that ZipCode is the parameter object in the GetWeatherByZipCode method. Later you will use this binding to pass the parameter to the second page.

6. In the visual editor, select the button on the page. In the Property Inspector of Button, select show from the Action dropdown list.

   
Previously you added a control flow case using the element name show between InputPage and ResultsPage on the task flow diagram. Read more... A control flow case identifies the activity to which control flow passes. The arrow on the line linking the two activities indicates the direction of the control flow case or navigation.



The element name show is the from-outcome value of the control flow case:
<control-flow-rule id="__1">
  <from-activity-id>InputPage</from-activity-id>
  <control-flow-case id="__2">
    <from-outcome>show</from-outcome>
    <to-activity-id>ResultsPage</to-activity-id>
  </control-flow-case>
</control-flow-rule>
By setting the action attribute of the command button to the from-outcome value of show, you are specifying that the control flow case is to be followed only when the from-outcome value matches the static outcome value returned by the action. In other words, when the button is clicked, navigation will proceed from the InputPage to the ResultsPage.

7. In the ActionListener field, remove the default value of #{bindings.GetWeatherByZipCode.execute}, leaving the field blank.

   
To prevent the application from calling the weather web service twice, you need to remove the binding value in the ActionListener attribute of the command button. Read more...

The binding is not required here because the second databound page (which you will create later) contains the needed executable bindings associated to the data control that will be used by the page to access data values.

8. In the Component Palette, ADF Faces page, expand the Operations panel. Scroll down to the Listeners section, then drag Set Property Listener to the visual editor and drop it on the button in the page.
   
   You use Set Property Listener to pass values to the second page when the button is clicked.

9. In the Insert Set Property Listener dialog, from the dropdown menu next to the From field, choose Expression Builder.
   
   

10. In the Expression Builder, expand ADF Bindings | bindings | ZipCode.
    
    

11. Under ZipCode, scroll down to find and then select inputValue.
    
    You should see the EL expression #{bindings.ZipCode.inputValue} in the Expression box when you select inputValue. Click OK to exit the Expression Builder.
    
    

12. In the Insert Set Property Listener dialog, enter #{pageFlowScope.ZipCode} in the To field. Next, select action from the Type dropdown list, then click OK.

    
The setPropertyListener tag provides a declarative syntax for assigning values when an event fires. It implements the listener interface for a variety of events. Read more...

To indicate which event type it should listen for, you set the type attribute. Since a command button fires an action event when clicked, you set Type to action in the Insert Set Property Listener dialog.

When you complete the dialog and click OK, JDeveloper inserts the following code (shown in bold) in the command button:

<af:commandButton id="cb1" text="GetWeatherByZipCode"
 disabled="#{!bindings.GetWeatherByZipCode.enabled}" action="show">
  <af:setPropertyListener from="#{bindings.ZipCode.inputValue}" 
                          to="#{pageFlowScope.ZipCode}"
                          type="action"/>
</af:commandButton>

At runtime, the following occurs when the command button is clicked:

• The value in #{bindings.ZipCode.inputValue} will be retrieved, which corresponds to the value entered in the input field on the form.

• That value will get stored as the ZipCode property in pageFlowScope, which means the value is available for the duration of the task flow.

• The application will navigate to the page corresponding to the show outcome (because of the action property on af:commandButton).

13. Click Save All to save your work.
    
    In the visual editor, InputPage should look similar to this:
    
    

In the Application Navigator, the ViewController project should look like this: Read more...



The new files added to the Application Sources folder in the ViewController project include:

• InputPagePageDef.xml: The page definition file for the InputPage JSF page. A page definition file defines the binding objects that populate the data in UI components at runtime. At runtime, the binding objects defined by a page definition file are instantiated in a binding container, which is the runtime instance of the page definition file.

• DataBindings.cpx: The file defines the binding context for the entire application and provides the metadata from which the binding objects are created at runtime. It also maps individual pages to page definition files and declares which data controls are being used by the application.

On the second page you will add a table to display the weather data that is returned by the web service method, using the value entered in the parameter form on the first page.

1. In the editor window, click the ResultsPage.jsf tab to bring the page forward.
   
   
   
   If not already open, double-click ResultsPage.jsf in the Application Navigator, ViewController project, to open the page in the visual editor.

2. In the Component Palette, ADF Faces page, Layout panel, drag Decorative Box to the visual editor and drop it into the center facet of the panel stretch layout component on the page.
   
   
   
   If you have been following along with the example, there should be a panel stretch layout component on the page, which was added in a previous step (Step 3, substep #14).

3. In the Data Controls panel, expand GetWeatherByZipCode(String) | Return | GetWeatherByZipCodeResult | Details.
   
   

4. Drag the collection object WeatherData and drop it into the center facet of the decorative box you just added. From the Create context menu, choose Table > ADF Read-only Table.
   
   

5. In the Edit Table Columns dialog, select Enable Sorting and click OK.
   
   

6. In the Edit Action Binding dialog, accept the default values.
   
   Most of the values are set for you declaratively, based on the web service method exposed by the data control. You will set a value for the ZipCode parameter later.
   
   

7. Click OK.
   
   The page in the visual editor should look similar to this:
   
   

8. In the Component Palette, Layout panel, drag and drop Panel Group Layout into the bottom facet near the end of the page in the visual editor.

9. In the Property Inspector, Common section, change Halign to center, and change Layout to scroll. Then expand the Style section and in the InlineStyle field, enter padding:5px; and press Enter.
   
   

10. In the Component Palette, General Controls panel, drag and drop Button into the panel group layout you added.

11. In the Property Inspector, change the Text value of the button to Return. Then select back from the Action dropdown list.
    
    
    
    In the visual editor, the bottom of ResultsPage should look similar to this:
    
    

Previously you added a control flow case using the element name back, connecting ResultsPage to InputPage, as shown by the direction of the arrow on the task flow diagram. Read more...



The element name back is the from-outcome value of the control flow case:
<control-flow-rule id="__3">
  <from-activity-id>ResultsPage</from-activity-id>
  <control-flow-case id="__4">
    <from-outcome>back</from-outcome>
    <to-activity-id>InputPage</to-activity-id>
  </control-flow-case>
</control-flow-rule>
By setting the action attribute of the command button to the from-outcome value of back, you are specifying that the control flow case is to be followed only when the from-outcome value matches the static outcome value returned by the action. In other words, when the button is clicked, navigation will proceed from ResultsPage back to InputPage.

12. In the visual editor of ResultsPage.jsf, click the Bindings tab. On the Bindings and Executables page, Bindings box, select GetWeatherByZipCode.

    
A tree value binding object, such as WeatherData, binds an entire table to a data collection. The tree value binding object uses iterators to get its values. Read more... The iterators access the method in the data control, and returns a collection.

A method action binding object, such as GetWeatherByZipCode, encapsulates details about how to invoke a method on a bound command button, and what parameters (if any) the method is expecting. In the example, the method expects the parameter ZipCode.

If you open the page definition file of ResultsPage (by clicking view/pageDefs/ResultsPagePageDef.xml), you will see that JDeveloper has already defined the argument ZipCode in the methodAction binding. See the NamedData element in the following code:
<bindings>
  <methodAction id="GetWeatherByZipCode" RequiresUpdateModel="true" 
   Action="invokeMethod" MethodName="GetWeatherByZipCode" 
   IsViewObjectMethod="false" DataControl="GetWeather" 
   InstanceName="data.GetWeather"
   ReturnName="data.GetWeather.methodResults
    .GetWeatherByZipCode_GetWeather_GetWeatherByZipCode_result">
    <NamedData NDName="ZipCode" NDValue="" 
     NDType="java.lang.String"/>
  </methodAction>
  ...
</bindings>
The NamedData element with its NDName attribute is necessary for the application to know what it needs to pass to the method that is expecting a parameter. In the next step you will specify the argument value by setting the NDValue attribute of the ZipCode argument.

13. In the Structure window of ResultsPagePageDef.xml, under bindings, expand GetWeatherByZipCode, then select ZipCode.
    
    

14. In the Property Inspector, NDValue field, enter #{pageFlowScope.ZipCode} and press Enter.

    
In a previous step, Step 4 substep #12, when you added the Set Property Listener tag to the command button on the first page, you used the ZipCode property of pageFlowScope to store the parameter value captured in the input field: Read more...
<af:commandButton id="cb1" text="GetWeatherByZipCode"
 disabled="#{!bindings.GetWeatherByZipCode.enabled}" action="show">
  <af:setPropertyListener from="#{bindings.ZipCode.inputValue}" 
                          to="#{pageFlowScope.ZipCode}"
                          type="action"/>
</af:commandButton>
By setting NDValue to the EL expression #{pageFlowScope.ZipCode}, you have configured the application to programmatically set the argument value that the method is expecting. The argument value passed will be the value entered in the input text field on the first page. The second page can then retrieve the value from page flow scope and use it as needed.

1. In the editor window of ResultsPage.jsf, click the Design tab at the bottom to switch back to the visual editor.

2. On the page, click a column heading in the table.

3. In the Structure window, expand af:table and then expand the second column af:column - #{...WeatherImage.label}.

   
By default JDeveloper inserted Output Text components in all table columns. The WeatherImage column, however, needs an Image component in order to show a graphic. Read more...

You will add an Image component, bind it to the data control, then delete the original Output Text component in the second table column.

4. In the Component Palette, General Controls panel, drag Image and drop it into af:column - #{...WeatherImage.label} in the Structure window.
   
   

5. In the Insert Image dialog, click OK without entering a value.

6. In the Property Inspector of the Image component, from the dropdown menu next to the Source field, choose Expression Builder.

7. In the Expression Builder dialog, expand JSP Objects | row, then select WeatherImage.
   
   The expression #{row.WeatherImage} should be populated in the Expression box:
   
   

8. Click OK.
   
   The table on the page in the visual editor should now look similar to this:
   
   

9. In the Structure window, select af:outputText - #{...WeatherImage.label} and press the Delete key to remove the component.
   
   The second column af:column - #{...WeatherImage.label} in the Structure window should now look like this:
   
   

10. In the editor window, click the adfc-config.xml tab to bring the diagram forward. Right-click the InputPage icon and choose Run.
    
    If the Create Default Domain dialog displays, enter the default password, for example weblogic1, in the Password and Confirm Password fields, then click OK.
    
    The first page in the browser should look similar to this:
    
    

11. Enter 94065 in the input field, then click the GetWeatherByZipCode button.
    
    Depending on how busy the service is, it may take a while for data to be returned on the second page.
    
    
    
    You should see the weather forecast for the next several days in the table on the second page.
    
    Try adjusting adjust the column widths in the table by placing the cursor between column headers and dragging right or left.
    
    Try the column sorting feature by selecting the Sort Ascending or Sort Descending icon on a column header.
    
    

12. On the second page in the browser, click the Return button. Try getting the weather forecast for another zip code.

When you run a JSF application in the IDE, JDeveloper automatically: Read more...
• Starts Integrated WebLogic Server, if not already running.

• Compiles and deploys the application to Integrated WebLogic Server.

• Launches the application in your default browser using the following default address: http://<your_machine_IP_address>:<http_port>/<your_application_name>-<your_project_name>-context-root>/faces/<path_to_the_page>
To stop the application, click Terminate in JDeveloper and choose the application bound instance WSDataControlApp from the dropdown menu.

Note: Terminating the application stops and undeploys the application from Integrated WebLogic Server but it does not terminate Integrated WebLogic Server.

1. In the editor window, click the DataControls.dcx tab to bring the DCX overview editor forward.
   
   If the DCX file is not already open, double-click DataControls.dcx in the Model project in the Application Navigator to open the file.
   
   

2. Expand GetWeather | GetWeatherByZipCode() | Return | GetWeatherByZipCodeResult | Details. Then select WeatherData and click Edit to open another overview editor.
   
   

3. In the WeatherData.xml overview editor, click Attributes on the left.
   
   

4. With Day selected in the Attributes table, click the UI Hints tab. Then enter Day of the week in the Label field.

   
Oracle ADF control hints provides a centralized mechanism for any JavaBeans-based business service data item to be rendered in a consistent manner across all client types. Read more... This mechanism, known as control hints, permits application developers to centralize certain UI settings across clients and thereby control many aspects of the way the UI interacts with the data item. Because the control hints are set at the level of the business service, it can also reduce the amount of UI coding.

The ADF control hints mechanism supports these control hint properties that you can customize:

• Display Hint: Determines whether the attribute will be displayed or not.

• Label: The text used in prompts or table headers that precede the value of a data item.

• Tooltip: The text used in tooltips or flyover text. In web applications, it appears as the value of the HTML ALT attribute.

• Format Type: Defines the formatter to use when the data item is displayed. Formatters are basically a collection of format masks that you can define in the <JDeveloper_Install>/jdeveloper/systemn.n.n.../o.BC4J/formatinfo.xml file.

• Format: The particular format mask used by the selected formatter.

• Control Type: The control type used to display the data item in the client UI: Edit makes the control editable, Date displays a calendar picker, and Default is interpreted by the client to select the most appropriate control.

• Display Width: Defines the character width of the control that displays the data item.

• Display Height: Defines the number of character rows of the control that displays the data item.

• Form Type: Determines whether the attribute will be displayed in Detail or Summary mode. Detail mode produces a long form, Summary mode a short one. This property is supported for ADF Swing applications only; it is not available for Business Components web applications.

• Field Order: Defines the numeric order in which you want the attribute to render within a category

• Category: The identifier to be used by the dynamic rendering user interface to group attributes for display. The user interface will render the attribute with other attributes of the same category. You can use the category hint to aid the user interface to separate a large list of view object attributes into smaller groups related by categories. This control hint will be utilized by any dynamic rendering user interface that displays the attribute.

• Auto Submit: Triggers a partial submit on value changes in the user interface when set to true (enabled).

5. Then select WeatherImage in the Attributes table and enter Graphic in the Label field.

When you add control hints at the business service level, JDeveloper creates a .properties file for you that contains the text resources for the project. Read more...

The file that defines the value for the control hints you set depends on the specific business service used for the project. In the case of beans-based business services, (including JavaBeans, Enterprise JavaBeans, and Oracle TopLink), by default JDeveloper generates a standard .properties file for the project's text resources and saves the control hint definitions as translatable strings.

Notice in the Application Navigator that the file ModelBundle.properties has been added to the Model project:



The project-level resource bundle option JDeveloper uses to save control hints is determined by the Resource Bundle page of the Project Properties dialog. By default JDeveloper sets the Resource Bundle Type option to Properties Bundle, which produces a .properties file.

The first time you customize a control hint in the project, JDeveloper creates the ModelBundle.properties file. The ModelBundle.properties file contains translatable key strings for the control hint definitions you added. For example, if you open ModelBundle.properties in the source editor, you should see the following code that identifies the translatable strings:

#
model.GetWeather.GetWeatherByZipCode.GetWeatherByZipCodeResult.
 Details.WeatherData.Day_LABEL=Day of the week
model.GetWeather.GetWeatherByZipCode.GetWeatherByZipCodeResult.
 Details.WeatherData.WeatherImage_LABEL=Graphic

6. In the editor window, click the adfc-config.xml tab to bring the diagram forward. Right-click the InputPage icon and choose Run.
   
   When you navigate to the second page in the browser, you should see the new labels you entered for the first two column headings in the table.
   
   

In this tutorial you created a data control for an existing web service using the WSDL for the service. You learned how to:

• Use JDeveloper wizards and dialogs to create applications and projects, and starter pages
• Use the visual editor, Component Palette, and Property Inspector to create UI pages
• Create a data control from a web service definition URL
• Use the Data Controls panel to create databound UI components without writing any code
• Set labels at a centralized location for the business service
• Use Integrated WebLogic Server to run an ADF Faces application

To learn more about ADF data binding and developing databound applications, refer to:

• Using a Bean Data Control
• Using a URL Service Data Control
• Using a Placeholder Data Control
• Fusion Developer's Guide for ADF
• Web UI Developer's Guide for ADF