Using Prototype with YUI

I have been using prototype.js with YUI for quite some time now for one simple reason. I LOVE classes. Prototype makes it easy to declare javascript classes, and use them wisely with YUI.

1) You can make easy wrapper classes around YUI classes :

var MyDataTable = Class.create(YAHOO.widgts.DataTable, { ... });

In this case you could set some defaults up for creating a DataTable the same way across your site.



2) $() is always helpful, but be mindful of my previous posts about performance. I think this function is useful in conjunction with YUI and YAHOO.util.Get is less readable (although you could still set $ to this function)

Also, consider $A() and $H() when passing variables around YUI constructors, or using .each()

3) In reverse, you could setup YAHOO namespaces, and then setup a nice structure for your prototype built classes, then use YUI loader or get chains to load them into your pages dynamically.

Loader is very powerful in may ways, don't underestimate it!

Any specific questions, Please post a comment :)

3)

Easy Options

When creating reusable classes it it important that your object can be altered fairly easily. Today I'm going to discuss the Object.extend method, and how it is useful in creating reusable objects.

Let's take a simple class example of a custom input box and its label.

We want it to create something like

<label for="fname">First Name</label><input name="fname" type="text">

First Name


var CustomInput = Class.create({
initialize: function($options) {

// Default Options
this.options = {
name: 'textField',
type: 'text'
};

// Map $options over the top of this.options
// if $options is null use a blank object
Object.extend(this.options, $options || {} );
},

render: function(parent) {
this.label = new Element('label', {name: this.options.name});
this.input = new Element('input', {type: this.options.type, name: this.options.name});
parent.appendChild(this.label);
parent.appendChild(this.input);
}
});




This is the basic object. Later if we wanted to add validation to this object we would only have to pass in the validation parameters in the $options object. In this way, you are less likely to break things as your objects grow up over time.

Blogged with the Flock Browser

US Government against radio ?

Although this is totally unrelated to JavaScript, in any way, I think the community as a whole will understand how important this is.

A few months ago, I received several emails stating that the new internet regulations may bring down internet radio sites such as pandora and others.  Today, I received an email that really disturbed me. The government was going to cut funding on the SETI@Home project.  Is the US Government opposed to radio waves?

Seriously, I thought it funny for a second, but the seriousness of the matter is at hand.

Please take a moment to help us SAVE ARECIBO.

http://setiathome.berkeley.edu/arecibo_letter.php

and generate letters to submit to Congress.  I am urging all who read this take the time to print out the letters it generates and mail them through snail mail. Electronic mail too often gets discarded, and physical letters make a bolder statement.

Thank you for caring about such an important project to save the Arecibo Observatory, the world's largest radio telescope at the Berkeley.

Blogged with the Flock Browser

Google Gears, Prototype, and YUI

Recently I have had the chance to monkey around with Google Gears, Prototype, and YUI together. I created a nice data dashboard application which uses the local database in Gears to store data relevant to the user.

For example, when working within your corporate intranet, you can enable your users to enter in data chunks that pertain to the work they perform such as common account numbers, logins, or other information, perhaps a geo location.

The user can then associate this chunk to a location within the database. Specifying which fields and tables are associated with the chunk they wish to create a dashboard widget for. Using prototype you can build a data class that can access the local database or perform updates with Ajax. 

At this point I decided not to store the results back into the local database, but it could be possible to store that json and retrieve it if the user wanted to save off reports they have run.

A simplified/psuedocode version of the prototype class might look like:

var $args = {
   label: 'Label',
   db_table: 'myTable',
   db_col: 'myCol',
   fields: '*'
   assoc: 'myOtherTable.myOtherCol'
}

var DataChunk = Class.create({
   initialize: function($args){
      this.args = { .. deafults .. };
      Object.extend(this.args, $args || {});
   },
   get_params: function(){ .. return this.args  toQueryParams ... }
   // Other Methods
});

var DataManager = Class.create({
   initialize: function($local_db, $table){
      // Gears db init code here


      // Object properties
      this.ajax = '/url'
      this.db = $local_db;
      this.table = $table
   },

   get_chunk: function($label){
      return this.db.execute('select * from ' + this.table);
   },

   load_chunk_data: function($chunk){
      try {
         var load_chunk = new Ajax.Request(this.url, {
            method: 'get', 
            parameters: $chunk.get_params(), 
            onSuccess: this.got_chunk
                  .bindAsEventListener(this);
         });
      } catch ($err) { ... }
   },

   got_chunk: function($response) { ... }

});

Or, the coder could also strap the load_chunk_data to a YUI DataSource and DataTable, or Prototype Ajax.Updater for recurring updates.

Overall, as with most Google products, I am very impressed with the capabilities Gears gives me in creating exciting web applications.

Blogged with the Flock Browser

Google hosts prototype

Compressed versions of Prototype can now be served from Google

You can either link to the source code directly:

  <script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

Or you can use Google’s API:

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">google.load("prototype", "1.6.0.2");</script>

The Expires is set for 1 year. Which means users on your site will only need to download one 30kb file, once. Or, if they have visited another site using this method, it will already be in the cache.

Kudos to the Google team!

Blogged with the Flock Browser

Recommended Books

Blogged with the Flock Browser

Creating Useful Classes

Prototype makes it easy for you to create custom classes build in JavaScript that are extendable and reusable. Let's see some of this in action!

Let's make a class that holds our images for viewing in a slideshow or lightbox (for example).

   
      var ImageLibrary = Class.create({
          images: new Array(),
          current_image: 0,
          initialize: function($images_arr) {
            this.images = $images_arr;
          },
          add_image: function($image) {
            push(this.images, $image;
          },
          get_next: function(){
             return this.images[this.current++];
          },
          get_previous: function(){
             return this.images[this.current--];
          },
          get_current: function(){
             return this.images[this.current];
          }
      });
    

This class is pretty basic and would hold Image information for us as well as a way to get the current and previous images (though no bounds checking, which should be added).

This class could be used alone, or with another class.

   
      var img_lib = new ImageLibary(
         new Array(
            '/images/car.jpg', 
            '/images/jeep.jpg'
         )
      );

      // Or with another class that 
      //  takes the ImageLibarary class as an argument
      var img_slideshow = new SlideShow(
         new ImageLibrary(...)
      );
   

The SlideShow would then have access to the ImageLibrary and all of its functions.

When to use Prototype's Features, and when not to

Prototype.js comes with a ton of features that makes it easy for you to access the DOM and make things easier for you to code in javascript. Even though useful, some are just overkill and add overhead. Take the following code example:

 
    $('element')
       .update('This is some element text')
       .setStyle({font-weight: 'bold'});
 

versus

 
    var ele = document.getElementByID('element');
    ele.innerHTML = 'This is some element text';
    ele.style.fontWeight = 'bold';
 

Prototype's Element object uses .update to set the element's text. However, it also parses the text for styles and scripts. Here we just don't need that and innerHTML is preferable. .setStyle also has considerable overhead and should be used sparingly. The preferable method is to use CSS or .addClassName

Practical Prototype

With this site, I hope to share some tricks and knowledge using prototype.js in a practical sense.