Section 14.7. MochiKit


14.7. MochiKit

As soon as you access the MochiKit web site, once you get past the ubiquitous lime color, you see the words proudly proclaimed across the top:

MochiKit makes JavaScript suck less

In my opinion, if JavaScript sucked that much, it wouldn't be used so extensively, and we wouldn't have the rich set of libraries and frameworks, of which I've only provided a sample in this chapter. However, be that as it may, MochiKit has a nicely organized web site that makes it very easy to find demos, documentation, and code. As with other libraries, MochiKit functionality is packaged into several different behavioral and UI components, including:

  • MochiKit.Async: The Ajax component

  • MochiKit.Base: Foundation for the MochiKit framework

  • MochiKit.DOM: Wrapper around DOM functionality

  • MochiKit.DragAndDrop: The ever-present drag and drop

  • MochiKit.Color: CSS3 color abstraction

  • MochiKit.DateTime: Date and time functionality

  • MochiKit.Format: String formatting

  • MochiKit.Iter: Adds iteration capability

  • MochiKit.Logging: "We're all tired of alert( )"

  • MochiKit.LoggingPane: Interactive logging pane

  • MochiKit.Signal: Universal event handling

  • MochiKit.Style: CSS API

  • MochiKit.Sortable: Sortable effects

  • MochiKit.Visual: The usual visual effects, such as rounding, visibility, and opacity

There are several interesting modules, all worth exploring. But the one that caught my eye was "We're all tired of alert( )".

I find that alert is handy to debug, but true, it isn't the most efficient. I decided to take a closer look at MochiKit logging.

Firebug

What a great name for a Firefox debugging tool.

The Firebug add-on was created by Joe Hewitt and provides a line-by-line debugger, as well as a way to log messages from script. It also provides a JavaScript command-line tool and inspector to easily look at all page elements in context.

As you go over each element, the Inspector briefly highlights it directly in the page. However, it's the message console I found invaluable. When working with a script, I would keep Firebug open, and then have access to all error and information messages instantly, rather than wait for Firefox's very slow console to open. It's also a snap to keep it clean, but you have to shut it down when web browsingthere's an amazing number of bad JavaScript out there.

Firebug is a must-have tool for JavaScript developers. Download it at https://addons.mozilla.org/firefox/1843/ and read more about it at http://www.joehewitt.com/software/firebug/.

Figure 14-3 shows the application created by the Dojo fisheye effect, opened at the same time as the Firebug console, with inspection turned on.


Figure 14-3. Dojo fisheye application opened at same time as the Firebug debugging console


14.7.1. Logging

As states in the MochiKit documentation, there is no print capability, which, in my opinion, developers have been dependent on for debugging. As such, the alert dialog is used for most debugging efforts.

MochiKit logging works with whatever console each browser supports. According to the documentation, it works with Opera 9, Safari, IE, and Firefox (if Firebug is installed). As an alternative, you can use the logging pane module. To do so, disable logging to the console and have the communications go to this pop-up window. I decided to try out the console option and also take Firebug for a test drive.

In Example 14-6, I have a copy of Example 13-3, which contains the Ajax example that processes XML. If any application is going to have something go wrong, it will probably occur in an Ajax request/response, when processing XML. When creating this small application, I had to use the alert function a lot, and it would be nice to use something else.

Example 14-6. Ajax application with MochiKit debugging enabled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Hello Ajax World, Too</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div.elem { margin: 20px; } </style>         <script type="text/javascript" src="/books/4/327/1/html/2/mochikit/lib/MochiKit/MochiKit.js"></script>         <script type="text/javascript" src="/books/4/327/1/html/2/mochikit/lib/MochiKit/Logging.js"></script> <script type="text/javascript"> //<![CDATA[ var xmlhttp = false; if (window.XMLHttpRequest) {    xmlhttp = new XMLHttpRequest(  );    xmlhttp.overrideMimeType('text/xml'); } else if (window.ActiveXObject) {    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } function populateList(  ) {    var state = document.forms[0].elements[0].value; log("INFO state is ",state);    var url = 'ajaxxml.php?state=' + state; log("INFO url is ",url);    xmlhttp.open('GET', url, true);    xmlhttp.onreadystatechange = getCities;    xmlhttp.send(null); } function getCities(  ) {    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {      log("INFO responseXML is ",xmlhttp.responseXML);      var hdrs = xmlhttp.getAllResponseHeaders(  );      log("INFO headers are ", hdrs);      try {         var citynodes = xmlhttp.responseXML.getElementsByTagName('city');         for (var i = 0; i < citynodes.length; i++) {            var name = value = null;            for (var j = 0; j < citynodes[i].childNodes.length; j++) {               var elem = citynodes[i].childNodes[j].nodeName;               var nodevalue = citynodes[i].childNodes[j].firstChild.nodeValue;               if (elem == 'value') {                   value = nodevalue;               } else {                   name = nodevalue;               }            }            document.forms[0].elements[1].options[i] = new Option(name,value);          }       } catch (e) {          logDebug("DEBUG error message is", e.message);       }    } else {       document.getElementById('cities').innerHTML = 'Error: No Cities';    } } //]]> </script> </head> <body> <h3>Select State:</h3> <form action="ajaxxml.php" method="get"> <div > <select onchange="populateList(  )"> <option value="CA">California</option> <option value="MO">Missouri</option> <option value="WA">Washington</option> <option value="ID">Idaho</option> </select> </div> <h3>Cities:</h3> <div > <select > </select> </div> </form> </body> </html>

I've highlighted the lines of code where I've made changes based on adding in the logging functionality. What I find a relief with MochiKit is that, other than having to include the base functionality, most of the MochiKit modules are just thatmodules that can be included only as needed.

Figure 14-4 shows the web-page application with Firebug opened, as well as MochiKit's logging. As you can see, this is vastly superior to an alert dialog. And they're just in time to use for all of the JavaScript applications you've been itching to create.

Figure 14-4. MochiKit logging in Firebug console


Have fun.




Learning JavaScript
Learning JavaScript, 2nd Edition
ISBN: 0596521871
EAN: 2147483647
Year: 2006
Pages: 151

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net