Just wanted to remind everyone about the upcoming She’s Geeky Event in Mountain View CA Jan 30 – 31st. I already registered and got my flight booked so that I can be there. I hear from people who went last year and to the most recent one that the experience has been really good. So go check them out and get registered if you want to go.

Cheers
Desi

A recent posting to a technical mailing list I’m on asked how to pass a parameter to a button click-event handler. The programmer wanted to do the equivalent of this:

<asp:button ID="btnSubmit" runat="server" OnClick="Btn_Onclick(PARAM)" />

But, she knew this didn’t work, because the default signature of event handlers in ASP.NET is this:

void myBtn_OnClick(Object sender, EventArgs e)

So, she was stumped on how to pass some sort of argument to the event handler.

Now, there a certainly some kludges that would work, such as having a hidden form field which contains the ‘parameter’ value, and having the event-handler get the value that way. But surely, there’s a better way? Well, yes, of course there is!

This better way is to use the “CommandArgument” property on the button control. This property is directly accessable in the event handler. The added bonus is that you can write a single even-handler for all of your button clicks, and use the associated “CommandName” property to know which button fired.

So, now, in your aspx page, your button object will be declared thusly:

<asp:Button ID="test" runat="server" CommandArgument="MyVal" CommandName="ThisBtnClick" OnClick="MyBtnHandler" />

Then, in the OnClick handler, you can cast the sender object to the correct type, and get the values of
CommandName & CommandArgument. (You could make this even more generic and handle the OnClick event for different senders, but we’ll leave that for a later post!

void MyBtnHandler(Object sender, EventArgs e)
{
	 Button btn = (Button)sender;
          switch (btn.CommandName)
          {
                case "ThisBtnClick":
                    DoWhatever(btn.CommandArgument.ToString());
                    break;
                case "ThatBtnClick":
                    DoSomethingElse(btn.CommandArgument.ToString());
                    break;
           }
}

You can see that the switch statement uses the CommandName property to determine which button was clicked, and then can use the CommandArgument property passed in by the button click event.

Voila! You’ve “passed a parameter” to a button click-event handler!

[UPDATE] Thanks to Jim for pointing out some confusion in my sample code. I hope that this version is clearer.

HTML tree, that is… Ahh HTML. The tree with often not so perfect branches. Recently for one of my projects I had to grab certain bits of information from a series of HTML pages. The HTML was proper in some and not so good with others (huh? Font tags? Poorly nested tags?). I thought about parsing it as I would an XML document but given the “crooked branches” I figured that wouldn’t work. I could write a mess of regex, but gee — isn’t there a better way? Through a series of searches and poking around, I discovered HTML::Tree module which seemed to suit my purpose well! I will not bore you with the use I had for using HTML::Tree, so I made a fun sample:

#!/usr/bin/perl

use warnings;
use strict;
use diagnostics;

use HTML::TreeBuilder;

The typical top of a Perl script. I usually ″use diagnostics″ when developing and take it out when I am done. Just give you more verbose error messages. I need all the help I can get!

Now the fun stuff:

I made a function to load the DevChix homepage that I had saved to a local file. Ideally, this data would be pulled live from the site. For now though, I start simple.

sub load_tree {
   my $page = HTML::TreeBuilder->new();
   $page->parse_file('DevChix.htm');
   return $page;
}

This returns the TreeBuilder object with my data loaded. Using the most awesome tool Firebug (Also, see Jen′s post about it awhile back), I see that the sidebar list is a div tag with id of “sidebarposts”. Lets look down our Html Tree and find that element:

my $page = load_tree();

my $sidebar = $page->look_down( '_tag', 'div',
   sub { $_[0]->id eq 'sidebarposts' } );

Not too complex. Look down the tree, look for a tag thats a div with the id of “sidebarposts” .. gee, thats nearly english (and people say that Perl is jibberish! Bah!).

Now, lets grab the li elements in that div:

my @ul_list = $sidebar->look_down('_tag','li');

foreach my $li(@ul_list) {
  print $li->as_text, "\n";
}

I know I′ll be getting back more than 1 element so I assign it to an array instead of a scalar. Then in the for loop, I want to iterate through the list and print the element as text, which gives me the name of the link.

Output is something like this:

...
Regular Expressions: The Wart on the Bum of Every Language in Existence
RUBY: DRY up your Enumerations
*waving, not drowning*
Beautiful Python: The programming language that taught me how to love again
RailsConf
Test More for Java?!
Book Review: Beginning Ruby On Rails E-Commerce
...

Using a code ref to find elements came in extremely handy when I had some bunked up HTML, sometimes I had to look_down a table, find a tr that contained a table which had a certain class, or find all href tags that had a certain domain in the URL and then grab the tr container so I could grab the following tr .. etc.

The Tree::Builder interface has a ton more methods than I’ve talked about and you should take a look at it next time you need to grab bits from html pages!

**List last updated 04/19/07** (This list just keeps growing)

Ruby has generated such great interest and following since the launch of Rails. Mantra: Do get a book of Ruby before diving into Rails.

Now while researching, I found links here and there but they were all varied depending on your skill level. This (post) is an attempt and probably not the first attempt to group links, books and training sessions available by skill level. Only published books are included at the time of this writing (..most of them I’ve read and own). I have not included books and links that delve more into getting your rails app into production mode other than Capistrano and Mongrel. Such other methods might end up in another post or as an addendum at a later time. The Advanced Level is geared toward Rails.

A must have reference book:
Ruby In A Nutshell – by Yukihiro Matsumuto

BEGINNER LEVEL –

This level assumes that you are familiar with basic HTML, basic networks/servers and familiar with databases but have no prior programming background and entirely new to back end development.

B-L 1. Books/e-Books/Screencasts:

(Ruby)

• Learn to Program
  - by Chris Pine
• Introduction to Ruby
  - by Jim Arlow, Ila Neustadt
• Everyday Scripting with Ruby: For Teams, Testers, and You
  - by Brian Marick

(Rails)

• Build Your Own Ruby on Rails Web Applications (Rails 1.2)
  - by Patrick Lenz (I personally give this book a 5 Star)

B-L 2. Links:

• Ruby-Lang
• Ruby Wiki Book
• Ruby Cheat Sheet v.1 – Cenophobie
• Ruby on Rails
  - with links on How to install Ruby and Rails in a dev environment
• Ruby on Rails Wiki Book
• Rails API
• Rails Cheat Sheet – ILJD

B-L 3. Training/Classes:

• Ruby on Rails Training – Pragmatic Studio
• Ruby on Rails TDD Boot Camp – Obtiva
• RoR: Intro to Intermediate – RubyPal/David Black

INTERMEDIATE LEVEL –

This level assumes that you are very familiar with HTML, CSS, Javascipts, databases and have been doing back-end development with either ASP, Coldfusion, PHP, .NET and Java

I-L 1. Books/e-Books/Screencasts:

(Ruby)

• Ruby for Rails: Ruby Techniques for Rails Developers (5 star)
  - by David Black
• Programming Ruby: The Pragmatic Programmers’ Guide, Second Edition
  - by Dave Thomas, Chad Fowler, Andy Hunt
• The Ruby Way, Second Edition: Solutions and Techniques in Ruby Programming
  - by Hal Fulton

(Rails)

• Agile Web Development with Rails, 2nd Ed. (Rails 1.2)
  - by Dave Thomas, David Hansson, Leon Breedt, Mike Clark, James Duncan Davidson, Justin Gehtland, Andreas Schwarz
• Introduction to Ruby on Rails and Ajax
  - by Jim Arlow, Ila Neustadt
• RailsCast (Podcasts last from between 1 -7 mins so far. Two thumbs up. 5 star)
  by Ryan Bates

I-L 2. Links:

• Start At The Beginning
• Top 12 RoR Tutorials (some outdated)
• Top 30 RoR Tutorials (some outdated)
• Amy Hoy’s Blog
• RubyForge

I-L 3. Training/Classes:

• Ruby on Rails Training – Pragmatic Studio
• Ruby on Rails TDD Boot Camp – Obtiva

ADVANCED LEVEL -

This level assumes that you are breathing and thriving in ruby and running rails applications plus adding Ajax, Subversion, Capistrano and Mongrel into the mix.

A-L 1. Books/e-Books/Screencasts:

• Rails Recipes (5 star)
  - by Chad Fowler
• Rails Cookbook (5 star)
  - by Rob Orsini
• Ajax on Rails
  - by Scott Raymond
• The Money Train (Rails 1.1.6.)
  - by Ben Curtis
• PeepCode ScreenCasts
  - by Geoffrey Grosenbach et al
• Pragmatic Version Control: Using Subversion
  - by Mike Mason
• Mongrel
  - by Angel Dobbs-Sciortino
• Mongrel (Digital Shortcut): Serving, Deploying, and Extending Your Ruby Applications
  - by Matt Pelletier, Zed Shaw
• Bestechvideos for ROR
  - collections by Alexey Kovyrin

A-L 2. Links:

• Capistrano: Automating Application Deployment Manual
• Mongrel at RubyForge
• Rails Migration Cheat Sheet
• The Rails Way < - I love this - Jamis Buck & Michael Koziarski
• Putting REST on Rails
• RESTful Rails Cheat Sheet
• Liquid’s Screencast
• Brians Eng’s Rail Links
• Obie Fernandez’ Blog
• Whys’ RedHanded
• Geoffrey Grosenbach’s Blog
• RubyForge’s Code Snipets
• InfoQ’s Ruby Section
• PluginAWeek

A-L 3. Training/Classes:

• Advanced Rails Training – Pragmatic Studio
• Enterprise Ruby: Bending Railsâ„¢ – Obtiva

There’s quite a few blogs out there that are just THAT awesome but do check out Planet RailsConf’s blogroll for a quick list.

I’d love to hear if you have a link or book to recommend and why you’re recommending it.

I’ve been getting familiar with the Event Utility in the Yahoo library , and it’s a great way to handle and manage javascript events in a clean centralized way. It also smooths out the differences between browser event handling so you no longer need lines like this in your event functions:

e  = e ? window.event;

If you’re unfamiliar with events, it might help to read the article on quirksmode, as well as the yui page.

This library has lots of great methods for event listening, creating custom events, passing objects to event handler functions (a great feature), stopping default event behavior, and attaching listeners to all elements of a particular class rather than cluttering up your code with hundreds of individual listener calls. It’s all encapsulated in neat, well-documented code and a clear API.

One current simple example. I’m building a project where there’s a text input field on stage that serves as a quick “editor”: the user types a number into the field that corresponds with an object on the stage, and then they hit ENTER. [Result: they land in the object in an open editor, saving them mouse-action on the stage and allowing for easy keyboard access to dispersed elements]. We’re not actually submitting a form and since the text area is embedded in another form we just want to listen for the ENTER key but disable form submission, which automatically happens on enter. We also need to make sure that if the user double-clicks within the text area, the usual dblclick behavior (which creates a new object) is disabled. So we want this editor to listen for two events: keydown and dblclick; as well as stop the default behavior of the enter key (submitting the form).

Instead of something like this [pseudo-but-close code]:

< input type="text" id="editor"
onkeydown="javascript:edit();return false"

ondblclick="javascript:return false;" />

We can simply write

< input type="text" id="editor" />

And then in script tags in a centralized location,

$E = YAHOO.util.Event;

$E.addListener('editor', 'keydown', edit);
$E.addListener('editor', 'dblclick', interceptAction);

The first argument is name of the id of the element in question (or an element object itself); the second is the javascript event to listen for; and the third is the name of your function. There's an optional 4th argument, obj, which is an arbitrary object you can pass to your handler. If you do this, define your handler with two arguments: (e,obj).

Then define your functions:

/* handler to open your editor */

var edit = function(e){
// GRAB enter key
if( e.keyCode == 13){
// PREVENT form from submitting on enter
//[the default behavior of the enter key]
$E.preventDefault(e);
// DO things here
openInlineEditor();
}
}

/* handler to prevent default actions */
var interceptAction= function(e) {

// STOP the event from propagating to other listeners
$E.stopPropagation(e);
}

This is just the tip of the iceberg. I recommend reading up on this and looking at their examples and related articles linked on the page. It's made my event handling easier and more fun.

Occasionally a new tool comes along that literally changes my life. Prototype, del.iciou.us, and most recently, Firebug. Using it, especially when evaluating CSS and javascript (especially when it’s all over!), has increased my productivity and saved me from many migraines. In this post, I plan to focus on some of the helpful features for debugging CSS. In a later post, I plan to cover how wonderful it is to debug and test javascript in firebug,

Especially on websites that have a lot of nested styles, finding where that extra padding is coming from can be a headache and waste a lot of time that could be spent being productive. With firebug, you can quickly see where each element is getting its styles and the full cascade of styles affecting it. From there, it is easy to alter the CSS and html live to figure out what needs to be done for the desired effect. This feature can be used for a world of uses. For example, say I wanted to override some of the CSS on my orkut.com profile. First, I open up my profile and open firebug:

The green check mark in the bottom right indicates that there are no errors (you can choose to display any or all of the following: javascript Errors, javascript warnings, CSS errors, or xml Errors) used on the page is valid. The dropdown list displays where styles are being defined.

Select “inspect” from the menu then hover to select the element to edit. On the right hand column, the styles are defined specifically for the element, but also what it inherits (font from panel table) and what is over-written (font from main table class). Dreamweaver 8 has a similar feature for showing the cascade of elements. As an added benefit, each of the rules listed has a hyperlink back to the file where it is defined. Also in this screen shot, notice that firebug displays the html hierarchy as a breadcrumb like chooser for the currently selected element. This breadcrumb is clickable and allows for quick access to the nearby html elements.

Here you can see how easy it is to work with or turn off styles. One great feature displayed in this screenshot is that when hovering over a defined color, a pop-up displays the color. The same is true for any images that are used in a style or in html.

And, viola! In only a few short minutes, I am able to find and define what style classes I want to override and see what the page will look like live as I made the adjustments:

My book on Mongrel published with O’Reilly is now available for purchase. Mongrel is a web application for Ruby on Rails, more stable than WEBrick, and easier to set up than FCGI to Rails through Apache. You can find it at http://www.oreilly.com/catalog/mongrelpdf/.