The first and most important part of the effort was the Flex application called PageBuilder, which is detailed in this other post. But wrapped around PageBuilder is a sophisticated site made with Drupal 6. From the start, Mrs. Riley was imagined to be a subscription site, and having an integrated forum and blog was also important. The majority of the development of the site portion was done Nick Garofalo, who I hired while he was a student at Saint-John Fisher University. For the most part, I would do the concept, design, and functionality and Nick would implement the Drupalese.

The site uses Ubercart to support credit card payments, and has a novel method of group subscriptions where one user buys a coupon code worth X uses. They can then give the code out to coworkers or friends and the site tracks who uses it.  Regardless of whether a user buys a subscription directly or via a key, they are then promoted to a new role where they can access PageBuilder.

<This post is in progress…>

PageBuilder is a Flex application that was built to run inside of MrsRiley.com (visit site, visit portfolio page). It helps people build visual learning materials and combines an easy interface with some novel community concepts. I wrote the entire application in MXML/Actionscript 3 as well as the backend in PHP running on a CentOS VPS. It also uses Amazon S3 for data storage.

The core concept of these materials is the Card. A Card is just a picture and word pair. These types of cards have been used in education for some time, but the existing software for building them is either too complicated or too expensive depending on who you are. I wanted to make something that was really accessible, but at the same time leveraged the fact that it was online by harnessing people’s work to build a database of cards.

So when a user saves a file, they can choose to share that file with the community. If they do so, the cards are extracted out of the pages in an intelligent way and added to a mySQL database that lets other users search for them. It’s the standard Web 2.0 paradigm – as people work on their individual stuff, they are building value for the group. This has worked even better than I had hoped, and all without exposing any complexity to the user.

PageBuilder is built following an MVC pattern in the front end, with a service/delegate setup for backend calls. I also implemented a pretty novel framework where the entire data model is a hierarchy that can transform itself to and from XML via an interface getXML() and setXML(). At first I did this just because XML is handy and AS3 happens to use the E4x interface for accessing it, making it really easy. But as time has gone on, many benefits have emerged.

For one, object cloning is dead simple. In typical AS3, you need to do some silly byteArray stuff to remove all references outside of a clone. With this, you just say objA.setXML(objB.getXML()) and you’re good.

Also, it took me a while to realize that I was making document building software, so I was always on the fence with whether or not I should represent the dataModel as relational data in mySQL. However, the decision to use XML paid off for no other reason than the simplicity of using full text search. All data is still stored in a mySQL database, but each searchable table has an XML field and searches run fulltext. This makes maintaining the search code vastly easier.

There’s lots of other stuff to talk about regarding PageBuilder. It has a nice undo system that was really interesting to write. It integrates with Yahoo and Flickr image search. It’s also a testament to “underdoing the competition” by focusing on a very common use case and doing it extremely well.

Check out the video of PageBuilder in action below or just visit Mrs. Riley to try it yourself.