3rd Party Libraries: Prototype: Posts

So I posted yesterday in my flurry of catch-up posts about the mad4milk.net guys new framework: MooTools. I’ve had a little time to dig into it and I must say that I’m blown away. In many ways, this is the framework that I’d say CNET should write for itself if it were to take on such a task. | Read the rest »

Justin Palmer is shedding more light on Prototype updates.

This time around he covers events and DOM traversal:

Events

In days past bind was great at accepting additional arguments, however, bindAsEventListener didn’t get this love until now. We can pass those additional arguments to bindAsEventListener with ease:

var Clicker = Class.create();
Clicker.prototype = {
initialize: function(link) {
Event.observe(link, ‘click’, this.onClick.bindAsEventListener(this, ‘red’));
},onClick: function(event, color) {
Event.element(event).setStyle({color: color});
Event.stop(event);
}
}

new Clicker(‘cool’);

DOM made simple

We all hate the DOM, so how about some simpler methods to traverse it?

$(‘menu’).up();
$(‘menu’).down()
$(‘menu’).next()
$(‘menu’).previous()
$(‘menu’).down(2) // grab second arg
$(‘menu’).down(‘li’, 0)
$(’sidebar’).descendants()
$(’selected’).previousSiblings()
$(‘actions’).ancestors()
$(‘actions’).siblings()

And it looks like documentation is in the works:

On the documentation front: We have something in the works. We have the API about 80% documented and will have this up for public consumption as soon as we can. This will start off as very basic API docs, but we plan on putting a lot of effort in this as time goes by. On that note, you can send your thanks to Andrew Dupont considering he has worked very hard on the docs.

I know that Bill Scott’s carousel widget (written with the Yahoo UI Library) is already in play here on CNET Redball (News.com is using it). Here’s a Prototype version that seems to be a lot smaller - you’ll need Prototype (you might be able to get away with the lite version @ 8K, otherwise, 33K), but NOT scriptaculous. Might be worth considering swapping out? Does all the ajax stuff, too.

Sebastien Gruhier has written a Prototype version of the YUI Carousel component.

This version is lightweight and has a few parameters compared to the more flexible YUI version (that comes with a 200kb price tag).

I always get a sinking feeling when Prototype starts to change. Sam (who maintains the project) is checking fixes for the next release today and Justin Palmer (encytemedia.com) is posting things that he’s seeing get checked in as it happens. On the one hand, the next version offers some nice improvements (thus far, there may be even more changes to come), but on the other, it’s stuff I’ve got to go dig into and incorporate into my work…

via ajaxian:
Justin Palmer has updated us with a bunch of recent Prototype updates including:

• Chainability: A bunch of methods now return their first arg so we can change together methods

  $('sidebar').addClassName('selected').show();
  $('sweet').observe('click', function(e) {
      console.log("%s was clicked", Event.element(e));
  }).setStyle({color: 'red'});

• Form and Form.Element methods mixed in to $ and $$
• Shorter syntax for Event Observing:
  $('element').observe('click', function(e) { alert(e); });
• Backwards Compatability: Element.toggle, Element.show, and Element.hide no longer take an arbitrary number of arguments
• Add serialization and observation support for input type=search
• Simulate non-GET/POST requests by POSTing with a _method parameter set to the actual verb
• Make Element.update() handle TABLE-related elements with the DOM API because of IE’s missing .innerHTML property on them
• and many more.

I just found this Encytemedia post on Prototype inheratance that’s totally worth the read. Additionally, at the end he (Justin Palmer) points to Dean Edward’s Base script that provides an interesting alternative.

…All that has since changed. Thanks to the persuasion of The Javascript MacGyver, Sam replaced the Object.prototype bits in favor of Object.extend and Object.inspect. With this decision, however Prototype’s inheritance scheme can be messy, and it’s certainly hard to read if you don’t spend time trying to really figure out what’s going on.

Now, what was I just saying?

via Ajaxian:

Cody Swann was working on a web application that was using the Dynamic Script Pattern, which Dojo has excellent support for, but Prototype didn’t.

Cody then extended Prototype to support ScriptSrcTransport similarly to how Dojo does it.

The code below support the Simple, Polling and JSONP and JSON Callbacks described in the Dojo book.

One of the aspects of having a lot of action going on around a development space that’s rather new is that you get a lot of people solving problems just like the ones you’re having. These people release their work and you can make use of them if you like.

So you go download a few, pick the one that looks best and get started working. Meanwhile ten more solutions hit the market and you’ve already commited yourself. Stopping what you’re doing and going back has that oh-so-familiar pitfal that we’ve all experienced: you either waste a lot of time reading up and trying out those ten new things or, almost worse, discover that someone has a better solution than the one you’re half way through implementing.

I saw this post below on Ajaxian today and figured I’d read it because I’d been curious about Rico and Dojo in particular but hadn’t gotten around to trying them out. Dojo is friggin awesome. From a tech prod perspective, I think it’s the slickest thing I’ve seen yet. Implementing the various aspects of the Dojo platform seems super-duper easy, almost to the point that you don’t need to know a lot of javascript. So now I gotta go download, install, and fiddle with it for a few weeks and then probably rewrite some of my existing work. Sheesh.
In the article linked to below, you’ll find screencasts for each of the six frameworks. They aren’t terribly detailed, but the give you a decent idea of what it’s like to actually use the libraries. | Read the rest »

I just happened upon event:Selectors. It’s very similar to Behaviour.js (the author’s spelling, not mine) in most respects, though its much smaller (72 lines / ~2k) and has some nice added functionality using Prototype shortcuts (Behaviour is stand-alone and duplicates a lot of Prototype stuff and is, therefore, larger).

Basic usage:

var Rules = {
   '#icons a:mouseover': function(element) {
     var app = element.id;
     new Effect.BlindDown(app + '-content', {queue: 'end', duration: 0.2});
   },

   '#icons a:mouseout': function(element) {
     var app = element.id;
     new Effect.BlindUp(app + '-content', {queue: 'end', duration: 0.2});
   }
 }

Now, this alone is nice, but nothing exceptional. You could do the same thing with prototype thusly:

Event.observe(window,"load",function() {
  $$('#icons a').each(function(tag) {
    Event.observe(tag,'mouseover', function() {
      var app = tag.id;
      new Effect....
    });
  });
});

Ok, so it’s definitely longer to do without it, but not terribly so. But what really gets me excited is this:

 '#footer:loaded': function(element) {
    element.setStyle({backgroundColor: '#ccc'});
  }

This will apply the code to the element once it’s loaded. That’s just awesome. That’s just awesome times five. Wait, it gets better: it will also apply all your rules to your Ajax responses, too (if you want it to). This means when you bring in a chunk of html into the DOM you don’t have to set up all your events on it again.

It has a few other nice touches (you can, for instance, apply these events to more than one selector, for instance). Check it out.

Holy cow this is awesome.

via ajaxian: original post

Dean, John, Matthias and a load of other people were working on a really robust solution to the DOM Ready problem. In case you haven’t seen Dean’s post, they did it and it is good shit. If you want to read more of an explanation head over to Dean’s site.

I’ve been waiting for, but in a very idle way, not doing much about, a really solid solution to this for a long time. It just so happens to be extremely useful for a certain Rails plugin I’m working on with Luke Redpath so as soon as it was written I knew I needed to extend Prototype to use this new technique.

So, here’s an extension to Prototype that allows you to attach one or more functions that will be executed as soon as the DOM is ready to work with. This will not wait for images or other assets to load like window.onload does.

Here’s the script: domready.js

To use it simply add a script tag after your prototype.js script tag or append the code to the bottom of prototype.js.

Then, to execute a function when the DOM is ready:

Event.onDOMReady(function() { //stuff here! });

You can call the function repeated times to add more functions to be triggered if you need to.

via ajaxian: read the full article

The DOM can be a painful beast at times. When you ask for the childNodes of an element, most of the time you’re just wanting the element nodes only and you’d like to completely ignore the text nodes. Using Prototype, you could write something like the code below:

element = $(element);
element.cleanWhitespace();
$A(element.childNodes).each(function(element) {
  element.setStyle({color: '#ccc'});
});

That would be a quick fix, but remember, we’re not supposed to be repeating ourselves. | Read the rest »