lab16

Oracle Fusion Middleware 11g: Build Applications with ADF I A - 207

Practices for Lesson 16

In the practices so far, you have chosen the default layout for all the components you have used. Thats a quick way to check that your application is working and that data and flow are handled correctly. This has resulted in pages that are functional, but not very visually appealing. In this set of practices, you use layout components and techniques to enhance the appearance of the application, and you implement partial page rendering to coordinate products with a selected subcategory.

Modified By : Amr Abdo


Practice 16-1: Stretching Tables and Columns To enhance the appearance of tables in the application, it is a good practice to stretch them so that they occupy the entire browser space. Tables and other components are automatically stretched if they are contained in a stretched component that automatically stretches its children (Panel Splitter, Panel Stretch, or Decorative Box layout components.) Even so, there is no harm in stretching the table itself to avoid display problems no matter which type of layout component contains the table.

In this practice, you stretch all tables and the last column of each table.

1) Stretch the last columns of the following tables, and stretch the tables themselves:

Page Table

BrowseSuppliers Suppliers table

ProductCatalog masterDetail1 table

ProductCatalog Subcategories table

ProductCatalog Products table

ProductSearch Search results table

ShoppingCart Items table

a) Open the BrowseSuppliers page.b) In the Structure window or in the editor, select the af:table component.c) In the Property Inspector, set the Appearance > Width to 100%. Tab out or click

in any other field to apply the new value. You can see the effects of tablestretching in the editor, as the table boundaries expand to fill the horizontal spacein the editor.

d) Select last from the Column Stretching drop-down list.You can see the effects of column stretching in the editor, as the last columnexpands to fill up the space.

e) Save your work and close the page.

f) In a similar fashion, stretch the table and the last column for all tables in thefollowing pages:ProductCatalog (3 tables)ProductSearch (1 table)ShoppingCart (1 table)


Practice 16-2: Adjusting JDevelopers Default Layout Components When you created certain components on your pages, JDeveloper imposed some default layout. In this practice, you modify some of these default layout components to enhance the appearance of the pages.

1) Modify headings in the Panel Group Layout components on the ProductCatalogpage. Change the headings to Categories and Subcategories.a) Open the ProductCatalog page.b) In the Structure window, expand jsp:root > f:view > af:document > af:form >

af:panelGroupLayout.c) When you dragged the Categories and Subcategories to your page as master table

and detail table, JDeveloper created these tables in af:panelHeader componentswith default headings. Change these headings to Categories and Subcategories.

i) In the Structure window, select af:panelHeader BrowseCategory1.

ii) In the Property Inspector, change the Text property to Categories, beingsure to use a resource bundle.

iii) In the Property Inspector, select the Box tab on the Style panel.iv) Set the Width of the panel header to 100%.

Note: If you encounter problems when editing the Style panel, switch toanother panel of the Property Inspector and then switch back to the Stylepanel.

v) In a similar fashion, set the Text property for the af:panelHeader BrowseSubCategory to Subcategories. Set the Style > Box > Width ofthe panel header to 100%.

Practice 16-2: Adjusting JDevelopers Default Layout Components (continued)


2) In the ProductCatalog page, two of the tables and panel headers are grouped under anaf:panelGroupLayout component. Enable this component to display scroll bars when the browser is too small to display all of its contents, and place the third table in the same panel group layout.

a) In the Structure window, select af:panelGroupLayout.b) In the Property Inspector, select scroll from the Layout drop-down list.

c) Drag the Products table to the af:panelGroupLayout scroll component.3) In a similar fashion, set the default Panel Group Layout component to scroll in the

ProductSearch page.


Practice 16-3: Adding Layout Components to Existing Pages In this practice, you add layout to pages to enhance their appearance.

1) Add a Panel Header named Products to contain the Products table in theProductCatalog page.

a) Open the ProductCatalog page.b) In the Structure window, expand jsp:root > f:view > af:document > af:form >

af:panelGroupLayout-scroll.c) In the Structure window, right-click af:table and select Surround With.

d) In the Surround With dialog box, select ADF Faces > Panel Header and clickOK.

e) In the Property Inspector for the panel header, set the Text property toProducts, using a resource bundle.

f) Save your work.

2) On the ProductDetails page, place the Product form, which is contained by default ina panel form layout, into a panel header titled Product Detail. Add a toolbar for theexisting buttons.

a) Open the ProductDetails page.b) In the Structure window, expand jsp:root > f:view > af:document > af:form >

af:panelFormLayout.c) Right-click af:panelFormLayout and select Surround With.d) In the Surround With dialog box, select ADF Faces > Panel Header and click

OK.e) In the Property Inspector:

i) Set the Text property to Product Detail. Use the resource bundle.

Practice 16-3: Adding Layout Components to Existing Pages (continued)


f) In the Structure window, expand af:panelHeader > Panel Header facets.g) Drag a Toolbar from the Component Palette to the toolbar facet of the panel

header, in either the Structure window or in the editor.

h) Drag the existing Search and Shop buttons to the toolbar, in either the Structurewindow or in the editor.



i) Save your work. When you have finished, the page should look similar to this

and the Structure window should look similar to this:

3) In a similar fashion on the SupplierUpdate page, put the Supplier form that iscontained in a panel form layout into a panel header. You do not need to change theheading. Hint: The SupplierUpdate page is in the supplier subdirectory of the\oracle\storefront\ui\pages directory.a) Surround the Panel Form Layout with a Panel Header, but do not change the Text

(heading).

b) Add the existing buttons to a toolbar in the toolbar facet of the panel header.

c) For now, do not change the text of the panel header, because later you add aconditional text display.

d) Set the Width of the panel header to 500 pixels.



e) Save your work. When you have finished, the page should look like this

and the Structure window should look like this:

4) In a similar fashion on the BrowseSuppliers page, put the Supplier table into a panelheader with the heading Select a Supplier for Update.

a) Surround the Supplier table with a Panel Header.

b) Using the resource bundle, change the Text to Select a Supplier forUpdate.

c) Save your work.

5) In a similar fashion on the ShoppingCart page, put the table into a panel headerlabeled Shopping Cart.

a) Surround the table with a Panel Header.



b) Add the existing buttons to a toolbar in the toolbar facet of the panel header.

c) Use the resource bundle to change the Text to Shopping Cart.

d) Save your work.

6) In a similar fashion on the CheckoutShipping page, put the panelFormLayoutcontaining the Shipping form into a panel header titled Shipping Address.

a) Surround the Panel Form Layout with a Panel Header.

b) Use the resource bundle to change the Text to Shipping Address.

c) Do not move the train or the train button bar into the panel form layout.d) Save your work. When you have finished, the Structure window should look like

this:


Practice 16-4: Creating New Pages with Required Layout You have not yet created the last two pages in the CheckoutFlow train. In this practice you create those pages, starting with the layout components and then adding databound components.

1) Create the CheckoutPayment page. The page should contain a panel group layoutwith two panel headers, one that displays the billing address and the other displayingpayment options. The layout should be like this:

a) Open the CheckoutFlow task flow.b) Double-click the CheckoutPayment view activity to create the page. Be sure to

create it in the \oracle\storefront\ui\pages directory.

c) Drag a Panel Group Layout from the Component Palette to the page and set itsLayout property to scroll.

d) Drag two Panel Headers to the page, one below the other and both within thepanel group layout. You may find it easier to drag the panel headers to theaf:panelGroupLayout in the Structure window.

Practice 16-4: Creating New Pages with Required Layout (continued)


e) Set the Text of the top panel header to Billing Address and of the other toPayment Options, using a resource bundle.

2) Now that you have the layout defined, you can add databound components. First youadd the billing address.

a) Drag the FODCheckoutAMDataControl > ShoppingCart1 > PaymentOption1> BillingAddress to the first panel header.

b) Create it as an ADF Form.c) Include the following attributes in order:

Address1 Address2 City StateProvince PostalCode CountryId

d) Dont include Navigation Controls or a Submit Button.e) Click OK.



f) Save your work. The page should now look like this:

3) In a similar manner, add the payment options.

a) Drag the FODCheckoutAMDataControl > ShoppingCart1 > PaymentOption1data control to the second panel header on the page and add it as an ADF Form.

b) Include the following attributes in order:PaymentTypeCodeCardTypeCodeAccountNumberExpireDateCheckDigitsRoutingIdentifierInstitutionName

c) Do not include Navigation Controls or a Submit Button.d) Click OK.



e) Save your work. Now the page should look like this:

4) Add some white space between the panels.

a) Drag a Spacer from the Component Palette to the Panel Group Layout facets >separatorthis provides a little white space between panels.

b) Save your work.

5) Create the CheckoutConfirm page, which has a more complicated layout than theother pages because it is an overview of all of the order information. The layoutshould be like this:



a) In the CheckoutFlow task flow diagram, double-click the CheckoutConfirmview activity to create the CheckoutConfirm page in the\oracle\storefront\ui\pages directory.

b) From the Component Palette, drag a Panel Group Layout to the page and set itsLayout property to scroll.

c) Drag a Panel Header to the Panel Group Layout and set its Text property toPayment Options, using an existing text resource.

d) Drag a second Panel Group Layout to the first one and set its Layout propertyto horizontal.

e) Drag two Panel Headers to the horizontal Panel Group Layout. Set the Text ofthe first to Shipping Address, and of the second to Billing Address, usingexisting text resources in the resource bundle.

f) Drag a spacer to the separator facets of each of the two Panel Group Layouts.g) Drag another Panel Header to the outermost Panel Group Layout and set its Text

to Order Items.

6) Now that you have defined the layout, you can create databound components on thepage. Create a read-only table of shopping cart items on the Order Items panel header,and read-only forms for shipping address, billing address, and payment options ontheir respective panel headers.



a) Drag the FODCheckoutAMDataControl > ShoppingCart1 > PaymentOption1to the Payment Options panel header as an ADF Read-only Form. i) Do not include Navigation Controls or a Submit Button.ii) Include the following attributes in order:

MeaningMeaning1AccountNumberExpireDateCheckDigitsRoutingIdentifierInstitutionName

Note: Meaning and Meaning1 are the displayable values forPaymentTypeCode and CardTypeCode, respectively. These attribute namesare the default attribute names for the view object. This is why it is importantto take the time to relabel them to something meaningful, as has been done inthe LookupCodeEO entity object control hints. You see the new labels at runtime.

b) Drag the FODCheckoutAMDataControl > ShoppingCart1 >ShippingAddress to the Shipping Address panel header as an ADF Read-onlyForm.i) Do not include Navigation Controls or a Submit Button.ii) Include the following attributes in order:

Address1 Address2 City StateProvince PostalCode CountryId

c) Drag the FODCheckoutAMDataControl > ShoppingCart1 > PaymentOption1> BillingAddress to the Billing Address panel header as an ADF Read-onlyForm.i) Do not include Navigation Controls or a Submit Button.

d) Include the following attributes in the same order:Address1 Address2 City StateProvince PostalCode CountryId

e) Drag FODCheckoutAMDataControl > ShoppingCart1 > ShoppingCartItem1to the Order Items panel header on the page as an ADF Read-only Table.



i) Enable Sorting.ii) Include the following attributes in order:

ProductNameQuantityUnitPriceLineTotal

iii) Set the Width of the table to 100% and enable last column stretching.

f) Save your work. The page should look like this



and the Structure window should look like this:

g) To test your checkout pages, you need to add the same train components to thesecond and third train stops. In the lesson titled Ensuring Reusability, youdefine a page template to use for all of these pages, and the train components areon it rather than on the individual pages. However, for now you temporarily addthem to each page for testing. Copy the train and train button bar from theCheckoutShipping page to each of the other two pages in the CheckoutFlow.

i) Open the CheckoutShipping page.ii) In the Structure window, expand jsp:root > f:view > af:document > af:form.iii) Multiselect af:train and af:trainButtonBar.



iv) Right-click and select Copy.

v) Open the CheckoutPayment page.vi) In the Structure window, expand jsp:root > f:view > af:document >

af:form. vii) Right-click af:form and select Paste.viii) Drag af:train and af:trainButtonBar above the af:panelGroupLayout.

ix) Perform steps v) through vii) on the CheckoutConfirm page.h) Run the CheckoutFlow to test the pages.


Practice 16-5: Setting Conditional Display Sometimes there is a need to display or not display attributes depending on specific conditions. In our example, if the user selects a Credit Card payment type, you dont want to display the RoutingIdentifier or the InstitutionName because those are used only for checks. If the user selects a Direct Debit payment type, you dont want to display CardTypeCode or ExpirationDate, because those are used only for credit cards.

In this practice, you work on the CheckoutPayment page to set the attributes to be visible only when they are needed, based on the Payment Type. You add Expression Language to the components that you want to conditionally display, and you use partial page rendering to refresh only those components, rather than the entire page.

The Payment Type codes are listed below.

CC Credit Card

DD Direct Debit

IN Invoice

PP PayPal

1) The PaymentTypeCode is a choice list and its default binding gives you theposition of the selected value in the list, not the value. On the CheckoutPayment page,create an attribute value named PaymentTypeCodeValue for the value of thepayment type code.

a) Click the Bindings tab on the CheckoutPayment.jspx page.

b) In the Bindings section, click Add .c) Select Generic Bindings > attributeValues.d) Click OK.e) In the Create Attribute Binding dialog box:

i) Select FODCheckoutAMDataControl.PaymentOption1 as the Data Sourceand PaymentTypeCode as the Attribute.

ii) Click OK.

Practice 16-5: Setting Conditional Display (continued)


f) In the Property Inspector, change the id of the binding toPaymentTypeCodeValue. (Click PaymentTypeCode1 in the Structure window if you dont see the id in the Property Inspector.)

Now you have a reference to the actual value of the PaymentTypeCode so that you can use a condition based on its value. Save your work.

2) Because you are going to use partial page rendering for this action, you need toreference the component that triggers the partial page rendering. Set an Id andimplement PPR on the triggering component.

a) Click the Design tab on the CheckoutPayment.jspx page to go back to thedesign view of the page.

b) Select the af:selectOneChoice for PaymentTypeCode in either the visualeditor or the Structure window.

c) Set the Id property to PaymentType.

d) Set the Behavior > AutoSubmit property to true.

3) The first attribute to set a condition on is CardTypeCode. If the payment type codeis not CC (for Credit Card), then dont display this field.

a) Select af:selectOneChoice for CardTypeCode attribute in either the visualeditor or the Structure window.



b) Set the Visible attribute (in the Advanced panel) to:#{bindings.PaymentTypeCodeValue.inputValue == 'CC'}

If this expression evaluates to true, then the attribute is visible in the UI.

Note: You can use the Expression Builder to help build the expression. To get toExpression Builder, click the arrow icon to the right of the Visible property in theProperty Inspector and select Expression Builder.

In the list at the left of the Expression Builder, select ADF Bindings > bindings > PaymentTypeCodeValue > inputValue, which inserts #{bindings.PaymentTypeCodeValue.inputValue} into the expression. You then can add the condition to the end of the expression and click OK. Note: Be sure to select the PaymentTypeCodeValue attribute binding and not the PaymentTypeCode binding.

c) Now set the PartialTriggers property to PaymentType, which is the Id of thetriggering component.



i) On the Behavior panel, click the small down arrow next to thePartialTriggers text box and select Edit.

ii) In the Edit Property dialog box, choose selectOneChoice PaymentTypeand shuttle it to the Selected list.(This means that when the PaymentType component forces an autosubmit, itrefreshes this data control. When it does, the code in the Visible propertyexecutes. If the code evaluates to true, the data control appears.)

iii) Click OK.

4) Now set ExpireDate to be visible only if the Payment Type Code Value is CC.(The steps and code are similar.)

5) Set CheckDigits to be visible only if the value is CC.

6) Set RoutingIdentifier and InstitutionName to be visible only if the value is DD.Hint: Remember to set the expression for the Visible property and select PaymentType for the PartialTriggers property for these attributes.

7) Run CheckoutShipping from the CheckoutFlow task flow and navigate to theCheckoutPayment page to test your work.

a) Test changing the Payment Type value to see the results. You should see thatdifferent attributes appear depending on the value that you set.



b) When you are finished, close the browser and undeploy the application asdescribed in step 6(i) of Practice 2-4.

8) Extra credit (if you have time): The payment options information also appears onthe confirmation page, and you need to conditionally display components on thatpage as well. Figure out how and apply the same principles to that page.


Practice 16-6: Implement PPR to Coordinate Products Display with Selected Subcategory When you added the Products table to the ProductCatalog page, you added it as an independent table, not as a masterdetail. It is not set to be refreshed when the selection in the SubCategory table changes. In this practice, you use PPR to refresh the Products table (this PPR is defined automatically when you add components as masterdetail).

1) Set the SubCategory table to be the triggering component for PPR.

a) Open the ProductCatalog page and select the SubCategories table.b) Set the Id to SubCategory.

c) Verify that Row Selection (Single Row) is selected for this table. Use the table Edit icon in the Property Inspector.

2) Set the Products table to be the PPR target that is refreshed when the selectedsubcategory changes.

a) Select the Products table.b) In the Property Inspector, set the Partial Triggers property to SubCategory

(use the editor, available from the drop-down menu, to add appropriate colons infront to reference the correct naming container.)

3) Test the page.

a) Run the page, either directly or from the task flow.

Practice 16-6: Implement PPR to Coordinate Products Display with Selected Subcategory (continued)


b) Select Category, then SubCategory and check that the correct products appear. c) When you have finished, close your browser and undeploy the application as

described in step 6(i) of Practice 2-4.

lab16

Documents

table component

table boundaries

appearance of tables

productcatalog page

panel group layout components

certain components

following tables

panel stretch