Part 2: Create the User Interface

Work in JDeveloper's IDE to create the page flow and pages that comprise the view and navigation portion of your application targeted for mobile device browsers.

Create a Mobile Project: Create the view project for your ADF Mobile Browser application and select the Mobile Browser technology scope.

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

Create the Page Flow: Use the diagrammer to create a page flow diagram by adding pages and navigation cases.

Create a JSF Page: Use the Create JSF Page dialog to create JSP XML documents with the starter page structure targeted for mobile devices.

Create the Browse Page: Use the Data Controls panel to add buttons, a read-only form and a read-only table to define a page for browsing orders.

Create the Edit Page: Use the Data Controls panel to add an editable input form and commit button to define a page for editing order details.

Run the Application: Run the application in the IDE.

Optimize the Layout: Set the properties for various components on the pages to ensure that page contents are displayed on mobile device screens with minimal scrolling.

 

Create a Mobile Project

tell me more icon Creating a 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. Open the Create Generic Project wizard [ File > New > General > Projects > Generic Project]  to create a new generic project.
  2. Enter mvc as the project name.

    tell me more icon Naming Mobile Applications and Projects

    Entering short, lowercase names for ADF Mobile applications and projects creates a shorter URL, which is easier to enter from a mobile device. For example, use mvc for "mobile view controller" project.   [ tell me more...]



  3. In the Project Technologies tab, select Mobile Browser from the Available list and shuttle icon shuttle it to the Selected list.
  4. Click Finish .

    tell me more icon In the IDE

    After completing the steps for creating a mobile project, the Application Navigator should look similar to this, if the model and ViewController project folders are collapsed:  [ 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 when designing pages for mobile browsers.  [ tell me more...]





  1. From the main menu, choose Tools then choose Preferences .
  2. Select Mobile Browser.
  3. Select 240 x 320 as the default screen size for the visual editor, then click OK.

    tell me more icon In the IDE

    The Preferences dialog, Mobile page, 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 the Page Flow

tell me more icon Creating the Page Flow

The mvc (mobile view controller) project in the application contains a JSF configuration file, named by default faces-config.xml. The JSF configuration file contains details of your application, such as the locales you are supporting and the rules for navigating between application pages. It also holds details of the resources needed by your application, such as managed beans and custom message bundles.  [ tell me more...]





  1. In the Application Navigator, mvc project, double-click the faces-config.xml node to open the page flow diagram.
  2. In the Component Palette, JSF Diagram Objects page, Components panel, drag jsf page icon JSF Page and drop it on the diagram to add an icon to represent your first page. Change the page name to /br-o.jspx.
  3. In the Component Palette, drag jsf page icon JSF Page again and drop it on the diagram to add a second page icon. Change the page name to /ed-o.jspx.
  4. In the Component Palette, click jsf navigation case icon JSF Navigation Case. Then on the diagram, click the icon for the source JSF page br-o.jspx, and then click the icon for the destination JSF page ed-o.jspx.
  5. Click on the default label, success, and change it to goEdit.
  6. Click jsf navigation case icon JSF Navigation Case again. On the diagram, click the icon for the source JSF page ed-o.jspx, and then click the icon for the destination JSF page br-o.jspx.
  7. Click on the default label, success, and change it to goBrowse.

    tell me more icon In the IDE

    When you complete the steps for creating the page flow on a diagram, the diagrammer should look similar to this:  [ tell me more...]



 

Create a JSF Page

tell me more icon Creating a JSF Page

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





  1. On the diagram in the visual editor, double-click the br-o.jspx page icon to open the Create JSF Page dialog.
  2. Accept the file name br-o.jspx and confirm that both Create as XML Document (*.jspx) and Render in Mobile Device are selected. Then click OK.
  3. In the Component Palette, select Trinidad from the dropdown list.

    tell me more icon Designing the User Interface

    JDeveloper provides the Component Palette for you to drag and drop UI components onto your JSF page. To see the libraries and components that are currently available, click the dropdown list in the Component Palette. To create a user interface for mobile devices, add Apache MyFaces Trinidad components to your JSF page in the visual editor.  [ tell me more...]



  4. Drag Panel Header from the palette and drop it on the page in the visual editor.
  5. In the Property Inspector, change the Text property value to Browse Order and press Enter.
  6. In the Component Palette, Trinidad page, drag Panel Group Layout and drop it on the page below the panel header component you added.
  7. In the Property Inspector, select vertical from the Layout property dropdown list.

    tell me more icon In the IDE

    When you complete the steps for creating a JSF page and adding Trinidad components, the visual editor looks similar to this:   [ tell me more...]



 

Create a Browse Page

tell me more icon Creating a Browse Page

The role of the browse page is to allow the user to view and navigate the data objects, one at a time. You will add databound components to the br-o.jspx page to create a read-only form and table. Both the read-only form and read-only table supply the master/detail functionality in this browse page. At runtime, the orders are shown one at a time, with the order information in the read-only form, and the order's line items in the read-only table.  [ tell me more...]





  1. In the Application Navigator, expand the Data Controls panel and then the FODModuleDataControl node.
  2. Drag and drop the OrdersView1 node into tr:panelGroupLayout in the Structure window. Choose Form then choose Trinidad Read-only Form from the Create context menu.

    tell me more icon Data Controls Panel and UI Controls

    The Data Controls panel shows the structure of your business components data model in a hierarchical display of business objects, methods, and data control operations.  [ tell me more...]



  3. In the Edit Forms Field dialog, select all the fields except the following: OrderId, OrderDate, OrderStatusCode, OrderTotal, and CustomerId. Then click delete icon Delete. Make sure I nclude Navigation Controls and Include Submit Button are not selected, then click OK.
  4. In the visual editor, click the first form field label #{...OrderId...label}.
  5. In the Property Inspector, Label field, to improve legibility append a colon (:) and two spaces at the end of the populated value #{bindings.OrderId.hints.label}, then press Enter.
  6. Repeat the procedure in steps 4 and 5 on the OrderDate, OrderStatusCode, OrderTotal, and CustomerId field labels.
  7. Click save icon Save All to save your work.
  8. In the Data Controls panel, expand the OrdersView1 node and then expand Operations.
  9. Drag and drop First into the Structure window between tr:panelHeader and tr:panelGroupLayout. Choose Trinidad Button from the Create menu.

    tell me more icon Data Collection Operations

    The Operations folder that is a direct child node of a data collection (for example, OrdersView1) contains operations that affect the current row in the collection or operations that refresh the data collection.   [ tell me more...]



  10. In the Data Controls panel, drag Previous and drop it after tr:commandButton - First in the Structure window. Choose Trinidad Button from the Create menu.
  11. Drag Next and drop it after tr:commandButton - Previous in the Structure window. Choose Trinidad Button from the Create menu.
  12. Drag Last and drop it after tr:commandButton - Next in the Structure window. Choose Trinidad Button from the Create menu.
  13. In the Component Palette, Trinidad page, drag Command Button and drop it after tr:commandButton - Last in the Structure window.
  14. In the Property Inspector, enter Edit in the Text property field. Then select goEdit from the Action property down arrow dropdown list.
  15. In the Data Controls panel, under the OrdersView1 node, drag OrderItemsView2 and drop it on the page below the last form field. Choose Table then choose Trinidad Read-only Table from the Create menu.
  16. In the Edit Table Columns dialog, select S orting .
  17. Select all the columns except the following: LineItemId, Quantity, UnitPrice, and ProductName. Click delete icon Delete. Then click OK.
  18. In the visual editor, click the first column label #{...LineItemId...label}. In the Property Inspector, delete the HeaderText property value, then enter ID and press Enter.
  19. Repeat the procedure to rename the Quantity column header text to Quan., the UnitPrice column to Price, and the ProductName column to Name.
  20. In the Structure window, select tr:table. In the Property Inspector, enter 100% in the Width field and press Enter.
  21. Click save icon Save All.

    tell me more icon In the IDE

    When you finish creating the browse page, the page in the visual editor should look similar to this:   [ tell me more...]



 

Create an Edit Page

tell me more icon Creating an Edit Page

ADF drag and drop data binding allows you to bind UI components on a page to data or 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 editor window, click the faces-config.xml tab to bring the file forward.
  2. On the page flow diagram, double-click the ed-o.jspx page icon to open the Create JSF Page dialog.
  3. Accept the file name ed-o.jspx and confirm that both Create as XML Document (*.jspx) and Render in Mobile Device are selected. Then click OK.
  4. In the Component Palette, select Trinidad from the dropdown list.
  5. Drag Panel Header from the palette and drop it on the page in the visual editor.
  6. In the Property Inspector, change the Text property value to Edit Order and press Enter.
  7. In the Component Palette, Trinidad page, drag Panel Group Layout and drop it on the page below the panel header component you added.
  8. In the Property Inspector, select vertical from the Layout property dropdown list.
  9. In the Data Controls panel, drag and drop the OrdersView1 node into tr:panelGroupLayout in the Structure window. Choose Form then choose Trinidad Form from the Create context menu.
  10. Click OK in the Edit Form Fields dialog.
  11. In the Data Controls panel, expand the Operations folder that is a direct child node of FODModuleDataControl.

    tell me more icon Transactional Control Operations

    While each data collection contains its own set of operations such as Next, Previous, Create, and Execute, the Operations folder that is the direct child node of the application module node (for example, FODModuleDataControl) contains operations that apply to all data collections in the module. The application module data control exposes two data control built-in operations named Commit and Rollback.   [ tell me more...]



  12. Drag and drop Commit into the Structure window between tr:panelHeader and tr:panelGroupLayout. Choose Trinidad Button from the Create menu.
  13. In the Property Inspector, change the Text property value to Save. From the property menu icon property menu at the end of the Disabled field, choose Reset to Default.
  14. In the Component Palette, Trinidad page, drag Command Button and drop it after the Save button on the page.
  15. In the Property Inspector, enter Return in the Text field. Then select goBrowse from the Action property down arrow dropdown list.
  16. Click save icon Save All.

    tell me more icon In the IDE

    When you finish creating the edit page, the page in the visual editor should look similar to this:  [ tell me more...]



 

Run the Application

tell me more icon Running the Application

Since you have both the user interface and model of your application complete, you can run your application in the IDE by running the br-o.jspx page. In the Application Navigator, right-click the page and choose R un from the context menu.   [ tell me more...]





  1. In the Application Navigator, mvc project, right-click br-o.jspx and choose R un .
  2. In the running application, use the navigation buttons to change the current row and note the changing details in the order items table.
  3. Start the emulator for the mobile platform of your choice. Connect the emulator to Oracle JDeveloper.

    tell me more icon Running an Emulator

    To test an Oracle ADF Mobile Browser Client 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 the same. For example, enter http://<IP Address>:<Port Number>/adfm-mvc-context-root/faces/br-o.jspx in the device browser.  [ tell me more...]




    tell me more icon In the IDE

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



 

Optimize the Layout

tell me more icon Optimizing the Layout

In this cue card, you will optimize the layout of both pages for display on mobile devices.   [ tell me more...]





  1. In the editor window, click the br-o.jspx tab to bring the browse page forward.
  2. In the visual editor, click a column.
  3. In the Structure window, select tr:table.
  4. In the Property Inspector, change the Rows property value to 2 and press Enter.
  5. In the Structure window, under trh:html, right-click trh:head - br-o and choose Insert HTML/JSP .
  6. Copy and paste the following line into the text box, inserting the text within the brackets. Then close the text box.
    meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/

    tell me more icon Meta Tag and Viewport Key

    The meta tag places lines of code in between the <head></head> tags in your web page code. To improve the presentation of web page contents on mobile devices, use the viewport key on the meta tag to specify the initial scale and width of the viewport.  [ tell me more...]



  7. In the editor window, click the ed-o.jspx tab to bring the edit page forward.
  8. In the Structure window, under trh:html, right-click trh:head - ed-o and choose Insert HTML/JSP .
  9. Copy and paste the following line into the text box, inserting the text within the brackets. Then close the text box.
    meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/
  10. In the Structure window of ed-o.jspx, expand tr:panelGroupLayout and then tr:panelFormLayout.
  11. Select the following tr:inputText components: OrderId, CustomerId, ShipToAddressId, and ShippingOptionId.
  12. In the Property Inspector, change the Columns property value to 5 and press Enter.

    tell me more icon The Property Inspector and Shared Properties

    You can use the Property Inspector to change the properties of multiple components simultaneously.   [ tell me more...]



  13. In the visual editor of ed-o.jspx, select the following tr:inputText components: OrderDate, OrderShippedDate, OrderTotal, ShipToName, ShiptoPhoneNumber, and GiftwrapMessage.
  14. In the Property Inspector, change the Columns property value to 12 and press Enter.
  15. In the Application Navigator, mvc project, right-click br-o.jspx and choose R un .

    tell me more icon In the IDE

    When you run the br-o.jspx page and navigate to an order that has more than two items in the table, the page in a desktop web browser should look similar to this:   [ tell me more...]



 

cue cards iconNext step

 

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

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