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.