Configuring Siebel Open UI > Example of Customizing Siebel Open UI > Process of Customizing the Physical Renderer >

Customizing the Physical Renderer to Bind Events

This task is a step in Process of Customizing the Physical Renderer.

In this topic, you add the following functionality to the carousel:

• If the user hovers the mouse over a record in the carousel, then display a restore button as a plus sign (+).
• If the user removes the hover, then hide the restore button.
• If the user clicks the plus sign (+), then call the presentation model to restore the record.
• To the HTML node that Siebel Open UI uses for the restore button.
• Styling changes that affect the appearance of the carousel based on user actions.

Figure 28 illustrates the code you use to customize the physical renderer to bind events to the carousel. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Figure 28. Customizing the Physical Renderer to Bind Events to the Carousel

To add this functionality, you must customize Siebel Open UI to attach an event handler to each of the following items:

• The carousel item, for every hover activity.
• The HTML node that Siebel Open UI uses for the Restore button.
• The Next and Previous icons in the carousel.

To customize the physical renderer to bind events

1. In the recyclebinrenderer.js file, call the BindEvents method of the physical renderer:

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

   For more information, see BindEvents Method.

2. Identify the placeholder:

   var placeHolder = "s_" + this.GetPM().Get("GetFullId") + "_div";

3. Attach three event handlers for hover and click:

   $("#" + placeHolder)
    .parent()
    .delegate("div.siebui-carousel-item", "mouseenter", { ctx: this }, ShowRestoreButton)
    .delegate("div.siebui-carousel-item", "mouseleave", { ctx: this }, HideRestoreButton)
    .delegate("a.siebui-citem-add", "click", { ctx: this }, AddFromRecycleBin);

   ShowRestoreButton is called when a user hovers on a carousel item, and HideRestoreButton is called when the hovering ends. If the user clicks the Add button, then AddFromRecycleBin is called.

4. Attach styling events to the Previous and Next buttons of the carousel:

   $("#" + placeHolder + "_recycle")
    .parent()
    .find('.siebui-jcarousel-prev')
     .on('jcarouselcontrol:active', function () {
      $(this).removeClass('siebui-jcarousel-ctrl-inactive');
     })
     .on('jcarouselcontrol:inactive', function () {
      $(this).addClass('siebui-jcarousel-ctrl-inactive');
     })
     .jcarouselControl({
      target: '-=1'
     });
   

   $("#" + placeHolder + "_recycle")
    .parent()
    .find('.siebui-jcarousel-next')
     .on('jcarouselcontrol:active', function () {
      $(this).removeClass('siebui-jcarousel-ctrl-inactive');
     })
     .on('jcarouselcontrol:inactive', function () {
      $(this).addClass('siebui-jcarousel-ctrl-inactive');
     })
     .jcarouselControl({
      target: '+=1'
     });

   In the above example, the first part of the code is finding the Previous button in the carousel container, and then attaching jcarousel:active and jcarousel:inactive events to it. When these events are triggered by the 3rd party plug-in, we call methods that set and unset styling classes on the buttons. Similarly, the styling classes are attached and removed for the Next button.

5. Define the handler methods:
   1. Use the following code to find the child for the add button and show it:

   function ShowRestoreButton(evt) {
    if (evt && evt.currentTarget) {
     $(evt.currentTarget).children("a.siebui-citem-add").show();
    }
   }

   2. Use the following code to find the child for the add button and hide it:

   function HideRestoreButton(evt) {
    if (evt && evt.currentTarget) {
     $(evt.currentTarget).children("a.siebui-citem-add").hide();
    }
   }

   3. Use the following code to call the Restore method on the PM with the relevant index parameter

   function AddFromRecycleBin(evt) {
    var pm = evt.data.ctx.GetPM();
    if (evt && evt.currentTarget) {
     pm.OnControlEvent("RESTORE", $(evt.currentTarget).parent().data("index"));
    }
   }

6. Save the recyclebinrenderer.js file.