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.

Optimize the Layout:

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

tell me more icon Installing the Schema

The steps and examples in the cue cards are based on tables that are part of the Fusion Order Demo (FOD) schema. This schema is also used as the database for the sample application that ships with Oracle JDeveloper 11g, as well as other collateral in this release. It will be convenient to have this schema installed, and you only need to do it once. If you have already installed the FOD schema, you can skip this step and go directly to the next card.   [ tell me more...]





  1. go to OTN Download the schema zip file from OTN. If you created the schema previously, go to the cue cards icon 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 cue cards icon 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.



 

Create a New Application

tell me more iconCreating 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. From the File menu, choose New .
  2. Select Applications in the Categories pane and then Generic Application in the Items pane.

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

    tell me more iconIn 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

tell me more icon Creating a Database Connection

You can connect to any database for which you have connection details, or install the sample schema used in the cue card examples and then establish a connection to it. If you installed the sample schema, you will be able to follow the steps in the cue cards exactly as written. If you work with your own database, you can supply your own values as needed.   [ tell me more...]





  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.

    tell me more icon In the IDE

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



 

Create Oracle ADF Business Components

tell me more icon Creating Oracle ADF Business Components

Oracle ADF Business Components is a model layer technology in the Oracle Application Development Framework (Oracle ADF). Oracle ADF Business Components is a fully-featured, XML-based framework for creating business services. That is, it governs interaction between the rest of the application and the data stored in the datasource, providing validation, specific services, and other business logic.  [ tell me more...]





  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 .

    tell me more iconADF 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 Save all to save your work.

    tell me more icon 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

tell me more icon Editing the View Object

A view object's main role is typically to fetch the data to be displayed by a client. You will modify the default view objects that you created earlier to reflect the data that will be displayed in your web pages.  [ tell me more...]





  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.

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

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

    tell me more icon 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

tell me more icon Adding Validation Logic

You can add validation logic to enforce a rule, in this case the rule that an order's ship date must occur after the date the order was placed. You will create your validation rule using ADF BC's declarative validation capabilities, and define the logic using the Groovy scripting language.   [ tell me more...]





  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.

    tell me more icon 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

tell me more icon Testing the Application in the Business Component Tester

You can test the validation rules you added, in the ADF Business Components Tester. The tester is a dynamically generated Swing client that allows you to test your business components. It is useful for testing any enhancements, such as validation rules, LOVs or custom methods, that you have added to your business components; it is also a useful troubleshooting tool because it helps to narrow down problems by removing any client code from the picture.   [ tell me more...]





  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.

    tell me more icon 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

tell me more icon Setting the Screen Size

JDeveloper enables you to set the visual editor to the dimensions of a mobile device screen.   In the example below, the screen size of the visual editor is set to 240X320 Pixels.  This provides a visual aid in designing pages for mobile browsers.  [ tell me more...]





  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.

    tell me more icon 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

tell me more iconCreating an ADF Mobile Project

A JDeveloper project is used to logically group files that are related. A project keeps track of the source files, packages, classes, images, and other elements that your program may need. You can add multiple projects to your application to easily access, modify, and reuse your source code.   [ tell me more...]





  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.

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

    tell me more iconIn 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

tell me more icon Creating the Page Flow

The mvc ("mobile" view-controller) project in the application contains a default JSF page flow, faces-config.xml. A page flow includes the JSF pages and page navigation rules that define an application's page flow.  [ tell me more...]





  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.

    tell me more icon 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

tell me more icon Creating a JSF Page

The pages you create for your web application using JavaServer Faces are JSP documents (which have the file extension .jspx) or JSP pages (which have the file extension .jsp).  [ tell me more...]





  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.

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

    tell me more icon 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

tell me more icon Creating a Browse Page

The browse page enables a user to view and navigate through the data objects one at a time. Both a read-only form and read-only table will be added to supply the master/detail functionality in this browse page. You will add components to the br-o page, to browse orders and order items. The orders are shown one at a time, with the order information in a read-only form and the order's line items in a table.  [ tell me more...]





  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.

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

    tell me more icon 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

tell me more icon Creating an Edit Page

ADF drag and drop databinding allows you to bind visual components on a page to data or to actions. You will use both techniques: you will create a form to edit orders data; and you will bind a button to the commit action.   [ tell me more...]





  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.

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

    tell me more icon 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

tell me more icon Running the Application

The JDeveloper IDE includes a Java EE runtime service for packaged archive deployment called Integrated WLS. Based on zero-copy deployment, Integrated WLS lets you run and test an application and its projects as a Java EE application in a Java EE container. Integrated WLS server instances can be bound to applications and then started, stopped, and debugged.  [ tell me more...]





  1. In the editor window, click br-o.jspx to bring it forward.
  2. Right-click within the form and then choose R un.
  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.

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

    tell me more icon 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

tell me more icon Optimizing the Layout

In this step, you optimize the layout of both the .jspx pages for display on mobile devices by restricting the number of rows that display on browsing page and the field width on the editing page.  Furthermore, you specify the display of the views to take up the entire viewport on the mobie device.  This allows UI components to remain viewable even with increased screen resolution.   [ tell me more...]





  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 H TML/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 H TML/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.

    tell me more icon 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

tell me more icon Creating a Static View Object

A static LOV is based on a view object where transient attributes are created and populated at design time. You will define a view object, populate it with the static values needed for the LOV and associate it with the view object that will use it as an LOV.  [ tell me more...]





  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 .

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

    tell me more icon 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

tell me more icon Creating a Static LOV

A static LOV is based on a view object where transient attributes are created and populated at design time. You will assign the view object to a specific attribute that requires an LOV and choose how the LOV will be displayed. You then edit a page to display the attribute as an LOV list.   [ tell me more...]





  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 .

    tell me more icon 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 Save all to save your work.

    tell me more icon In the IDE

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



 

Create a Lookup View Object

tell me more icon Creating a Lookup View Object

A dynamic LOV is based on a view object which provides the SQL to populate the list of values. You will define the view object and specify the query that will used as the basis for the LOV in this case, retrieving all the customers. Once you've configured a view object to provide a list of values for a given field, you can easily allow that list to be used for validation. In this example, you can ensure that the CustomerId value that a user enters in the editOrders form is a valid CustomerId, that is, a value that is in the list of values.   [ tell me more...]





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

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

    tell me more icon 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

tell me more icon Creating a Dynamic LOV

You will use the dynamic view object (a view object populated from a SQL query) created earlier as the basis for a list of values. You will remove the CustomerId field from the form, and replace the field with an inputListOfValues component. This component displays as an input text field, with a button next to it which can be activated to display the list of values in a separate window. You will configure the list of values to display a subset of columns from the view object, and specify the relationship between the field and the value selected from the list   [ tell me more...]





  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.

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

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