How to Add a Facelets Tag Library Configuration File

Creating Custom ADF Faces Components 30-19

30.3.3 How to Create a JavaScript File for a Peer

Use JDeveloper to create a JavaScript file for the peer. Add code to register the peer and bind it to the component. To create the peer JavaScript file: 1. In the Application Navigator, right-click the project and select 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 peer. For example, for the tagPane component, you might enter AcmeTagPanePeer.js. ■ Directory : Enter the directory path of the event in a subdirectory under the src directory. For example, for the tagPane component, you might enter adf-richclient-demo-acme\src\oracle\adfdemo\acme\js\compon ent.

5. Open the JavaScript file in the editor and add code for the peer. In this code, you

must create the peer, add event handling with respect to the DOM, and register the peer with the component. Example 30–7 shows the code that might be added for the tagPane component. Example 30–7 tagPane JavaScript Peer AdfRichUIPeer.createPeerClassAdfRichUIPeer, AcmeTagPanePeer, true; AcmeTagPanePeer.InitSubclass = function { AdfLogger.LOGGER.logMessageAdfLogger.FINEST, AcmeTagPanePeer.InitSubclass; AdfRichUIPeer.addComponentEventHandlersthis, AdfUIInputEvent.CLICK_EVENT_TYPE; } AcmeTagPanePeer.prototype.HandleComponentClick = functioncomponentEvent { AdfLogger.LOGGER.logMessageAdfLogger.FINEST, AcmeTagPanePeer.HandleComponentClickcomponentEvent; if the left mouse button was pressed if componentEvent.isLeftButtonPressed { find component for the peer var component = this.getComponent; AdfAssert.assertPrototypecomponent, AcmeTagPane; find the native dom element for the click event var target = componentEvent.getNativeEventTarget; if target target.tagName == A { AdfLogger.LOGGER.logMessageAdfLogger.FINEST, File type element A found: + componentEvent.toString; var tag = target.firstChild.nodeValue; AdfAssert.assertStringtag; Tip: To prevent naming collisions, start the name with the component prefix. 30-20 Web User Interface Developers Guide for Oracle Application Development Framework AdfLogger.LOGGER.logMessageAdfLogger.FINEST, tag : + tag; fire a select event AcmeTagSelectEvent.queuecomponent, tag; cancel the native dom onclick to prevent browser actions based on the hyperlink. The event is of type AdfIEUIInputEvent. This event will cancle the native dom event by calling AdfAgent.AGENT.preventDefaultEvent componentEvent.cancel; } event has dom node } } Register the peer with the component. This bit of script must be invoked after the AcmeTagPane and AcmeTagSelectEvent objects are created. This is enforced by the ordering of the script files in the oracle.asfdemo.acme.faces.resource.AcmeResourceLoader. AcmeScriptsResourceLoader.AdfPage.PAGE.getLookAndFeel .registerPeerConstructororacle.adfdemo.acme.TagPane, AcmeTagPanePeer;

30.3.4 How to Add a Custom Component to a JavaScript Library Feature Configuration File

Now that you have created all the JavaScript files for the component, you can add the component to the adf-js-features.xml file you created. Follow the procedures documented in Section A.9.1, How to Create a JavaScript Feature, omitting the steps for creating the XML files, as you have already done so. Example 30–8 shows the adf-js-features.xml file used for the tagPane component. Example 30–8 adf-js-features.xml File for the tagPane Component ?xml version=1.0 encoding=UTF-8 ? features xmlns=http:xmlns.oracle.comadffacesfeature feature feature-nameAcmeTagPanefeature-name feature-class oracleadfdemoacmejscomponentAcmeTagPane.js feature-class feature-class oracleadfdemoacmejseventAcmeTagSelectEvent.js feature-class feature-class oracleadfdemoacmejscomponentAcmeTagPanePeer.js feature-class feature features

30.4 Server-Side Development

Server-side development involves creating Java classes for: ■ Event listener: This class listens for events and then invokes processing logic to handle the event. ■ Events: You create an event in order to invoke the logic in the associated listener.