-
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
232
Practices for Lesson 17
In this set of practices, you begin to implement reusability in
the application.
When there are several pages that are used in succession, it is
a good practice to make sure the layout of each page is exactly the
same. For example, you want navigation buttons to appear in exactly
the same location on pages that are used in series, like the
CheckoutFlow. To make the layout cleaner and reusable, you create
and apply a template to the pages.
The FODShoppingDashboard page is meant to be the main page of
the application. Other applications that will be developed for this
company should use a similar look, so you create a page template
that imposes a certain layout. You then create the
FODShoppingDashboard page, using this page template.
The bounded task flows that you have created so far have used
pages, not page fragments. This enabled you to test them
independently. However, now you incorporate these task flows as
regions on the main FODShoppingDashboard page. To do so, you first
must convert the bounded task flows to use page fragments.
Modified By : Amr Abdo
-
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
233
Practice 17-1: Converting Bounded Task Flows to Use Page
Fragments In this practice, you convert all of your bounded task
flows to use page fragments rather than pages. After you have done
this, you no longer can run the task flows independently. You would
need to either call them from an unbounded task flow or use them as
regions on a page.
1) Convert CheckoutFlow to use page fragments.
a) Open the CheckoutFlow task flow in the editor.b) Right-click
the diagram and select Convert To Task Flow With Page
Fragments.c) In the Convert To Task Flow With Page Fragments
dialog box, just click OK.
You do not need to keep a copy of any of the pages.
d) In the warning dialog box, click Yes to continue. You should
see that the use-page-fragments property of the task flow is now
set to true.
You should also see that the .jspx files for the checkout pages
have been converted to .jsff files.
2) Repeat these steps for all of the task flows. Notice that all
of the .jspx files except for ProductCAtegory.jspx are now
converted to .jsff (page fragment) files.
a) Select one of the .jsff files in the Application Navigator.b)
Observe in the Structure window that the files no longer contain
the f:view,
af:document, and af:messages tags.c) Save your work.
-
Practice 17-1: Converting Bounded Task Flows to Use Page
Fragments (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
234
3) There is only one full page left, which is
ProductCategory.jspx. This is a pageon the unbounded task flow.
Extract this page into its own bounded task flow named
ProductCategoryFlow, and then convert it to use page fragments as
well.
a) Open adfc-config.xml.b) Right-click the ProductCategory view
activity and select Extract Task Flow.c) In the Extract Bounded
Task Flow dialog box:
i) Enter ProductCategoryFlow as the File Name.ii) Append
\oracle\storefront\ui\flow to the Directory path.iii) Click OK.
d) The task flow opens in the editor. Mark the ProductCategory
view activity as thedefault activity.
e) Convert ProductCategoryFlow to use page fragments as you did
the other taskflows.
f) When you extract a task flow, JDeveloper creates a task flow
call on the original task flow. Delete the task flow call activity
from adfc-config.xml.
-
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
235
Practice 17-2: Creating a Page Template and Applying It to
Existing Pages In this practice, you create a page template and
apply it to the pages in the CheckoutFlow. You previously added the
train components and arranged them on each of the checkout pages.
This duplication of effort isnt that bad if there are only a few
pages. However, if there are many pages, this duplication becomes a
little tedious and possibly error-prone.
To avoid this unnecessary duplication, you now create a template
that manages the train components for each of the pages. The
template also contains a Panel Group Layout and a Panel Header to
provide additional layout structure for the checkout pages.
1) Create a new page template named CheckoutPageTemplate, with a
contentfacet and a required title attribute.
a) In the Application Navigator, right-click the directory where
you have been filingpages and select New.
b) In the New Gallery, select Web Tier > JSF/Facelets >
ADF Page Template.c) Set the following properties for the new page
template, and then click OK:
File Name CheckoutPageTemplate.jspx
Directory \public_html\oracle\storefront\ui\pages\templates
Page Template Name
CheckoutPageTemplate
Facet Definitions
content (click Add to add the facet)
Attributes title java.lang.String required (click Add to add the
attribute)
2) Add to the page template, the layout and train components
that you want to use in allthe checkout pages.
a) Add a Panel Group Layout on the af:pageTemplateDef.
i) Set its Layout property to scroll)
ii) Drag the panel group layout above the af:xmlContent in the
Structure window.
b) Drag a Train to the af:panelGroupLayout.
-
Practice 17-2: Creating a Page Template and Applying It to
Existing Pages (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
236
c) Set the Value property of af:train
to#{controllerContext.currentViewPort.taskFlowContext.trainModel}
(You can use Expression Builder and select ADF Controller
Objects >controllerContext > currentViewPort >
taskFlowContext > trainModel toinsert into the expression.)
d) Drop a Panel Header on the af:panelGroupLayout.
i) Set the text to #{attrs.title}. (You can use Expression
Builder and select Scoped Variables > attrs > title to insert
into the expression, then delete the original value.)
ii) Set the Width to 100% on the Box tab of the Style panel in
the PropertyInspector.
e) Add a Toolbar to the af:panelHeader toolbar facet.
f) Add a Button to the af:toolbar inside the af:panelHeader
toolbar facet.
i) Set the Text to Cancel (be sure to Select it use the resource
bundle).
ii) Set the Action to cancel.iii) Set the Immediate property to
true.
g) Add a Train Button Bar to the af:toolbar inside the
af:panelHeadertoolbar facet and set the Value property
to#{controllerContext.currentViewPort.taskFlowContext.trainModel}
h) Add another Button to the af:toolbar inside the
af:panelHeader toolbarfacet.
i) Set Text to Submit.
ii) Set Action to submit.
iii) Set the disabled property
to#{controllerContext.currentViewPort.taskFlowContext.
trainModel.next != null}
Note: If you use the Expression Builder, it displays the code as
if it were an error. It has context for the trainModel but doesnt
understand the .next in the expression. You can ignore the
error.
3) Add a Facet Reference named content to the template.
a) Drag the Facet Definition to the af:panelHeader.
b) Set the FacetName to content.
4) Save your work. The page template should look similar to the
following
-
Practice 17-2: Creating a Page Template and Applying It to
Existing Pages (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
237
and the Structure window should look similar to the
following:
5) Apply the template to the checkout pages. (You cant use the
IDE to apply a templateto an existing page. However, you can add
the template-related code to an existingpage.)
a) Open CheckoutShipping.jsff.b) Click the Source tab.c) In the
Structure window, select af:train and af:trainButtonBar. These
components are no longer needed in the page fragment because
they are containedin the page template.
d) Back in the Source editor, replace the highlighted code with
the following (you can copy the code from PageTemplate.txt in your
files directory):
-
Practice 17-2: Creating a Page Template and Applying It to
Existing Pages (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
238
e) Click the Design tab.
f) Notice that in the Structure window there is now an
af:pageTemplate, anf:attribute and a content facet. Set the Value
property of thef:attribute to Shipping, using the resource
bundle.
6) The template contains the outermost Panel Group Layout (which
holds the train,buttons and the Panel Header). Therefore, when you
apply the template to your page,you need to move the content to the
template content facet.
a) Using the Structure window, drag the af:panelHeader
ShippingAddress to the content facet.
7) Apply the template to CheckoutPayment.
a) Open CheckoutPayment.jsff.b) Repeat the steps above, changing
the value of the title attribute to Billing. (The
content area of this page is in the panelGroupLayout.)
8) Apply the template to CheckoutConfirm.
a) Open CheckoutConfirm.jsff.
b) Repeat the steps above, changing the value of the title
attribute toConfirmation. (The content area of this page is in the
outermostpanelGroupLayout.)
9) Save your work.
-
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
239
Practice 17-3: Creating a Page Template and Applying It to a New
Page Your company is planning several applications that should have
a similar look. The main page should have an image at the top left,
with the company name next to it. The lower part of the page should
be divided into two panels. The main flow of the application is to
appear in the right panel, whereas the left panel should have tabs
for accessing other functionality that may be available.
In this practice, you create a page template to be used in the
main page of any of the companys applications. You then create the
FODShoppingDashboard page and base it on this template. The layout
of the template should be as follows:
1) In the templates subdirectory of your directory for pages,
create a new page template named MainPageTemplate. Define content
areas named companyLogo, tab1Content, tab2Content, and mainContent.
Define required attributes called companyName, tab1Title, and
tab2Title.
a) In the Application Navigator, right-click the directory where
you already created apage template and select New.
b) In the New Gallery, select Web Tier > JSF/Facelets >
ADF Page Template.
-
Practice 17-3: Creating a Page Template and Applying It to a New
Page (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
240
c) Set the following properties for the new page template, and
then click OK:
File Name MainPageTemplate.jspx
Directory \public_html\oracle\storefront\ui\pages\templates
Page Template Name
MainPageTemplate
Facet Definitions (click Add to add each facet)
companyLogo
tab1Content
tab2Content
mainContent
Attributes (click Add to add each attribute)
companyName java.lang.String required tab1Title java.lang.String
required tab2Title java.lang.String required
2) The new template opens in the editor. Add a component with
resizable vertical panes,so that page developers can resize it to
fit the size of the image they add to the toppane. The component
should be one that automatically stretches its children. Stretch
itto fit the browser vertically and horizontally.
a) Drag a Panel Splitter to the page, being sure that it appears
aboveaf:xmlContent in the Structure window.i) Set its Orientation
to vertical.ii) Set its SplitterPosition to 150.
3) You want the company logo image and the company name to be
arrangedhorizontally in the top portion of the page. Add a layout
component to accomplishthat, and add the company logo and name.
a) In the Structure window, expand af:panelSplitter and Panel
Splitter facets.b) Drag a Panel Form Layout to the first facet and
set the following properties:
i) Set Rows to 1 (so that the components you add are in one
horizontal row).
c) Drag a Facet Definition to the af:panelFormLayout and select
companyLogoas the facet name. This provides a spot for users of the
page template to place animage.
-
Practice 17-3: Creating a Page Template and Applying It to a New
Page (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
241
d) Drag a spacer to the af:panelFormLayout, so that the company
name that youadd in the next step is not right up against the
logo.
e) Drag an Output Text component to the af:panelFormLayout.i)
Set its Value to #{attrs.companyName} (you can use Expression
Builder and
select Scoped Variables > attrs > companyName.) Designers
of pages that use this template can supply a value for the
companyName attribute.
ii) On the Style > Text section of the Property Inspector,
set Color to Blue, Font Size to xx-large, Font Weight to bold, and
Font Style to italic.
4) Below the header section that has the company logo and name,
you want tworesizable panels that consume the remainder of the
browser area. The left panelshould contain two tabs where page
designers can place content, and the right panelshould contain the
main content area. Add the layout and components for this area.
a) Drag a Panel Splitter to the second facet of the root
af:panelSplitter.i) Set its Orientation property to horizontal.ii)
Set its Width to 100%.
b) Expand af:panelSplitter >Panel Splitter facets for the
panel splitter that you justadded.
c) Drag a Panel Tabbed component to the first panel splitter
facet.d) One detail item (corresponding to a tab) is created by
default for the
af:panelTabbed component. Drag a second Show Detail Item to
theaf:panelTabbed component.i) Set the Text of the first
af:showDetailItem to #{attrs.tab1Title}
(you can use Expression Builder.) This enables page designers to
supply alabel for the tab.
ii) Set the Text of the second af:showDetailItem to
#{attrs.tab2Title}.e) Drag a Facet Ref to the first
af:showDetailItem and select tab1Content as the
facet name.
f) Drag a Facet Ref to the second af:showDetailItem and select
tab2Content asthe facet name.
g) Drag a Facet Ref to the second facet of the af:panelSplitter
and selectmainContent as the facet name. This provides a spot for
page designers to placethe main content of the application.
h) Save your work. You must save a page template before you can
use it.
5) On the main unbounded task flow for the application, create
theFODShoppingDashboard page, applying the template that you just
created.
a) Open adfc-config.xml.
-
Practice 17-3: Creating a Page Template and Applying It to a New
Page (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
242
b) Double-click the FODShoppingDashboard view activity to create
the page,setting the following properties:
File Name FODShoppingDashboard.jspx
Directory \public_html\oracle\storefront\ui\pages
Use Page Template
MainPageTemplate
6) Use the attributes of the page template to customize the page
for the Storefrontapplication. Supply values for the attributes of
the template. The company nameshould be Storefront Demo and the
tabs should be labeled Categories and Suppliers.The IDE does not
provide a way to use a resource bundle, so you can enter hard-coded
strings in this case.
a) Set the attribute values in FODShoppingDashboard. In the
editor, click the FODShoppingDashboard.jspx, or reopen that file if
you have closed it.
b) In the Structure window, select af:pageTemplate.c) In the
Property Inspector, set the following values:
companyName: Storefront Demo
tab1Title: Categories
tab2Title: Suppliers
The page should now look similar to the following:
-
Practice 17-3: Creating a Page Template and Applying It to a New
Page (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
243
d) Add the company logo to the page.
i) In the Structure window, expand af:pageTemplate > Template
facets.
ii) Drag an Image (ADF Faces) component from the Component
Palette to the companyLogo facet.
(1) In the Insert Image dialog box, click the arrow next to
Source, click Edit, and navigate to the \images subdirectory of
your courseware directory.
(2) Select store.gif and click OK.
(3) In the Image Location Problem warning box, click Yes to copy
the image into the document root of your project.
(4) In the Save Image dialog box, click Save. (5) Back in the
Insert Image dialog box, provide a ShortDesc if desired,
and then click OK. You should now see the image on the page. e)
Save your work.
-
Practice 17-3: Creating a Page Template and Applying It to a New
Page (continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
244
7) Change the company name to display in red rather than in
blue.
a) Open MainPageTemplate.b) Expand af:pageTemplateDef >
af:panelSplitter - vertical > Panel Splitter
facets > first > af:panelFormLayout - 1.c) Select
af:outputText - #{attrs.companyName}.d) On the Style > Text
section of the Property Inspector, set Color to Red.e) Save your
work. You must save changes to a page template in order for them
to
be picked up by pages that use the template.
f) Open FODShoppingDashboard. If it is already open, click its
tab and select View> Refresh. You should see that the Storefront
Demo text is now red.
-
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
245
Practice 17-4: Using Bounded Task Flows as a Region on a Page In
this practice, you create regions on the FODShoppingDashboard page
by dragging bounded task flows to the page as regions.
1) Add content to the Categories tab of the FODShoppingDashboard
page. You shoulddisplay the ProductCategoryFlow in this area.
a) From FODShoppingDashboard page open source, t
b) From the Application Navigator, drag ProductCategoryFlow
inside thetab1Content facet in the Souce window.
c) Create the flow as a Region.2) Add the tab2 content. You
should display the ShowSuppliersFlow in this area.
a) From the Application Navigator, drag ShowSuppliersFlow to the
tab2Contentfacet in the source like previous step.
3) Create the flow as a Region.4) Add the main content. You
should display the ShoppingFlow in this area.
a) From the Application Navigator, drag ShoppingFlow to the
mainContent facet.b) Create the flow as a Region.
5) Test the page by running it from the task flow. Make note of
any errors and problemsthat you encounter.
a) Right-click the FODShoppingDashboard view activity in the
adfc-config.xmltask flow and select Run. The page in the browser
should look similar to thefollowing:
then modify tab1Content to be like
-
Practice 17-4: Using Bounded Task Flows as a Region on a Page
(continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
246
b) Click the Suppliers tab. Click one of the links. You can see
that the updatesupplier page appears and displays the selected
record, but with no way to navigate back to the browse page (you
fix this later).
c) In the main shopping region, notice that you must scroll down
to see the othertables on the page (you fix this shortly.) Select a
new subcategory and verify thatthe correct products appear in the
Products table.
d) Click Show Cart to verify that the cart is displayed
correctly.e) Click Shop to return to the main shopping region.f)
Click Search. Verify that the search functionality works. Notice
that there is no
way to return to the main shopping page from this page. You soon
fix thisproblem.
g) Click the link on one of the products. The page should now
show the productdetail.
h) Click Shop to return to the main shopping page.i) Click Show
Cart again, and then click Checkout.j) Verify that you can navigate
through the checkout train, both by using the train
and by using the train buttons.k) Close the browser and undeploy
the application as described in step 6(i) of
Practice 2-4.
6) There is no way to return to the main shopping page from the
ProductSearch page.Implement navigation on that page to return to
the main shopping task flow. Also addsome layout to the page to
improve its appearance: Change the heading of the table toSearch
Products and place all components under a root panel header with
scrollbars.
a) Open the ProductSearch page fragment.
b) In the existing af:panelHeader use the resource bundle to
change the text fromProductEO to Search Products.
c) Move af:table to the af:panelHeader.d) Drag a toolbar to the
toolbar facet of the panel header.e) Drag a toolbar button to the
toolbar facet and set the following properties on the
button:
Text (use the resource bundle) Shop
Action shop
-
Practice 17-4: Using Bounded Task Flows as a Region on a Page
(continued)
Oracle Fusion Middleware 11g: Build Applications with ADF I A -
247
The Structure window should look like this:
f) Run FODShoppingDashboard again from the unbounded task flow
to ensurethat the Shop button on the Product Search page navigates
back to the shoppingflow (Product Catalog page.)