Creating Drupal modules with Flex

I worked with Drupal for the first time back in 2008. I created a couple of modules to validate the platform for a future project that we were considering for European Flash and Flex developers. In the end we didn’t do anything beyond that initial research, but this encounter with Drupal was like experiencing an expensive French eau de parfum: It stayed with me for a long time.

flex_drupal

A year later, during the summer I had some time to invest in a bigger project and I decided to build a Drupal module with a Flex front end.

I still needed to pick something for the module to do, so I opted to work in one of my many passions–photography. I settled on  building a Drupal module that displays pictures from various sources.  As you can see I’m truly an unselfish person. :D

What is Fx Gallery?

Fx Gallery is an open source image gallery module for Drupal (version 5.x and 6.x). It doesn’t have external dependencies on other modules. It displays pictures from the following sources: the local Drupal installation, Flickr user accounts, and Picasa user accounts (see Figure 1). You can see the module in action here.

fxgallery_1

Figure 1. Fx Gallery in action, handling pictures from Flickr, Picasa, and a Drupal server

The module has two views. One is a widget that displays four pictures at the same time; it takes the newest images from each image source (see Figure 2). The other one is the main picture view that enables you to control what albums to view and how to browse them. I will refer to the latter view as viewer.

fxgallery_2
Figure 2.
Fx Gallery widget view integrated on the left sidebar

The viewer lets you browse your pictures using one of three views: tile list (see Figure 3), cover flow (see Figure 4), and single image (see Figures 5 and 6). While browsing the pictures, you can choose to use full screen mode or not.

fxgallery_3
Figure 3. Tile list view

fxgallery_4
Figure 4. Cover flow view

fxgallery_5

 

 

 

Figure 5. Single image view

fxgallery_6
Figure 6. Single image view with the thumbnails view overlay opened

When you view pictures loaded from Drupal you can add comments as well.

I built this module together with my friends from DesignIT, Stelian and Andrei. They are developers who have extensive experience with both PHP and the Flash Platform; they are also the managers of FLEXer, the Flex User Group from Bucharest, Romania.

Why Flex?

For those who don’t know, Flex is an open source application framework for building rich Internet applications (RIAs) that run in Flash Player or on Adobe AIR.  While traditionally Flash has appealed to creative designers/developers, Flex makes it easy for developers to create great looking applications.

I know many people associate Flash mainly with video. Well, this is only one of the many uses of Flash these days. Other people use Flash to create games or to create RIAs for consumers or behind-the-firewall applications.

Going back to Fx Gallery and thinking about its features, it is quite clear that this module would benefit from the interactivity and friendlier UI you can build when targeting Flash Player. At the same, targeting Flash Player gives my application consistent performance and behavior across all major browsers and operating systems.

I also had to decide whether to use Flex 3 or Flex 4 to implement the client. When we began work, the first beta public of Flex 4, Flash Builder 4 and Flash Catalyst were just released. Although the work would have been much easier with Flex 4, we decided to use Flex 3 and upgrade later when the final version of Flex 4 is out.

Building the module

Now you have a better idea of what Fx Gallery is, why we built it, and why we chose Flex, but you’re probably more curious to learn how we built it.

In the next sections I will describe the workflows and tools we used, as well as the module architecture. This project is open, and I encourage you to download the source code and explore it if you want to find more about its internals.

Tools

Once I had a clear idea about what I wanted to create, I started to create the specs of the module. The most important tool at this stage was Illustrator, which I used to design the UI and different states of the application.

We used these drawings in order to fine tune each state of the application’s UI. After a number of iterations, we were quite happy with how the app looked and supported workflows. Still, at this stage we had only Illustrator files (see Figure 7) and a spec document (no code was written).

fxgallery_8
Figure 7.
Illustrator drawing for tile list view (early prototype)

Had we chosen Flex 4 instead of Flex 3, we could have used Flash Catalyst to transform the Illustrator drawings into Flex components. More on this workflow in the What’s Next section.

Since we were sticking to Flex 3, we created many of the different UI pieces using programmatic skins and CSS.

Libraries

Some say that if a technology has a lot of frameworks, then it is a sign of maturity. This is true for both PHP and Flex. If you take a look at this page, I’m betting the number of libraries and projects for the Flex/Flash world will surprise you.

For Fx Gallery we were able to leverage several existing libraries and components. Here is what we have used so far:

  1. XMLRPCFlash – for communication between the Flex client and the Drupal back end
  2. ActionScript 3 library – for connecting to Flickr
  3. Picasa ActionScript 3 library – for connecting to Picasa
  4. GreenSock Tweening library – for some animations
  5. as3corelib – a utility library for ActionScript 3
  6. DisplayShelf Flex component (by Ely Greenfield) – for the cover flow view

The client

Flash applications (like Ajax apps) are able to make requests for data directly to other servers, bypassing the server from which they were loaded. With Fx Gallery this is exactly the case when albums from Flickr/Picasa are displayed.

The client connects to the Drupal content management system using the XML-RPC service that Drupal provides. Once the module page is loaded and the Flex application is initialized, the module makes requests to Drupal for:

  • colors used by the UI (most of the colors are customizable in the admin section)
  • local albums
  • thumbnails (if local albums exist)
  • Flickr account API key and users. If defined, it will make requests for all the public sets defined for each user set in the Admin section of the module
  • Picasa users. If defined, it will make requests for all public albums for each user.

After Fx Gallery receives the responses for these requests, it populates the UI and the user can start navigating between albums and pictures.

All the information/pictures from Picasa/Flickr are loaded directly from Picasa/Flickr servers; no information goes through Drupal web server.

The code for the viewer is organized as follows (see Figure 8):

  • src/default package: the main application file and CSS file
  • src/assets: font files and logos for Flickr and Picasa
  • src/com: third-party source code (as3corelib, GreenSock, DisplayShelf, etc.)
  • src/flexer: the viewer components, component classes, data objects, and business logic. This is the code we wrote in order to create the viewer (aside from the code in src/default)
  • src/sk: library for Picasa

fxgallery_9
Figure 8. Source code for the viewer part of module

The PHP code

This module has relatively little logic on the server side. As I said, most of the information is retrieved directly from Picasa or Flickr servers. Thus the PHP code it is pretty similar to a simple Drupal module (see Figure 9).

fxgallery_10

Figure 9. Module files

The database itself is quite simple too. There are tables for storing the Flickr/Picasa account information, local albums, local pictures, thumbs used by the widget, comments on the local images, and color/size settings for the viewer and widget.

There is a cron script used for caching the thumbnails needed by the widget view. The thumbnails are stored in the drupal_installation_folder/gallery/thumbs/. And the local pictures are saved into drupal_installation_folder/gallery/ folder.

Some of the folders (Cam, Flickr, and Picasa) are libraries used by the cron.php script.

Module page and source code

Here is the module page. You can download the module archive from here, and you can download the source code of the module from here. Remember that the current version of the module can be compiled with Flex 3.4 or 3.5.

The source code is split into three Eclipse projects:

  1. FxGallery-Viewer (this is a Flex project and it has the source code for the viewer)
  2. FxGallery- Widget (this is a Flex project and it has the source code for the widget view)
  3. FxGalleryModule (this is a PHP project, and it has the PHP source code, the SWFs of the two viewers, and the HTML wrappers)

When you want to build the Fx Gallery module, all you have to do is to compile the two Flex projects (FxGallery-Viewer and FxGallery-Widget) and then copy the viewer.swf and widget.swf from the projects to the fxgallery folder of the PHP project (FxGallery-Module).

The easiest way to work with these projects is by using Flash Builder 4. You can import the projects by using the import wizard of Flash Builder (choose Import > General > Existing Projects into Workspace, select the folder where you unziped the source of the three projects, and follow the instructions in the wizard).

When compiling the module, remember to compile for release. This will give you an optimized SWF without any debugging information.

If you don’t want to use Flash Builder and you prefer to use the free Flex SDK, you can still compile the code using the command line tools. You can read more about the Flex SDK here.

Debugging the module

While the PHP code is pretty simple, on the Flex client there is a lot of logic. One big help for us was the Flex debugger from Flash Builder 4. Once you import the FxGallery-Viewer project from SVN all you have to do install the module (on your machine or on a remote machine) and then set APP_MODE  to APP_MODE_DEVEL and XMLRPC_PATH_DEVEL to your Drupal URL/xmlrpc.php . Look for these constants in viewer.mxlml file.

Then you can start the project in debug mode (see Figure 10) and debug the Flex code.

fxgallery_11
Figure 10.
Flex debugger stopped where the Flex client makes a request to Flickr web services

 

Installing and configuring the module

To install the module, you’ll need to first grab it from here or create your own build.  Then read the README.txt file in the module folder or just follow these steps:

  1. Unzip the module and copy the fxgallery folder to Drupal’s module folder.
  2. In Drupal, choose Administer > Site building > Modules.
  3. Find the Fx Gallery entry, check it, and click Save Configuration. This will install the module (it creates the tables and gallery folder under the Drupal installation folder).
  4. To add the widget view, choose Administer > Site building > Blocks.
  5. To configure the colors and size or the Flickr and Picasa accounts, choose Administer > Site configuration > Fx Gallery.
  6. To configure permissions choose Administer > User management > Permissions.
  7. To create local albums, upload images to them, and manage comments choose Administer > Content management > Fx Gallery (see Figure 11).

fxgallery_14
Figure 11. Edit albums, images, and comments

What’s next

Looking ahead, the first thing we want to do is to update the Fx Gallery client to Flex 4. This version brings a whole new list of goodies for those who want to create unique and attention-grabbing applications. For us, the most important changes revolve around the new component architecture and the addition of MXML for graphics (an extension to the MXML language, part of the Flex framework, that brings support for graphic primitives, effects, and other goodies).  With the new UI component architecture, the data and behavior of a component is separated from the look/skin (see Figure 12). Consider, for example, a button. A button in Flex 4 has four states: up, down, over, and disabled. A button can have a label, an icon, and a tooltip. Depending on the skin you use, you can have a label, just an icon, or you can have different colors for each state.

fxgallery_7
Figure 12.
Flex 4 UI component model

Using these new features and this new architecture you can customize components and achieve your desired effect or look-and-feel much easier than before.

All the changes in the Flex framework enabled Adobe not only to add new features to the IDE (Flash Builder 4) but also to create a new tool, Flash Catalyst.

In 2009, Adobe introduced a new interchange format for describing graphics across various tools that can be used to create content that runs in Flash Player. This format is called FXG and used by both Illustrator and Flash Catalyst.

Flash Catalyst is a new tool that is aimed at bridging the gap between the designer and developer worlds when creating applications using the Flash Platform. Flash Catalyst can import a file created in Illustrator or Photoshop (see Figure 13). All the assets and layers are recognized. You can pick up different pieces from the design and transform them into Flex components. Even after this conversion,  you still can edit these components and change them. Flash Catalyst has drawing tools for editing the design directly. Alternatively, you can choose to edit a piece back in the original program where it was created (Illustrator in this case).

fxgallery_13
Figure 13. Illustrator drawing imported in Flash Catalyst

Using Flash Catalyst you can develop most of your application’s UI components. For example you can select the graphics from the top left corner and transform them into buttons (tile list view button, cover flow button, and so on), you can create the item renderer used by the tile list (see Figure 14).

fxgallery_16
Figure 14. Editing the item renderer

Flash Catalyst gives you access to the individual states of each supported component. You can choose any one of the four states for a button and change the appearance used for that particular state (using colors, shapes, fonts, and shadows).

When you transform the graphics into Flex components, Flash Catalyst generates skin classes. Thus it is pretty easy to reuse the same skin for multiple buttons, or just use Illustrator and Flash Catalyst to design a new button, and then pick up the generated skin file and replace the old one.

Flash Catalyst generates a Flex project, which you can import into Flash Builder 4. You can then use this as a starting point and  add the business logic and back-end connectivity (getting data from the Drupal site in our case, or getting the albums and pictures from Picasa and Flickr).

You can see why the decision we made back in 2009 to stick with Flex 3 was so difficult. However, we think that updating to Flex 4 will not be difficult; and once the final version is out, we will do it.

You can read more about Flash Catalyst here.

 

We have other plans as well. We want to add support for other image services, and we have plans for deep linking support (the ability to recreate the application based on the URL; for Fx Gallery we want to be able to link to a specific picture).

Of course, we are looking for feedback from you. Also if you want to become a contributor, just raise your hand.

Where to go from here

If you want to learn more about Flex, a good starting point is my article Flex for PHP developers. You can download the beta 2 (for now) of Flash Builder 4 and Flash Catalyst, and get a taste of Flex and its development tools.

Another excellent resource for learning Flex is Tour de Flex (this is something like the CHM PHP manual; it is an application created with Flex that has hundreds of examples). On Adobe Developer Connection you can find a whole section dedicated to Flex and PHP.

I hope I’ve inspired you, even it was just a little bit, to take Flex into consideration for your future projects. Whenever you need a rich UI and interaction, Flex is an excellent choice. And given the integration between Flex and PHP, it is easier than ever to get up to speed.

Here is the link to a webinar on this subject I did at the beginning of March.

What do you think?

12 thoughts on “Creating Drupal modules with Flex

  1. Pingback: Building an image module for Drupal : Despre Adobe Romania

  2. Mihai, I think this article worth translating in Russian – can you approve us to do that, including your copyright and backlinks to your site, of course?

  3. Hey Rost,

    Please feel free to translate the article :)
    I’m looking forward to see it publish in Russian!

  4. … I’m personally a big fan of Drupal and use it on my website :)

    (Sorry for this 2-part comment, I’ve sent first part too early because of sporadic touchpad click.)

  5. Pingback: FLEX{er} » Blog Archive » FxGallery – Drupal Image Module

  6. Hi Mihai,may i ask for the recorded presentation?Is it possible for me to get the video?Thanks a lot…

  7. Pingback: Helping Out with the Drupal Services Module | Ryan Stewart – Rich Internet Application Mountaineer

  8. Pingback: Helping Out with the Drupal Services Module | Souvik's Opus

  9. Pingback: Helping Out with the Drupal Services Module (Adobe Flash Platform Blog)

  10. Thanks! Looks awesome. I think more development should be done between Flex and Drupal.

    I notice that you are using a WordPress blog, though. Are you not a drupaler?

Leave a Reply

Your email address will not be published. Required fields are marked *