Lab17

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


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)


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.


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)


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



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):



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.


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)


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.



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.



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:



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.



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.


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)


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)


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

Documents

Lab17