In this tutorial, you learn how to create JSF pages using Oracle ADF Faces Rich Client Components. Oracle ADF Faces Rich Client is a set of standard JSF components that include built-in interactive functionality provided by Ajax and other UI technologies. While Ajax allows rich client-like applications to run on standard internet technologies, JSF provides server-side control, which reduces the dependency on an abundance of JavaScript often found in typical Ajax applications.

Read more...

The page you build in this tutorial displays the content of a shopping cart on one side and lists all the available products on the other side. Another pane displays the product details. You implement drag and drop functionality enabling users to fill their shopping cart by moving a selected product in the shopping cart area. You also create data visualization components, accordions and add a popup window.

Purpose	Duration	Application
This tutorial shows you how to develop a page based on a page template. Then you design the layout, add data components and change the look and feel of the page. Click the Download button to download a zip of the starter application that you will use in this tutorial. The file contains two zip files (ADF_Faces_Tutorial_Starter.zip and ADF_Faces_Tutorial_Solution.zip), one with the starter application, the other the completed solution.	2 to 2.5 hours

In this section you open the starter application and create a page template to be used for additional pages you will create: To create the page template perform the following steps:

1. Start JDeveloper by selecting Start > Programs > <JDEVELOPER_HOME> > OracleHome > Oracle JDeveloper Studio > Oracle JDeveloper Studio
   
   In the Select Role dialog, select Studio Developer and click OK.

2. In the Applications window, click Open Application .

   
   

3. In the Open Application(s) dialog, locate the folder where you unzipped the application and select ADF_Faces_Tutorial.jws. Click Open.
   
   
   


The application is loaded in the Applications window.

4. In the Applications window, right-click the View Controller project and select New > ADF Page Template from the context menu.
   
   
   

5. In the Create ADF Page Template dialog, type storetemplate.jsf for the template file name. Click Next.
   
   
   
   Click Next again to create the template from a Blank Template.

6. In the Facet Definitions page, click the Add button and type center as the facet Name.

   
   

7. In the Attributes section, click the Add button, then type title as the Name and Default Title as the Default Value.
   
   
   
   
   Click Next and then Finish to complete the template creation.

   The storetemplate.jsf template page opens in the design editor.

   
   
   

8. From the ADF Faces Components window, expand the Layout node and drag a Decorative Box onto the empty page in the Design view.

   
   
   
   
   

   Using the Properties window, in the Style and Theme category, set the Theme property to light.
   
   

9. A decorative box provides two facets, represented by dashed lines and the words 'top' and 'center' within the design view. From the Layout category of the Components window, drag and drop a Panel Grid Layout into the top facet.
   
   

10. In the Panel Grid Layout dialog box, set the columns to 2 and the rows to 1 and click Next.

    
    

11. Set the grid width for column 1 to 250 pixels (px) and the width for column 2 to 100 pixels (px) and click Finish.
    
    
    

12. In the Applications window, expand the Web Content and images nodes. Drag branding_logo.jpg onto the first cell of the panel grid layout. In the menu select ADF Faces Image.




13. From the Text and Selection section of the Components window, drop an Output Text component onto the second grid cell of the panel grid layout.
    
    
    

14. This is a case where it can be difficult to tell exactly where in a layout a component is placed. To verify placement of the output text component, expand the Structure window and locate the af:outputText component.
    
    If necessary, drag and drop within the Structure window to ensure the af:outputText component is placed within the second af:gridCell component
    
    
    

15. Select the outputText component in the visual editor or in the Structure window. In the Properties window, locate the Value property. Click the Property Menu icon and choose Expression Builder...
    
    
    

16. In the Expression Builder dialog, expand Scoped Variables and attrs and select title to set the expression to #{attrs.title}.
    Then click OK.
    
    
    

17. In the Components window, expand the Layout node and scroll down to the Core Structure section. Drag and drop a Facet Definition onto the center facet.

    

    In the Insert Facet Definition dialog, select center as the facet name, then click OK.

    

18. Click the Save All icon in the JDeveloper menu bar, or select File - Save All from the menu to save the page.
    

Now that the template has been created you can create a new page and use the template as the default structure for the page. To do this, perform the following steps:

You can use page templates to build JSF pages or page fragments. Read more...

If you modify the layout section of a page template later, all pages or page fragments that use the template are automatically updated with the layout changes.

Typically, you create JSF pages in the same project where page template definitions are created and stored. If the page templates are not in the same project as where you are going to create template-based pages, first deploy the page templates project to an ADF Library JAR. In the page that consumes the template, you can add content before and after the pageTemplate tag, but you will typically add elements within the defined facets of the template. As a best practice, you should use only one pageTemplate tag in a page.

JDeveloper simplifies the creation of JSF pages based on page templates by providing a template selection option in the Create JSF Page or Create JSF Page Fragment wizard.

1. Right-click the ViewController project and select New > Page...

   
   

2. In the Create JSF Page dialog, change the file name to products.jsf and ensure the Document Type is set to Facelets. Select the Reference ADF Page Template radio button and choose the Storetemplate template. Click OK.




3. The products.jsf appears as a new node in the Applications window and opens in the Editor using the storetemplate.jsf template.



If the page doesn't render visually in the design editor and instead looks like a series of nested boxes, close the workspace and reopen it.

4. From the Components window, expand the Layout category, and drag and drop a Panel Splitter component onto the center facet.
   
   

   In addition to the Panel Splitter, ADF Faces provides a number of other layout components that can be used to arrange other components on a page. Read more...
   
   Usually, you begin building your page with layout components. You then add components that provide other functionality (for example rendering data as tables or forms) either inside facets or as child components to these layout components. In addition to layout components that simply act as containers, ADF Faces also provides interactive layout components that can display or hide their content, or that provide sections, lists, or empty space. Layout components also provide geometry management functionality, such as stretching their contents to fit the browser windows as the window is resized, or the capability to be stretched when placed inside a component that stretches. Some layout type and components are listed below.
   
   Page Layout Containers
   - panelStretchLayout: Contains top, bottom, start, center, and end facets where you can place other components.
   - panelSplitter: Divides a region into two parts (first facet and second facet) with a repositionable divider between the two. You can place other components within the facets.
   - panelDashboard: Provides a columnar display of child components (usually panelBox components).
   - panelGridLayout: Uses one or more child gridRow components to define height and margins in a grid layout structure. Each gridRow component uses child gridCell components to define width, column span, margins, and more for the columns of a grid layout.
   - panelFormLayout: Positions input form controls, such as inputText components, so that their labels and fields line up vertically. It supports multiple columns and contains a footer facet.
   
   Components with Show/Hide Capabilities
   - showDetailHeader: Can hide or display contents below the header. Often used as a child to the panelHeader component.
   - showDetailItem: Used to hold the content for the different panes of the panelAccordion or different tabs of the panelTabbed component.
   - panelBox: Titled box that can contain child components. Has a toolbar facet.
   - panelAccordion: Used in conjunction with showDetailItem components to display as a panel that can be expanded or collapsed.
   - panelTabbed: Used in conjunction with showDetailItem components to display as a set of tabbed panels.
   

5. Drag and drop a Panel Accordion layout component onto the first facet on the left hand side of the panel splitter.
   
   
   
   A Panel Accordion component is added to the facet, and a nested Show Detail Item is also created, to hold content for the first pane of the accordion.
   

6. In the create panel Accordion dialog, set the text value to MyCart.
   
   
   

7. Click the green plus sign to add a second pane to the accordion. Set the Text property to Recommendations.
   
   
   
   

8. The Editor should look like the image below.
   
   
   

9. Drag and drop another Panel Splitter component onto the second facet of the panel splitter. You may want to use the Structure window or the Design editor for this action.



10. Using the Properties window, set the Orientation of this nested panel splitter to vertical.

    

11. Drag and drop a Panel Collection component onto the first facet of the nested vertical panel splitter. If you have trouble locating a component in the ADF Faces Components window, you can search for it using the search box at the top of the window.
    
    

12. Drag and drop a Panel Tabbed component onto the second facet of the panel splitter. The component can be found in the Interactive Containers and Headers grouping of the Layout category.

    

13. In the Create Panel Tabbed dialog, set the Text property to Product Details and click OK to accept the default Tab Position.

    
    

14. Right click the Product Details tab in the visual editor and select Insert After Show Detail Item > Show Detail Item from the context menu.

    

15. With the new af:showDetailItem component selected, enter Rating in the Text property in the Properties window.

    
    
    

16. Double click the products.jsf tab to maximize the design view. The page should look like the following image:
    
    
    

17. Save all your work. Then right-click anywhere in the design view of the page and from the context menu, select Run. You can double click the products.jsf tab again to toggle the maximized view.
    
    
    

18. ***********************The page will load in your browser after it is deployed to the integrated WebLogic Server. (Integrated WebLogic Server will be installed and configured if this is the first time you are running an application from JDeveloper). Experiment with selecting the tabs and expanding the Recommendations panel. Once you're finished, keep the browser open and return to JDeveloper.
    
    
    

19. In the next steps, you customize the page title and see how it is consumed in the existing page. To start the process, open the storetemplate.jsf template page in the design editor..
    
    
    

20. In the design view or structure window, select the outputText component that contains the title. In the Properties window, in the Style node, set the Font Color property to a color of your choice (Orange in our example).
    
    

21. In the Font Size property, select large from the drop-down list.

    
    

22. Save all your work. Then go back to the browser and reload the page to see the new characteristics.
    
    Note that after saving your JDeveloper application, refreshing your browser window reflects the new changes made to your application as long as you haven't updated any binding components. In that case you will need to re-run the page from JDeveloper in order to have the changes reflected in your browser.
    
    
    

23. Open the products.jsf page in the design editor. In the Structure window, select the af:pageTemplate tag and in the Properties window, set the Title property to Store Front.
    
    
    

24. Save all your work. Then reload the page in your browser to see the new characteristics.
    
    

The page layout is complete, now it's time to add some data. The first step in this process it to create data controls from the Products POJO (Plain Old Java Object). To do this, perform the following steps:

Once you have your application's services in place, you can use JDeveloper to create data controls that provide the information needed to declaratively bind UI components to those services. Read more...

In a Java EE application, you normally create JPA entities that represent tables in a database and then create a session facade over all the entities. The facade provides a unified interface to the underlying entities. Using Oracle ADF model, you can create a data control for a session bean, and that data control will contain representation of all the JPA entities under the session bean. ADF Data Controls consist of one or more XML metadata files that define the capabilities of the services that the bindings can work with at runtime. The data controls work in conjunction with the underlying service implementations without changing the implementation of the service. You can also create Data Controls from simple POJOs. For applications built using ADF Business Components as the service implementation, the data control is implicitly defined by the Application Module data model. This tutorial uses a data control based on a simple POJO to prevent the need for a database connection.

1. From an existing POJO Class, create the data control using the ADF Data Binding facility.
   In the Applications window, expand the Model project. Expand the Application Sources and model nodes. Right-click Products.java and select Create Data Control from the context menu.
   
   
   

2. In the first page of the Bean Data Control dialog, change the name of the data control to StoreProducts and click Next.

   
   
   
   

3. In the Choose ADF Data Control Features page, select the Transactions and Custom CRUD features and click Finish.
   
   
   
   

4. The DataControls.dcx file is created and will open in the editor. You could define UI hints and validation at this layer, but you will accept the defaults here and continue on creating the user interface.
   
   r

5. Click the products.jsf tab to bring it to the foreground of the editor.
   

6. In the Applications window, expand the Data Controls  accordion and expand the StoreProducts node. You may need to click the refresh icon in the Data Controls panel to enable the StoreProducts node.
   
   

7. Drag and drop the products collection of the StoreProducts data control onto the center area of the af:panelCollection in the design editor. From the popup menu, select ADF Table...

Structured data can be displayed as tables consisting of rows and columns using the ADF Faces table component. Read more...

The table component uses a CollectionModel class to access the data in the underlying collection. This class extends the JSF DataModel class and adds on support for row keys and sorting. In the DataModel class, rows are identified entirely by index. This can cause problems when the underlying data changes from one request to the next, for example a user request to delete one row may delete a different row when another user adds a row.

To work around this, the CollectionModel class is based on row keys instead of indexes. The immediate children of a table component must be column components. Each visible column component is displayed as a separate column in the table. Column components contain components used to display content, images, or provide further functionality.

The child components of each column display the data for each row in that column. The column does not create child components per row; instead, the table uses stamping to render each row. Each child is stamped once per row, repeatedly for all the rows. As each row is stamped, the data for the current row is copied into a property that can be addressed using an EL expression. You specify the name to use for this property using the var property on the table. Once the table has completed rendering, this property is removed or reverted back to its previous value.






8. In the Create Table dialog, select the Row Selection (Single Row) option and click the Enable Sorting and Read-Only Table options.
   Then click OK.
   
   
   

9. In the Structure window, select the af:table component and in the Properties window, expand the Behavior node. Set the EdtingMode property to clickToEdit. In the Appearance node, set the ColumnStretching property to last.
   
   Hint: To quickly locate a property by name, type the property name in the search field at the top of the Properties window.
   
   

10. Save your work.

11. In the design view of the products.jsf page, select the Product Details tab to bring it to focus. Drag and drop the products collection from the StoreProducts data control onto the Product Details tab component. In the popup menu, select ADF Form...
    
    

12. In the Create Form dialog, select the Submit checkbox to include a control for a submit action.
    
    
    
    
    Click OK.

13. Now add an ADF List View component. The ListView component uses oracle.adf.view.rich.model.CollectionModel to access the data in the underlying list. You may also use other model instances, e.g., java.util.List, array, and javax.faces.model.DataModel and the listView will automatically convert the instance into a CollectionModel.
    
    Expand the Recommendations accordion pane in the design view. Drag and drop the products node from the data controls window to the recommendations accordion in the design view. In the popup menu, select Table/List View > ADF List View...
    
    
    

14. In the Create List View dialog, select the Panel Grid Layout layout and click Next.
    
    
    
    

15. Set the Columns to 2 cells per row and number of Rows to 1.
    
    
    
    Click Next.
    

16. Set the Column 1 width to auto and the Column 2 width to 50 px (pixels).
    
    
    
    
    Click Next.
    

17. Click the value binding for the first column and select the name item. Set the second column value binding to rating.
    
    
    
    Click Finish.

18. Save your work.

19. Data from the products data control is being displayed on this page in three different binding styles. To ensure that all rows are available so that all three bindings are kept in sync, modify the products iterator range size. Select the Bindings tab for the products.jsf page. In the Executables section, select productsIterator.
    
    

20. In the Properties window, set the RangeSize property to -1.
    
    

21. Save all your work and right-click the page and choose Run to re-deploy and re-run the page.
    The page should display the product data in the Recommendations accordion, table, and form as shown:
    
    
    

22. Select one of the column headers in the table and move it to another location in the table.
    
    
    

23. Experiment with column resizing in the table using the shortdesc column. Click the Detach menu option to isolate the content of the panel in the browser.
    
    
    
    
    Click the Detach option again to return to the original display.
    

24. Explore the View menu option and hide some of the columns.
    
    
    
    The columns will remain hidden until you redisplay them. The number of hidden columns is displayed in a message below the table. Column reordering and resizing are features of the ADF Faces table component, while the View menu and it's capabilities and the Detach button are part of the Panel Collection component.
    
    

25. In the next few steps you add some images and graphical items to the page.
    In the Product Details tab, right-click the cost inputText item in the form and select Convert To... from the context menu.
    
    

There are a variety of ways to make analyzing data easier for end users by using graphical components. Read more...

The slider components present the user with a slider with one or two markers whose position on the slider corresponds to a value. The slider values are displayed and include a minus icon at one end and a plus icon at the other. The user selects the marker and moves it along the slider to select a value. The inputNumberSlider component has one marker and allows the user to select one value from the slider.

To display an image on a page, you use the image component and set the source attribute to the URI where the file is located. The image component also supports accessibility by providing a way to link to a description of the image. The image component can also be used as a link and can include an image map, if placed inside a goLink component.

The richTextEditor component provides rich text input that can span many lines and can be formatted using different fonts, sizes, justification, and other editing features that may be required when you want users to enter more than simple text. For example, the richTextEditor might be used in a web-based discussion forum, allowing users to format the text that they intend to publish.







26. In the Convert Dialog, select Input Number Spinbox and click OK.
    
    
    
    
    Click OK again in the Confirm Convert box to remove the unnecessary attribute.

27. Notice that the imageLocation attribute is rendered as an inputText component. To display an image, change the component style. In the Product Details tab, right-click the imageLocation item and select Convert To... from the context menu. In the Convert Dialog, select Image and click OK.



Click OK again in the Confirm Convert box to remove the unnecessary element and attributes.



28. With the new image component selected, go to the Properties window and next to the source property, click the property menu icon and select Expression Builder... from the drop-down list.
    
    
    

29. In the Expression Builder dialog, type images/products/ in the Expression text area. To create the rest of the expression, expand ADF Bindings, bindings, and imageLocation. Select inputValue to generate the expression and click OK.
    
    
    

30. In the Product Details tab, right-click the rating component and select Convert To... from the context menu. In the Convert Dialog, select Slider (Number) and click OK.
    
    
    
    
    Click OK again in the Confirm Convert box.
    
    

31. In the Product Details tab, right-click the shortDesc component and select Convert To... from the context menu. In the Convert Dialog, select Rich Text Editor and click OK.
    
    
    
    
    Click OK again in the Confirm Convert box.
    
    

32. In the Structure window, select the panelFormLayout for the Product Details tab. In the Properties window, enter 6 for the Rows property so that the 7th row item (imageLocation) will wrap to the 2nd column of the panelFormLayout. The Products Details tab should now look like this:
    
    
    

33. Save all your work. Switch back to the browser and reload the page.
    
    

34. Experiment moving the rating slider, the cost spinbox, and using the rich text editor. Notice that selecting any of the rows in the product table automatically changes the row currency in the Product Details tab. This is handled by the ADF Data Binding layer.

Behavior components are those that provide operational functionality to an application. In this section you will create menus, popup and printable pages and allow users to drag and drop products into a shopping cart area. To implement this type of functionality, perform the following steps:

The ADF Faces framework provides the ability to drag and drop items from one place to another on a page at runtime. Read more...

In most cases, drag and drop at runtime can easily be implemented by adding the appropriate tags to the source and target and implementing code in a managed bean. Drag and drop provides users with an interactive experience that is expected in rich web applications. For example, in a file explorer application, users would expect to be able to drag files from one directory folder to another.

If drag and drop behavior is implemented in an ADF Faces Rich Client application, when users click on an item and begin to drag, the browser displays the element being dragged as a ghost element attached to the mouse pointer. Once the ghost element hovers over a valid target, the target component shows some feedback (for example, it becomes highlighted). If the user drags the ghost element over an invalid target, the cursor changes to indicate that the target is not valid.

When dragging attribute values, the user can only copy the value to the target. For all other drag and drop scenarios, on the drop, the element can be copied (copy and paste), moved (cut and paste), or linked.

1. To implement menus in your application, add a menu to the panel collection for the table. In the design editor of the products.jsf page, right-click within the menu facet in the panel collection and select Insert inside Facets menus - Menu from the context menu.

   
   

2. In the Properties window, set the Text property for the menu to My Options.

In the Behavior category, set the Detachable property to true.




3. Right click the My Options Menu and select Insert inside Menu > Menu Item  from the context menu.
   
   

4. In the Properties window set the Text property to Export to Excel.

   
   

5. In the Structure window, right click the af:commandMenuItem component and select Insert after Menu Item > Menu Item from the context menu.
   
   

6. In the Properties window set the Text property for this menu item to Show Specials.

   
   
   

7. In the Components window, expand the Operations node and find the Listeners category. Drag Export Collection Action Listener component onto the Export to Excel menu item in the Structure window.
   
   

In the Insert Export Collection dialog, type t1 (t1 is the id of the table) as the ExportedId and select excelHTML for the Type.



Click OK.


8. Save all your work, return to the browser and reload the page. Click the My Options menu option and notice that you can detach the menu options from the menu bar.
   
   
   
   

9. Select the Export to Excel menu option.
   
   
   

10. Depending on your browser, a dialog may prompt you for an action to perform with the file, allowing you to open it with Excel or save it.
    
    

    Select Open with to view the table in Excel (assuming you have Excel installed) and click OK.
    
    Verify the table is exported and close Excel if you wish.

11. Now create a popup window in the products.jsf page. In the Structure window, select the topmost af:form component.
    
    /
    

12. In the Components window, expand the Layout category and locate the Secondary Windows section. Drag the Popup  component onto the form component in the Structure window. The design view will change to allow visual editing of the popup.

You can use the popup component with a number of other ADF Faces components to create a variety of dialogs, menus, and windows that provide information or request input from end users. Read more...

Using these components, you can configure functionality to allow your end users to show and hide information in secondary windows, input additional data, or invoke other functionality. The capabilities offered by these components allow you to render content or functionality that is supplemental to the content rendered on the primary interface and, as a result, develop uncluttered and user friendly interfaces.

The popup component is an invisible layout control, used in conjunction with other components to display inline (that is, belonging to the same page) dialogs, windows, and menus. The popup component is invoked from within the primary interface and the application manages the content that renders in the popup component like content in the primary interface without interference from popup blockers. It is recommended that the content type you render in a popup component be HTML. Other types of content, such as Flash or PDF files, may not render appropriately in a popup component.






13. In the Design view, right click inside the popup and select Insert inside Popup > Dialog from the context menu.
    
    
    
    

14. In the Components window, expand the General Controls category and drag the Image component onto the Dialog.
    
    
    

15. In the Insert Image dialog, click the Property menu icon next to the source property and select Edit. Expand the images directory and select the JDeveloper.jpg image as the source.
    
    
    
    Click OK. Click Yes to relocate the gif image in the resources directory for the application, and then click Save to save it in the default location.
    Click OK again.
    

16. Click in the gray area outside the dialog to return to the main page design view. In the Design view, select the My Options menu item to bring the component to focus in the Structure window.

In the Components window, expand the Operations category and in the Behavior section, drag the Show Popup Behavior component onto the commandMenuItem - Show Specials component in the Structure window.

In the Insert Show Popup Behavior pane, set the PopupId to :::p1.





17. In the Properties window, click the Property Menu icon next to the PopupId property and select Edit.
    
    

18. In the Edit Property Dialog, expand the document and form nodes. Select the popup - p1 component, and click OK.
    
    

19. Right click the file and choose Run to re-run the page.
    Click the My Options menu and select Show Specials.

    

    The popup dialog appears and contains the JDeveloper image.
    
    

20. Now provide drag and drop functionality between the Product Details tab and the My Cart accordion, allowing users to effectively fill the cart from the Product Details using a simple drag and drop operation.
    In the Components window, locate the Output Text component from the ADF Faces library. Drag it onto the My Cart accordion pane.

    

    In the Properties window, set the Value property to No Items.

    
    

21. Select the name output text component in the products table to bring it to focus in the design view. In the Components window, expand the Operations category and locate the Drag and Drop section. Select the Attribute Drag Source component and drop it onto the name output text component. Ensure that you drop the Attribute Drag Source onto the name output text, and not on the column. If you're unsure, use the Structure window.
    
    

In the Insert Attribute Drag Source dialog, select value from the drop-down list.



Click OK.

22. From the Components window drag and drop an Attribute Drop Target component onto the No Items output text component.

    

    In the Insert Attribute Drop Target dialog, select value for the Attribute property.
    
    
    
    Click OK.

23. Save all your work and reload the page in the browser. In the products table, select a name value and drag and drop it onto the No Items text in My Cart.
    
    
    
    
    The product name is added to the cart.
    
    

24. Now add a menu option to take the current table information and display it as a printable page. In JDeveloper, add another Menu Item to the My Options menu and set the Text property to Printable Page.
    
    

25. By now you should be familiar with locating components in the Components window and dragging them to the design or Structure window in order to add the component to the correct place in the page. Additionally, you should now understand that in many cases, it's best to have in focus the location where you want to add the component, by selecting a component in the design or Structure window.
    
    Drop a Show Printable Page Behavior component onto the menu component that you just created.
    
    

26. In the next couple of steps, add a popup page to show products using a carousel.
    
    

    You can display images in a revolving carousel. Read more...
    
    Users can view a series of images, one for each record. They can change the image at the front either by using the slider at the bottom or by clicking one of the auxiliary images to bring that specific image to the front.
    
    By default, the carousel displays horizontally. The objects within the horizontal orientation of the carousel are vertically-aligned to the middle and the carousel itself is horizontally-aligned to the center of its container.
    
    You can configure the carousel so that it can be displayed vertically, as you might want for a reference "rolodex". By default, the objects within the vertical orientation of the carousel are horizontally-aligned to the center and the carousel itself is vertically aligned middle. You can change the alignment using the carousel's alignment attributes.
    
    
    

    Drag a popup component from the Components window onto the first af:form component in the Structure window.

    
    
    

27. Right click the new af:popup and select Insert Inside Popup > Dialog.
    
    
    
    

28. In the Properties window, set the Type property to ok.
    
    
    

29. In the Data Controls window, expand StoreProducts and drop the products collection onto the dialog in the design view. Select Carousel from the menu.
    
    
    

30. Drag an Image component to within the carousel item component.
    
    
    
    In the Insert Image dialog, enter /images/products/#{item.imageLocation} as the value for the Source property.
    
    
    
    Click OK.
    

31. Click in the gray area outside the popup to return to the main design view of products.jsf.
    In the Structure window, locate the viewMenu facet for the panelCollection (the panelCollection is the parent component for the products table component).
    Right click the viewMenu facet and choose Insert inside f:facet - viewMenu > Menu Item.
    
    
    

32. In the Properties window, set the Text property to View As Carousel.
    
    
    

33. Drop a Show Popup Behavior component onto the View As Carousel menu item.
    
    In the Insert Show Popup Behavior pane, set the PopupId to :::p2 (a reference to the second popup window).
    
    
    

34. In the Properties window, select Edit from the PopupId property menu.
    
    
    

35. In the Edit Property dialog, expand the document and form nodes and ensure the popup - p2 component is selected.
    
    
    
    
    Click OK.
    

36. Save all your work and re-run the page. When it is displayed in the browser, click the My Options - Printable Page menu. The table component of the page is displayed in a separate tab in the browser and ready to be sent to a printer.
    
    
    

37. Close the printable view and select View As Carousel from the View menu.
    

38. Use the carousel to see how it works, when you are done, click OK to close the popup.

Now add a gauge to display the rating of any particular product. To create this gauge, perform the following steps:

1. In the design view of the products.jsf page, click the Rating tab.

   
   

2. In the data controls window, expand StoreProducts and products and drag the rating attribute onto the rating tab of the design editor. Choose Gauge... from the popup menu.
   
   
   
   

3. In the Component Gallery dialog, select the Status Meter Gauge category, then Circular Status Meter  as the meter type.
   
   
   
   Click OK.
   

4. In the Create Circular Status Meter Gauge dialog, set the Maximum Value field to 10.
   Click the green plus sign and add three threshold attributes. Name and set them using the values below. Set the colors to ones generally like those in the image.
   
   Set the lowest threshold (threshold1) to 1.
   Set the middle threshold (threshold2) to 5.
   Leave the highest threshold (threshold3) at Maximum.



Click OK.


5. Save your work and refresh the page in the browser. The status meter displays the current rating value for the current (first) product.
   
   

6. Click the Product Details tab and move the slider to change the rating value.

   

    

7. Click Submit and then click the Rating tab to see the new value reflected in the table as well as the gauge. An error is raised referencing PPR. You will correct this in the next step.

   
   

Step 6: Implementing Partial Page Rendering

The goal of Partial Page Rendering is to improve a web page's interactivity, speed, and usability. Read more...

Ajax (Asynchronous JavaScript and XML) is a web development technique for creating interactive web applications, where web pages appear more responsive by exchanging small amounts of data with the server behind the scenes, without the whole web page being rerendered.

With ADF Faces, the feature that delivers the Ajax partial page render behavior is called partial page rendering (PPR). PPR allows certain components on a page to be rerendered without the need to rerender the entire page. For example, an output component can display what a user has selected or entered in an input component, without the whole page rerendering. In order for PPR to work, boundaries must be set on the page that allow the lifecycle to run just on components within the boundary. In order to determine the boundary, the framework must be notified of the root component to process. The root component can be identified in two ways:

- Events: Certain events indicate a component as a root. For example, the disclosure event sent when expanding or collapsing a showDetail component indicates that the showDetail component is a root. When the showDetail component is expanded or collapsed, only that component goes through the lifecycle. Other examples of events identifying a root component are the disclosure event when expanding nodes on a tree, or the sort event on a table.

- Components: Certain components are recognized as a boundary, and therefore a root component. For example, the framework knows a popup dialog is a boundary. No matter what event is triggered inside a dialog, the lifecycle does not run on components outside the dialog. It runs only in the popup.

In addition to built-in PPR functionality, you can configure components to use cross-component rendering, which allows you to set up dependencies so that one component acts as a trigger and another as the listener. When an event occurs on the trigger component, the lifecycle is run only on listener components and child components to the listener, and only the listener components and their children are rerendered. Cross-component rendering can be implemented declaratively. However, by default, all events from a trigger component will cause PPR (note that some components, such as table, trigger partial targets on only a subset of their events). For these cases where you need strict control over the event that launches PPR, or for cases where you want to use some logic to determine the target, you can implement PPR programmatically.

1. In order to refresh the gauge when the when you select a row in the table, you need to define Partial Page Rendering behavior explicitly. To do so, perform the following steps:
   
   In JDeveloper, select the rating status meter component in the design view. In the Properties window, expand the Behavior category. Click the Property menu icon for the PartialTriggers property and select Edit.

   
   
   
   

2. In the Edit Property dialog, expand the document, form, pageTemplate, facet (center), panelSplitter - ps1, facet (second), panelSplitter - ps2, facet (first), and panelCollection components. Select the table* - t1 component, and shuttle it to the Selected pane. This defines what will trigger the refresh of the gauge.
   
   
   
   Click OK.
   

3. Save all your work and reload the page in the browser. Click the ratings tab to and select different rows in the table to refresh the gauge.
   
   
   

Step 7: Using Skins to Change the Look and Feel of an Application

You can customize the appearance of ADF Faces and ADF Data Visualization components. Read more...

You can apply an ADF skin to the application or by applying CSS style properties directly to an ADF Faces or ADF DVT component if the component exposes a style-related property (styleClass or inlineStyle). Choosing the latter option means that you override style properties defined in your application's ADF skin for the component. You might do this when you want to change the style for an instance of a component on a page rather than for all components throughout the application or you want to programmatically set styles conditionally. For example, you want to display text in red only under certain conditions. In all other cases, styleClass or skinning should be used.

An ADF skin is a type of CSS file where you define CSS style properties based on the Cascading Style Sheet (CSS) specification for the component for which you want to customize the appearance. The ADF skin defines rules that determine how to apply CSS style properties to specific components or groups of components. The end user's browser interprets these rules and overrides the browser's default settings. See the Skin Editor documentation for further information: http://docs.oracle.com/middleware/1212/skineditor/docs.htm

1. Finally in this section you'll see how to change the look and feel of the whole application using a different skin. To implement this functionality, perform the following steps:
   
   In the Applications window, expand the Web Content - WEB-INF node and double-click the trinidad-config.xml file to open the file in the editor.

   
   

2. The file defines the skin that is used in the skin-family element. Change the skin-family to simple.desktop. The simple skin is often chosen as a starting point for creating a custom skin.
   
   
   

3. Save all your work and refresh the page in the browser. Notice the changes in the look and feel of the application.
   
   
   
   
   
   When finished, close your browser window. You have successfully completed this tutorial.
   
   

Expand all | Hide all

Back to top

Copyright © 2014, Oracle and/or its affiliates. All rights reserved.