Part 2: Create a Simple User Interface

Work in JDeveloper's IDE to create the pages and task flow that comprise the view and navigation portion of your application.

Create the Page Flow: Use the Create Task Flow dialog to create the page flow as a bounded task flow.

Create a JSF Page: Use the Create JSF Page dialog to create a JSP XML Document with the starter page structure.

Create a Browse Page: Use the Data Controls panel to add a read-only form and read-only table to a page.

Create an Edit Page: Use the Data Controls panel to add an editable form and commit button to a page.

Run the Application: Test run the JSF files from the browse page to see how the pages display and can be edited in a browser.

 

Create the Page Flow

tell me more icon Creating the Page Flow

An ADF task flow includes the view activities and control flow rules that define an application's page flow. There are two types of task flows: bounded and unbounded. A bounded task flow has a single entry point and zero or more exit points; it contains its own set of private control flow rules, activities, and managed beans. An unbounded task flow is for top-level application flows; it consists of all activities and control flows in an application that are not included within any bounded task flow. A typical application is a combination of an unbounded and one or more bounded task flows.   [ tell me more...]





  1. In the Application Navigator, select the ViewController project, and open the Create Task Flow dialog [ File > New > Web Tier > JSF > ADF Task Flow] .
  2. In the Create Task Flow dialog, enter orders-flow.xml as the file name.
  3. Confirm that Create as Bounded Task Flow is selected, and deselect Create with Pa ge Fragments . Then click OK.

    tell me more icon ADF Task Flows and Page Flows

    By using a task flow diagram you can plan out the pages in your application and define the navigation rules for users to navigate between the pages.   [ tell me more...]



  4. In the Component Palette, ADF Task Flow page, Components panel, click jsf page icon View then drag and drop it on the diagram to add an icon to represent your first application page (the default activity). Change the page name to browseOrders.
  5. Click jsf page icon View again and then drop it on the diagram to add the second page icon. Change the page name to editOrders.
  6. In the Component Palette, click navigation case icon Control Flow Case. Then in the diagram, click on the browseOrders page icon and then the editOrders page icon. Enter goEdit for the outcome label.
  7. Click navigation case icon Control Flow Case again. Then click on the editOrders page icon and then the browseOrders page icon. Enter goBrowse for the outcome label.
  8. Click task flow icon icon Task Flow Return then drop it on the diagram to the right of the page icons. Change the name to commit.

    tell me more icon Managing Transactions

    A transaction is a persisted collection of work that can be committed or rolled back together as a group. You can use an ADF bounded task flow to represent a transactional unit of work and to declaratively manage transaction boundaries. After creating a basic unbounded or bounded task flow and adding task flow activities to it, you can perform specialized tasks such as transaction management and reentry.  [ tell me more...]



  9. In the Property Inspector, General section, confirm that commit is the value for the id and Outcome Name properties. Expand the Behavior section. Then select commit from the End Transaction property dropdown list.
  10. In the Structure window of orders-flow.xml, select task-flow-definition - orders-flow. Then in the Property Inspector, Behavior section, select Always Begin New Transaction from the dropdown list under Transaction.
  11. In the Component Palette, click navigation case icon Control Flow Case again. Then click on the editOrders page icon and then the commit task flow return icon. Enter save for the outcome label.
  12. In the Application Navigator, select the ViewController project, and open the Create Task Flow dialog [ File > New > Web Tier > JSF > ADF Task Flow] .
  13. In the Create Task Flow dialog, enter calling-flow.xml as the file name. Confirm that Create as Bounded Task Flow is selected, and deselect Create with Pa ge Fragments . Then click OK.
  14. In the Application Navigator, select the orders-flow icon, and drop it on the calling-flow.xml page in the editor window.

    tell me more icon In the IDE

    The first task flow, orders-flow.xml, contains two view activities: browseOrders and editOrders, plus a control flow from browseOrders to editOrders and another in the opposite direction. It also contains a task flow return and a control flow from editOrders to commit. The first activity you dropped is the default, as indicated by the green halo or circle. Currently the task flow does not do anything: the warning ! icon on each view activity indicates that the view activity is not bound to any page. Later you will tie a page to each view activity, and add a button to each page that executes the control flow, and navigation.   [ tell me more...]



 

Create a JSF Page

tell me more icon Creating a JSF Page

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





  1. On the diagram, double-click the browseOrders page icon to open the Create JSF Page dialog.
  2. Accept the file name browseOrders.jspx. Under Initial Page Layout and Content, select Quick Start Layout . Then click Bro wse .

    tell me more icon Quick Start Layout

    ADF Faces provides a number of components that you can use to define the overall layout of the page. JDeveloper includes pre-defined page layouts that use these layout components to provide you with a quick and easy way to correctly determine the layout of your pages.  [ tell me more...]



  3. In the Component Gallery, select the One Column category, the second type, and the third layout, One Column Header (Scroll). Then click OK twice to close both dialogs.
  4. In the Structure window, expand f:view then select af:document.
  5. In the Property Inspector, enter Browse Orders in the Title field and press Enter.

    tell me more icon Designing the User Interface

    To create the user interface, you add ADF Faces components to your pages.   [ tell me more...]



  6. Click save all Save All to save your work.

    tell me more icon In the IDE

    The blank page of browseOrders.jspx is displayed in the visual editor.   [ 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 browseOrders.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 the FODModuleDataControl node.
  2. Drag and drop the OrdersView1 node on the blank space below the top facet in the visual editor. (You should see a target rectangle with the name Panel Group Layout - scroll in the visual editor as you drag the node; this means the node being dragged will be inserted inside that target component.)
  3. From the Create context menu, choose Form then choose ADF Re ad-only Form .
  4. In the Edit Form Fields dialog, select all the fields except the following: OrderId, OrderDate, OrderStatusCode, OrderTotal, and CustomerId. Then click delete Delete.
  5. Select I nclude Navigation Controls , and click OK.

    tell me more icon Data Controls Panel and UI Controls

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



  6. In the Component Palette, ADF Faces page, expand the Common Components panel. Click button Button and drop it on the form to the right of the Last button. (You should see a target rectangle with the name Panel Group Layout - horizontal around all the buttons.)
  7. In the Property Inspector, Common section, enter Edit Order as the Text property. Then select goEdit from the Action property dropdown list.
  8. In the Data Controls panel, expand the OrdersView1 node. Drag the OrderItemsView2 node onto the lower part of the page, below the buttons. (You should see a target rectangle with the name Panel Group Layout - scroll.)
  9. From the Create context menu, choose Table then choose ADF Read- only Table .
  10. In the Edit Table Columns dialog, select both Row Selection and S orting .
  11. Select all the columns except the following: LineItemId, Quantity, UnitPrice, and ProductName. Click delete Delete. Then click OK.
  12. With af:table - t1 selected in the Structure window, in the Property Inspector, expand the Style section. In the StyleClass property field, enter AFStretchWidth and press Enter.
  13. Click save all Save All to save your work.

    tell me more icon In the IDE

    When you create the browse page, the page should look like this in the visual editor:  [ 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 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 for the commit action.   [ tell me more...]





  1. In the editor window, click the orders-flow.xml tab to bring the diagram forward.
  2. On the diagram, double-click the editOrders page icon to open the Create JSF Page dialog.
  3. Accept the file name editOrders.jspx. Under Initial Page Layout and Content, select Blan k Page . Then click OK.
  4. In the Structure window, expand f:view then select af:document.
  5. In the Property Inspector, enter Edit Orders in the Title field and press Enter.
  6. From the Data Controls panel, drag the OrdersView1 node onto the visual editor, and drop it inside the Form component.
  7. From the Create context menu, choose Form then choose ADF F orm .
  8. Accept the default values in the Edit Form Fields dialog and click OK.
  9. In the Data Controls panel, expand the Operations node at the bottom of the panel. Drag the Commit node onto the form, and drop it below the last input text field on the form. (You should see the target rectangle with the name Form.)
  10. From the Create context menu, choose ADF Button .

    tell me more icon Commit Operations

    By specifying save for the button's Action property, you call the task flow return activity that commits the transaction to the database.   [ tell me more...]



  11. In the Property Inspector, Common section, enter Save for the Text property. Under Button Action, select save from the Action property dropdown list.
  12. Expand the Behavior section. From the Disabled property dropdown menu, choose Reset to Default.
  13. In the Component Palette, Common Components panel, click button Button and drop it at the bottom of the page next to the Save button.
  14. In the Property Inspector, Common section, enter Return as the Text property. Then select goBrowse from the Action property dropdown list.
  15. Click save all Save All to save your work.

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



 

Create a Create Action

tell me more icon Creating a Create Action

You will configure your application to allow for insertion of new data into the database. First, you will select the Create operation from the Data Controls panel and place it on the browse page as a button.   [ tell me more...]





  1. In the editor window, click the browseOrders.jspx tab to bring the page forward.
  2. In the Data Controls panel, expand the OrdersView1 node, then the Operations folder underneath it. Drag the Create node onto the page, and drop it next to the Edit Order button.
  3. From the Create context menu, choose ADF Button .
  4. In the Property Inspector, Common section, enter New Order for the Text property.
  5. Under the Button Action section, select goEdit from the Action property dropdown list.
  6. In the editor window, click the Orders.xml tab to bring the file forward. (If the file is not already open, double-click Orders in the Model project in the Application Navigator to open it in the overview editor.)
  7. Select the Attributes tab.
  8. Select the OrderTotal attribute. In the Property Inspector, Value section, make sure Literal is selected. Then enter 0 in the Default Value field.

    tell me more icon Default Values

    You can also use the Entity Attribute page of the Attribute Editor to set up default values for required fields. This reduces the number of steps you have to remember when creating a new row. You can either enter literal values (for example, '1', 'Yes', '31-JUL-2010'), or use Groovy expressions for more sophisticated defaulting.  [ tell me more...]



  9. Repeat the previous step for the following attributes, entering the default values shown here:
    ShippingOptionId     1
    FreeShippingFlag     N
    CustomerCollectFlag   N
    GiftwrapFlag        N
    CreatedBy         <yourname>
    LastUpdatedBy     <yourname>
  10. Select the CreationDate attribute. In the Property Inspector, Database section, select created on from the History Column dropdown list.

    tell me more icon History and Refresh Options

    ADF Business Components can help you keep track of common auditing information, including time stamps for when a row was created or edited, the authenticated user who performed that action, and incrementing a version number with each change. You can use the Entity Attribute page of the Attribute Editor to map existing database columns in your table to these intrinsic values that ADF Business Components will populate for you.   [ tell me more...]



  11. Repeat the previous step for the following attributes, selecting the History Column values shown here:
    LastUpdateDate         modified on
    ObjectVersionId         version number
  12. In the attributes table, double-click the OrderDate attribute. Select Expression as the Value Type, and enter adf.currentDate in the Value field . Then click OK.
  13. In the attributes table, double-click the OrderId attribute. From the Type dropdown list, select DBSequence, then click OK.

    tell me more icon In the IDE

    When you add the button to your browse page, the page should look like this in the visual editor:   [ tell me more...]



 

Run the Application

tell me more icon Running the Application

You can compile several nodes in an application in any combination: the entire application, an entire project, or specific files. To start the compiler, you will right-click a node in the Application Navigator and choose either Make or Re build .  [ tell me more...]





  1. In the editor window, click the orders-flow.xml tab to bring the diagram forward.
  2. In the task flow diagram, right-click the browseOrders page icon and choose R un .

    tell me more icon Running and Testing a JSP Page

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



  3. In the running application, use the navigation buttons to change the current row, and note the changing details in the OrderItems table.
  4. Click Edit Order to navigate to the edit page.
  5. In the edit page, change some data and click Save. Then click Return.
  6. Click the New Order button and note the edit page is displayed again, with just the default values populated.
  7. Enter missing details (for example, PENDING for OrderStatusCode, 108 for CustomerId, and 5 for ShipToAddressId). Then click Save.
  8. Stop the application at any time by clicking Terminate Terminate in JDeveloper and choosing the application bound server instance from the dropdown menu.

    tell me more icon In the IDE

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



 

cue cards iconNext step

 

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

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