Configuring Siebel Open UI > Example of Customizing Siebel Open UI > Process of Customizing the Plug-in Wrapper >

Customizing the Plug-in Wrapper to Bind Custom Events to a Control

This task is a step in Process of Customizing the Plug-in Wrapper.

In this topic, you attach behavioral methods to the colorbox element that you created in Creating the Plug-in Wrapper.

In this example, the BindEvent method will be overridden to attach custom handlers to a new element. The event handlers of the control will remain unaffected, and the new element will be decorated with some events.

This is an optional step: the base functionality of how a control looks and behaves can be completely changed based on your requirements. An out-of-the-box example of this type of modification is a flip switch that appears instead of a check box on touch devices in Siebel Open UI, which is accomplished using a plug-in wrapper.

Figure 30 illustrates the code you use to customize the BindEvents method of the plug-in wrapper. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

To customize the plug-in wrapper to bind custom events to a control

1. In the colorboxpw.js file, introduce the BindEvents method that is a part of the life cycle of rendering a control.

   ColorBoxPW.prototype.BindEvents = function () {

2. Call the superclass method to attach the event handlers from the dropdown element:

   SiebelAppFacade.ColorBoxPW.superclass.BindEvents.call(this);

   This step calls the BindEvents of the DropDownPW class, which is responsible for attaching the events that the drop down field requires to operate correctly.

3. Get the element that was created and attached as a sibling to the actual dropdown element, and the Event Helper object:

   var colorbox = this.GetEl().parent().find("div[id^=colorbox]"),
   evHelper = this.Helper("EventHelper");
   if (colorbox && colorbox.length && evHelper) {

   The Helper API is the framework method in the plug-in wrapper space that enables retrieving helper objects by name. For more information about the Helper API, see Architecture of Siebel Open UI.

4. Attach the required events to the new DOM element that was created. In this example, three handlers are attached to one element:

   evHelper
   .Manage(colorbox, "mouseenter", { ctx: this }, OnMouseEnter)
   .Manage(colorbox, "mouseleave", { ctx: this }, OnMouseLeave)
   .Manage(colorbox, "click", { ctx: this }, OnClick)

   The Helper API is a method in the Event Helper object that takes the following four elements: the DOM element to which events should be attached, the event to be attached, the handler to be run, and other arguments. In this case, you are attaching one event for the each user hovering over the element, exiting the hover, and clicking on the element. For more information about the Helper API, see Architecture of Siebel Open UI.