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

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.
   

   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 it to the Selected list.
4. Click Finish .
   

   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

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

   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

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

   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

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.
   

   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.
   

   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

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 Trinidad Read-only Form from the Create context menu.
   

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

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

    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

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

    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 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 dropdown list.
16. Click Save All.
    

    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

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.
   

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

   
   
   
   

   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

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;"/
   

   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.
    

    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 .
    

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

    
    
    

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