Developing User Interfaces

 

Developing a User Interface with ADF Faces

Purpose

This tutorial covers developing the user interface for the Fusion Order Demo Application using ADF model and ADF Faces.

Time to Complete

Approximately 90 minutes

Topics

This tutorial covers the following topics:

OverviewScenarioPrerequisites

Build an application using ADF data binding and ADF Faces

Summary

Viewing Screenshots

 Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

 

Overview

In this tutorial, you use ADFm (an implementation of JSR-227), JSF, and ADF Faces components to build the user interface for the Fusion Order Demo Application. You create pages using data controls based on the business services created in the previous lab.

Back to Topic List

 

Scenario

The application is defined as follows: Users will login using their customer id, which will allow them to browse orders and order items that they've created.  Users can select an order item and view further details about it, and edit the order's line item. Additionally, users can create new line items for an order. You will use features of ADF Faces to create and utilize a template and create highly interactive pages, to give users a complete Web 2.0 experience.

Back to Topic List

Prerequisites

Before starting this tutorial, you should have completed the hands-on lab entitled Developing Business Services. If not then you need to download theFusionOrderApp.zip and the Infrastructure.zip applications. In both cases unzip them to a temp directory and then open them in JDeveloper 11g.

Back to Topic List

 

Build Pages using ADF data binding and ADF Faces

Create a page templateAdd Project ResourcesCreate JSF Navigation RulesCreate a login page

Create a page to view orders

Build a page to update order itemsExtend the interactivity of a pageBuild a page to create order items

Back to Topic List

Create a page template

1.

Create a new project to house the user interface portion of the application.

In the Application Navigator, right click the FusionOrderApp workspace and choose New Project...

In the New Gallery, choose Generic Project and click OK.

 

2.

In the Create Project dialog, enter ADF_UI as the project name.

3.

Select the Project Technologies node and select ADF Faces and ADF Page Flow from the list of Available Technologies. Click the Add button to add ADF Faces (and its dependent technologies) to the project. This sets the project up for developing a user interface with the ADF Controller and ADF Faces components.

Click Finish.

 

4.

ADF Faces 11 provides an extension of JSF that includes page templates, which are very useful for standardizing the way that pages look, but are not provided by the JSF specification. In this series of steps, you create a page template.

In the Application Navigator, right click the ADF_UI project and chooseNew...

In the Web Tier category, select JSF and in the Items list, select JSF Page Template.

Click OK.

 

5.

Name the file ordersTemplate.jspx and in the Facet Definitions tab, clickAdd to create a new definition. Name the facet mainArea and enter a Description of Main editable facet. This is the only part of the page that developers using this template will be allowed to edit.

Click OK to create the page and open it in the visual editor.

 

6.

Now create a layout for the page. Ensure the Component Palette is displayed and the ADF Faces collection is selected in the dropdown list. Expand theLayout accordion and drag the Panel Stretch Layout component onto the JSF visual editor.

This adds an empty layout component to the page that contains several defined areas, or facets, that can be used to lay out the page.

 

7.

Open the Property Inspector at the bottom of JDeveloper. If you don't see it, choose View > Property Inspector from the toolbar. The Property Inspector displays the name of the currently selected component within the tab. Since we are working with layout components, several of which are non-visual, it is helpful to select the component that you want to edit using the structure window, which displays a hierarchical listing of all components on the page.

In the structure window, select af:panelStretchLayout. In the Property Inspector, click the Style and Theme category to display the style properties for this component. Select the Background sub tab and in theColor list, choose a color for the background of the page. This will automatically update the InlineStyle property for the component as well.

 

8.

Next define a size for the layout component. In the Property Inspector, click the Box subtab in the Style category. Set the Width property to 100 Percentand the Height property to 600 Pixel.

 

9.

Next add some space around the center area. Expand the Panel Stretch Layout facets node in the structure window. In the Component Palette, drag a Spacer component to the bottom facet. Repeat this step for the start andend facets.

 

10.

Now define the content for the page header. In the structure window, select the top facet. Drag a Panel Group Layout from the component palette onto the facet. Drag a Spacer component onto the panelGroupLayout in the structure window. When you drag a component within another component, a box is shown in the structure window to indicate where the component will be placed.

 

11.

The first panelGroupLayout component groups its child components vertically. Now add another Panel Group Layout component, beneath the spacer component in the structure window. A black arrow will indicate where the component will be placed.

 

12.

In the Common tab, use the Property Inspector to set this panelGroupLayout component's Layout property to horizontal. The Layout property is located in the Appearance category. Set the Box Width property (in the Style and Theme category) to 100 Percent.

 

13.

Now add an image to the header. In the Component Palette, expand the Common Components accordion. Drag an Image component onto the panelGroupLayout - horizontal component in the structure window.

In the resulting dialog, click the arrow next to Source and choose Edit. Navigate to the location where you extracted the Infrastructure.zip files, e.g., c:\oracleFusion\tutorial\Infrastructure, and choose oracle.gif. Click OK.

Click Yes when you are prompted to copy the image to the Document root, and click Save to save the image in the public_html directory.

 

14.

Next, add some text to the header. Add a Panel Group Layout component beneath the image component. Set the Halign property to center.

Add an Output Text component from the Common Components accordion in the Component Palette inside the panelGroupLayout. Set the value property toWelcome to Fusion Order Entry. In the Style category of the Property Inspector, click the Text subtab. Set the Color, Size and Bold properties to your liking. The visual editor updates automatically as you are changing properties, so you can see what effect your changes have on the template.

 

15.

Now define the properties for the editable center facet. Select the centerfacet in the structure window. Drop a Panel Stretch Layout component into the center facet. Set the Background Color property to White.

From the Common Components category in the Component Palette, drop a Facet Ref onto the center facet that is nested within the center facet of the second panelStretchLayout component. Choose mainArea from the Insert Facet Ref dialog and click OK. This allows the center facet of the panelStretchLayout component to be editable when pages based on this template are created.

Click Save All to save your work.

Back to Topic

Add Project Resources

1.

In this series of steps you create a shared resource library and add it to the ADF_UI project.

In the Application Navigator, select the dropdown next to the FusionOrderApp workspace and choose Infrastructure.

 

2.

The UIResources project contains a servlet that you will use to display images in the JSF pages of the FusionOrderApp application. You could just copy this servlet into the ADF_UI project, but to demonstrate how you might create shared resources (like helper classes, images, and templates like the one you just created), create an ADF library.

In the Application Navigator, right click UIResources and choose New...

In the General category, select Deployment Profiles. Select ADF Library JAR File.

Click OK.

3.

Name the profile UIResources and click OK.

Click OK to accept the profile defaults and click OK again to exit the Project Properties dialog.

 

4.

Now deploy the JAR file. Right click the UIResources project and choose Deploy > UIResources > to ADF Library JAR.

Notice that the Deployment - Log shows that the JAR file is deployed to the deploy directory inside the UIResources project, for example,c:\oracleFusion\tutorial\Infrastructure\UIResources\deploy\UIResources.jar

 

5.

In the Application Navigator, select the dropdown next to the Infrastructure workspace and choose FusionOrderApp.

From the View menu, choose Resource Palette.

 

6.

In the Resource Palette, click the folder icon to create a new resource. ChooseNew Connection > File System

 

7.

Enter UIResources as the Connection Name. Click Browse to browse for the directory containing the UIResources.jar file that you deployed, i.e.,c:\oracleFusion\tutorial\Infrastructure\UIResources\deploy. Click Test Connection.

When you see the Success! message, click OK.

 

8.

Now add the library to your project. In the Application Navigator, click theADF_UI project to select it. In the Resource Palette, expand File System and UIResources. Right click UIResources.jar and choose Add to Project.

Click Add Library when you are prompted to add the library to the project.

Back to Topic

Create JSF Navigation Rules

1.

Now define the navigation through the pages of the application. In the Application Navigator, double click adfc-config.xml to open the configuration file in the editor. The default view of this file is the visualDiagram, but you could also choose to define the configuration of the JSF application using the declarative Overview view, or even the Source (using the tabs at the bottom of the editor). In this case, use the Diagram.

Ensure that the Component Palette is displayed in JDeveloper (if it isn't, choose View > Component Palette from the toolbar). Ensure that ADF Task Flow is selected in the Component Palette dropdown. These ADF Task Flow components are an extension of the JSF specification that allow you to create method calls and defined transaction scopes for a series of JSF pages (called views), as well as the navigation between those views. In this case, the application logic will be contained within each view, so just build the navigation.

Drag View from the component palette onto the visual editor.

 

2.

Click on the resulting title, view1, and type login. This renames the reference to the file. You aren't actually creating the file itself, but rather a reference to it from this configuration. The configuration defines the "C", or Controller, part of MVC, where the navigation from view to view is not hard coded in pages themselves, but instead stored in metadata.

 

3.

In the same way, add two more view references to the editor, namedviewOrders and editLineItems.

 

4.

Now define the flow between the pages. Select Control Flow Case from the component palette. Click on the login image and then click on viewOrders. The arrow represents a simple navigation case identified by the outcome "*".

 

5.

Next, rename the outcome identifying the control flow case.

In the visual editor, click the * label and wait a moment for the blue highlighting to appear. Enter the text login. This control flow case will allow users to navigate from the login page to the orders page, when an action on the login page refers to the case "login".

 

6.

Notice that the control flow case is drawn in a straight line. To allow for drawing navigation cases with bent joints, click the second green line icon from the visual editor's toolbar, polyline.

This allows you to create joints in lines by clicking anywhere on the diagram, and makes the diagram more readable. If you forget to create a joint in a line, you can create one by pressing the Shift key while clicking on the location of the line where you want to create the joint.

Using the procedures outlined in steps 4 and 5, create the following navigation rules.

FromToOutcome/viewOrders.jspx/editLineItems.jspxcreate/viewOrders.jspx/editLineItems.jspx

edit

/editLineItems.jspx/viewOrders.jspxreturn

Click Save All to save your work.

Back to Topic

 

Create a login page

1.

In this series of steps, you create the login page of the application, using the template that you created. From the adfc-config.xml diagram, double-clicklogin to create the page.

In the Create JSF Page dialog, ensure the name is login.jspx and accept the default directory location. In the Use Page Template dropdown, chooseordersTemplate.

Click OK to create the page and open the visual editor.

 

2.

The visual editor displays the uneditable areas, greyed out, and the mainArea facet that is editable. You can add both databound and non-databound components to a page. In this case, you will build a type of login form, to allow the user to login with their customer id. To layout the form, drag thePanel Group Layout component onto the JSF visual editor.

 

3.

Select the Panel Group Layout in the Structure window and in the Property Inspector, choose the Common tab. Set the Halign property to center and theLayout property to vertical.

 

4.

The next step is to add databound components.

For this login page, the user will enter an id that will be used to populate the value of the custId bind variable that you created in the previous lab. Because you are using ADF, all of the infrastructure for querying, binding values, and executing methods is created for you, and you simply drag and drop from the data control palette to create UI components and bind them to the Application Module's data model.

In the Application Navigator, expand Data Controls beneath the project listing. Notice the data model is exactly the same as you saw in the previous lab where you modified the FusionOrderApp data model.

Expand OrdersView1 and notice the view link related OrderItemsView2 instance nested beneath it. Expand OrderItemsView2, and you see the OrderItemProductDetail view object instance that you created in the previous lab. Note that at each view object instance's root level, there are also Operations and Named Criteria - these are methods and named queries that are automatically created for you by the ADF framework for creating, finding, and deleting rows from the various instances.

 

5.

Expand OrdersView1 and the Operations folder at the same level of the hierarchy. Expand ExecuteWithParams, Parameters, and custId. This is the reference to the bind variable you created in the OrdersView query definition.

 

6.

Drag ExecuteWithParams onto the visual editor, within the Panel Group Layout component. To ensure you are dropping the component within the Panel Group Layout, verify that the panelGroupLayout component is highlighted in the structure window just before you release the mouse button.

 

7.

A popup appears, so that you can define what type of UI elements to bind this data control to. Choose Parameters > ADF Parameter Form...

In the Edit Form Fields dialog, set the label value to Enter Customer Id:and click OK.

 

8.

Next, modify the Execute With Params button. Select the button and in the property inspector, open the Common tab. Set the Text property to Login.

Notice that the ActionListener property is set to execute the ExecuteWithParams method from the bindings element. The bindings element is defined in the metadata for the page. This metadata includes pointers to the location of the data control services.

In the case of this form, we want to execute the query using the custId bind variable value, and we also want to navigate to the next page in the flow. To do this, select the dropdown arrow next to the Action property and choose thelogin navigation case that you defined in the ADF configuration file.

Click Save All to save your work.

 

Back to Topic

 

Create a page to view orders

1.

At the top of the editor, click the adfc-config.xml tab. If you don't see it, click the down arrow on the top right of the editor and choose adfc-config.xml. Since we're now switching to a different page, it makes sense to close some of the open tabs in the editor. Right click the adfc-config.xml tab and choose Close Others.

 

2.

In the ADF flow diagram, double-click viewOrders to create the page.

In the Create JSF Page dialog, ensure the name is viewOrders.jspx and theordersTemplate is selected.

Click OK to create the page and open it in the editor.

 

3.

For this page, you'll display one record of Orders at a time at the top of the page in a form layout, and beneath that, a table of Line Items for each Order in a table layout. First create a Panel Splitter component to contain the top and bottom components.

Drag a Panel Splitter component from the ADF Faces Layout components onto the mainArea facet in the visual editor.

Set the Orientation property to vertical and the Box width property to 100 Percent.

 

4.

To display Orders and Order Items on this page, expand the OrdersView1instance and select the OrderItemsView2 node in the Data Controls Palette.

It is possible to create a master form and detail table in one drag and drop motion from the data control palette, but you'll usually want more control than this all-in-one motion provides. Still, for practice, drag theOrderItemsView2 node onto the visual editor, within the first facet of the panelSplitter component.

Choose Master-Details > ADF Master Form, Detail Table from the context menu. This creates the form and table for the Orders and Order Items views respectively, and includes all attributes.

 

5.

You could use the structure window to delete the attributes that you don't want to include. However, since this action was just for practice, back out the change. Click anywhere in the visual editor and press Ctrl + Z to undo the addition of the components.

Click Yes to confirm the undo action.

 

6.

This time, drag only the OrdersView1 instance onto the visual editor, within the first facet of the panelSplitter. Choose Forms > ADF Read-only Form... from the context menu.

 

7.

In the Edit Form Fields dialog, Shift+Click to select and click the delete icon for all EXCEPT the following components:

OrderId
OrderDate
OrderShippedDate
OrderStatusCode
OrderTotal
CustomerId

Select Include Navigation Controls and click OK.

8.

The bottom facet of the splitter will display a table of line item details for the order and some buttons to add or edit the line item. DragOrderItemsView2 from the data control palette onto the visual editor, within the second panelSplitter facet. Choose Tables > ADF Read-only Table... from the context menu.

 

9.

In the Edit Table Columns dialog, delete all attributes EXCEPT the following:

OrderId
LineItemId
ProductId
Quantity
UnitPrice
LineItemTotal

Enable Row Selection and Sorting. ADF implements these features for collection components (such as this row set of Order Item data) automatically.

Click OK.

 

10.

Ensure the table component is selected and in the property inspector, click the Style category. Click the Box subtab and set the width to 100 Percent.

 

11.

Click the Common category and set the ColumnSelection property to single. Set the Id property to orderitems.

 

12.

Now add some formatting to the view. In the Structure window, right click thepanelFormLayout component within the first Panel Splitter facet and chooseSurround With...

 

13.

In the Surround With dialog, choose Panel Group Layout from the list of ADF Faces components.

Click OK.

 

14.

In the Property Inspector, set the Halign property to center and the Layoutproperty to horizontal.

 

15.

Repeat steps 12-14 for the table component within the second Panel Splitter facet. The structure should now look like this:

Click Save All to Save your work.

 

16.

Now test the application you've built thus far.

In the Application Navigator, right click login.jspx and choose Run. A Java EE server is provided in JDeveloper so that you don't have to deploy the application to test it. If you do not have Mozilla Firefox 2.0 or Internet Explorer 7 or higher, you will see an error message and you will need to install one of these supported browsers.

When the login page appears in your browser, notice that the full template is used, and the label text that you created for the custId attribute is used in the UI. Enter 108 as the customer id and click Login.

Remember that the login button executes the query for the Orders view object, passing in the custId argument. The viewOrders page is displayed and because of the coordination of the Orders and OrderItems view objects via a view link, scrolling through the order records also updates the table of order items.

Click the navigation buttons to scroll through the records. Note that you can sort the data in the columns of the table (hover over the column header to enable the sorting icons). You can also reorder the columns of the table by dragging the column headers. Additonally, note that the line item total attribute that you created in the previous lab is evaluating a value based on the groovy expression you entered.

Close the browser when you are finished.

 

17.

Stop the running the Web Logic Server process to save memory. In the JDeveloper IDE, select the Run > Terminate > Default Server .

 

18.

Now add some chrome to the Order Items table. In the Structure window, right click table - orderitems and choose Surround With...

 

19.

In the Surround With dialog, select Panel Collection from the list of ADF Faces components. The Panel Collection component provides a menu and toolbar facet as well as additional features for changing the layout of table components at runtime.

Click OK.

 

20.

In the Structure window, expand panelCollection and Panel Collection facets.
Right click toolbar and choose Insert Inside toolbar > Toolbar. This method of adding a component via the 'Insert inside' context menu is often favorable over adding components directly from the Component Palette, because the context menu displays a filtered list of sensible components to add.

 

21.

In the Structure window, right click af:toolbar and choose Insert Inside af:toolbar > Toolbar Button.

 

22.

ADF Faces has built-in support for exporting table data to the .xls format. In the next few steps, you implement that functionality for the Order Items table. 
In the Property Inspector, change the toolbar button's Text property toExport To Excel.

 

23.

From the Component Palette, drag the Export Collection Action Listenerfrom the Operations accordion onto the Export to Excel toolbar button.

 

24.

In the Insert Export Collection Action Listener dialog, set the ExportedIdproperty to orderitems (this is the id you specified for the table in an earlier step).
Set the Type property to excelHTML.

Click Finish.

Click Save All to save your work.

 

25.

Now test the new functionality.

In the Application Navigator, right click login.jspx and choose Run. 
When the login page appears in your browser, enter 108 as the customer id and click Login. 
In the ViewOrders page, notice the additional menu items for Freezing selected columns and detaching the order items table. Click the Export to Excel button to export the data to an .xls format that you can then open in Excel.

Close the browser and stop the Running WLS process when you are finished.

Back to Topic

Create a page to create and update order items

1.

Next create the page to create and update order items. Open adfc-config.xml in the editor. Double click editLineItems. Ensure the name is editLineItems.jspx and theordersTemplate is selected.

Click OK.

 

2.

This page will contain a larger amount of data than might fit in one screen. To enable scrolling within the center of the page, drag a Panel Group Layout component within the mainArea facet. Set the Layout property to scroll.

 

3.

Next add a form for editing order items. From the data control palette, dragOrderItemsView2 onto the visual editor, within the panelGroupLayout component. ChooseForms > ADF Form... in the context menu.

 

4.

In the Edit Form Fields dialog, delete all of the attributes except:

OrderId
LineItemId
ProductId
Quantity
UnitPrice
LineItemTotal

Select Include Submit Button.

Click OK.

 

5.

There are several changes to make to this form to make it easier for users to edit line item information. The first is to disable the order id, line item id, and line item total fields so that they are not editable, because this data will either be calculated or otherwise dependent upon the currently selected order. This can be done several ways. One way is to modify the attribute's properties on the data model layer. This will enforce the non-updatable property for all UI implementations that utilize the data model.

To do this, expand the ADFBC_Model project in the Application Navigator and expand the adfbc_model.queries node. Double click OrderItemsView to open the view object editor. Click the Attributes node and double click LineItemId to open the attribute editor.

In the Edit Attribute dialog, click the View Attribute node and change the Updatable property to Never.

Click OK.

 

6.

Another way to disable a field is to make the change for this page only, instead of enforcing it from the data model.

In the editLineItems.jspx page, select the OrderId component in the visual editor or structure window. In the Behavior tab of the property inspector, set the ReadOnly property to true.

 

7.

Yet another way to modify the way that attributes are displayed on a page is to use different types of components. In this step you convert an inputText component to an outputText component. In the structure window, right click the af:inputText component for LineItemTotal (af:inputText - #bindings.LineItemTotal...) and choose Convert.

 

8.

In the Convert dialog, select ADF Faces from the dropdown and choose Output Text.

Click OK to convert the component, and click OK again to confirm that some of the properties will be removed.

Note that you could also have selected a different type of component to use for this attribute in the Edit Form Fields dialog that you saw when you created the form. Regardless, choosing the best way to modify attributes depends upon their level of reusability - whether that's the reusability of the data control, the component, or the page on which the component resides.

 

9.

The editor will display an error because the f:validator and af:convertNumber components are not valid for an ouputText component. Ctrl + click in the structure window to select f:validator and af:convertNumber within the LineItemTotal outputText. Right click and choose Delete to delete the unnecessary components.

 

10.

The next improvement to the form is to enable a dropdown list for the ProductId component. Again, you could make this change several different ways. In this case, modify the data model to enable a list of values for the ProductId attribute. In the Application Navigator, double click the OrderItemsView view object to open the editor.

Click the View Accessors node and then the green plus sign in the upper right hand corner.

In the View Accessors dialog, expand adfbc_model.queries and shuttleProductsBaseView to the right. This enables the list for the ProductId to access the ProductsBaseView to provide detail attributes for the list of values.

Click OK.

 

11.

Back in the OrderItemsView, select the Attributes tab, and then the ProductIdattribute.

Below the attribute list, find the List of Values:ProductId section, press the green plus sign to add a list for the Product Id.

Set the List Data Source to ProductBaseView1 (the new View Accessor) and the List Attrribute to ProductId.

In the List Return Values pane, click the green plus to add another return value. Select UnitPrice in the View Attribute list and in the List Attribute list, chooseListPrice. This will return the Product's ListPrice to the OrderItemsView UnitPrice attribute.

Click the UI Hints tab.

 

12.

Choose Combo Box as the Default List Type. To define the attribute that will be displayed in the list, select ProductName in the available list on the left and shuttle it to the Selected area.

In the Choice List Options, select the Include "No Selection" Item: checkbox.

Click OK.

Click Save All to save your work.

 

13.

Return to the editLineItems.jspx page. Select the ProductId attribute in either the structure or visual editor and delete it. In the Data Control Palette, expand theOrdersView1 and OrderItemsView2 controls and drag ProductId onto the page, just beneath the LineItemId component. Ensure you verify that the component is being added to the correct place by viewing the structure window just before dropping the component.

Select Single Selections > ADF Select One Choice from the context menu.

 

14.

As you've seen, the labels for components are provided by the binding layer, which reads from the control hints for an attribute or entity. You might also create labels that are specific to a page or a particular usage of a binding. In that case you might create a resource bundle for the UI project that contains message strings. However, to simply demonstrate that you can override label properties, select the ProductId list component and in the property inspector, change the Label property to Product.

 

15.

Next, add components to display the image for the product. In the Component Palette, expand the Common Components accordion of the ADF Faces listing. Drag a showDetailcomponent onto the visual editor, just beneath the ProductId dropdown.

Set the DisclosedText property of the showDetail component to Product Details.

 

16.

Drag a Panel Group Layout component within the showDetail component and set the Layout property to horizontal.

Drag an Image component to the visual editor, within the panelGroupLayout component.

In the Common Properties dialog, enter Product Image as the ShortDesc property and enter the following in the Source

/imageservlet?detail=#{bindings.ProductId}

This url accesses the servlet that is included in the UIResources ADF library that you added to this project earlier. The servlet displays the image for a provided Product Id. The ProductId binding was created when you created the ProductId list component.

Click OK.

 

17.

Now add the servlet mapping to the web application. 
In the Application Navigator, expand ADF_UI, Web Content, and WEB-INF.
Right click web.xml and choose Properties...

 

18.

In the Web Application Deployment Descriptor dialog, select the Servlets/JSPs node and click New...
Enter ImageServlet for the Servlet Name and enter uiresources.ImageServlet as the Servlet Class.

Click OK to exit the Servlet Mapping dialog, and click OK again to exit the Web Application Deployment Descriptor dialog.

19.

Still in the Web Application Deployment Descriptor dialog, select the Servlet Mappings node and click Add...
Enter /imageservlet as the URL Pattern (this is the pattern you referenced in step 16), and enter ImageServlet as the Servlet Name.

Click OK.

 

20.

Next add some additional product details next to the image. In the data control palette, expand OrdersView1, OrderItemsView2, and OrderItemProductDetail. (If you don't see the OrderItemProductDetail node, right click within the data control palette and choose Refresh). Drag ProductStatus onto the visual editor, just in front of the image, but still within the panelGroupLayout. Choose Texts > ADF Output Text w/Label in the context menu.

 

21.

Drag a Spacer component from the Layout accordion of the Component Palette onto the visual editor, between the ProductStatus and Image components.

Change the width property of the spacer to 50.

 

22.

Now enable the viewOrders page to call the editLineItems page. Open viewOrders.jspxin the visual editor. Click the Export To Excel toolbar button to bring it to focus in the Structure window. In the Structure window, right click af:toolbar and chooseInsert Inside af:toolbar > Toolbar Button.

 

23.

Change the Text property of the button to Edit and the Action property to the defined navigation case named edit.

 

24.

Now add functionality to the edit form button to commit the change and return to the viewOrders page. Again, the framework automatically provides method bindings for this action.

Open editLineItems.jspx in the visual editor.

In the Data Control Palette, expand the Operations node at the highest level of the hierarchy. Drag the Commit operation onto the Submit button at the bottom of the form.

Click OK to accept the property changes.

 

25.

The Commit operation executes at the Application Module level, and by default, is only enabled if the transaction has been modified. At the time that the edit function is called, none of the attribute values have changed. To enable the operation in the case that the user makes changes in the editLineItems page, open the Behavior tab in the Property Inspector for the Commit button.

Delete the contents of the Disabled property to default the disabled property to false.

Change the Action property of the Commit button to the defined navigation case,return.

Click Save All to save your work.

 

26.

Now run the application to test your work. In the Application Navigator, right clicklogin.jspx and choose Run. Login as customer 108 and click on a row in the order items table to select it. Click Edit to edit the line item - the product image is displayed. Notice that changing the product in the dropdown doesn't update the image or other product details. We'll implement that in the next set of steps.

Enter 20 in the Quantity field and click Commit. You will see the error message that you created in the previous lab. Enter a valid quantity, update the unit price, and click Commit again. This returns to the view page where you'll see the ProductId, Quantity, UnitPrice, and LineItemTotal updated accordingly.

When you are finished testing, close the browser and stop the running processes. (Run --> Terminate)

Back to Topic

 

Extend the interactivity of a page

1.

To increase the level of interactivity on the editLineItems page, add functionality to update the page when a new product is selected from the dropdown.

First define an id for the product dropdown. Select the Product dropdown in the editLineItems.jspx visual editor and in the property inspector, enterprodList as the Id.

In the Behavior tab, set the AutoSubmit property to true. This enables the enclosing form to be submitted when the value of the product dropdown changes.

 

2.

Now specify that other components on the page should "listen" for this change using the ADF Faces feature called partial triggers.

Select the Panel Label and Message component for the ProductStatus in the visual editor and in the Property Inspector, click the Behavior tab. Set thePartialTriggers property to prodList.

 

3.

Repeat step 2 for the Image and Unit Price components.

 

4.

Now ensure the LineItemTotal is updated when the quantity or unit price fields are changed.

Set the id property for the Quantity inputText component to quant and the Behavior - AutoSubmit property to true.

Set the id property for the UnitPrice inputText component to price and the Behavior AutoSubmit property to true.

Set the LineItemTotal outputText component's PartialTriggers property to both of these ids, separated by a space: price quant

 

5.

In the Application Navigator, right click editLineItems.jspx and chooseRebuild.

 

6.

Run the application to test the new functionality. In the Application Navigator, right click login.jspx and choose Run. Login as customer 108 and click on a row in the table to select it. Click Edit to edit the line item. Notice that changing the product in the dropdown now updates the image, and changing the quantity or unit price updates the line item total.

When you are finished testing, close the browser and stop the running Default WLS processes.

Back to Topic

Build a page to create order items

1.

The edit form that you've created in editLineItems.jspx can be reused as an insert form if the create operation is called before the page is displayed. The ADF Framework provides the create operation.

Open viewOrders.jspx in the visual editor.

On the Data Control Palette, expand OrdersView1, OrderItemsView2, andOperations. Drag the CreateInsert onto the viewOrders.jspx page, just in front of the Edit button.

Choose Operations > ADF Toolbar Button from the context menu.

Set the button's Action property to create to call the navigation case by that name.

 

2.

To enable users to easily create new line items, apply default values to the attributes that are required, but do not require user data. In the Application Navigator, expand adfbc_model.entities in the ADFBC_Model project and double click OrderItems to open the entity editor.

Click the Attributes tab and double click CreatedBy to open the attribute editor. In the Entity Attribute node, select History Column and choosecreated by as the type of history column that is used. This will set the column's value to the security implementation's user value, or the anonymous user if one is not present.

Click OK.

 

3.

Repeat step 2 for the following attributes, supplying the History Column value as specified:

AttributeHistory ColumnCreationDatecreated onLastUpdatedBymodified byLastUpdateDatemodified onObjectVersionIdversion number

 

4.

Modify the UnitPrice attribute so that the value defaults to a literal value of 0.

Click OK.

 

5.

Modify the LineItemId attribute's data type to be DBSequence. This will utilize an existing database trigger in the schema to assign id numbers to the new line item.

Click OK.

Click Save All to save your work.

 

6.

Run the application to test the new functionality. In the Application Navigator, right click login.jspx and choose Run. Login as customer 108.Click Create to create a new line item. The negative number in the LineItemId field comes from the framework's implementation of using the database sequence - a negative number is used until the record is committed and the next value from the sequence is populated just before commit. Enter a valid quantity and click Commit.

 

7.

To see the database change, choose View > Database Navigator from the toolbar in JDeveloper. Expand FusionOrderApp, FOD, and Tables. Double click ORDER_ITEMS to open the database viewer in JDeveloper.

Click the Data tab at the bottom of the editor and scroll down to find your new records.

Back to Topic

 

Summary

You have used ADF data binding, JSF, and ADF Faces to build the user interface for the Fusion Order sample. You have implemented log in, master-detail browsing, editing, and creation functionality using services based on ADF Business Components. You have used Web 2.0 features included with ADF Faces to create a robust, visually attractive user interface. This concludes the hands-on in this series.

Back to Topic List