How to Deploy Declarative Components

19-30 Web User Interface Developers Guide for Oracle Application Development Framework In this example, dc is the tag library prefix, and dcomponentLib1 is the namespace. JDeveloper adds the tag for the declarative component onto the page. The tag includes values for the component’s attributes as set in the dialog when adding the component. Example 19–16 shows the code for the MyPanelBox declarative component to which a user has added a panelGroupLayout component that contains three outputFormatted components. Example 19–16 JSF Code for a Declarative Component that Contains Content dc:myPanelBox title=My Panel Box buttonText1=Button 1 display1=true display2=true buttonText2=Button 2 display3=false f:facet name=Content af:panelGroupLayout layout=scroll af:outputFormatted value=outputFormatted1 styleUsage=instruction af:outputFormatted value=outputFormatted2 styleUsage=instruction af:outputFormatted value=outputFormatted3 styleUsage=instruction af:panelGroupLayout f:facet dc:myPanelBox

19.4.6 What Happens at Runtime

When a JSF page that consumes a declarative component is executed: ■ The declarative component tag in the consuming page locates the declarative component tag class and definition file that contains the declarative component metadata and layout. ■ The component subtree defined in the layout section of the componentDef tag is instantiated and inserted into the consuming page’s component tree at the location identified by the declarative component tag in the page. ■ The componentDef tag sets the value of the var attribute 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 componentDef tag. ■ 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 facet tag. The facet contents of each facet tag are inserted into the appropriate location on the declarative component as specified by the corresponding facetRef tag in the layout section of the componentDef tag.

19.5 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 Creating and Reusing Fragments, Page Templates, and Components 19-31 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.

19.5.1 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. To add resources: 1. From the Operations section of the Component Palette, drag and drop a Resource tag anywhere onto the consuming page.

2. In the Insert Resource dialog, select either css or javascript.

3. In the Property Inspector, enter the URI of the resource as the value for the

source attribute. Start the URI with a single forward slash if the URI should be context relative. Start the URI with two forward slashes if the URI should be server relative. If you start the URI with something other than one or two slashes, the URI will be resolved relative to URI location in the browser

19.5.2 What Happens at Runtime: Adding 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.