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

Customizing the Plug-in Wrapper to Define Custom Events

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

In this topic, you define the behavioral methods that have been attached to the colorbox element that you created in you created in Creating the Plug-in Wrapper.

Figure 31 illustrates the code you use to define the handlers 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 define the event handlers for the plug-in wrapper

1. In the colorboxpw.js file, introduce the following private methods that will get called when the attached events occur on the element:
   1. The OnMouseEnter handler:

   function OnMouseEnter() {
   $(this).append("<div id='info'>Click for Info...</div>");
   }

   In this example, OnMouseEnter gets called when the mouseenter event occurs on the color box piece of the DOM. The context passed during the attachment of the events will be passed on to the handler method. Consequently, the this definition refers to the plug-in wrapper. In this example, a div is attached with an id of info that displays the following text: Click for Info....

   2. The OnMouseLeave handler:

   function OnMouseLeave() {
   $(this).find("#info").remove();
   }

   This is the complementary method to the OnMouseEnter handler, and gets called when the onmouseleave event occurs on the color box DOM. This method removes the div that was previously added, consequently removing the display text.

   NOTE:  The two events will not run on touch devices, since they have no equitable actions.

2. Introduce the OnClick handler.

   Click is standardized by the event helper object to achieve uniformity across different devices. Consequently, it may be translated to different events based on the user's device. The click handler shows a popup that defines the meaning of the different colors that the box can take on. In the first piece of the handler in this example, HTML built of a few styled divs and some corresponding text that forms the content of the information we are trying to show in the popup is constructed. The handler, and the content that is attached to the parent element are displayed here:

   var parent = $(this).parent(),
   html = "<div id='legend' title='Legend'>"
   + "<br><br>"
   + "<div style='width: 200px; height: 20px; background-color: rgb(255, 0, 0);'>&emsp;&emsp;Do Not Pursue</div><br>"
   + "<div style='width: 200px; height: 20px; background-color: orange;'>&emsp;&emsp;Pursue If Time Permits</div><br>"
   + "<div style='width: 200px; height: 20px; background-color: rgb(255, 255, 0);'>&emsp;&emsp;Pursue</div><br>"
   + "<div style='width: 200px; height: 20px; background-color: rgb(0, 128, 0);'>&emsp;&emsp;Pursue Aggressively</div><br>"
   + "</div>";
   parent.append(html);

3. Make the section into a popup.

   For this, use the jQuery-UI provided dialog() API. In this example, the element is located by id using find, and converted to a modal dialog box:

   parent.find("#legend").dialog({
   resizeable: false,
   height: 275,
   width: 225,
   modal: true,
   buttons: {
   Cancel: function () {
   $(this).dialog("close");
   }
   }
   });

   This sets properties for the popup and adds a cancel button that closes the popup.

4. Attach the required events to the new DOM element that we have created. Here we will attach three handlers on to this 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 DOM element in order to attach events. The attached event and the handler are deployed, along with other arguments.n this case, we are attaching one event each for the 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.