In the New Gallery, select Deployment Profile and then ADF Library JAR

Creating Custom ADF Faces Components 30-15 http:java.sun.comdtdfacelet-taglib_1_0.dtd facelet-taglib xmlns=http:java.sun.comJSFFacelet namespacehttp:xmlns.oracle.adfdemoacmenamespace tag tag-nametagPanetag-name handler-class oracle.adfinternal.view.faces.facelets.rich.RichComponentHandler handler-class tag facelet-taglib 6. Replace the namespace and tag-name code shown in bold with code appropriate for your application.

30.3 Client-Side Development

After the JDeveloper workspace and configuration files have been created, you can create and code the client-side JavaScript files. When you have finished with the client-side development, create the server-side files, as described in Section 30.4, Server-Side Development. Client components hold state for properties that are not defined within the corresponding DOM element. These properties are bound to an associated DOM element using the clientId. The clientId uniquely defines a server-side component within the component tree representing a page. The DOM element holds the clientId within the Id attribute. Developing the client-side component requires creating a JavaScript file for the component, the peer, and the component event. In addition to the client component, client-side events must be defined. The tagPane component’s client-side event is fired and propagated to the server when the user clicks one of the three file types. The client event passed to the server is queued so that the target server-side component can take the appropriate action. Finally, the custom component requires a client peer. The peer is the component presenter. Peers act as the links between a client component and an associated DOM element. Client peers add client behaviors. A peer must be bound to a component through a registration method. As with the client component, the associated peer is bound to a DOM element using the components clientId. There are two types of peers, statefull and stateless. Best Practice: Because JavaScript libraries do not have namespaces, you should create all JavaScript object names for the custom component using the same prefix. You do not need to do this on the server because the server-side Java package names will prevent name collisions. For example, for the tagPane component, the client-side JavaScript object names all have the acme prefix. Note: Place each JavaScript object in its own separate source file for best practice and consistency. 30-16 Web User Interface Developers Guide for Oracle Application Development Framework ■ Some complex client components require the peer to hold state and thereby need to use a statefull peer. This type of peer is always bound to a DOM element. Statefull peers are less common than stateless peers. ■ Stateless peers do not hold state and one peer can be bound to multiple components. Stateless peers are the best performance option because they reduce the client footprint. This type of peer performs lazy content delivery to the component. Peers add behavior to the component by dynamically registering and listening for DOM events. Conceptually, a peer’s function is similar to the role of a managed bean. However, the client component is not bound to the peer using EL like the server-side component is bound to a view model {backingbean.callback}. The peer registers client component events in the InitSubclass AdfRichUIPeer.addComponentEventHandlersclick callback method. The callback is assumed by using a naming convention of Peer.prototype.HandleComponentEvent. The peer manages DOM event callbacks where the server-side component handles the linking using EL bindings to managed beans. For more information about client-side architecture, including peers, see Section 3.1, Introduction to Using ADF Faces Architecture. The following section assumes you have already set up a custom component development template environment. This development environment includes the setting up of application workspace, projects, deployment profiles, and registering schemas. If you have not done so, see Section 30.2, Setting Up the Workspace and Starter Files.

30.3.1 How to Create a JavaScript File for a Component

Use JDeveloper to create a JavaScript file for the component. In it, you will define the component type for the component. To create the component JavaScript file: 1. In the Application Navigator, right-click the project and click New. 2. In the New Gallery, expand Web Tier and select HTML. 3. Select JavaScript File and click OK. 4. In the Create JavaScript File dialog, do the following: ■ File Name : Enter the name of the client-side component. For example, for the tagPane component, you might enter AcmeTagPane.js. ■ Directory : Enter the directory path of the component in a subdirectory under the src directory. For example, for the tagPane component, you might enter adfrichclient-demo-acme\src\oracle\adfdemo\acme\js\compone nt.

5. Open the JavaScript File in the editor and add the component code to define the

component type. Example 30–5 shows the code that might be used for the tagPane component. Example 30–5 tagPane Component JavaScript AdfUIComponents.createComponentClass Tip: To prevent naming collisions, start the name with the component prefix.