How to Create a Page Fragment

19-8 Web User Interface Developers Guide for Oracle Application Development Framework Figure 19–1 Quick Layouts To use page templates in an application, you first create a page template definition. Page template definitions must be JSF documents written in XML syntax with the file extension of .jspx because page templates embed XML content. In contrast to regular JSF pages where all components on the page must be enclosed within the f:view tag, page template definitions cannot contain an f:view tag and must have pageTemplateDef as the root tag. Either the template or the page that uses the template must contain the document tag, but they cannot both contain the tag by default, JDeveloper adds the document tag to the consuming page. A page template can have fixed content areas and dynamic content areas. For example, if a Help button should always be located at the top right-hand corner of pages, you could define such a button in the template layout, and when page authors use the template to build their pages, they do not have to add and configure a Help button. Dynamic content areas, on the other hand, are areas of the template where page authors can add contents within defined facets of the template or set property values that are specific to the type of pages they are building. The entire description of a page template is defined within the pageTemplateDef tag, which has two sections. One section is within the xmlContent tag, which contains all the page template component metadata that describes the template’s supported content areas defined by facets, and available properties defined as attributes. The second section anything outside of the xmlContent tag is where all the components that make up the actual page layout of the template are defined. The components in the layout section provide a JSF component subtree that is used to render the contents of the page template. Facets act as placeholders for content on a page. In a page that consumes a template, page authors can insert content for the template only in named facets that have already been defined. This means that when you design a page template, you must define all possible facets within the xmlContent tag, using a facet element for each named facet. In the layout section of a page template definition, as you build the Creating and Reusing Fragments, Page Templates, and Components 19-9 template layout using various components, you use the facetRef tag to reference the named facets within those components where content can eventually be inserted into the template by page authors. For example, the fileExplorerTemplate template contains a facet for copyright information and another facet for application information, as shown in Example 19–6 . Example 19–6 Facet Definition in a Template facet description [CDATA[Area to put a commandLink to more information about the application.]] description facet-nameappAboutfacet-name facet facet description [CDATA[The copyright region of the page. If present, this area typically contains an outputText component with the copyright information.]] description facet-nameappCopyrightfacet-name facet In the layout section of the template as shown in Example 19–7 , a panelGroupLayout component contains a table whose cell contains a reference to the appCopyright facet and another facet contains a reference to the appAbout facet. This is where a page developer will be allowed to place that content. Example 19–7 Facet References in a Page Template af:panelGroupLayout layout=vertical afh:tableLayout width=100 afh:rowLayout afh:cellFormat af:facetRef facetName=appCopyright afh:cellFormat afh:rowLayout afh:tableLayout af:facetRef facetName=appAbout af:panelGroupLayout While the pageTemplateDef tag describes all the information and components needed in a page template definition, the JSF pages that consume a page template use the pageTemplate tag to reference the page template definition. Example 19–7 shows how the index.jspx page references the fileExplorerTemplate template, provides values for the template’s attributes, and places content within the template’s facet definitions. Note: To avoid component ID collisions at runtime, each named facet can be referenced only once in the layout section of the page template definition. That is, you cannot use multiple facetRef tags referencing the same facetName value in the same template definition.