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

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

   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.
   

   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

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

   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
   

   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

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

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

   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)

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 next to Use LOV Binding .
   

   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.
   

   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

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 ADF T able .
   

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

    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.