What You May Need to Know About Configuring Search in a Hierarchy Viewer

Creating Custom ADF Faces Components 30-3 – faces-config.xml: Used to register many of the artifacts used by the component. – trinidad-skins.xml: Used to register the skins that the component uses. – Cascading style sheet: Used to define the style properties for the skins. – Render kit resource loader: Allows the application to load all the resources required by the component. – adf-js-features.xml: Allows the component to become part of a JavaScript partition. For more information about partitions, see Section 1.2.1.2, JavaScript Library Partitioning. – JSP tag library descriptor TLD for JSP: Defines the tag used on the JSF page. – Component handler for Facelets: Defines the handler used to render the component. 4. Create the following client-side JavaScript files: – Client Component: Represents the component and its attributes on the client. – Client Peer: Manages the document object model DOM for the component. – Client Event: Invokes processing on the client and optionally propagates processing to the server. 5. Create the following server-side Java files: – Server Component class: Represents the component on the server. – Server Event Listener class: Listens for and responds to events. – Server Events class: Invokes events on the server. – Server Renderer class: Determines the display of the component. – Resource Bundle class: Defines text strings used by the component. 6. Further develop the component by testing and debugging the JavaScript and Java code. You can use the JDeveloper debugger to set breakpoints and to step through the code. You can also use Java logging features to trace the execution of the component. 7. Deploy the component into a JAR file. 8. Test the component by adding it into an application. Table 30–1 lists the client-side and server-side component artifacts for a custom component. The configuration and support files are not included in the table. 30-4 Web User Interface Developers Guide for Oracle Application Development Framework Table 30–1 Client-Side and Server-Side Artifacts for a Custom Component Client Server Component class: oracle.component_ package.js.component.prefixComponent_ name.js Extends : oracle.adf.view.js.component. AdfUIObject.js Component : oracle.component_ package.faces.component.Component_ name.java Extends : org.apache.myfaces.trinidad.component. UIXObject.java Event : oracle.component_ package.js.event.prefixEvent_ name.js Extends : oracle.adf.view.js.component. AdfComponentEvent.js Event : oracle.component_ package.faces.event.Event_name .java Extends : javax.faces.event.FacesEvent.java Event Listener : oracle.component_ package.faces.eventListener_name Extends : com.faces.event.FacesListener Component Peer : com.component_ package.js.component.prefixPeer_ namePeer.js Extends : oracle.adf.view.js.laf.rich. AdfRichUIPeer.js.js Component Renderer : com.component_ package.faces.render.Renderer_name.java Extends : oracle.adf.view.rich.render.RichRenderer. java Component JSP Tag JSP only : com.component_ package.faces.taglib.Tagname_ nameTag.java Extends: javax.faces.webapp.UIComponentELTag.java Creating Custom ADF Faces Components 30-5

30.1.2 An Example Custom Component

To help illustrate creating a custom component, a custom component named tagPane will be used as an example throughout the procedures. The tagPane custom component is created for reuse purposes. Although the tagPane presentation might have been implemented using a variety of existing components, having a single custom component simplifies the work of the page developer. In this case, there may be a trade-off of productivity between the component developer and the page developers. If this particular view composition were needed more than once, the development team would reduce costs by reducing the lines of code and simplifying the task of automating a business process. The tagPane component displays a series of tags and their weighted occurrences for a set of files. Tags that are most frequently used are displayed in the largest font size, while the least used tags are displayed in the smallest font size. Each tag is also a link that triggers an event, which is then propagated to the server. The server causes all the files that contain an occurrence of that tag to then be displayed in a table. Figure 30–1 shows how the tagPane component would be displayed if it was added below the Search pane in the File Explorer application. Composite Resource Loader : com.component_ package.faces.resource.Loader_ nameResourceLoader.java Extends : org.myfaces.trinidad.resource. RegxResourceLoader.java JavaScript Resource Loader: com.component_ package.faces.resource.Script_Loader_ nameResourceLoader.java Extends : org.myfaces.trinidad.resource. AggregateingResourceLoader.java Resource Bundle : com.component_ package.faces.resource.Bundle_ nameBundle.java Extends: java.util.ListResouceBundle.java Table 30–1 Cont. Client-Side and Server-Side Artifacts for a Custom Component Client Server 30-6 Web User Interface Developers Guide for Oracle Application Development Framework Figure 30–1 Custom tagPane Component The tagPane component receives a collection of tags in a Java Map collection. The key of the map is the tag name. The value is a weight assigned to the tag. In the File Explorer application, the weight is the number of times the tag occurs and in most cases, the number of files associated with the tag. The tag name is displayed in the body text of a link and the font size used to display the name represents the weight. Each tag’s font size will be proportionally calculated within the minimum and maximum font sizes based upon the upper and lower weights assigned to all tags in the set of files. To perform these functions, the tagPane custom component must have both client-side and server-side behaviors. On the server side, the component displays the map of tags by rendering HTML hyperlinks. The basic markup rendering is performed on the server. A custom event on the component is defined to handle the user clicking a link, and then to display the associated files. These server-side behaviors are defined using a value expression and a method expression. For example, the tagPane component includes: ■ A tag property for setting a MapString, Number collection of tags. ■ A tagSelectionListener method-binding event that is invoked on the server when the user clicks the link for the tag. ■ An orderBy property for displaying the sequence of tags from left to right in the order of descending by weight or alternatively displaying the tag links ascending alphabetically. To allow each tag to be displayed in a font size that is proportional to its weight occurrences, the font size is controlled using an inline style. However, each tag and the component’s root markup node also uses a style class. Example 30–1 shows how the tagPane component might be used in a JSF page. Example 30–1 tagPane Custom Component Tag in a JSF Page acme:tagPane id=tagPane tags={explorer.navigatorManager.tagNavigator.tags} tagSelectListener={explorer.navigatorManager.tagNavigator.onTagSelect}