LA.NET [EN]

Mar 16

Getting along with the _CommonToolkitScripts – part III

Posted in MS AJAX      Comments Off on Getting along with the _CommonToolkitScripts – part III

As we”ve seen in the last part, the _CommonToolkitScripts class has several utility methods that makes our lifes easier when we”re doing “multi-browser” programmer (I”m not sure if this word even exists, but i do like it 🙂 ,,). Today I”m going to write the last post dedicated to this class and I”ll present the remaining methods. In my previous post, I”ve said that the class can help you if you need to parse units. Currently, the class exposes at least three methods: parseBorderWidth, parsePadding and parseUnit. The last is the most important and it”s used by the first two. It simply returns an anonymous object whith two fields: size and type. For instance, if you run the following line:

var unitParsed = $common.parseUnit( “10px” );

You”ll get 10 on the unitParsed.size property and px for the unitParsed.type field. Notice that if you send a value that doesn”t have a unit, you”ll get px on the type field.

Getting and setting the opacity of an element can also be easily accomplished by the getElementOpacity/setElementOpacity methods. Both methods receive the element you”re interested in and the set method receives a value between 0 and 1 (where 1 means opaque). The class also lets you add/remove several css classes to/from  a DOM element by calling the addCssClasses and removeCssClasses methods (internaly, it reuses the Sys.UI.DomElement.addCssClass/removeCssClass defined by the main AJAX client file).

The class also exposes a couple of interesting methods related with events: tryFireRawEvent and tryFireEvent. The first receives a reference to the element that is supposed to fire the event and another to the raw event object. Here”s a really simple example of how you might use this method:

<script type=”text/javascript”>
  function h( evt ){
       if( document.createEvent ){
            var templateEvent = $common.__DOMEvents[“click”];
            var newEvt = document.createEvent( templateEvent.eventGroup );
            templateEvent.init( newEvt, evt );
            $common.tryFireRawEvent( $get(“top”), newEvt);
       }else{
            $common.tryFireRawEvent( $get(“top”), evt); 
       }
  }
  function print(){
     $get(“info”).innerText += “Yey”
  }
</script>
<div id=”top” onclick=”print()”>
      Top div
</div>
<div id=”bottom” onclick=”h(event)”>
     Bottom div
</div>
<div id=”info”>
</div>

The idea is to add the word yey to the inner text property of the #info div. Note that even if I click over the #bottom div, I”ll end up firing the #top div click”s event. As always, IE is more forgiving than Firefox. That”s why I only need to make a simple method call to generate the event. To make it work with Firefox and Opera, you must create a new event object and fill its property. __DOMEvents helps us with this and it”ll automatically copy the props of the current event to the new event which is going to be fired.

You could simplify the previous code by using the second event method I”ve presented before:

function h( evt ){
  if( document.createEvent ){
     $common.tryFireEvent( $get(“top”), “click”, evt );
  }else{
     $common.tryFireRawEvent( $get(“top”), evt);
  }
}

Since this is the last post about this class, I couldn”t end it without talking about the createElementFromTemplate method (note that the class has other methods, but this one really caught my attention 🙂 ). It lets you create and append a new DOM element based on a template you specify. Let”s start with a simple example:

<div id=”container”>
</div>
<script type=”text/javascript”>
   var table = {};
   $common.createElementFromTemplate(
         {
            nodeName: “div”,
            name: “div1”,
            properties: {
                 innerHTML: “1”,
                 id:”prim”
           }
       },
       $get(“container”),
       table );
 $common.createElementFromTemplate(
      {
          nodeName: “div”,
          name: “div2”,
          properties: {
              innerHTML: “2”,
              id:”sec”
         }
     },
     $get(“container”),
     table );
</script>

The previous example creates 2 new divs and adds them  to the #container div that already exists on the page. Since I”m passing three parameters and setting the name property on the anonymous object that I”m passing as the 1st parameter, the global table object will point to those objects. There are several things you can do with this method (just take a look at the source code to see the specified properties you can set on the template object that you pass!), but I”m pretty sure that you”ll only use it 99% of the time for something like I”ve shown in the previous example.