How to Create JSP Tag Properties

30-36 Web User Interface Developers Guide for Oracle Application Development Framework deferred-value attribute attribute nameorderByname deferred-value attribute tag taglib

30.4.11 How to Create a Resource Loader

A resource loader is required only if the custom component has image files needed for the components skinning. The images files are packaged into the JAR project so that the consumer of the component library will need to include the JAR into the class path of their web project and add a few entries into their web deployment descriptor file web.xml. The rich client framework uses a resource servlet to deliver images. You need to register this servlet in the web.xml file and then create the resource loader class. A component library requires a resource loader that is auto-loaded by the resource servlet. You create a URL pattern folder mapping for the servlet, which will be used to locate and identify resources within your custom component library. To create a resource loader class: 1. In the Application Navigator, right-click the project and select New. 2. In the New Gallery, expand General and select Java. 3. Select Java Class and click OK. 4. In the Create Java Class File dialog, do the following: ■ Name : Enter a resource loader name. For example, for the tagPane component, you might enter AcmeResourceLoader. ■ Package : Enter a name for the package. For example, for the tagPane component, you might enter oracle.adfdemo.acme.faces.resources. ■ Extends : Enter a name for the class that the tag extends. For example, for the tagPane component, you would enter org.apache.myfaces.trinidad.resource.RegexResourceLoader. ■ In the Optional Attributes section, select the following:. – In the Access Modifiers section, select public. – At the bottom, select Constructors from Superclass and Implement Abstract Methods . 5. In the source editor, register regular expressions that map to more specific resource loaders. For example, you might create an expression that maps image resources located under an images directory. Example 30–23 shows the expression for the tagPane component that maps the acmeimages directory located relative to the META-INF folder of the custom component JAR. As a result of the registration, the custom component images should be located under META-INFacmeimages. Example 30–23 Resource Loader for the tagPane Component public class AcmeResourceLoader extends RegexResourceLoader { Creating Custom ADF Faces Components 30-37 public AcmeResourceLoader { any resource in acme with the following suffixes will be loaded from the base folder of META-INF. The servlet pattern match acme should exist under META-INF. For example URL : context-rootacmeimagestype1.gif map to: META-INFacmeimagestype1.gif register.\\.jpg|gif|png|jpeg, new ClassLoaderResourceLoaderMETA-INF; 6. Register the Libraries Resource Loader by opening the META-INFservletresourcesname.resources file and adding the fully qualified name of the resource loader class bound to the URI pattern. The MyFaces Trinidad ResourceServlet uses the servlet context to scan across all JAR files within the class path of the web application. The servlet looks at its own URI mappings in the web deployment descriptor to formulate the location of this resource file. This file must contain the fully qualified name of the Java class bound to the URI pattern. During startup, the ResourceServlet will locate and use this file in a manner similar to how FacesServlet locates and uses the faces-config.xml files. For the tagPane component, the acme.resources file would contain this entry for the composite resource loader: oracle.adfdemo.acme.faces.resource.AcmeResourceLoader

30.4.12 How to Create a MyFaces Trinidad Cascading Style Sheet

A skin is a style sheet based on the CSS 3.0 syntax specified in one place for an entire application. Instead of inserting a style sheet on each page, you use one or more skins for the entire application. Every component automatically uses the styles as described by the skin. No design time code changes are required. ADF Faces provides three skins for use in your applications: ■ blafplus-rich: Defines the default styles for ADF Faces components. This skin extends the blafplus-medium skin. ■ blafplus-medium: Provides a modest amount of styling. This style extends the simple skin. ■ simple: Contains only minimal formatting. Skins provide more options than setting standard CSS styles and layouts. The skins CSS file is processed by the skin framework to extract skin properties and icons and register them with the Skin object. Style sheet rules include a style selector, which identifies an element, and a set of style properties, which describes the appearance of the components. All ADF Faces components use skins. The default skin is the simple skin. Because your custom components will be used in conjunction with other ADF Faces components, you add style selectors to an existing ADF Faces skin. Because the rich and medium skins inherit styles from the simple skin, you can simply add your selectors to the simple skin, and it will be available in all skins. However, you may want to style the selector differently for each skin. You set these styles in the CSS file you created. This file will be merged with other CSS styles in the application in which the component is used. The text used in a skin is defined in a resource bundle. Create the text by creating a custom resource bundle and declaring the text you want to display. After you create 30-38 Web User Interface Developers Guide for Oracle Application Development Framework your custom resource bundle, you register it with the skin. Coupling resource bundles with your CSS provides a method to make your components support multiple locales. The META-INFtrinidad-skins.xml file you created is used to register your CSS file and your resource bundle with an ADF Faces skin. To create styles for your component: 1. Open the CSS file you created in Section 30.2.4, How to Add a Cascading Style Sheet. 2. Define a root style selector for the component. This style will be associated with the DIV element that establishes the component. 3. Add other style selectors as needed. Example 30–24 shows the CSS file for the tagPane component. Example 30–24 CSS File for the tagPane component acme|tagPane - root element acme|tagPane::content - container for the links acme|tagPane::tag - tag hyperlink For more information about creating CSS for components to be used by skins, see Section 20.3, Defining Skin Style Properties. 4. Create any needed resource bundle for your component. 5. To register your CSS with an ADF Faces skin, open the META-INFtrinidad-skins.xml file.

6. In the Structure window, select the skin-addition element, and in the Property

Inspector, do the following: ■ skin-id : Enter the ADF Faces skin to which you want to add the custom component selectors. You must register the selectors at least to the simple.desktop skin in order for them to be compatible with ADF Faces components. ■ style-sheet-name : Use the dropdown menu to choose Edit, and navigate to the CSS file you created. 7. If you created a resource bundle, add the fully qualified path to the bundle as the value for the bundle-name element. Example 30–25 show the code for the tagPane component. Example 30–25 tagPane trinidad-skins.xml Code ?xml version=1.0 encoding=UTF-8 ? skins xmlns=http:myfaces.apache.orgtrinidadskin skin-addition skin-idsimple.desktopskin-id style-sheet-nameacmestylesacme-simple-desktop.cssstyle-sheet-name bundle-nameoracle.adfdemo.acme.faces.resource.AcmeSimpleDesktopBundle Note: If there is a possibility that the component will be used in an Oracle WebCenter application, then you must also register the selectors with the simple.portlet skin. Skins are also available for PDAs for example, simple.pda. For more information, see Chapter 20, Customizing the Appearance Using Styles and Skins. Creating Custom ADF Faces Components 30-39 bundle-name skin-addition skins 8. Add an image folder for the images used for the custom component. This folder should be under the META-INF directory. Place any images used by the custom component into this folder. For tagPane, the image folder is META-INFacmeimages.

30.5 Deploying a Component Library

After creating the custom component library, you must create a deployable artifact that can be used by a web application. Before you can build a Java archive JAR file, update the projects deployment profile by adding the many resources you created. To create the JAR file for deployment: 1. In the Application Navigator, double-click the project to open the Project Properties dialog.

2. In the left pane, select Compiler.

3. On the right, ensure that all file types to be deployed are listed in the Copy File

Types to Output Directory text field.

4. In the left pane, select Deployment.

5. On the right, under Deployment Profiles, select the ADF Library JAR file, and

click Edit. 6. In the left pane, select JAR Options. 7. Verify the default directory path or enter a new path to store your ADF Library JAR file. Ensure that Include Manifest File is selected, and click OK.

8. To deploy, right-click the project and select Deploy Project_name from the

context menu. By default, the JAR file will be deployed to a deployment directory within the project directory.

30.6 Adding the Custom Component to an Application

After the component has been created and you have created an ADF Library, you can proceed to import it and use it in another application. However, before using it in an application under development, you should use it in a test application to ensure it works as expected. To do so, import the custom library into your test application. For procedures, see the Adding ADF Library Components into Projects section of the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. After you add the library, you configure the web deployment descriptor to add a resource servlet mapping. When you use the component and run your test application, you may find you need to debug the component. Therefore, it helps to have logging and assertions enabled for the project. Note: Some file types, such as .css and .js are not included by default. You will need to add these.