You will use wizards to quickly create an application and a project, and a starter XSD document. The URL service data control you will create is for a live RSS feed. Before you create the data control, you will define the XML schema for the URL service by adding sample code to the starter XSD document.
show more or lessRead more...

Then you will generate a data control from the XML schema. Next you will design a databound web page that displays the RSS feed contents by dragging objects from the Data Controls panel. When you test run the page, the page in the browser will look something like this:

Page in browser

Purpose Duration Application
This tutorial shows you how to create a URL data control from an XML schema that defines the structure of an RSS feed. To see the complete application you will create, click the Download button to download a zip of the final application, and then unzip it in your JDeveloper mywork folder. 40 minutes Download urldatacontrolapp.zip
Note: If you download the complete application, Show more or lessRead more... do the following before you run the application:
  • Open the application in JDeveloper. In the Application Navigator, Model project, double-click DataControls.dcx to open the file. Click Source to use the XML editor. Change the SchemaLocation setting to the directory where your JDeveloper is installed.

  • Follow the instruction in Step 2: Create an XML Schema, substep #2 only.

Step 1: Create a New Application and Project
  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.

    New Gallery, Applications
  2. 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. Show more or lessRead 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.
  3. To follow along with the example, enter URLDataControlApp as the application name and click Next.

    Create custom application
  4. 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. Show more or lessRead 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.
  5. Enter Model as the project name.

    Create custom application, enter project name

  6. Click Finish.

    The Projects panel in the Application Navigator should look like this:

    Application Navigator after creating new project

  7. 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. Show more or lessRead 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 icon Navigator Display Options dropdown menu. For application operations, you can click application icon 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.

    Part of Application Overview window

    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.
Step 2: Create an XML Schema
  1. 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 be able to follow the steps exactly as written, enter values as shown in the instructions throughout the tutorial. Read the information below to learn about the URL service you're going to use in the example.

  2. The example takes the contents of a live RSS feed and displays the contents on a web page using databound Oracle ADF Faces components. Show more or lessRead more... 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.

    JDeveloper web site page on OTN

    Use your web browser to go to the JDeveloper page on OTN:

    http://www.oracle.com/technetwork/developer-tools/jdev/overview/index.html

    Then do the following:
    • Click XML next to JDeveloper News to open the RSS feed page.

    • Take note of the URL (for example, http://www.oracle.com/ocom/groups/public/@otn/documents/webcontent/132361.xml).

    RSS (Really Simple Syndication) files are written in XML syntax. To parse XML contents in JDeveloper, you need to have an XML schema for the RSS feed.
  3. 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.

  4. When accessing an external web service and your machine is behind a firewall, you may need to change your JDeveloper's proxy setting. Show more or lessRead 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.
  5. Before you create the XML schema, you will open the HTTP Analyzer in JDeveloper to view the XML contents behind the URL. Then you use the XML elements in the contents returned to define the structure of the XML schema. You may skip ahead to #10 in this step, if you wish.

  6. From the main menu, choose Tools > HTTP Analyzer.

  7. The HTTP Analyzer allows you to examine the content of HTTP request/response package pairs. Show more or lessRead more...

    When you first open the HTTP Analyzer, by default JDeveloper displays the HTTP Analyzer tool window and instances window. When you initiate a new request, the HTTP Analyzer test window displays in the center of JDeveloper (in the same place where other editors appear).

    By using the HTTP Analyzer against the URL of the RSS feed page, you can get the XML contents behind the URL, and also verify that the data source of the URL service is working as expected.
  8. In the HTTP Analyzer tool window, click run iconStart HTTP Analyzer.

  9. Click create new icon Create New Request to open a test window. In the HTTP Analyzer test window, click HTTP Content at the bottom of the window.

  10. Enter http://www.oracle.com/ocom/groups/public/@otn/documents/webcontent/132361.xml in the URL field. Then select GET from the Method dropdown list.

    HTTP Analyzer test and log windows

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

    HTTP Analyzer, response returned
  12. Based on the expected response in XML form, you can then design the XML schema for the JDeveloper News RSS feed, Show more or lessRead more... using all the elements shown in the response (for example, rss, channel, item, and so on).

    To create an XML schema from the RSS feed XML contents, you define an XSD element for each unique XML element that you find, enclosing them within XSD complex and sequence elements as needed.
  13. Click red square icon Stop to terminate the HTTP Analyzer. Then close the HTTP Analyzer windows, since you will not be using them in the rest of the tutorial.

  14. In the Application Navigator, right-click the Model project and choose New > General > XML > XML Schema, then click OK.

    New Gallery, General, XML

  15. In the Create XML Schema dialog, enter newsrssfeed.xsd as the file name.

  16. In the Directory field, append \src after Model (for example, <JDEVELOPER_HOME>\jdeveloper\mywork\URLDataControlApp\Model\src). Then click OK.

    Create XML Schema dialog

  17. In the XSD schema editor, click Source at the bottom of the editor window to switch to the XML editor.

    XML editor
  18. The XML Schema language, also referred to as XML Schema Definition (XSD), describes the structure of an XML document. Show more or lessRead more...

    To create an XML schema from the RSS feed XML contents, you define an XSD element for each unique XML element that you find, enclosing them within XSD complex and sequence elements as needed.

    For complete information on the XML Schema, see the W3C XML Schema page at
    http://www.w3.org/XML/Schema

    For your convenience, we have provided the XML schema that you will use. You can copy and paste the sample code into the XML editor.
  19. After the first line, replace the entire <xsd:schema> element and its children elements with the following code:

  20. Click the save all icon Save All to save your work.

    When you complete the steps for creating an XML Schema, the Projects panel in the Application Navigator should look like this:

    Application Navigator, XSD file created

  21. To see a visual representation of the structure, content, and semantics of the XML schema document you created, in the editor window click Design to switch to the XSD schema editor. Show more or lessRead more...

    XML Schema editor

    You can optionally close the XSD schema editor, since you won't be using it later.
Step 3: Create a URL Service Data Control
  1. In the Application Navigator, right-click the Model project and choose New > Business Tier > Web Services > URL Service Data Control, then click OK.

    New Gallery, Business Tier, Web Services
  2. 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. Show more or lessRead more... The URL data control supports two data stream formats: XML data and spreadsheet data (delimiter separated values). By creating a URL service data control, you can access and consume the URL data stream in your application.
  3. On step 1 of the wizard, Data Source, enter the data control name News. Click Next.

    Create URL Service Data Control wizard, Data Source

  4. On step 2, Connection, enter the connection name JDevNews in the Name field.

  5. In the URL Endpoint field, enter the URL to the live RSS feed.

    For example: http://www.oracle.com/ocom/groups/public/@otn/documents/webcontent/132361.xml.

  6. Confirm that Authentication Type is None and Http Method is GET. Then click Next twice.

    Create URL Service Data Control wizard, Connection

  7. On step 4, Data Format, select XML from the dropdown list.

  8. In the XSD URL field, enter file:///C:/<JDEVELOPER_HOME>/jdeveloper/mywork/URLDataControlApp/Model/src/newsrssfeed.xsd, where <JDEVELOPER_HOME> is the location of your JDeveloper install. Click Next.

    Create URL Service Data Control wizard, Data Format
  9. Since the JDeveloper RSS feed page is an XML document, you select XML as the format for the URL data source. Show more or lessRead more...

    When the data source is formatted as XML, you need to specify the URL that identifies the XSD schema definition. The XML data control relies on the XSD schema definition to be able to validate the format of the XML data stream.

    In a previous step, you created the XSD schema definition in <JDEVELOPER_HOME>/jdeveloper/mywork/URLDataControlApp/Model/src. To specify the location of the XSD schema definition on your local machine, prefix the location with file:///. For example:

    file:///C:JDevInstall/jdeveloper/mywork/URLDataControlApp/Model/src/newsrssfeed.xsd
  10. On step 5 of the wizard, click Test URL Connection.

    You should see the text URL Test:URL Successful in the dialog.

    Create URL Service Data Control wizard, Finish

  11. Click Finish, then click the save all icon Save All to save your work.

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

    Overview editor for DataControls.dcx

  12. In the Application Navigator, expand the Data Controls panel.

    You should see the News data control you have created and made available to the application. If you don't see the data control you created, click refresh icon Refresh on the panel toolbar.

    Application Navigator, Data Controls panel

  13. The new files added to the Model project include: Show more or lessRead more...
    • 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.

Step 4: Create a JSF Page
  1. From the main menu, choose File > New > General > Projects > Custom Project, then click OK.

    New Gallery, Custom Project

  2. Enter View as the project name. Then select ADF Faces from the Available list and shuttle icon shuttle it to the Selected list.

    Create Custom Project wizard
  3. Selecting features for a project enables you to filter the choices offered by the New Gallery, so that the choices you see are targeted to the type of work you are doing. Show more or lessRead more... Features are set per project. They are used only within JDeveloper to assist you as you work, and have no effect on the data in the project itself. Adding ADF Faces automatically propagates the required associated features in the Selected pane.
  4. Click Finish.

    You should see the View project in the Application Navigator.

    Application Navigator, View project created

  5. In the Application Navigator, right-click the View project and choose New > Web Tier > JSF/Facelets > Page, then click OK.

    New Gallery, JSF/Facelets Page

  6. In the Create JSF Page dialog, enter NewsPage.jsf as the file name. Make sure Facelets is the selected document type.

    Create JSF Page dialog
  7. The JSF pages you create for your application using JavaServer Faces can be Facelets documents (which have file extension .jsf) or JSP documents written in XML syntax (which have file extension .jspx). Show more or lessRead 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)

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

  9. 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). Show more or lessRead 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.

    Create JSF Page dialog, Managed Bean
  10. Click OK.

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

    Visual editor

  11. When you create a new JSF page as a Facelets document type (with file extension .jsf), JDeveloper automatically creates a starter page structure Show more or lessRead 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="NewsPage.jsf" id="d1">
        <af:form id="f1"></af:form>
      </af:document>
    </f:view>
  12. 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.

    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.

    Visual editor, inserting into form

  13. Click saveall icon Save All to save your work.

  14. When you complete the steps for creating a JSF page, the View project in the Application Navigator should look something like this: Show more or lessRead more...

    Application Navigator, page in View project

    In the project, the folders and files that conform to the Java EE Web module directory structure 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.

Step 5: Add the Data Control to the JSF Page
  1. In the Data Controls panel, expand News | loadData() | Return | rss | channel.

    Data Controls panel expanded
  2. A data control is a representation of a business service, and comprises a hierarchical display of available business objects, including collections, attributes, and methods. Show more or lessRead more... You use the Data Controls panel to insert databound components into your JSF page in the visual editor.

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

    When you insert a component from the Data Controls panel, JDeveloper automatically creates the various code and objects needed to bind the component to the data control you selected. A new Oracle ADF binding will be defined in the page's UI model and the inserted component will contain references to Oracle ADF bindings, using EL (expression language) syntax.
  3. Click and drag item to the center facet on the page in the visual editor. From the Create context menu, choose Table > ADF Read-only Table.

    Create context menu, Table

  4. In the Edit Table Columns dialog, select Enable Sorting.

    Edit Table Columns dialog

  5. Accept the remaining default values and click OK.

    The page in the visual editor should look similar to this:

    Page in visual editor
  6. When you use the Data Controls panel to create a UI component, JDeveloper automatically creates the various code and objects needed to bind the component to the data control you selected. Show more or lessRead more... To see the ADF data bindings defined for the page, click Bindings at the bottom of the editor window.

    Bindings editor of JSF page

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

    • <af:table>, used to display tabular data.

    • <af:column>, used to create separate columns in the table.

    • <af:outputText>, which supports styled text.

    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.

    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}

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

    At runtime, the EL expression is evaluated and a value is pulled from the binding object to populate the component with data when the page is displayed.
  7. In the Application Navigator, right-click NewsPage.jsf 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 page in the browser should look similar to this:

    Page in browser

  8. 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. Show more or lessRead more... 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.

    When you run a JSF application in the IDE, JDeveloper automatically:
    • 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 icon Terminate in JDeveloper and choose the application bound instance URLDataControlApp 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.

    When you complete the steps for adding the data control to the JSF page, the View project in the Application Navigator, should now look like this:

    Application Navigator, View project

    The new files added to the Application Sources folder in the View project include:
    • NewsPagePageDef.xml: The page definition file for the JSF page. A page definition file defines the binding objects that populate the data in UI components 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.

Step 6: Enhance the Layout
ADF Faces supports many useful components to provide a rich user experience from a web browser (without requiring a plug-in). To improve the page layout, you will expand the table column widths and delete one of the columns. Show more or lessRead more... To improve the user experience, you will convert the column of news titles into links. This lets end users view a news topic by clicking the title text.

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.
  1. In the Application Navigator, View project, select NewsPage.jsf. 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}.

    Structure window, table component expanded
  3. When you used the Data Controls panel to drop a table onto the JSF page, JDeveloper inserted an ADF Faces Table component. Show more or lessRead more... 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.
  4. In the Component Palette, ADF Faces page, General Controls panel, drag link icon Link (Go) and drop it into the first af:column component in the Structure window.

    This inserts af:goLink below af:outputText in the Structure window:

    Structure window, goLink inserted

  5. To convert the column of news titles into text links, you will replace the first column's ADF Output Text component with a Go Link component. Show more or lessRead more...

    You will use the Expression Builder to bind the Go Link component to the same attribute value as the original Output Text component.

    To make the title text a link, you will set the Destination attribute on the Go Link component.
  6. 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.

    Property Inspector, dropdown menu

  7. In the Expression box, delete the default text of goLink 1. Then in the box under Variables, expand JSP Objects | row and select title.

    You should see the expression #{row.title}.

    Expression Builder

  8. Click OK.

    The expression #{row.title} should be populated in the Text field in the Property Inspector.

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

  10. In the Variables box, under JSP Objects | row, select link and then click OK.

    The expression #{row.link} should be populated in the Destination field in the Property Inspector.

    The Go Link component is now bound to the same attribute values as the OutputText components in the first and second columns (title and link, respectively).

    Property Inspector, Go Link component

  11. In the Property Inspector of the same Go Link component, select _blank from the TargetFrame dropdown list.

    This opens a new browser tab or window when the link is selected at runtime.

  12. In the Structure window, select af:outputText that is above af:goLink, then press the Delete key to delete the selected component since you no longer need the OutputText component.

    The first af:column component should now look similar to this:

    Structure window, outputText above goLink deleted

  13. In the Structure window, select the second column component af:column - #{bindings.item.hints.link.label}, then press Delete to delete the selected column since a column for links is no longer needed.

    There should now be only three af:column components:

    Structure window, description column selected

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

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

    The table in the visual editor should now look like this:

    Visual editor, table with 3 columns

  16. In the Application Navigator, View project, right-click NewsPage.jsf and choose Run.

    The page in the browser should look similar to this:

    Page in browser

  17. Try clicking one of the title text links. The link should open in a new browser tab or window. Show more or lessRead more... In the browser page, you can also expand the width of a table column by dragging one end of the column header.
Step 7: Set the Labels
  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.

    Overview editor, DataControls.dcx file

  2. Expand News | loadData() | Return | rss | channel. Then select item and click edit icon Edit to open another overview editor.

    Overview editor of DataControls.dcx

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

    Overview editor, loadData_Data_item.xml

  4. With title selected in the Attributes table, click the UI Hints tab. Then enter News Title in the Label field.

    Overview editor, Attributes, UI Hints
  5. 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. Show more or lessRead 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).

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

  7. 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. Show more or lessRead 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 in the model package:

    Application Navigator, 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 string:

    #
    model.News.loadData_Data_item.title_LABEL=News Title
  8. In the Application Navigator, View project, right-click NewsPage.jsf and choose Run.

    You should see the new labels you entered on the page in the browser:

    Page in browser, labels

  9. The new labels you added should be displayed in the column headers. Show more or lessRead more...

    Try the column sorting feature by selecting the Sort Ascending or Sort Descending icon on a column header. The sorting feature is enabled when you selected the Enable Sorting checkbox in the Edit Table Columns dialog.

    sorting icon on column header in table
Summary
In this tutorial you created a URL service data control from an XML schema. You learned how to: To learn more about ADF data binding and developing databound applications, refer to:

Bookmark Print Expand all | Hide all
Back to top

Did you find this page helpful?



Copyright © 2011, Oracle and/or its affiliates. All rights reserved.