Use a URL Service Data Control

A URL service data control is an Oracle ADF data control for URL services, such as XML files that can be accessed through a URL. You can work in JDeveloper's IDE to quickly create a URL data control from an XML schema that defines the structure of the XML data stream. You can also create web pages that consume the URL service data control to display the contents of the XML file behind the URL.

Create a New Application and Project: Use the Create Application wizard to create a generic application.

Create an XML Schema: Use the Create XML Schema dialog to create a starter XSD document, then use sample code to create the XML schema definition.

Create a URL Service Data Control: Use the Create URL Service Data Control wizard to generate the data control.

Create a JSF Page: Use the Create JSF Page dialog to create a starter page for adding UI components.

Add the Data Control to the JSF Page: Drag and drop objects from the Data Controls panel to create databound UI components on your JSF page.

Enhance the Layout: Modify the table column widths and convert a column of text into text links.

Set the Labels: Use the Edit Attribute dialog to set control hints for the attribute labels.

 

Create a New Application and Project

tell me more icon Creating a New Application and Project

The JDeveloper application is the highest level in the organizational structure. It stores information about the objects you are working with, while you are creating your application. It keeps track of your projects and the environment settings while you are developing.   [ tell me more...]





  1. Open the Create Application wizard [ File > New > General > Applications.
  2. To follow along with the example, enter the application name URLDataControlApp.
  3. Select Generic Application in the Applica tion Template list.

    tell me more icon Application Templates

    Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of technologies already specified. The new application created from the template appears in the Application Navigator already partitioned into tiered projects, with the associated technology scopes set in each project.   [ tell me more...]



  4. Click Next .
  5. Enter Model as the project name. Then click Finish .

    tell me more icon In the IDE

    When you complete the steps for creating a new application and project, the Projects panel in the Application Navigator should look like this:  [ tell me more...]



 

Create an XML Schema

tell me more icon Creating an XML Schema

The example in this set of cue cards takes the contents of a live RSS feed and displays the contents on a web page using databound Oracle ADF Faces components.   [ tell me more...]





  1. To be able to follow the steps in the cue cards exactly as written, enter values as shown in the instructions in this step and throughout the cards. Before creating a URL service data control, you have to determine the URL service to use, and define the XML schema for the URL service. To create the schema, you can use the HTTP Analyzer to obtain the XML elements behind the URL. Click the Tell me more link below for more information about the URL service in the example.

    tell me more icon URL Service Example

    The live RSS feed you will use is the Oracle JDeveloper RSS feed that is available from the JDeveloper page on the Oracle Technology Network (OTN) web site.   [ tell me more...]



  2. From the main menu, choose Tools then choose HTTP Analy zer . In the HTTP Analyzer log window, click run icon Start HTTP Analyzer.
  3. Click create new icon Create New Request to open a test window. In the HTTP Analyzer test window, click the HTTP Content tab at the bottom of the window.

    tell me more icon HTTP Analyzer

    The HTTP Analyzer allows you to examine the content of HTTP request/response package pairs. By default the HTTP Analyzer uses a single proxy on an analyzer instance (default is localhost), but you can add additional proxies of your own if you need to. You can also set rules on an analyzer instance, so that the HTTP Analyzer runs using behavior determined by those rules.  [ tell me more...]



  4. Enter http://www.oracle.com/technology/products/jdev/jdeveloper_news.xml in the URL field. Then select GET from the Method dropdown list.
  5. Click send request icon Send Request. When you see the Message Content Warning dialog, click Yes . You should see the XML contents of the news page in the Response pane.
  6. Click red square icon Stop to terminate the HTTP Analyzer.
  7. In the Application Navigator, select the Model project and open the Create XML Schema dialog [ File > New > General > XML > XML Schema] .

    tell me more icon XML Schema

    The XML Schema language, also referred to as XML Schema Definition (XSD), describes the structure of an XML document.   [ tell me more...]



  8. Enter newsrssfeed.xsd as the file name.
  9. In the Directory field, make sure src is appended after Model (for example, <JDEVELOPER_HOME>jdevelopermyworkURLDataControlAppModelsrc). Then click OK.
  10. In the XSD schema editor, click Source at the bottom of the editor window to switch to the XML editor. Copy and paste the sample code provided.
    code sample icon Use sample code
  11. Click the save all icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps for creating an XML Schema, the Projects panel in the Application Navigator should look like this:  [ tell me more...]



 

Create a URL Service Data Control

tell me more icon Creating a URL Service Data Control

A URL service data control lets you access and consume the URL data stream in your application. The URL data control supports two data stream formats: XML data and spreadsheet data (delimiter separated values).   [ tell me more...]





  1. In the Application Navigator, select the project and launch the Create URL Service Data Control wizard [ File > New > Business Tier > Data Controls > URL Service Data Control] .
  2. On step 1 of the wizard, Data Source, enter the data control name News. Click Next .
  3. On step 2, Connection, enter the connection name JDevNews in the Na me field.
  4. In the URL Endpoint field, enter http://www.oracle.com/technology/products/jdev/jdeveloper_news.xml. Then click Next .
  5. On step 4, Data Format, select XML from the dropdown list.

    tell me more icon Data Format and Format Properties

    Since the JDeveloper RSS feed page is an XML document, you select XML as the format for the URL data source.   [ tell me more...]



  6. In the XS D URL field, enter file:///C:/<JDEVELOPER_HOME>/jdeveloper/mywork/URLDataControlApp/Model/src/newsrssfeed.xsd, where <JDEVELOPER_HOME> is the location where your JDeveloper is installed. Click Next . (It may take a while before the next wizard page displays.)
  7. On step 5, Finish, click Test URL Connection . You should see the text URL Test:URL Successful in the dialog. Click Finish .
  8. Click the save all icon Save All to save your work.
  9. In the Application Navigator, expand the Data Controls panel.

    tell me more icon In the IDE

    When you complete the steps for creating a URL service data control, the Projects panel and Data Controls panel in the Application Navigator should look like this:  [ tell me more...]



 

Create a JSF Page

tell me more icon Creating a JSF Page

The JSF pages you create for your application using ADF Faces can be JSP pages (which have the file extension .jsp) or JSP documents written in XML syntax (which have the file extension .jspx). You will create a JSF page as an XML document in the example.   [ tell me more...]





  1. Launch the Create Generic Project wizard [ File > New > General > Projects > Generic Project]  to create a new generic project for your application.
  2. Enter View as the project name.
  3. Under Project Technologies, select ADF Faces from the Available list and shuttle right icon shuttle it to the Selected list. Then click Finish .
  4. In the Application Navigator, select the project you just created and open the Create JSF Page dialog [ File > New > Web Tier > JSF > JSF Page] .
  5. Enter the file name NewsPage.jspx and confirm that Create as XML Document (*.jspx) is selected.
  6. Under Initial Page Layout and Content, select Blan k Page .
  7. Make sure Page Implementation shows UI Components are not exposed in managed bean. Click OK.

    tell me more icon Component Binding

    When you create a JSF page using the dialog, you can specify whether or not components on the page are exposed in a managed bean, to allow programmatic manipulation of the UI components. By default components are not exposed to managed beans. If you wish to bind components to managed beans, expand the Page Implementation section in the Create JSF Page dialog, then select one of the automatic binding options.  [ tell me more...]



  8. In the Component Palette, ADF Faces page, Layout panel, drag borderlayout icon Panel Stretch Layout and drop it on the blank page in the visual editor.
  9. Click saveall icon Save All to save your work.

    tell me more icon In the IDE

    When you complete the steps for creating a JSF page, the visual editor should look similar to this:  [ tell me more...]



 

Add the Data Control to the JSF Page

tell me more icon Adding the Data Control to the JSF Page

A data control is a representation of a business service, and comprises a hierarchical display of available business objects, including collections, attributes, and methods.   [ tell me more...]





  1. In the Data Controls panel, expand News | loadData() | Return | rss | channel.

    tell me more icon Data Controls Panel and UI Controls

    The Data Controls panel comprises a hierarchical display of available business objects, including collections, attributes, and methods.   [ tell me more...]



  2. Drag the item node and drop it in the center facet on the page in the visual editor.
  3. From the Create context menu, choose Table then choose ADF Read- only Table .
  4. In the Edit Table Columns dialog, select S orting . Accept the remaining default values and click OK.
  5. In the Application Navigator, View project, right-click NewsPage.jspx and choose R un .

    tell me more icon Running and Testing a JSF Page

    By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages.  [ tell me more...]




    tell me more icon In the IDE

    When you complete the steps for adding the data control to the JSF page, the visual editor should look similar to this:  [ tell me more...]



 

Enhance the Layout

tell me more icon Enhancing the Layout

The JSP/HTML visual editor is integrated with other tools in the IDE such as the Structure window, Component Palette, and Property Inspector. When you make a change to a page in one of these tools, the change is reflected in the other tools as well.  [ tell me more...]





  1. In the Application Navigator, View project, select NewsPage.jspx. In the Structure window, expand the hierarchy of components until you see the af:table component.
  2. Expand af:table, and then expand the first column component af:column - #{bindings.item.hints.title.label}.

    tell me more icon Converting Output Text into Text Links

    When you used the Data Controls panel to drop a table onto the JSF page, JDeveloper inserted an ADF Faces Table component. As shown in the Structure window, the Table component contains an ADF Column component for each attribute named in the table binding. Each Column component contains another component that is bound to the attribute's value in order to display data.   [ tell me more...]



  3. In the Component Palette, ADF Faces page, Common Components panel, drag Go Link and drop it into the first af:column component in the Structure window.
  4. In the Property Inspector of the Go Link component you just added, choose Expression Builder from the property menu icon dropdown menu at the end of the Text field.
  5. In the Expression box, delete the default text.
  6. In the box under Variables , expand JSP Objects | row. Select title and click OK. The expression #{row.title} should be populated in the Text field in the Property Inspector.
  7. In the Property Inspector of the same Go Link component , choose Expression Builder from the property menu icon dropdown menu at the end of the Destination field.
  8. In the Variables box, select link under JSP Objects | row, then click OK. The expression #{row.link} should be populated in the Destination field in the Property Inspector.
  9. In the Property Inspector again, select _blank from the TargetFrame dropdown list.
  10. In the Structure window, select af:outputText that is above af:goLink, then press Delete to delete the selected component.
  11. In the Structure window, select the second column component af:column - #{bindings.item.hints.link.label}, then press Delete to delete the selected column.
  12. In the Structure window, confirm that the column component af:column - #{bindings.item.hints.description.label} is selected. In the Property Inspector, Appearance section, change the Width value to 200.
  13. In the Structure window, select the first column component af:column - #{bindings.item.hints.title.label}. In the Property Inspector, Appearance section, change the Width value to 300.
  14. In the Application Navigator, View project, right-click NewsPage.jspx and choose R un .

    tell me more icon In the IDE

    When you complete the steps for enhancing the layout, the visual editor should look similar to this:  [ tell me more...]



 

Set the Labels

tell me more icon Setting the Labels

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. 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.   [ tell me more...]





  1. In the Application Navigator, Model project, model.News package, double-click loadData_Data_item.xml.
  2. In the overview editor, Attributes page, select title and click edit icon Edit.
  3. In the Edit Attribute dialog, select Control Hints, then enter News Title in the Label Text field. Click OK.

    tell me more icon Generated Resource Bundles

    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 and saves the control hint definitions as translatable strings.   [ tell me more...]



  4. Repeat the procedure to add labels for the attributes description and pubDate, using the label text Description and Date, respectively.

    tell me more icon Control Hints

    The ADF control hints mechanism supports these control hint properties that you can customize:   [ tell me more...]



  5. In the Application Navigator, View project, right-click NewsPage.jspx and choose R un .

    tell me more iconIn the IDE

    When you run the JSF page again, it should look similar to this page in the browser:   [ tell me more...]



 















Copyright © 1997, 2009, Oracle. All rights reserved.

false ,,,,,,,,,,,,,,,