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.
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.
Before starting this tutorial, you should have completed the
hands-on lab entitled Developing Business Services. If
not then you need to download the FusionOrderApp.zip
and the Infrastructure.zip
applications. In both cases unzip them to a temp directory and then open them
in JDeveloper 11g.
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 choose New...
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, click Add to create a new definition.
Name the facet mainArea and enter a Description of
Maineditable 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 the Layout 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 the Color
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 Percent and
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 and end
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 BoxWidth
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 to Welcome 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
center facet 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.
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.
Choose New 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 the ADF_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.
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 visual Diagram, 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, named
viewOrders 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.
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-click login 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, choose ordersTemplate.
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 the Panel 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 the
Layout 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 the login navigation case that you defined
in the ADF configuration file.
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 the ordersTemplate 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 OrdersView1
instance 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 the OrderItemsView2 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:
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.
Drag OrderItemsView2 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:
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 100Percent.
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 the panelFormLayout component within the first
Panel Splitter facet and choose Surround 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 Layout property
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 to Export To Excel.
23.
From the Component Palette, drag the Export Collection Action
Listener from the Operations accordion onto the Export to Excel
toolbar button.
24.
In the Insert Export Collection Action Listener dialog, set the ExportedId
property 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.
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 the ordersTemplate
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, drag OrderItemsView2 onto the visual editor,
within the panelGroupLayout component. Choose Forms > ADF
Form... in the context menu.
4.
In the Edit Form Fields dialog, delete all of the attributes except:
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 shuttle ProductsBaseView 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 ProductId attribute.
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, choose ListPrice.
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 the
OrdersView1 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 showDetail component
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.jspx in 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 choose Insert 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 click login.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)
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, enter prodList 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 the PartialTriggers 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 choose Rebuild.
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.
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,
and Operations. 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 choose created 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:
Attribute
History Column
CreationDate
created on
LastUpdatedBy
modified by
LastUpdateDate
modified on
ObjectVersionId
version 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.
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.
Bookmark
