Flex and Drupal and DOM

As you may or may not already know, there are many ways for Flex to consume data from Drupal. Using the Services module you can have access to Nodes, Views, Search and User objects using the AMF protocol (via Services + AMFPHP). You can also consume data one way using XML (either through the default XML feed or via RSS:Views and custom template functions). If you're really ambitious you can use the XMLRPC mechanisms provided by Drupal to consume and post data.

However, after writing numerous (5-6) little block modules using Flex and consuming data via numerous methods and dealing with the hassles of Services/AMF and writing numerous RSS:Views template functions to present XML the way I want it, I got to thinking... and a light bulb went off in my head.

ALL THE DATA IN DRUPAL IS ALREADY HTML/XHTML/XML

And, in Flex you can access the browser object via the ExternalInterface API where you can call Javascript functions (and presumably) the DOM structure of the website the SWF is sitting in. As a result, all of your data is already there for you to consume and render in sweet Flex style. So rather than creating a separate "view" of the data or a separate remoting method, why not just use the existing XHTML structure of the page to populate your Flex objects with the data that is already there?

For example, we were tossing around the idea of creating a module to present an XML view of a menu structure in Drupal (where you'd pass in the string name of a menu and get a nicely formatted xml structure of the menu) to consume in a Flex object then provide a nice Flex menu with effects, nice rollover behaviours, sound, whatever.

However, using the above method, all you would have to do is:

1. Create your menu as usual in Drupal

2. Write a Flex object to consume the on-page XHTML code of your menu strucutre via ExternalServices and Javascript/DOM

3. Place the Flex SWF in a div just below (or above) where your menu appears and add some CSS or Javascript code to set the visibility of the div to false (or shrink it to zero pixels high).

4. Then, the Flex SWF will parse out the menu structure and create the menu in situ using the XHTML generated by Drupal. Bye bye DHTML menu!

Now, there are obviously many other situations you could use this in, e.g. Block views where you could create tabbed menus on the fly where you just provide a long list of  nodes/teasers, then import the DOM structure to Flex and use tabs, lists, flow control layouts, coverflow or other very sweet looking and interactive ways to present data in Flex. 

The definite huge benefit to this is that you get to create blocks with very specific layout structures and beautifcation without affecting cross browser compatibility AND there is another huge benefit to this:

YOU DON'T HAVE TO MAKE ANY WEIRD HACKS TO PRESERVE SEO!

Since Drupal is already so tightly SEO optimized (and many of us have further enhanced those optimizations through our own improvements), adding Flex widgets to replace XHTML content can adversely affect the search engine optimization of your site. But with this method, all of the XHTML structure of the site is preserved.

Ok so stand by, because very soon I'll be testing this out and since I just thought of it there are probably numeours downfalls I haven't thought of yet, AND this really only works for ON PAGE swfs.

However, for SWFs that exist outside of the site, or where you need to consume the data remotely, all you need to do is create a separate data provider method for your Flex object depending on the context in which it's loaded (i.e. abstract your data provider methods/class and create different implementations for different contexts determined by application parameters).