Use a Placeholder Data Control

You can easily create an application and projects in which to organize your application files. Then work in JDeveloper's IDE to create the placeholder data control for your application, and a runnable JSF page.

Create a New Application: Use the Create Application wizard to create a web application based on the application template that includes the ADF Faces, ADF Page Flow, and ADF Business Components technologies.

Create a Placeholder Data Control: Use the Create Placeholder Data Control dialog.

Create Placeholder Data Types: Use the Create Placeholder Data Type dialog to add two new data types to the placeholder data control.

Add Sample Data: Use the Edit Placeholder Data Type to add sample data manually, and by importing a . csv file.

Add a List of Values (LOV): Add a fixed list of values in the Configure List of Values dialog.

Create a JSF Page: Create a JSF page and drag and drop UI components from the Data Controls panel.

 

Create a New Application and Placeholder Data Control

tell me more icon Creating a New Application

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 > Application] .
  2. Enter the application name PlaceholderDCApp to follow along with the example.
  3. Select Fusion Web Application (ADF) from the Applica tion Template list, and click Finish .
  4. In the Application Navigator, select the Model project and open the Create Placeholder Data Control dialog [ File > New > Business Tier > Data Control > Placeholder Data Control] .

    tell me more icon Placeholder Data Controls

    Placeholder data controls are simple data controls containing static, sample data. Page designers can quickly create placeholder data controls without any knowledge of the underlying database or business services technology; they can then use these data controls with ADF databinding to build complete, runnable pages. These pages can be passed to a developer who rebinds the pages to a production data control.  [ tell me more...]



  5. Enter ProductData as the name for the data control, and add a description, for example, Dummy data for product pages. Then click OK.
  6. In the Application Navigator, expand the Data Controls panel.

    tell me more icon In the IDE

    The application template that you used for your application partitions your application into two projects: Model and ViewController. In the Application Navigator, projects are displayed as the top level in the hierarchy. The Application Navigator should now look like this:   [ tell me more...]



 

Create Placeholder Data Types

tell me more icon Creating Placeholder Data Types

A standard data control obtains its data collections and attributes from its underlying data source in the model or business component layer. For example, an application module data control obtains its data collections from the view objects and associated database tables.  [ tell me more...]





  1. In the Data Controls panel, right-click the ProductData node and select Create Placeholder Data Type .
  2. In the Create Placeholder Data Type dialog, enter Categories as the name for the data type.
  3. Enter CategoryId as the name for the first attribute ( Attribute) and select Number as the T ype .
  4. Click add Add to add a new attribute. Enter CategoryName as the name and confirm that String is selected as the T ype . The click OK.
  5. In the Data Controls panel, right-click the Categories node and select Create Placeholder Data Type .

    tell me more icon Data Controls

    The Data Controls panel lets you view the data controls created to represent an application's business services and to create databound UI components by dragging and dropping the control panel objects onto an open web page or ADF Swing panel.  [ tell me more...]



  6. Enter Products as the name for the data type.
  7. Add four attributes, with the following names and definitions. Include the colon ":" as part of each label.
    Name: ProductName; Type: String; Label: Name:.
    Name: ProductDesc; Type: String; Label: Description:.
    Name: Price; Type: Number ; Label: List Price:; Format type: Currency.
    Name: Supplier; Type: String; Default Component: Choice List; Label: Supplier:.
  8. Click OK

    tell me more icon In the IDE

    The Data Controls panel shows your data model: Categories and Products in a master-detail relationship, and the attributes for each data type. The built-in operations are also in the Data Controls panel; you can create UI components based on these operations but they will not do anything to modify your application's data. So for example, you can add a Delete button to your page but it won't delete your sample data.   [ tell me more...]



 

Add Sample Data

tell me more icon Adding Sample Data

In order to run an application using the placeholder data control, you need to add sample data for execution. You can add sample data to the placeholder data type attributes manually or by importing the data from a . csv file.  [ tell me more...]





  1. In the Data Controls panel, right-click the Categories node and select Edit Placeholder Data Type to edit the Categories data type.

    tell me more icon Editing Placeholder Data Types

    Placeholder controls can be loaded with sample data to realistically simulate application execution for design evaluations. When the real data controls are ready, the UI components can be easily rebound to complete the application. For many complex applications, the UI design may actually drive the development of the model, or data source. In this UI-first scenario, having placeholder data controls with sample data is essential to properly model the behavior of the application. In some cases, even if production data controls are available, UI designers may opt to use placeholder data controls because of their flexibility and ease of use.

      [ tell me more...]



  2. In the Edit Categories dialog, select the Sample Data tab. Click add Add to enter the following CategoryIds and Attributes; press the Tab key to move to the next field or add another row.
    1 Hardware
    2 Computer Accessories
    3 Office Supplies
  3. Click OK.
  4. In a text editor such as Notepad, copy and paste the sample data to use with the placeholder.
    code sample icon Use sample code
  5. Save your file in a temporary location, and name it products.csv.
  6. In the Data Controls panel, right-click the Products node and select Edit Placeholder Data Type . Select the Sample Data tab, and click I mport .
  7. In the Open dialog, navigate to and select the products.csv file that you created earlier, then click Open.
  8. Verify that your data has been imported correctly into the Edit Products dialog, and click OK.
  9. If the Externally Modified Files warning dialog pops up, click Yes.

    tell me more icon In the IDE

    Placeholder sample data, whether manually added using the dialog or from an imported . csv file, is stored in message bundle properties files within the placeholder data control packages. The ModelBundle.properties file shows a sample data properties file for the Categories and Products data.  [ tell me more...]



 

Add a List of Values (LOV)

tell me more icon Adding a List of Values (LOV)

A placeholder data type attribute can be configured to be a list of values (LOV). An LOV-formatted attribute binds to UI components that display dropdown lists or list picker dialogs. When you are creating a placeholder data type, you can select an option to open a dialog to configure that attribute to be an LOV. If you have only one data source, you can only create a fixed list LOV. To create a dynamic list LOV, there must be more than one placeholder data type available to be the source.  [ tell me more...]





  1. In the Data Controls panel, right-click the Products node and select Edit Placeholder Data Type .
  2. In the Edit Products dialog, select Supplier and verify that the Default Component is set to Choice List.
  3. Click edit icon Edit next to Use LOV Binding .

    tell me more icon Configuring a List of Values (LOV) Attribute

    You will use the Configure List of Values dialog to configure a placeholder data type attribute as a fixed list, by manually adding list data. You could also configure a dynamic list LOV that gets its value from an attribute in another placeholder data type.  [ tell me more...]



  4. In the Configure List of Values dialog, select Fixed List .
  5. Add three rows of list data with the following labels and values.
    Label: Computer Superstore; Value: Computer Superstore
    Label: Hardware Solutions; Value: Hardware Solutions
    Label: Office Discounters; Value: Office Discounters
  6. Click OK twice to close both dialogs. If a warning dialog pops up, click Yes.

    tell me more icon In the IDE

    As the only change has been to the Supplier attribute in the Products data type, there is no chnage in the data controls as they display in the IDE.  [ 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 file extension .jsp) or JSP documents written in XML syntax (which have file extension .jspx).   [ tell me more...]





  1. In the Application Navigator, select the ViewController project and open the Create JSF Page dialog. [ File > New > Web Tier > JSF > JSF Page
  2. Enter the file name editProducts.jspx and confirm that Create as XML Document (*.jspx) is selected. Under Initial Page Layout and Content, select Quick Start Layout . Then click Bro wse .
  3. In the Component Gallery, select the Two Column category, the first type, and the first layout, (the default selections). Then click OK twice to close both dialogs.
  4. In the Data Controls panel, select the Products node and drag it onto the page, then drop it into the second facet. From the Create context menu, choose Table then choose ADF T able .

    tell me more icon Data Controls Panel and UI Controls

    The Data Controls panel comprises a hierarchical display of available business objects, methods, and data control operations.  [ tell me more...]



  5. In the Edit Table columns dialog, click delete Delete to remove CategoryId from the list, then click OK.
  6. In the Data Controls panel, select the Categories node and drag it onto the page, then drop it into the first facet. From the Create context menu, choose Tr ee then choose ADF T ree .
  7. In the Edit Tree Binding dialog, move CategoryName into the Di splay Attributes list, and move CategoryId out of the Di splay Attributes list.
  8. Expand Target Data Source and click EL Picker . In the Variables dialog, expand ADF Bindings, and bindings, and select ProductsIterator. Then click OK twice to close both dialogs.
  9. In the Structure window, select the af:table component. In the Property Inspector, expand the Behavior section. Select Edit from the Partial Triggers property menu. In the Edit Property:Partial Triggers dialog, move the tree component into the Selected list and click OK. (This is necessary to cause the table to refresh when the selection in the tree changes).
  10. In the editor window, right-click the page and select R un . When your page displays, select a category and view the products in that category. You can modify product details, and you can select a new Supplier from a dropdown list.

    tell me more icon In the IDE

    After adding the tree and table components in the visual editor, your page should look similar to this:   [ tell me more...]



 

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

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