Extend Applications to Mobile Browsers with ADF Mobile

You can work in JDeveloper's IDE to create a JSF application targeted for Mobile Device Browsers.

Install the schema: Download the schema zip file from OTN and install it. The cue cards use tables that are part of the Fusion Order Demo (FOD) schema.

Create a new application: Use the Create Application dialog to create an application for ADF Mobile.

Create a database connection: Use the Create Database Connection dialog to create a connection to the schema.

Create Oracle ADF Business Component objects: Use the Create Oracle ADF Business Components wizard to create the business components that will provide access to data and implement the business logic.

Edit the View Object : Modify the View Object to include only the fields necessary for the application.

Add Validation Logic: Add validation rules to the Entity Object.

Test the Application Logic in the Business Component Tester: Use the Business Component Tester to test the application logic components created in the previous steps.

Set the Screen Size: Use the Preferences dialog to set the default screen size for target mobile devices.

Create the ADF Mobile Project: Create the ViewController project for an ADF Mobile Application, and select the appropriate technology scope.

Create the Page Flow: Create the page flow for the ADF Mobile application.

Create a JSF Page: Create a JSF Page for mobile devices to browse orders by double clicking on the page in the Page Flow Editor.

Create a Browse Page: Define the JSF for browsing orders in mobile device browsers containing a read-only form and a table.

Create an Edit Page: Define the JSF for browsing orders in mobile device browsers containing a form to edit orders.

Run the Application: Run the application in a mobile device simulator.

Create a Static View Object: Create a static view object for the order status values.

Create a Static LOV: Create a static LOV for the order status field on the Edit Order form, so the order status description is displayed in a drop-down list box.

Create a Lookup View Object: Create a lookup view object for the Customer ID field, so customer names can be displayed instead of the ID in the Edit Order view.

Create a Dynamic LOV: Create a dynamic LOV for the Customer ID field on the Edit Order form, so the customer name is displayed in a drop-down list box.

Test the LOV: Run the application after LOVs are added to the Edit Order view.

.

Install the Schema

1. Download the schema zip file from OTN. If you created the schema previously, go to the next cue card.
2. If you have previously completed the creation of the ADF Business Components for the Fusion Order Demo, you may skip ahead to the Set the ADF Mobile Preferences cue card.  
3. Unzip the file to a convenient location (for example, c:\temp).
4. From the File menu, choose Open. Open the workspace c:\temp\Infrastructure\infrastructure.jws.
5. If you are prompted to migrate the project, click Yes to confirm.
6. In the Application Navigator, expand the MasterBuildScript project .  Under Resources double-click build.properties to open it in the editor.
7. Set the appropriate values in the build.properties file (jdeveloper.home, and all the jdbc.* and db.* settings). Keep all other properties set to their default values. The demo user must be named FOD.
   The relevant settings are:
   jdeveloper.home             The /jdeveloper directory where you have  JDeveloper installed, for example, c:/JDeveloper_11/jdeveloper/
   jdbc.urlBase                    Base URL for your database, for example, jdbc:oracle:thin:@localhost
   jdbc.port                         Port number for your database, for example, 1521
   jdbc.sid                           Database System Identifier, for example, XE or ORCL
   db.adminUser                  Database user with admin privileges, for example, system
   db.demoUser.tablespace  Tablespace name where the FOD user will be installed, for example, USERS
8. In the MasterBuildScript project, select the build.xml file.
9. In the Structure window, right-click the refreshSchema target and choose Run Target "refreshSchema."
10. When prompted, enter the password for the database user with admin privileges.
    

    In the IDE

    After running the Ant task, you should see a build successful message in the JDeveloper Log window.   [tell me more...]

Create a New Application

1. From the File menu, choose New.
2. Select Applications in the Categories pane and then Generic Application in the Items pane.
   

   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. The application template you select determines the initial project structure (the named project folders within the application) and the application libraries that will be added. The project templates define the associated technologies. You can modify existing templates or create new ones. You can then filter the work you do in JDeveloper such that the choices available are focused on the technologies you are working with.   [tell me more...]

3. Click OK.
4. Enter the short name for the application using all lower-case letters (for this example, enter adfm).
5. In the Application Package Prefix field, enter oracle.fod.mobile and then click Next.
6. Enter a short name for the project using all lower-case letters (for this example, enter model).
7. Select ADF Business Components In the Available pane of the Project Technologies tab and shuttle it to the Selected Technologies pane.
8. Click Next twice and the click Finsh.
9. In the Application Navigator, expand the Application Resources panel to see where resources for this application are displayed.
   

   In the IDE

   In creating this application, you use the Create Generic Application wizard. You can use this wizard to create both an ADF Mobile application and project. After you open the wizard by selecting Applications and then Generic Applications in the New Galery, the first page opens where you enter the name of the mobile application and the Application Package Prefix:  [tell me more...]

Create a Database Connection

1. Open the Create Database Connection dialog [File > New > General > Connections > Database Connection] .
2. Select Application Resources if it is not selected as the Create Connection In option.
3. Enter a name for the connection, select the connection type, and enter the username and password. To follow along with this example, use FOD for the connection name and fod for the username.
4. Click Test Connection to confirm that you can connect.
5. Click OK if the connection was successful.
6. In the Application Navigator, expand the Connections and Database nodes in the Application Resources panel to see the database objects.
   

   In the IDE

   The database connection is now included as a resource for your application.   [tell me more...]

Create Oracle ADF Business Components

1. In the Application Navigator, select the model project and launch the Create Business Components from Tables wizard [File > New > Business Tier > ADF Business Components > Business Components from Tables] .
2. In the Initialize Business Components Project dialog, confirm that the database connection you created (for example, fod) is the current selection and click OK.
3. On step 1, Entity Objects, of the Business Components from Tables wizard, click Query to populate the Available list.
4. Select three tables, ORDERS, ORDER_ITEMS and PRODUCTS_BASE, from the Available list and shuttle them to the Selected list to create default business components based on them. Then click Next.
5. On step 2, Updatable View Objects, select business components, Orders (FOD.ORDERS) and OrderItems (FOD.ORDER_ITEMS), from the Available list and move them to the Selected list. Then click Next.
6. Click Next to skip step 3, Read/Only View Objects, which aren't needed.
7. On step 4, Application Module, change the application module name to FODModule. Then click Finish.
   

   ADF Business Components

   The Create Oracle ADF Business Components from Tables wizard does not create a user interface (this is governed by the "view" portion of the application), nor does it determine other application logic such as control flow. It just provides a representation of, and access to, data, and implements business logic.  [tell me more...]

8. Click Save all to save your work.
   

   In the IDE

   After completing the Business Components from Tables wizard, the model project in the Application Navigator should look like this:  [tell me more...]

Edit the View Object

1. In the Application Navigator, double-click OrdersView in the model project to open it in the view object editor.
2. Select the Attributes tab to display all the attributes in the OrdersView view object.
3. In the attributes tab, select the following attributes: PaymentOptionId, DiscountId, CouponId, CollectionWarehouseId, CreatedBy, CreationDate, LastUpdatedBy, LastUpdateDate, and ObjectVersionId. Then click Delete.
   

   Removing Attributes

   By removing attributes from the OrdersView view object you have reduced the number of columns in the view object's query.  [tell me more...]

4. In the Application Navigator, double-click OrderItemsView in the Model project to open it in the view object editor.
5. Select the Entity Objects tab.
6. Select ProductsBase in the Available pane and shuttle it to the Selected pane.
   

   Entity Objects

   A view object can be based on more than one entity object; you do this if you need your client pages to show data from multiple tables. In the list of order items on the client page you will show each item's id, quantity and price, from the OrderItems entity object, as well as the product name, from the ProductsBase entity object.   [tell me more...]

7. Select the Attributes tab. To add the ProductsBase attributes to the OrderItemsView object, click Add from Entity.
8. In the Attributes dialog, select the following attributes under the ProductsBase node in the Available pane: CategoryId, ProductName, and WarrantyPeriodMonths. Shuttle the attributes to the Selected pane. Then click OK.
   

   In the IDE

   The OrdersView view object now contains attributes from both the Orders entity object and the ProductsBase entity object. Notice that OrderItemsView now contains two ProductId attributes: ProductId from the OrderItems entity object and ProductId1 from the ProductsBase entity object; this is necessary to specify the join between the two entity objects.  [tell me more...]

Add Validation Logic

1. In the Application Navigator, double-click Orders in the model project to open it in the entity object editor.
2. On the General page click Add next to Entity Validation Rules.
3. In the Add Validation Rule dialog, select Script Expression from the Rule Type dropdown list.
4. On the Rule Definition tabbed page, enter OrderShippedDate == null || OrderShippedDate >= OrderDate in the Expression panel. Click Test to verify the expression, and click OK when you see the expression syntax check popup.
5. Select the Failure Handling tab. Click Add to add a row to the first table.
6. Change the default Message Id to Orders_10. Change the default Message String to {0} cannot be earlier than {1}. Then press Enter or Tab.
7. In the table below, enter the error message expressions. For Message Token 0, enter source.hints.OrderShippedDate.label as the Expression. For Message Token 1, enter source.hints.OrderDate.label. Then click OK.
   

   In the IDE

   You have created a custom error message for your validation rule; the {0} and {1} are placeholders for parameters that you will define as the labels of the OrderShippedDate and OrderDate attributes. ADF Business Components allow you to create custom labels for each attribute; these labels are stored in message bundles that can be translated for different locales, and they are automatically displayed as the attribute's label on client pages. In this example you have not defined custom labels, so the labels default to the names of the attributes.  [tell me more...]

Test the Application in the Business Component Tester

1. In the Application Navigator, right-click FODModule and choose Run.
2. In the Business Component Browser - Connect dialog, click Connect.
3. In the Business Component Browser, double-click OrdersView1.
4. Browse through the orders until you reach an order without an OrderShippedDate. Enter a new order shipped date that is earlier than the order date. For example, if the order date is 2007-01-14, enter 2007-01-13 for the order shipped date.
5. Click the Next icon to navigate to the next record. Click OK when you see the error dialog containing your error message: OrderShippedDate cannot be earlier than OrderDate.
6. Change the order shipped date so that it is later than the order date. For example, if the order date is 2007-01-14, enter 2007-01-15 for the order shipped date, so that no error dialog displays.
7. Click Commit to save your changes.
8. Close the Business Component Browser.
   

   In the IDE

   After entering valid data, the tester shows the data that you have just saved to the database:   [tell me more...]

Set the Screen Size

1. Click Tools Preferences.
2. Select Mobile and then select 240 x 320 as the default screen size for the visual Editor.  Selecting a default screen size provides visual aid when creating views for mobile devices, but it does not affect the runtime behavior of the application.  Views would typically adjust to the viewport size of the device when they are displayed.
3. Click OK.
   

   In the IDE

   The Preferences dialog enables you to set the default size of the visual editor to give you an approximation of how the components fit on a mobile device screen.   [tell me more...]

Create an ADF Mobile Project

1. From the File menu, choose New.
2. In the New Gallery, select Project from the Categories pane and then Generic Project from the Items pane.
3. Click OK.
4. Enter mvc as the name of the project. (mvc stands for "Mobile" View Controller) and then click Next.
   

   Naming Mobile Applications and Projects

   Entering short, lower-case names for ADF Mobile applications and projects creates a shorter URL, which is easier to enter from a mobile device.  [tell me more...]

5. Shuttle Mobile from the Available pane to the Selected pane.
6. Click Next twice and then click Finish.
   

   In the IDE

   When you move Mobile from the Available pane to the Selected pane, Java, JSF (JavaServer Faces), JSP (JavaServer Pages) and Servlets are also shuttled to the pane. When you add Mobile technology, the Apache My Faces Trinidad library is automatically loaded to the workspace and the Trinidad component palette will be loaded when you create mobile JSF pages.  [tell me more...]

Create the Page Flow

1. In the Application Navigator, expand the mvc project.
2. Click faces-config.xml (located in the WEB-INF folder).
3. Choose JSF Diagram Objects from the Component Palette.
4. Select JSF Page in the Component Palette and by dropping it onto the form in the visual editor.
5. Name the JSF page /br-o. This page is a browse order page, the the first application page which represents the default activity.
6. Create an edit order page by selecting JSF Page in the Components Palette and then by dropping it onto the the form in the visual editor.
7. Name the page /ed-o.
8. Create the page flow by selecting JSF Navigation Case in the Components Palette.
9. Connect the pages by first clicking /br-o and then /ed-o in the visual editor.
10. Enter goEdit on the outcome label of the JSF Navigation Case.
11. Select a JSF Navigation Case from the Component palette.
12. In the visual editor, select /ed-o and then /br-o to connect the pages.
13. Enter goBrowse on the outcome label of the JSF Navigation Case.
    

    In the IDE

    The page flow contains two JSF pages: browsing orders and editing orders, which are represented by the /br-o and /ed-o JSF pages. These pages are connected using the JSF Navigation Case components.  [tell me more...]

Create a JSF Page

1. In the visual editor, double-click /br-o to open the Create JSF Page dialog.
2. Accept the file name /br-o.jspx and then click OK. (Because Mobile technology scope is selected during Project creation, the Render in Mobile Device option is selected by default.)
3. Select Trinidad from the Component Palette.
4. Select Panel Header from the Component Palette and drop it directly inside h:form in the Structure view for /br-o.jspx.  Update the Text property of the Panel Header component to Browse Order.
5. Select Panel Group Layout from the Component Palette and drop it into the visual editor.
6. Change the layout by selecting vertical from the Layout property's dropdown list in the Panel Group Layout's Property Inspector.
   

   Designing the User Interface

   To create the user interface, add Apache MyFaces Trinidad components to the JSF pages.   [tell me more...]

7. Enter Browse Order as the text property in the Panel Header's Property Inspector.
   
   

   In the IDE

   The visual design of br-o.jspx is displayed in the visual editor, and the Structure window shows the page's structure. As you add components to the page, you will drop them inside the panelGroupLayout component, and their arrangement will be controlled by the layout manager of the panelGroupLayout component.   [tell me more...]

Create a Browse Page

1. In the Application Navigator, expand the Data Controls panel and then the FODModuleDataControl node.
2. Drag the OrdersView1 node into the panelGroupLayout in the Structure view.
3. Choose Forms Trinidad Read-Only Form from the Create menu.
   

   Data Control Panel and UI Controls

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

4. In the Edit Forms Field dialog, select all of the fields except for OrderId, OrderDate, OrderStatusCode, OrderTotal, and Customer ID and then click Delete.
5. If needed, clear the Include Navigation Controls check box and then click OK.
6. In the Structure view, expand panelGroupLayout.
7. Select the OrderId field (Panel-Label And Message - #{bindings.OrderId.hints.label}).
8. In the Label field of the Property Inspector, append a colon (:) and two spaces after the populated value to improve legibility.
9. Repeat this step for the OrderDate, OrderStatusCode, OrderTotal, and CustomerId fields.
10. Click Save All.
11. Create a button called First for the browse page by first expanding the Operations folder in the Data Controls pane and then by selecting First.
12. Drag and drop this button directly beneath h:form in the Structure view. This button is inside the form, but ouside of the Panel Group Layout.
13. Select Trinidad Button from the context menu.
14. Repeat this process to add Previous, Next, and Last buttons to the form.
15. In the Trinidad Components Palette, select Command Button and then drop it directly beneath the Last button in the form.
16. In the Command Button's Property Inspector, enter Edit as the Text property.
17. Select goEdit from the Action property drop-down list.
18. In the Data Controls panel, expand the OrdersView1 node and then drop it at the bottom of the form in the Structure view.
19. Choose Tables Trinidad Read-Only Table from the Create menu.
20. In the Edit Table Columns dialog, select Sorting.
21. Delete all of the columns except for LineItemId, Quantity, UnitPrice, and ProductName and then click OK.
22. In the Structure view, expand tr:table.
23. Select the LineItemId column (tr:column-#{bindings.OrderItems1View2.hintsLineItemId.label}).
24. Enter ID for the Header Text property in the Property Inspector.
25. Repeat this process to rename the Quantity column as Quan., the UnitPrice column as Price, and the ProductName as Name.
26. Select tr:table in the Structure view and then enter 100% for the Width property.
27. Click Save All.
    

    In the IDE

    The visual editor shows the read-only form, table and buttons that make up your page, and the Structure view shows the hierarchy of the components in the page. You can reorganize the page structure by dragging components in the Structure view, or moving them in either the visual editor or source editor.   [tell me more...]

Create an Edit Page

1. In the Application Navigator, click faces-config.xml (located in the WEB-INF folder).
2. In the visual editor, double-click /ed-o to open the Create JSF Page dialog.
3. Accept the file name /ed-o.jspx and then click OK. (Because mvc is an ADF Mobile project, the Render in Mobile Device option is selected by default.)
4. Select Trinidad for the Component Palette.
5. Select Panel Header from the Component Palette and drop it directly inside the h:form in the Structure view for /ed-o.jspx.
6. Enter Edit Order as the Text property in the PanelHeader's Property Inspector.
7. Select Panel Group Layout from the Component Palette and drop it into the visual editor.
8. Change the layout by selecting vertical from the Layout property's dropdown list in the Panel Group Layout's Property Inspector.
9. In the Application Navigator, expand the Data Controls panel and then the FODModuleDataControl Node.
10. Drag the OrdersView1 node into the PanelGroupLayout in the Structure view.
11. Choose Forms Trinidad Form from the Create menu.
12. Click OK in the Edit Form Fields dialog.
13. In the Data Controls panel, expand the Operations folder and then select the Commit operation.
14. Drag and drop in the Commit operation directly below h:form in the Structure view.
    

    Commit Operations

    By dragging the commit operations from the data control panel onto the page, you create a button that saves the transaction on the editing page and also a button that returns the user to the browsing page. Note that while each data collection contains its own set of operations such as next, previous, create, and execute, the commit and rollback operations apply to all data in the data control.   [tell me more...]

15. Choose Trinidad Button from the Create menu.
16. In the Property Inspector, enter Save as the Text property and then select Reset to Default for the Disabled property.
17. Select Command Button from the Component Palette and drop it directly beneath the Save button in the Structure view.
18. In the Property Inspector, enter Return as the Text property and then select goBrowse from the Action property drop-down list.
19. Click Save All.
    

    In the IDE

    When you create your edit page, the page should look like this in the visual editor:  [tell me more...]

Run the Application

1. In the editor window, click br-o.jspx to bring it forward.
2. Right-click within the form and then choose Run.
3. In the running application, use the navigation buttons to change the current row and note the changing details in the OrderItems table.
4. Start the emulator for the mobile device of your choice.
   

   Running an Emulator

   To test an ADF Mobile application using an emulator, enter your computer's IP Address into the application URL, in place of the localhost reference. Device emulator cannot resolve the localhost reference as it simulates a network device, so you must substitute the localhost reference with the IP address of your computer. Other than the host name, the remainder of the application URL is correct. For example, enter http://<IP Address>:<Port Number>/adfm-mvc-context-root/faces/br-o.jspx in the device browser.  [tell me more...]

5. Connect the emulator's browser to Oracle JDeveloper.
   

   In the IDE

   When you run the br-o.jspx page, it should look similar to this page in your browser:  [tell me more...]

Optimize the Layout

1. Open br-o.jspx in the visual editor.
2. Select the table.
3. In the Property Inspector, enter 2 for the Rows property.
4. In the Structure view, expand f:view, and then expand trh:html.
5. Right mouse click on trh:head - Browse Order item, and select  Insert HTML/JSP menu item.
6. Copy and paste the following line into the text box.  Remove any extra brackets as necessary, then close the text box.
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
7. Open ed-o.jspx in the visual editor.
8. In the Structure view, expand h:form and then expand tr:panelFormLayout.
9. Select the OrderId, CustomerId, ShipToAddressId, and ShippingOptionId inputText fields.
10. In the Property Inspector, enter 5 for the Columns property.
11. In the Structure view, select the OrderDate, OrderShippedDate, OrderTotal, ShipToName, ShiptoPhoneNumber, and GiftwrapMessage inputText fields.
12. In the Property Inspector, enter 12 for the Columns property.
13. In the Structure view, expand f:view, and then expand trh:html.
14. Right mouse click on trh:head - Edit Order item, and select  Insert HTML/JSP menu item.
15. Copy and paste the following line into the text box.  Remove any extra brackets as necessary, then close the text box.
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
16. Click Save All.
    

    In the IDE

    When you first open the br-o.jspx, the table component contains the defualt number of rows.  [tell me more...]

Create a Static View Object

1. In the Application Navigator, select the model project and launch the Create View Object wizard [File > New > Business Tier > ADF Business Components > View Object] .
2. Enter StatusCodes as the name of the view object.
3. Select Rows populated at design time (Static List), and click Next.
4. On step 2, click New. In the New View Object Attribute dialog, enter StatusCodes as the name of the attribute and select Key Attribute.  Then click OK.
5. Click New again. Enter StatusDesc as the name of the attribute and click OK. Then click Next twice.
6. On step 4, click Add seven times to create the static list values. Enter values and descriptions for StatusCodes and StatusDesc, for example:

   PENDING  Order submitted
   SHIP     Order is being shipped
   PICK     Order is being picked
   COMPLETE Order complete
   CANCEL   Order cancelled
   STOCK    Waiting for stock
   CART     Order in cart

7. Click Next to display the Application Module page. Select Application Module to have the new view added to the FODModule application module. Then click Finish.
   

   Defining a Static List of Values

   When you define a static list for a view object, JDeveloper creates a standard message bundle file in which to store them. The file is specific to the view object component to which it is related, and it is named accordingly. Internationalizing the model layer of an application built using ADF Business Components entails producing translated versions of each component's message bundle file. For example, the Italian version of the ModelBundle.properties message bundle would be a class named ModelBundle_it.properties, and a more specific Swiss Italian version would have the name ModelBundle_it_ch.properties.  [tell me more...]

8. In the editor window, click the OrdersView.xml tab to bring the page forward, and select the View Accessors tab.
9. To set the StatusCodes view object, click Add. Select StatusCodes in the Available View Objects pane and shuttle it to the View Accessors pane. Then click OK.
10. Select the Attributes tab, then select the OrderStatusCode attribute. Click Add next to the List of Values item.
11. In the List of Values dialog, fully expand the OrdersView | StatusCodes nodes, and select the StatusCodes attribute. Accept the default name.
12. Click Edit List UI Hints. Select StatusDesc in the Available pane and shuttle it to the Selected pane.
13. Select Selection Required from the "No Selection" Item dropdown list.
14. Click OK again to close the List of Values dialog.
15. Click Save all.
    

    In the IDE

    When you add the view object as a view accessor, it should look like this:  [tell me more...]

Create a Static LOV

1. In the editor window, click the ed-o.jspx tab to bring the page forward.
2. Select the OrderStatusCode inputText field and delete it.
3. In the Data Controls panel, expand the FODModuleDataControl | OrdersView1 node.
4. Select the OrderStatusCode attribute and drop it directly beneath the OrderShippedDate inputText field (its previous location) in the Structure View.
5. From the Create context menu, choose Single Selection Trinidad Select One Choice.
   

   Model Driven List

   The status codes are displayed as a choice list in the LOV UI. With a choice list, other options are available: you can display multiple columns in the LOV (in this example, the status code); and also allow the user to leave the selection blank. You also could have used a different LOV UI, for instance a combo box or a radio group.   [tell me more...]

6. Click Save all to save your work.
   

   In the IDE

   In the edit page, an LOV is available next to the OrderStatusCode field:  [tell me more...]

Create a Lookup View Object

1. In the Application Navigator, select the model project and launch the Create View Object wizard [File > New > Business Tier > ADF Business Components > View Object] .
2. Enter CustomerView as the name of the view object.
3. Select Read-only access through SQL query. Then click Next.
4. On step 2, enter the following in the Query Statement box:
   SELECT * from PERSONS Persons
WHERE Persons.PERSON_TYPE_CODE = 'CUST'
5. Click Test to test the query. Then click Next until you reach step 6: Attribute Settings.
6. On step 6, select the PersonId attribute and select Key Attribute. Then click Next until you reach step 8: Application Module.
7. On step 8, select Application Module. Then click Finish.
8. In the Application Navigator, double-click Orders in the Model project to open it in the editor, and select the View Accessors tab.
   

   Lookup View Objects

   The new view object can be added as a view accessor in the View Accessors dialog, available by clicking the View Accessors tab in the overview editor.   [tell me more...]

9. Click Add to open the View Accessors dialog. Select CustomerView in the Available View Objects panel and shuttle it to the View Accessors panel. Then click OK.
10. Select the Attributes tab, then select the CustomerId attribute. Click Add next to the Validation Rules item.
11. In the Add Validation Rule dialog, select Key Exists Validator from the Rule Type drop down list.
12. Select View Accessor from the Validation Target Type drop down list.
13. Select CustomerId in the Available Entity Attributes panel and PersonId (under CustomerView) in the Validation Target Attributes panel. Click Add.
14. Then click OK.
15. Click OK to continue without defining an error message.
    

    In the IDE

    You created a view object that can be used as the provider for a list of values in the user interface. That view object also serves as a list of valid values in the validation of the CustomerId field.  [tell me more...]

Create a Dynamic LOV

1. In the editor window, click the OrdersView.xml tab to bring it forward.
2. Select the Attributes tab.
3. Select the CustomerId attribute and click Add next to the List of Values item, to create an LOV for this item.
4. In the List of Values dialog, expand Orders.CustomerView and select PersonID.
5. Click Edit List UI Hints.
6. Select the following attributes in the Available pane and shuttle them to the Selected pane, in this order:  FirstName, LastName.
7. Click OK twice to close both dialogs.
8. Click the ed-o.jspx tab to bring the page forward.
9. Select the inputText field for CustomerId and delete it.
   

   Dynamic LOVs

   Using the Data Controls panel, you can add the List of Values for CustomerId to the page, replacing the inputText field for CustomerId after you delete it.  [tell me more...]

10. In the Data Controls panel, expand the FODModuleDataControl | OrdersView1 node.
11. Select the CustomerId attribute and then drop it directly below the OrderTotal inputText field (its previous location) in the Structure view.
12. From the Create context menu, choose Single Selections Trinidad Select One Choice.
13. In the Property Inspector for the Select One Choice for CustomerId, enter CustomerName for the Label property.
    

    In the IDE

    You added an selectOneChoice component to the ed-o.jspx form. Clicking on the button activates the list of values, from which you can select a value for the field from a user-friendly interface.  [tell me more...]