One-day Application Building With The Horde Framework

Chuck Hagenbuch

The Horde Project

Goal

Tools

• Horde
• Prototype
• Scriptaculous
• Google Maps
• Yahoo! Geocoding

A note on code examples

This is a code-heavy, code-focused tutorial. There are a lot of code listings, and they're pretty dense. What I've tried to do is to comment only the parts of the code that are new. So for the PHP examples, look for the orange and read those parts.

V1: Prototype it with Horde

• Nothing fancy yet - just deal with the data.
• Use RDO - a data mapper implementation - to do it very quickly.
• Here's what it looks like
• And here's the code

V2: Be more selective

• We don't want to show every field in the table.
• Some of the fields should be formatted
• Better
• V2 code

V3: Nicer data entry

• We don't want all of these free-form text fields!
• We're also going to edit comments in the main UI, and the MBTA distance is calculated, not input.
• We can extend formMeta() to supply better type information as well
• Much better
• Here's how it's done

V4: Time to create our own template

• It's time to customize the look to match what we want.
• Here's what the generated template looks like if we dump it unfilled.
• We can customize it, save it to a file, and tell the RDO Template instance to use our customized template.
• Like so

V5: AJAX time

• Notice that we got a bunch of dynamic functionality with V4
• The table has an as-you-type search and is dynamically resortable
• This takes a few id attributes, one CSS class, and including several unobtrusive JS files
• Now we want to show property details with AJAX

Ajax.Updater

We're using prototype's Ajax.Updater helper:

Event.observe(window, 'load', function () {
  rows = $('mytable_body').getElementsByTagName('TR');
  for (var i = 0; i < rows.length; ++i) {
    Event.observe(rows[i], 'click', (function() {
      if (selectedRow) {
        Element.removeClassName(selectedRow, 'selectedRow');
      }
      selectedRow = this;
      Element.addClassName(this, 'selectedRow');
      $('prop').innerHTML = '';
      new Ajax.Updater('prop', 'details.php?id=' +
        encodeURIComponent(this.id.substring(5)));
    }).bind(rows[i]));
  }
});

Ajax.Updater target

• details.php just needs to return the HTML content for the property div
• We've moved the Property and PropertyMapper classes into a lib file now that we have multiple files using them
• Also added Property::getAddress() for properly formatting addresses (fixing the sorting workaround)

V6: In-place editing

• Don't want users to have to go to a separate page to make comments
• Don't want them to lose their place in the table, either
• AJAX is perfect. We use Scriptaculous, which has an InPlaceEditor helper
• New scripting in details.php, and comments.php to save the changes

V7: Geocoding

• Geocoding is translating a street address into longitude/latitude coordinates
• Want to calculate the distance to subway stops
• We also need coordinates to use Google Maps - API doesn't take addresses
• Yahoo! has a Geocoding service
• Unfortunately, Services_Yahoo (from PEAR) doesn't support it
• It's simple and they return data as serialized PHP - we'll write our own

Fun with latitude and longitude

• Once we get coordinates for the local subway stations, we can calculate the distance to them
• Need a formula called great circle distance
• Not sure we really need to calculate for the curvature of the earth in Dorchester, but it works
• Here's the geocoding and great circle code.

Automation

• We can script the longitude/latitude and subway distance for existing data, but we really want to do it automatically whenever a property is created or edited.
• Just put a little code into our create and edit cases

Put it on the map

• Finally have everything we need to add the mapping piece
• Need an API key from Google: http://www.google.com/apis/maps/signup.html
• Here's Google's Hello World maps example

Our mapping code

• Our script to show a single property: map.php
• All properties: mapall.php
• Common javascript: map.js

A few more tweaks ...

Questions?

Resources

• The Horde website: http://www.horde.org/
• Developer Documentation: http://dev.horde.org/
• Wiki: http://wiki.horde.org/
• Prototype: http://www.prototypejs.org/
• Scriptaculous: http://script.aculo.us/
• Google Maps: http://google.com/apis/maps/
• Yahoo! APIs: http://developer.yahoo.com/maps/rest/V1/geocode.html