back

Project profile: Sprout Builder grows with Flex

by Julie Campagna

What is a sprout? It's not a small plant — not in the Web 2.0 world anyway. Sprouts are interactive and portable chunks of interactive content. "Some people call them widgets, mashups, or mini sites, but we just call them sprouts," explains Sprout Builder CTO Kevin Hughes.

Sprout Builder is a web-based widget development application (or authoring platform) that enables anyone to quickly and easily build interactive content. Users create sprouts by combining text, shapes, and prebuilt interactive content, and then generating a SWF file that can be embedded within any website, blog, or social networking site.

Based in Honolulu, Hawaii, the Sprout Builder team designed and built the service using Adobe Flex 3. In this article, you will learn about the technologies that support and power the Sprout Builder service.

The Sprout team demonstrated the service onstage at DEMO '08, building a sprout in less than five minutes for the band Ben Harper and the Innocent Criminals.

Many requirements, one technology platform

When they first started out, the three-person development team had to choose a technology platform on which to create the application. There were many requirements. To start, the application had to enable nontechnical users to build, publish, and manage sophisticated multimedia content from within a web browser.

Additionally, the application had to work consistently across all major platforms, and it needed to support audio and video. At first, the development team used a combination of HTML and ActionScript to build out the service, but the developers quickly reached a limit with what they could achieve.

"With HTML, we simply couldn't give users the features they've come to expect from traditional desktop-based content creation tools. We couldn't rotate, scale, or transform elements, apply bitmap effects and complex masks, generate page thumbnails, or provide eyedropper capabilities. And in cases where we could, the solutions often were platform-specific or too slow and complex in their implementation," says Hughes. So the team decided to download the Flex 3 beta.

Flex is a free, open source framework for building rich Internet applications (RIAs) that deploy consistently across operating systems using Adobe Flash Player within web browsers or Adobe AIR on the desktop. Since Sprout Builder would initially live exclusively on the web, the application would be deployed via Flash Player, which is installed on 98% of Internet-enabled computers worldwide.

In addition to Flash Player market penetration as well as consistency across browser and operating systems, Hughes and VP of engineering Matthew McNeely were compelled to try Flex for various reasons.

"In contrast to Java and Swing, which I'd used before, one of the things I like most about Flex is that it supports the traditional web application model — a mixture of CSS, markup, and programming logic. Plus, the fact that I can do everything in Flex using command line tools and that it comes with an Apache module was very appealing to me" says Hughes.

The Flex module for Apache provides web-tier compilation of MXML and ActionScript files on Apache and IIS web servers. This module lets you rapidly compile, test, and deploy an application by simply requesting the main application file from a web browser, similar to working with server-side scripting languages such as PHP, ColdFusion, or JSP.

"Being able to create, test, and deploy a Flex application exactly the way I would a web application without having to radically change my development process at all was a huge factor and a big win," adds Hughes.

A seasoned middleware developer with an enterprise JavaBeans background, McNeely was compelled by the fact that the Flex Builder development environment is similar to a Java development environment in that it offers object-oriented principles, an Eclipse based IDE, and structured exception handling. "These similarities made it easy for our engineering team who are expert Java and Eclipse programmers get up to speed quickly with Flex," says McNeely.

The need for security

The Sprout Builder architecture is very similar to plug-ins in Adobe Photoshop or Flash — third-party developers can create their own components (such as a video player or news feed) that content creators can use as building blocks for creating sprouts.

"Because these components are loaded and executed over the web when needed, it's crucial that they not be an enabling way to spread viruses or destroy user content. Plus, we want to enable e-commerce components as well as DRM components, so the ability to store and transmit data securely is absolutely necessary for us," says Hughes.

Flash Player runs inside a security sandbox that prevents the client from being hijacked by malicious application code. This sandbox prevents users from running a Flex application on their machine that can access system files and perform other tasks.

"Certainly for us, the capability to securely and dynamically load, assemble, and execute modules was a requirement. Flex security features, along with the language separation of style, logic, and presentation, forms the core of this new kind of application development, which enables self-assembling desktop-quality software with flexible presentation capabilities," says Hughes.

Next step: Taking it to the desktop

Sprout Builder sounds like a perfect candidate for the desktop. "Imagine being able to work on your sprout offline, hook it back up to our service and collaborate on the design with colleagues and others, and then publish it immediately to your distribution network. That's the ultimate workflow we envision using Flex and Adobe AIR," says McNeely.

"We realize how powerful it would be to allow the loading, saving, dragging, dropping, and cutting and pasting of content to and from your desktop. That is something we're definitely planning for the near future," adds Hughes.

The Sprout Builder team designed the user interface using Adobe Illustrator and Photoshop software and developed the application using Flex. The server side consists of Drupal, PHP, and Apache, all running together and using Amazon S3 as the content-delivery network.

Sprout Builder is a free service and is currently in beta testing. For more information, visit SproutBuilder.com.


Julie Campagna manages the Adobe Edge newsletter as part of her work on the Adobe Developer Relations team. In addition, she contributes feature articles and produces video interviews for the Developer Center. In her free time, Julie likes to dabble in Flash video and produce web-based movies that feature her two English bulldogs, Daisy and Laverne.