text: 10 Creating and Reusing Fragments, Page Templates, and Components
  This chapter includes the following sections:
  About Reusable Content templates: By creating page templates, you.
  The page template and the declarative component share much of the functionality. The main difference is that the page template supports ADF Model binding and ADF Controller using a page template model. Using the
  valueattribute, you can specify which object to use as the bindings inside of the page template. If the
  valueis a page template model binding, ADF Model page bindings may be used, and you may use the ADF page definition to determine which view to include.
  For information about creating and using page templates, see Using Page Templates, and How to Create JSF Pages Based on Page Templates.
  Page fragments: Page fragments allow you to create parts of a page. A JSF page can be made up of one or more page fragments. For example, a large JSF page can be broken up into several smaller page fragments for easier maintenance. For information about creating and using page fragments, see Using Page Fragments..
  The declarative component is deployed as part of an ADF library JAR file. It features its own TLD file that allows you to put the component in your own namespace. The declarative component allows you to pass facets into the component and also any attributes and method expressions. Inside of the declarative component, the attributes and facets may be accessed using EL expressions It has a relatively low overhead as it does not involve ADF Model or ADF Controller, which also means that it does not have support for ADF Model transactions or ADF Controller page flows.
  Note that you should not reference individual components inside of a declarative component, and individual components within a declarative component should not reference external components. The reason is that changes in the declarative component or in the consuming page could cause the partial triggers to no longer work. For information about creating and using declarative components, see Using Declarative Components.
  Tip:
  If your application uses Using Task Flows as Regions in Developing Fusion Web Applications with Oracle Application Development Framework.
  Page templates, page fragments, and declarative components provide consistent structure and layout to the pages in an application. These building blocks can not only be reused in the same application, but also can be shared across applications. When update a building block, all the instances where it is used is automatically updated.
  Page templates are data-bound templates that support both static areas that do not change and dynamic areas where they change during runtime. You can use page fragments to build modular pages. For instance, you can create page fragments for the header, footer, and company logo and reuse these fragments throughout the application. You can use declarative components when you have several components that always used in a group. By creating a declarative component, you can add it to the tag library and be able to drag and drop the declarative component from the JDeveloper Components window. information about naming containers, see Locating a Client Component on a Page.
  If you plan to include resources such as CSS or JavaScript, you can use the
  af:resource tag to add the resources to the page. If this tag is used in page templates and declarative components, the specified resources will be added to the consuming page during JSP execution. See Adding Resources to Pages.
  If you are not using an ADF task flow to navigate a portion of the page, you should not be using regions, but instead use one of the other compound components. Among the compound components, you should use a page template if you need to use bindings inside of your compound component and they differ from the bindings of the host page. You should use a declarative component if you do not need bindings for your page and do not need to use a bounded task flow as part of your page.. You should use
  backingBeanScope for declarative components and page templates. For information about scopes, see Object Scope Lifecycles.
  You can control whether child components of a page template or declarative component can be changed by external reference. For example, you can enable or disable the customization of the child components. Both
  af:pageTemplateDef and
  af:componentDef has a
  definition attribute that controls access. When
  definition is set to
  public, then the direct child components can be customized, while
  definition is set to
  private, the child components cannot be customized. The default value is
  private. You can modify
  definition by editing the source file or by using the Properties window.
  See Customizing Applications with MDS in Developing Fusion Web Applications with Oracle Application Development Framework for information about customization.
  Reusable Components Use Cases and Examples
  The File Explorer application uses a
  fileExplorerTemplate to provide a consistent look and feel to all the pages in the application. The facets of the file provide working area to place different types of information. The template defines an
  appCopyright facet that is used to display copyright information for every page.
  The main page of the File Explorer application not only uses the page template, but also uses page fragments to contain the content for the individual facets of the template. The
  header.jspx page fragment contains the menu commands for the application.
  If you have several components that works as a group and repeats in several places, you can define a declarative component to group these components together. Once you have created the component, you can use this declarative component like any other component. For example, you may use several inputText components to denote first name, last name, and email address. Since this three inputText components will be used repeatedly in your application, you can create a declarative component for them.
  Additional Functionality for Reusable Components
  You may find it helpful to understand other Oracle ADF features before you implement your reusable components. Following are links to other functionality that are related to reusable components.
  For information about customization, see Customizing Applications with MDS in Developing Fusion Web Applications with Oracle Application Development Framework.
  For information about using the Quick Start Layouts to provide a preconfigured layout, see Using Quick Start Layouts.
  For information about using model parameters and ADF Model data bindings, see Using Page Templates in Developing Fusion Web Applications with Oracle Application Development Framework
  For information about packaging a page template into an ADF Library JAR file for reuse, see Reusing Application Components in Developing Fusion Web Applications with Oracle Application Development Framework.
  Using Page Templates
  Page templates let you define entire page layouts, including values for certain attributes of the page.. Figure 10-1 shows the quick layouts available for a two-column layout with the second column split between two panes. For information about the layout components, see Organizing Content on Web Pages.
  Figure 10-1 Quick Layouts
  Description of "Figure 10-1 Quick Layouts"
  To use page templates in an application, you first create a page template definition. Page template definitions must be either Facelets or JSP XML documents the following example.
  <facet> <description> <![CDATA[Area to put a link the following example, 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.
  :
  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.
  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. The following example.
  Note:
  You cannot run a page template as a run target in JDeveloper. You can run the page that uses the page template.. Page templates also support dynamic attributes as an
  inline tag. For example,
  af:pageTemplate headerSize="70" is valid syntax. the following example.
   Manually Defining Resource Bundles and Locales.
  You can nest templates when you need to reuse the same content across multiple templates. For example, say your application will have three different types of pages, but the header and footer will always be the same. Instead of having to include the same header and footer design in three different templates, you can create a header template and a footer template, and then simply nest those templates into each of the different page templates..
  If your template requires resources such as custom styles defined in CSS or JavaScript, then you need to include these on the consuming page, using the
  af:resource tag. See Adding Resources to Pages.
  How to Create a Page Template page templates you create in a project.
  Performance Tip:
  Because page templates may be present in every application page, templates should be optimized so that common overhead is avoided. One example of overhead is round corners, for example on boxes, which are quite expensive. Adding them to the template will add overhead to every page.
  Before you begin:
  It may be helpful to have an understanding of page templates. See Using Page Templates.
  You may also find it helpful to understand functionality that can be added using other ADF Faces features. See Additional Functionality for Reusable Components.
  To create a page template definition:
  - In the Applications window, right-click the node where you wish to create and store page templates and choose New > ADF Page Template.
  - In the Create a Page Template dialog,.
  If the page template is intended to be packaged as an ADF Library, you should not accept the default directory name. You should try to specify a unique directory name so that it will be less likely to clash with page templates from other ADF Libraries.
  - Select either Facelets or JSP XML as the document type.
  - Enter a Page Template name for the page template definition, and click Next.
  - In the Optionally add starting content page of the Create a a Page Template dialog, select one of the template choices, then the template, and click Next.
  Blank Template: Select if you want start using a blank page.
  Copy Existing Template: Select if you want to start with an existing template.
  Copy Quick Start Layout: Select if you want to use various predefined templates featuring one, two, or three column layout.
  - In the Add facet definitions and attribute page of the Create a Page Template dialog, you can add facets and attributes.
  In the Facet Definitions section, click Add to add a facet name and description.
  Facets are predefined areas on a page template where content can eventually be inserted when building pages using the template. Each facet must have a unique name. For example, you could define a facet called
  mainfor the main content area of the page, and a facet called
  brandingfor the branding area of the page.
  Tip:
  If you plan on nesting templates or using more than one template on a page, to avoid confusion, use unique names for the facets in all templates.
  In the Attributes section, click Add to add an attribute.
  Attributes are UI component attributes that can be passed into a page when building pages using the template. Each attribute must have a name and class type (for example,
  java.lang.String). Note that whatever consumes the attribute (for example an attribute on a component that you configure in Step 13) must be able to accept that type. You can assign default values, and you can specify that the values are mandatory by selecting the
  Requiredcheckbox.
  Click Next.
  - If the page template contents use ADF Model data bindings, select the Create Page Definition checkbox, and click Add to add one or more model parameters. For information about using model parameters and ADF Model data bindings, see Using Page Templates in Developing Fusion Web Applications with Oracle Application Development Framework.
  Once you complete the wizard, JDeveloper displays the page template definition file in the visual editor. The following example Properties window.
  Note:
  When you change or delete any facet name or attribute name in the template component metadata, you have to manually change or delete the facet or attribute name referenced in the layout section of the template definition, as well as the JSF pages that consume the template.
  <af:pageTemplateDef <af:xmlContent> <component xmlns=""> <description/> >
  - In the Components window, drag and drop a component to the page.
  In the layout section of a page template definition (or in fragment files that contain a portion of the layout section), you cannot use the
  f:viewtag, because it is already used in the JSF pages that consume page templates.
  Best Practice Tip:
  You should not use the
  documentor
  formtags in the template. While theoretically, template definitions can use the
  documentand
  formtags, doing so means the consuming page cannot. Because page templates can be used for page fragments, which in turn will be used by another page, it is likely that the consuming page will contain these tags. You should never add a
  documenttag to a page template.
  You can add any number of components to the layout section. However, you should only have one root component in a template. If you did not choose to use one of the quick start layouts, then typically, you would add a panel component such as
  panelStretchLayoutor
  panelGroupLayout, and then add the components that define the layout into the panel component. See Organizing Content on Web Pages.
  Declarative components and databound components may be used in the layout section. For information about using declarative components, see Using Declarative Components. For information about using databound components in page templates, see Using Page Templates in Developing Fusion Web Applications with Oracle Application Development Framework.
  - To nest another template into this template, in the Components window, from the Layout panel, in the Core Structure group, drag and drop a Template onto the page.
  Note:
  You cannot nest an ADF databound template in a template that does not use ADF data binding, or in a declarative component.
  Additionally, a nested template cannot be used more than one per rendering. For example, it cannot be used as a child to a component that stamps its children, such as a table or tree.
  - In the Insert Template dialog, select the template that you want to nest.
  Tip:
  The dialog displays all the templates that are included in the current project or that are provided in an ADF Library. For information about ADF Libraries, see Reusing Application Components in Developing Fusion Web Applications with Oracle Application Development Framework.
  - In the Components window, from the Layout panel, in the Core Structure group, drag a Facet and drop it to the page.
  For example, if you have defined a
  mainfacet for the main content area on a page template, you might add the
  facetReftag as a child in the
  centerfacet of
  panelStretchLayoutcomponent to reference the
  mainfacet. At design time, when the page author drops content into the
  mainfacet, the content is placed in the correct location on the page as defined in the template.
  When you use the
  facetReftag to reference the appropriate named facet, JDeveloper displays the Insert Facettag.
  Note:
  Each facet can be referenced only once in the layout section of the page template definition. That is, you cannot use multiple
  facetReftags referencing the same
  facetNamevalue in the same template definition.
  Note:
  If you have nested another template into this template, you must create facet references for each facet in the nested template as well as this template.
  - To specify where attributes should be used in the page template, use the page template's
  varattribute value to reference the relevant attributes on the appropriate components in the layout section.
  The
  varattribute of the
  pageTemplateDeftag specifies the EL variable name that is used to access the page template's own attributes. As shown in the following example, the default value of
  varused by JDeveloper is
  attrs.
  For example, if you have defined a
  titleattribute and added the
  panelHeadercomponent, you might use the EL expression
  #{attrs.title}in the
  textvalue of the
  panelHeadercomponent, as shown in the following code, to reference the value of
  title:
  <af:panelHeader
  - To include another file in the template layout, use the
  jsp:includetag wrapped inside the
  subviewtag to reference a fragment file, as shown in the following code:
  <f:subview <jsp:include </f:subview>
  The included fragment file must also be an XML document, containing only
  jsp:rootat the top of the hierarchy. For information about using fragments,.
  What Happens When You Create a Page Template, see Using Page Templates in Developing Fusion Web Applications with Oracle Application Development Framework.
  The first time you use the wizard to create a. The following example shows an example of the Applications window, JDeveloper renames or deletes the page template definition file in the file system, but you must manually change or delete the page template entry in the
  pagetemplate-metadata.xml file, and update or remove any JSF pages that use the template.
  The
  pagetemplate-metadata.xml file contains the names and paths of all the page templates that you create in a project. This file is used to determine which page templates are available when you use a wizard to create template-based JSF pages, and when you deploy a project containing page template definitions.
  How to Create JSF Pages Based on Page Templates file. For information about deploying a project, see Reusing Application Components in Developing Fusion Web Applications with Oracle Application Development Framework. Deploying a page template project also allows you to share page templates with other developers working on the application.
  Note:
  If the template uses
  jsp:include tags,.
  Before you begin:
  It may be helpful to have an understanding of page templates. See Using Page Templates.
  You may also find it helpful to understand functionality that can be added using other ADF Faces features. See Additional Functionality for Reusable Components.
  To create a JSF page or page fragment based on a page template:
  - Follow the instructions in How to Create JSF Pages to open the Create JSF Page dialog. In the dialog, select a page template to use from the available selections.
  Tip:
  Only page templates that have been created using the template wizard in JDeveloper are available for selection when you have selected ReferenceADF Page Template.
  Tip:
  Instead of basing the whole page on a template, you can use a template for an area of a page. For example, you may have a template to be used just in the headers of your pages. To apply a template to an area of your page, from the Layout panel of the Components window, drag and drop a Template into the desired component.
  By default, JDeveloper displays the new page or page fragment in the visual editor. The facets defined in the page template appear as named boxes in the visual editor. If the page template contains any default values, you should see the values in the Properties window,tag, you can drop content before and after the
  pageTemplatetag.
  - Add components by dragging and dropping components from the Components windowReftag in the page template definition. For example, if you've defined a
  facetReftag to be inside a
  tablecomponent in the page template definition, then only
  columncomponents can be dropped into the facet because the
  tablecomponent accepts only
  columncomponents as children.
  Tip:
  The content you drop into the template facets may contain ADF Model data binding. In other words, you can drag and drop items from the Data Controls panel. For information about using ADF Model data binding, see About Using ADF Model in a Fusion Web Application in Developing Fusion Web Applications with Oracle Application Development Framework.
  - In the Structure window, select af:pageTemplate. Then, in the Properties window,:attributetag to the code, and replaces the attribute's default value (if any) with the value you assign. Properties window also shows other attributes of the
  pageTemplatetag such as
  Id,
  Value, and
  ViewId.
  The
  ViewIdattribute of the
  pageTemplatetag specifies the page template definition file to use in the consuming page at runtime. JDeveloper automatically assigns the
  ViewIdattribute with the appropriate value when you use the wizard to create a template-based JSF page. The
  ViewIdattribute value cannot be removed, otherwise a runtime error will occur, and the parts of the page that are based on the template will not render.
  - To include resources, such as CSS or JavaScript, you need to use the
  af:resourcetag. See Adding Resources to Pages.
  What Happens When You Use a Template to Create a Page
  When you create a page using a template, JDeveloper inserts the
  pageTemplate tag, which references the page template definition, as shown in the following example. Any components added inside the template's facets use the
  f:facet tag to reference the facet. Any attribute values you specified are shown in the
  f:attribute tag.
  <?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns: <jsp:directive.page >
  What Happens at Runtime: How Page Templates Are Resolved
  When a JSF page that consumes a page template is executed:
  The
  pageTemplatecomponent in the consuming page, using the
  viewIdattribute (for example,
  <af:pageTemplate), locates the page template definition file that contains the template component metadata and layout.
  The component subtree defined in the layout section of the
  pageTemplateDeftag is instantiated and inserted into the consuming page's component tree at the location identified by the
  pageTemplatetag in the page.
  The consuming page passes facet contents into the template using the
  facettag. The facet contents of each
  facettag are inserted into the appropriate location on the template as specified by the corresponding
  facetReftag in the layout section of the
  pageTemplateDeftag.
  The consuming page passes values into the template by using the
  attributetag. The
  pageTemplateDeftag sets the value of the
  varattribute so that the
  pageTemplatetag can internally reference its own parameters. The
  pageTemplatetag just sets the parameters; the runtime maps those parameters into the attributes defined in the
  pageTemplateDeftag.
  Using template component metadata, the
  pageTemplatetag
  iterator tag and expect it to be included in a loop.
  For information about what happens when the page template uses ADF Model data binding, see Using Page Templates in Developing Fusion Web Applications with Oracle Application Development Framework.
  What You May Need to Know About Page Templates and Naming Containers
  The
  pageTemplate component acts as a naming container for all content in the template (whether it is direct content in the template definition, or fragment content included using the
  jsp:include action). When working in template-based pages, you should not reference an individual component inside a page template. Changes made to the page template or its consuming page may cause the partial triggers to work improperly. See What You May Need to Know About Using Naming Containers.
  Using Page Fragments information about scopes, node hierarchy of the application.
  contentViews.jspx: Contains the content for the node selected in the navigator pane.
  The following example shows the abbreviated code for the included
  header.jspx page fragment. Note that it does not contain an
  f:view or
  document tag.
  <?xml version='1.0' encoding='UTF-8'?> <ui:composition xmlns: </ui:composition>
  When you consume a page fragment in a JSF page, at the part of the page that will use the page fragment contents, you insert the
  jsp:include tag to include the desired page fragment file, as shown in the following example, which is abbreviated code from the
  index.jspx page.
  <?xml version='1.0' encoding='utf-8'?> <ui:composition xmlns: </ui:composition> ADF Model data binding, the included page fragment will use the binding container of the consuming page. Only page fragments created as part of ADF bounded task flows can have their own binding container. For information about ADF bounded task flows, see Getting Started with ADF Task Flows in Developing Fusion Web Applications with Oracle Application Development Framework.
  Like complete JSF pages, page fragments can also be based on a page template, as shown in the following example. For information about creating and applying page templates, see Using Page Templates, and How to Create JSF Pages Based on Page Templates.
  <?xml version='1.0' encoding='UTF-8'?> <ui:composition xmlns: <af:pageTemplate . . . </af:pageTemplate> </ui:composition>
  How to Create a Page Fragment Applications window in JDeveloper.
  Before you begin:
  It may be helpful to have an understanding of page fragments. See Using Page Fragments.
  You may also find it helpful to understand functionality that can be added using other ADF Faces features. See Additional Functionality for Reusable Components.
  To create a page fragment:
  - In the Applications window, right-click the node where you wish to create and store page fragments and choose New > ADF Page Fragment.
  - In the Create ADF Page Fragment dialog, enter a name for the page fragment file.
  - Accept the default directory for the page fragment, or choose a new location.
  By default, JDeveloper saves page fragments in the project's
  /public_htmldirectory in the file system. For example, you could change the default directory to
  /public_html/fragments.
  - You can have your fragment pre-designed for you by using either a ADF page template, a Quick Start Layout. or start with a blank page.
  If you want to create a page fragment based on a page template, select the Reference ADF Page Template radio button and then select a template name from the dropdown list. For information about using page templates, see How to Create JSF Pages Based on Page Templates.
  If you want to use a Quick Start Layout, select the Copy Quick Start Layout radio button and browse to select the layout you want your fragment to use. Quick Start Layouts provide the correctly configured layout components need to achieve specific behavior and look. See Using Quick Start Layouts.
  When the page fragment creation is complete, JDeveloper displays the page fragment file in the visual editor.
  - To define the page fragment contents, drag and drop the desired components from the Components window onto the page.
  You can use any ADF Faces or standard JSF component, for example
  table,
  panelHeader, or
  f:facet.
  The following example shows an example of a page fragment that contains a menu component.
  <?xml version='1.0' encoding='UTF-8'?> <ui:composition xmlns: <af:pageTemplate <!--> </ui:composition>
  What Happens When You Create a Page Fragment
  In JDeveloper, because page fragment files use a different file extension from regular JSF pages, configuration entries are added to the
  web.xml file for recognizing and interpreting
  .jsff files in the application. The following example shows the
  web.xml configuration entries needed for
  .jsff files, which JDeveloper adds for you when you first create a page fragment using the wizard.
  .
  How to Use a Page Fragment in a JSF Page
  To consume a page fragment in a JSF page, add the page using the Components window. You can use the
  jsp:include tag to include the desired page fragment file.
  Before you begin:
  It may be helpful to have an understanding of page fragments. See Using Page Fragments.
  You may also find it helpful to understand functionality that can be added using other ADF Faces features. See Additional Functionality for Reusable Components.
  To add a page fragment using the Components Window:
  - In the Components window, in the JSP page, drag a Include and drop it on the page.
  - In the Insert Include dialog, use the dropdown list to select the JSF page to include. Optionally, select whether or not to flush the buffer before the page is included. For help with the dialog, click Help or press F1.
  What Happens at Runtime: How Page Fragments are Resolved.
  What You May Need to Know About Accessing a Page From a Different View ID
  In ADF, the pages are accessed through different views, each with different viewID. Saved Search, layouts feature uses viewId to derive a unique location within MDS to save the layout files as binaries. If you open a page template or fragment that contains a component and attributes and its results from different viewIDs, the results layout will be saved in different locations in MDS, because the storage location depends on the viewID of the page. However, this breaks the results layout persistence feature in ADF Faces. To override the MDS location for one viewID with another viewID of the page containing results layout and to consolidate all layout files under one viewID, the public interface
  QueryResultsLayoutIdentifier should be registered with
  ConfigPropertyService key
  oracle.adf.view.faces.component.query.resultsLayoutIdentifier as given below.
  public interface QueryResultsLayoutIdentifier { public abstract String getViewId(String currentViewId); }
  Configuration Property Service keyin
  web.xmlor as an ADF share property and set the value as
  oracle.adf.view.faces.component.query.resultsLayoutIdentifier.
  Note:You need to implement the public interface to return the correct viewId to be used.
  Using Declarative Components:
  If you want to use ADF Model layer bindings as values for the attributes, then you should use a page template instead. See Using Page Templates.
  To use declarative components in an application, you first create an XML-based declarative component definition, which is a JSF document written in XML syntax (with a file extension of
  Boxcomponent, you may decide to create an attribute named
  Title. You may then design the declarative component so that the value of the
  Titleattribute is used as the value for the
  textattribute of the
  panelBoxcomponent.. Seeattributemethod. You might create a declarative method named
  method1that used the signature
  void method(javax.faces.event.ActionEvent). You might then bind the
  actionListenerattribute file to the project's properties, which automatically inserts the JSP tag library or libraries into the project's properties. Doing so allows the component(s) to be displayed in the Components windowto hold the content of the
  panelBoxcomponent.
  One attribute named
  Titleto determine the text to display as the
  panelBoxcomponentmethod signature.
  One
  panelBoxcomponent whose
  textattribute is bound to the created
  Titleattribute, and references the
  contentfacet.
  Three
  Buttoncomponents. The
  textattribute for each would be bound to the corresponding
  buttonTextattribute, the
  renderattribute would be bound to the corresponding
  displayattribute, and the
  actionListenerattribute would be bound to the corresponding
  methodname.
  Figure 10-2 shows how such a declarative component would look in the visual editor.
  Figure 10-2 Declarative Component in the Visual Editor
  Description of "Figure 10-2 Declarative Component 10-3.
  Figure 10-3 Displayed Declarative Component
  Description of "Figure 10-3 Displayed Declarative Component".
  If your declarative component requires resources such as custom styles defined in CSS or JavaScript, then you need to include these using the
  af:resource tag on the consuming page. See Adding Resources to Pages.
  How to Create a Declarative Component
  JDeveloper simplifies creating declarative component definitions by providing the Create ADF.
  Before you begin:
  It may be helpful to have an understanding of declarative components. See Using Declarative Components.
  You may also find it helpful to understand functionality that can be added using other ADF Faces features. See Additional Functionality for Reusable Components.
  To create a declarative component definition:
  In the Applications window, right-click the node where you wish to create and store declarative components and click New > From Gallery.
  In the New Gallery, expand Web Tier, select JSF/Facelets, then ADF Declarative Component, and click OK.
  In the Create ADF Declarative Components dialog, enter a name and file name for the declarative component.
  The name you specify will be used as the display name of the declarative component in the Components window, as well as the name of the Java class generated for the component tag. Only alphanumeric characters are allowed in the name for the declarative component, for example,
  SampleNameor
  myPanelBox.
  The file name is the name of the declarative component definition file (for example,
  componentDef1.jspx). By default, JDeveloper uses
  .jspxas the file extension because declarative component definition files must be XML documents.
  Accept the default directory name for the declarative component, or choose a new location.
  By default, JDeveloper saves declarative component definitions in the
  /ViewController/public_htmldirectory in the file system. For example, you could save all declarative component definitions in the
  /View Controller/public_html/declcompsdirectory.component, you could define a facet named
  box-mainfor the content area of the
  panelBoxcomponent.
  To add attributes, click Attributes and click Add.
  Attributes are UI component attributes that can be passed into a declarative component. Each attribute must have a name and class type (for example,
  java.lang.String).ourcetag browse (...) icon Properties window.
  In the Components window, drag and drop a component as a child to the
  componentDeftag in the Structure window.
  Suppose you dropped a
  panelBoxcomponent. In the Structure window, JDeveloper adds the component after the
  xmlContenttag. It does not matter where you place the components for layout, before or after the
  xmlContenttag, but it is good practice to be consistent.
  You can use any number of components in the component layout of a declarative component. Typically, you would add a component such as
  panelFormLayout information about using the ADF Model layer, see Using ADF Model in a Fusion Web Application in Developing Fusion Web Applications with Oracle Application Development Framework.
  Additionally, because declarative components are delivered in external JAR files, the components cannot use the
  jsp:includetag because it will not be able to find the referenced files.
  Within those components (in the layout section) where content can eventually be inserted by page authors using the component, use the
  facetReftag to reference the appropriate named facet.
  For example, if you have defined a
  contentfacet for the main content area, you might add the
  facetReftag as a child in the
  panelBoxcomponent to reference the
  contentfacet. At design time, when the page developer drops components into the
  contentfacet, the components are placed in the
  panelBoxcomponent.
  When you drag Facet from the Components window Core Structure panel and drop it in the desired location on the page, JDeveloper displays the Insert Facet Definition dialog. In that dialog, select a facet name from the dropdown list, or enter a facet name, and click OK. If you enter a facet name that is not already defined in the component metadata of the definition file, JDeveloper automatically adds an entry for the new facet definition in the component metadata within the
  xmlContenttag.
  Note:
  Each facet can be referenced only once. That is, you cannot use multiple
  facetReftags referencing the same
  facetNamevalue in the same declarative component definition.
  To specify where attributes should be used in the declarative component, use the Properties window and the Expression Builder to bind component attribute values to the created attributes.
  For example, if you have defined a
  Titleattribute and added a
  panelBoxas a component, you might use the dropdown menu next to the text attribute in the Properties window to open the Expression Builder, as shown in Figure 10-4.
  Figure 10-4 Opening the Expression Builder for an Attribute in the Properties Window
  Description of "Figure 10-4 Opening the Expression Builder for an Attribute in the Properties Window"
  In the Expression Builder, you can expand the Scoped Variables > attrs node to select the created attribute that should be used for the value of the attribute in the Properties window. For example, Figure 10-5 shows the Title attribute selected in the Expression Builder. Click OK to add the expression as the value for the attribute.
  Figure 10-5 Expression Builder Displays Created Attributes
  To specify the methods that buttons in the declarative component should invoke, use the dropdown menu next to that component's
  actionListenerattribute.
  What Happens When You Create a Declarative Component
  When you first use the Create ADF. Be aware that if
  componentVar is set to
  component then it is incompatible with JSF 2.0 and the expression will fail. You will need to set
  componentVar using a different variable.
  The metadata describing the facets, attributes, and methods is contained in the
  xmlContent tag. Facet information is contained within the
  facet tag, attribute information is contained within the
  attribute tag, and method information is contained within the
  component-extension tag, as is library information. The following example shows abbreviated code for the declarative component shown in Figure 10-2.
  >dcomponent1<. The following example shows the code for the
  panelBox component with the three buttons in the toolbar. Notice that the
  facetRef tag appears as a child to the
  panelBox component, as any content a page developer will add will then be a child to the
  panelBox component.
  <af:panelBox <f:facet <af:group> <af:toolbar> <af:button <af:button <af:button. The following example shows an example of the> /componentLib1 </taglib-uri> <taglib-prefix> dc </taglib-prefix> </declarativecomp-taglib> </declarativeCompDefs>
  Note:
  When you rename or delete a declarative component in the Applications window, JDeveloper renames or deletes the declarative component definition file in the file system, but you must manually change or delete the declarative component entry in the
  declarativecomp-metadata.xml file,.
  JDeveloper also adds entries to the
  faces-config.xml file.
  How to Deploy file. For instructions on how to deploy a project to an ADF Library JAR file, see Reusing Application Components in Developing Fusion Web Applications with Oracle Application Development Framework.
  Briefly, when you deploy a project that contains declarative component definitions, JDeveloper adds the following for you to the ADF Library JAR file:
  A component tag class (for example, the
  componentDef1Tag.class) for each declarative component definition (that is, for each
  componentDefcomponent)
  One or more JSP TLD files for the declarative components, using information from the project's
  declarativecomp-metadata.xmlfile
  To use declarative components in a consuming project, you add the deployed ADF Library JAR file to the project's properties. For instructions on how to add an ADF Library JAR file, see Reusing Application Components in Developing Fusion Web Applications with Oracle Application Development Framework. By adding the deployed JAR file, JDeveloper automatically inserts the JSP tag library or libraries (which contain the reusable declarative components) into the project's properties, and also displays them in the Components window.
  How to Use Declarative Components in JSF Pages
  In JDeveloper, you add declarative components to a JSF page just like any other UI components, by selecting and dragging the components from the Components window, and dropping them into the desired locations on the page. Your declarative components appear in a page of the palette just for your tag library. Figure 10-6 shows the page in the Components window for a library with a declarative component.
  Figure 10-6 Components Window with a Declarative Component
  file that contains the declarative components to the project where you are creating JSF pages that are to consume the declarative components. For instructions on how to add an ADF Library JAR file, see Reusing Application Components in Developing Fusion Web Applications with Oracle Application Development Framework.
  Before you begin:
  It may be helpful to have an understanding of declarative components. See Using Declarative Components.
  You may also find it helpful to understand functionality that can be added using other ADF Faces features. See Additional Functionality for Reusable Components.
  To use declarative components in a JSF page:
  - In the Applications window, double-click the JSF page (or page template) to open it in the visual editor.
  - In the Components window, from the tag library panel, drag and drop the declarative component to.
  - Add components by dragging and dropping components from the Components window in the facets of the template. In the Structure window, expand the structure until you see the element for the declarative component, for example,
  dc:myPanelBox, where
  dcis the tag library prefix and
  myPanelBoxReftag in the declarative component definition. For example, if you have defined
  facetRefto be a child of
  tablein the declarative component definition, then only
  columncomponents can be dropped into the facet because
  tableaccepts
  columnchildren Properties window}).
  - If you need to include resources such as CSS or JavaScript, then you need to include these using the
  af:resourcetag. See Adding Resources to Pages.
  What Happens When You Use a Declarative Component on a JSF Page. The following example shows the code for the
  MyPanelBox declarative component to which a user has added a
  panelGroupLayout component that contains three
  outputFormatted components.
  >
  What Happens at Runtime: Declarative ComponentsDeftag is instantiated and inserted into the consuming page's component tree at the location identified by the declarative component tag in the page.
  The
  componentDeftag sets the value of the
  varattribute so that the declarative component can internally reference its own attributes. The declarative component just sets the attribute values; the runtime maps those values into the attributes defined in the
  componentDeftag.
  Using declarative component metadata, the declarative component applies any default values to its attributes and checks for required values.
  The consuming page passes facet contents into the declarative component by using the
  facettag. The facet contents of each
  facettag are inserted into the appropriate location on the declarative component as specified by the corresponding
  facetReftag in the layout section of the
  componentDeftag.
  Adding Resources to Pages
  You should use the
  af:resource tag to add CSS or JavaScript to pages, page templates, or declarative components. This tag is especially useful for page templates and declarative components because resources can only be added to the page (in the HTML head element). When you can use this tag in page templates and declarative components, the resources will be added to the consuming page during JSP execution. If this tag is not used, browsers may need to re-layout pages that use page templates and declarative components whenever it encounters a style or link tag. The resources can be added to the page during any page request, but they must be added before the document component is rendered.
  The resource tag can be used with PPR. During PPR, the following requirements apply:
  URL resources are compared on the client before being added to the page. This ensures duplicates are not added.
  CSS resources are removed from the page during a PPR navigation. The new page will have the new CSS resources.
  The resource used in the
  af:resourcetag is not the ADF skin CSS. For information on using the ADF skin, see Customizing the Appearance Using Styles and Skins.
  How to Add Resources to Page Templates and Declarative Components
  You use the
  af:resource tag to define the location of the resource. The resource will then be added to the document header of the consuming page.
  Before you begin:
  It may be helpful to have an understanding of the available resources. See Adding Resources to Pages.
  You may also find it helpful to understand functionality that can be added using other ADF Faces features. See Additional Functionality for Reusable Components.
  To add resources:
  - In the Components window, from the Layout panel, in the Core Structure group, drag and drop a Resource to the page.
  - In the Insert Resource dialog, do the following:
  Type: Select
  cssor
  javascriptfrom the dropdown list.
  Resource: Enter the URI of the source of the external resource to include in the page. If the URI starts with a slash ('/'), the URI will be made context relative, if it starts with two slashes ('//'), it will be made server relative. All others are non-absolute URIs are relative to URI location in the browser. If not given, the resource content will be taken from the tag body.
  - Click OK.
  What Happens at Runtime: How to Add Resources to the Document Header
  During JSP tag execution, the
  af:resource tag only executes if its parent component has been created. When it executes, it adds objects to a set in the RichDocument component. RichDocument then adds the specified resources (CSS or JavaScript) to the consuming page.