Blogger.create { :name =>'Matt Aimonetti',
:location => 'San Diego, Ca',
:email => mattaimonetti AT gmail.com,
:linkedin => Matt's Linkedin page,
:recommend_me => HERE,
:contractor => true}

LowPro trunk, what's new?

Written by matt on November 26th, 2007

If you've read my post on Ajax pagination you know that I'm a big fan of Dan Webb's LowPro unobtrusive javascript library.

Doing Unobtrusive Javascript (UJS) is basically registering event handlers programmatically using CSS selectors to select the elements to register. In other words : keeping things separate and avoiding inline javascript.

If you've been using LowPro 0.4 and recently tried to upgrade to Prototype 1.6 you probably noticed that things don't work as they used to.

The first thing you want to do, is to update to the latest version of Lowpro.

So what's new in 0.5 trunk?

First off, you need to know that a lot of lowpro features were moved in Prototype 1.6 core :)

  • You now get a warning via firebug if you try to use Low Pro with a version of Prototype that its not designed to work with.
  • Alternative event system ripped out: uses core events
  • DOM method mixins ripped out: alternatives all in prototype
  • Event.onReady delegates to the new dom:loaded event. However this doesn't fire immediately if the dom is already loaded like Event.onReady did. (might be patched to work as before)
  • DOMBuilder is staying but now is a thin shell around the new proto 1.6 Element stuff.
  • You can still return false from event handlers in addEvent and Behaviors to stop the event but now if you use Event.observe raw you don't get this.
  • Behavior.create now works like Class.create in 1.6 so behaviors can have full inheritance:
1
2
3
4
5
6
7
8
9
10
11
12

  Basic = Behavior.create({
   onclick: function() {
    alert('woo');
   }
  });

  SuppedUp = Behavior.create({
   onclick: function($super) {
    alert('wee');
    $super();
   }
  });

Works really nicely.

  • core behaviors : Remote and Observed are now moved into the lowpro core (you don't need to include the external files).

  • Event.addBehavior.reassignAfterAjax defaults to false. If you want re assign behaviors after an ajax call, you need to turn this option to true.

  • Event.addBehavior.reload(); added to reload/re assign behaviors. Very useful if you dynamically insert elements you want to observe!

  • new website has been set up and will contain documentation and tips - Full API docs coming soon. There's also a dedicated google group.

Here is a quick example with real life code. (which could be refactored, I know)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// Make sure the behaviors still work even after navigating to another page using the ajax navigation.
Event.addBehavior.reassignAfterAjax = true;

// Behaviors
Event.addBehavior({
  // Pagination links  
  'div.pagination a' : Remote.Link,

  // Reset the list when a user clicks on cancel.
  'a.cancel_button:click' : function() {
    $('list_of_things').update("");
  },

  // carousel navigation prev
  'a#carousel_prev:click' : function() {
    moveCarousel('prev'); return false;
  },

  // carousel navigation next
  'a#carousel_next:click' : function() {
    moveCarousel('next'); return false;
  },

  'div.panel_pic:click' : function() {
    removePanelPic(this);
  },

  'div.photo_from_row img:click' : function() {
    // Get the div holding the pic and use it as a target
    var target = this.up();
    addPicToPanel(target);
    new Effect.Highlight(target);
  }
});

function addPicToPanel(target){
  new Insertion.Bottom('control_panel_photos', "<div id='edit_"+ target.id +"' class='panel_pic'><img class='panel_pic' src='" +  target.immediateDescendants()[0].src + "'/></div>");
  // Reload the behaviors so the new inserted pic can be monitored 
  // and the 'div.panel_pic:click' behavior can be triggered
  Event.addBehavior.reload();
}

LowPro is a great way of keeping your code really clean and your views very accessible.

If you are interested in knowing more about UJS, come to our SDruby group meeting on Dec 6 @ 7:30pm (directions). And if you don't care about UJS, come later to hear about Facebook API. Don't forger to bring your questions for our first Rails roundtable.

Social Bookmark Button

Tags:

0 comments


Comments are closed