• Developing ADF PageTemplates


    In this hands-on, you learn how to create a page template and use this template when creating a new page for your application. 
    show more or lessRead more...
    PurposeDurationApplication

    This practice shows you how to develop a page template with layout components that you want to be applied for every single page of your application. Then you see how to create a page using the page template.

    The file contains two zip files (tutorial.zip and tutorialsolution.zip), one with the starter application, the other the completed solution.

    30 minutes Download taskflow.zip
     
    Step 1: Creating a Page Template

    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: 

    Page templates let you define entire page layouts, including values for certain attributes of the page. Show more or lessRead more...

    1. In the Applications Navigator, click Open Application .

      new application in navigator
    2. In the Open Application(s) dialog, locate the folder where you unzipped the application and select Tutorial.jws
      Click Open. If prompted with a migration warning message, continue and finish the migration operation.

      open application window
    3. The application is loaded up in the Application Navigator, showing the adffacesrc project.

      application name

    4. In the Application Navigator, right-click the adffacesrc project and select New from context menu.

      new context menu
    5. In the New Gallery, in the Categories pane, select Web Tier | JSF/Facelets, then select the ADF Page Template item.
      Then click OK

      new gallery with adf page template selected

    6. In the Create ADF Page Template, type simple for the Page Template Name.

      create adf template page
    7. In the Facet Definitions tab, click the Add save all button and type center as the Name.

      facet definition on template
    8. Click the Attributes tab, click the Add save all button , then type title as the Name and Default Title as the Default Value.
      Then click OK.

      attributes on template
    9. The simple.jspx template page opens up in the design editor.

      simiple template in design view
    10. From the Component Palette, expand the ADF Faces - Layout nodes and drag a Decorative Box onto the empty page.

      template page and layout library

      Using the Property Inspector, in the Style and Theme tab, set the Theme property to light from the list .

      property inspector style settings

    11. In the Structure Pane, drag and drop a Panel Group Layout into the top facet.

      panel group layout on top facet of template
    12. With the panelGroupLayout selected, set the Layout property, in the Property Inspector, to horizontal.

      setting layout property to horizontal
    13. In the Application Navigator, expand the Web Content | images nodes and drag and drop the brandingImage.gif node onto the Panel Group Layout. In the context menu select ADF Faces Image .

      adding an image to th epage
    14. From the ADF Faces - Layout, drop a Spacer next to the image.

      spacer added to the facet

      Then set the Width property to 100.

      set the width property fo rthe spacer
    15. From the ADF Faces | Common Components, drop an Output Text under the spacer component.

      output text added to the template

      In the Value field, select  Expression Builder from the drop-down list .

      invoking expression builder
    16. In the Expression Builder, clear out the existing expression and set the value to #{attrs.title}.
      Then click OK

      expression builder setting the value to #{attrs.title}

    17. In the Component Palette, under the ADF Faces drop-down, expand the Layout node and scroll down to the Core Structure section. Drag and drop a Facet onto the center facet.

      adding a facet to the template

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

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

    Step 2: Designing a Page using the Page Template

    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. Show more or lessRead more...
    1. Right-click the adffaces project and select New from the context menu.

      invoking the New gallery from application navigator
    2. In the New Gallery, expand the Web Tier node and select JSF/Facelets. Then select the Page item and click OK.

      new gallery with page selected
    3. In the Create JSF Page dialog, leave the file name to the untitled1.jspx default value and ensure the Document Type is set to Facelets. Then select simple from the drop-down list for the Page Layout section. 

      Then click OK.

      specifying the definition of the page, including using a template
    4. The untitled1.jspx appears as a new node in the Application Navigator and it opens up in the Design editor using the simple.jspx template.

      page diaplyed in design view
    5. From the component palette, using the ADF Faces | Layout library, 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. Show more or lessRead more...

      adding a panel splitter

    6. Drag and drop another Panel Splitter component onto the 'second' facet of the panel splitter.

      adding another panel splitter

    7. In the Structure pane, expand the first panelSplitter component and select the second one. Using the property inspector, set the Orientation to vertical.

      setting the orientation to vertical

    8. Drag and drop a Panel Accordion component onto the 'first' facet on the left hand side of the panel splitter.

      adding a panel accordion

      In the Property Inspector, set the Text to My Cart.

      setting the text to My Cart

    9. Click within the accordion you just created, then right-click on the showDetailItem and from the context menu select Insert after Show Detail Item - Show Item Detail.

      inserting a Show Item Detail after the existing show detail

      For the show detail item that you just added, using the Common tab of the Property Inspector, change the Text field to More Info.

      setting text property to More Info
    10. Drag and drop a Panel Collection component onto the right hand side 'first' facet.

      adding a panel collection to the first facet
    11. Drag and drop a Panel Tabbed component onto the right hand side 'second' facet. The component can be found in the Interactive Containers and Headersgrouping.

      adding a panel tabbed to the second facet

      In the Structure pane, select the af:showDetailItem component you just created and In the Property Inspector, enter Product Details in the Text field.

      setting the text of the panel tabbed to Product Details
    12. Right click the Product Details tab and select Insert After Show Detail Item - Show Detail Item from context.

      adding another dhow detail item to the panel tabbed

      In the Structure pane, select the af:showDetailItem component you just created and in the Property Inspector, enter Rating in the Text field.

      setting the text property to Rating

      The page should look like the following image.

      design view of the page
    13. Save all your work. Then right-click in the page and from the context menu, select Run.

      running th epage from the design view
    14. The page will load in your browser. Experiment with selecting the tabs and expanding the More Info panel. Once you're finished, keep the browser open and return to JDeveloper

      page loaded in browser
    15. 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 simple.jsf template page you created earlier.

      viewing the simple page in jdeveloper
    16. In the page designer, select the title component.

      selecting the output title component

      In the Property Inspector, expand the Style node, and using the Font/Text node, in the Color field click the Color drop-down list and select the color of your choice (Aqua in our example).

      setting the title to aqua color

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

      setting the size to large for the title component
    17. 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 component. In that case you will need to reRun the page from JDeveloper in order to have the changes reflected in your browser.

      reloading th epage in the browser to see new caracteristics of title
    18. Open the untitled page in the design editor.

      back in the simple page within jdeveloper
    19. In the Structure pane, select the pageTemplate tag and in the Property Inspector, set the Title property to Store Front.

      selecting the tamplate in the structure panesetting the title to Store Front
    20. Save all your work. Then go back to the browser and reload the page to see the new characteristics.

      reloading the page to see the changes


    Summary

    In this tutorial you developed a page template, created a page based on the template, added data controls to the page, employed partial page rendering, included DVT components and changed the look and feel of the page using a css file. You learned how to:

      • Create a Page Template
      • Design a Page using the Page Template

    程序员的基础教程:菜鸟程序员

  • 相关阅读:
    [CC-TRIPS]Children Trips
    [HDU5968]异或密码
    [CC-PERMUTE]Just Some Permutations 3
    [HackerRank]Choosing White Balls
    Gym102586L Yosupo's Algorithm
    Gym102586B Evacuation
    Kattis anothercoinweighingpuzzle Another Coin Weighing Puzzle
    Gym102586I Amidakuji
    CF1055F Tree and XOR
    CF241B Friends
  • 原文地址:https://www.cnblogs.com/guohu/p/3757612.html
Copyright © 2020-2023  润新知