Event.Behavior Natural language event programming for Prototype


This library is inspired by Adam McCrea’s MetaProgramming Javascript Presentation. It is mainly an experiment in meta-programming, I intend to apply the research towards a more practical extension to Prototype at some point in the future.

In Action

with(Event.Behavior){      set_style(styles).on(paragraphs).when(selects).change();  }  

Size Color Weight Font

By changing any of the select boxes above, the styles on these paragraphs will change.

The code above is real, and if you read on, you’ll learn why it works.

Starting Simple

with(Event.Behavior){      show('state_field').when('country').is('United States');      show('province_field').when('country').is('Canada');  }  

Country State

Basic Sentance Construction

The basic rule is: one verb construct, followed by when(), followed by at least one event or condition. If no events are specified, changes() is implicit.

hide(element) loses_focus()is_not(value)
add_class_name(class_name).on(element) gains_focus()contains(value)
remove_class_name(class_name).on(element) is_clicked() 
set_class_name(class_name).on(element) is_double_clicked() 
set_style(styles).on(element) key_pressed() 

You can use any of the constructs in any of the columns above to construct a sentance. Below is a simpler version of the font picker.

with(Event.Behavior){      add_class_name('black').to('paragraph').when('color_select').is('black');      add_class_name('red').to('paragraph').when('color_select').is('red');      add_class_name('green').to('paragraph').when('color_select').is('green');      add_class_name('blue').to('paragraph').when('color_select').is('blue');      add_class_name('bold').to('paragraph').when('weight_select').is('bold');      add_class_name('normal').to('paragraph').when('weight_select').is('normal');  }  

Color Weight

When you change one of the selects above, the styles of this paragraph will change.

Construcing Sentances With Functions

The above example describes what is actually happening very well, but it won’t scale as we add selects and paragraphs. To accommodate this, virtually very word can accept a function instead of a scalar argument. The table below shows the return type from any functions you define.

hide(array) loses_focus()is_not(boolean)
add_class_name(string).on(array) gains_focus()contains(boolean)
remove_class_name(string).on(array) is_clicked()
set_class_name(string).on(array) is_double_clicked() 
set_style(hash).on(array) key_pressed() 

Note that call() always expects a function, and will call it. The function you pass in doesn’t need to return anything.

To demonstrate the construction of sentances with functions, the full code behind the example at the top of the page was:

function selects(){      return $$('#font_picker select');  }    function paragraphs(){      return $$('#font_picker p');  }    //this builds a hash of styles that we can pass to Element.setStyle()  function styles(){      return selects().inject({},function(styles,select){          styles[select.readAttribute('name').camelize()] = select.value;          return styles;      });  }      with(Event.Behavior){      set_style(styles).on(paragraphs).when(selects).change();  }  

and(), or() – Multiple Events & Conditions

with(Event.Behavior){      show('postal_code_field').when('country_select').is('United States').or('Canada');  }  

Country Postal Code

You can join together multiple events and conditions using and(), or(). Verbs cannot be chained together, use call() for complex functionality. When joining together conditions and(), or() also act as the last condition you specified. The following are just some ideas:

  • call(function).when(element).is(‘a’).or().is(‘b’)
  • call(function).when(element).is(‘a’).or(‘b’).and().is_not(‘c’)
  • call(function).when(element).changes().and().is(‘red’)
  • remove_class_name(class_name).from(element).when(other_element).is_clicked().or().is_double_clicked()

Method Aliases

To help make things look a little more natural, several methods are aliased. Public methods that contain multiple words exist in both camelCased and under_score form.

  • includecontains
  • includescontains
  • areis
  • are_notis_not
  • changechanges

A few methods require two words to construct the verb portion of the sentence, “set_class_name(name).on(element)” for example. The following are all interchangeable:

  • to
  • from
  • on
  • of
  • _with

So add_class_name(class_name).to(element) and remove_class_name(class_name).from(element) both work.

Connecting Custom Objects & Classes – Add Your Own Verbs

The example below uses Control.Tabs, Object.Event. Below a tabs instance is linked up to a select box, and visa versa. Although the example given is fairly verbose and complex, in practical usage, much of the code is highly reusable. Tab Select

I am tab one. I belong to group one.

var tabs = new Control.Tabs('tabs');    function active_tab(){      return $('tab_select').value;  }    function set_tab_select(){      $A($('tab_select').options).each(function(option,i){          if(option.value == tabs.activeContainer.id)              $('tab_select').options.selectedIndex = i;      });  }    Object.extend(Control.Tabs.prototype,{      getValue: function(){          return this.activeContainer.id;      }  });    //mimic the DOM 'change' event  Control.Tabs.observe('afterChange',function(tabs){      tabs.notify('change');  });    Event.Behavior.addVerbs({      setActiveTab: function(tabs,tab){          return tabs.setActiveTab((typeof(tab) == 'function' ? tab() : tab));      }  });    with(Event.Behavior){      set_active_tab(active_tab).on(tabs).when('tab_select').changes();      call(set_tab_select).when(tabs).change();  }  

Adding Custom Events

Event.Behavior.addEvents({      isReset: 'reset' //available as is_reset()  });  

Leave a Reply

Your email address will not be published. Required fields are marked *