When Your Flex App Needs to Hide

Shockingly, your Flex (or Flash) application will not take center stage for all clients and all situations. Frequently the application simply provides a useful interface for some utility, but is not or does not contain, the featured content itself. In this situation you'll only want/need to have the application loaded or visible when the user requires interaction with the provided functionality. Often there will be a central location (page) where the application is available. The underlying reasons for this, especially for assets embedded in a web site, is the fact that the application has a footprint that pushes out the surrounding content, or prevents interaction with content that may be visible 'beneath' the application when the wmode is set.

On a recent client e-commerce implementation the requirement was for their shopping cart to be ubiquitous, but not overbearing. In this case the normal HTML content of the site was what the client wanted featured, not the cart that would only be used occasionally by some visitors. In other situations, the approach is to either have a fully integrated shopping experience where products are displayed and managed within the application, or to have a single cart/check out page for the application that is displayed when the user wants to view the current contents and to place their order. In this case the 'products' were not visual and didn't lend themselves to an all-in application approach, also the client wanted ready access to their cart without having to redirect to a dedicated page. So the approach taken was to 'hide' the cart.

In this situation, we chose to leverage the browser to achieve our ends. This involved the use of layering and absolute positioning via interaction with the ExternalInterface class and css and JavaScript in the browser. The basic idea here is to push the application 'off' the page and only make it visible when it is needed. This also allows the entire web page to be interactive when the application is hidden, while at the same time having the application standing by when it is needed.

The fully realized application lives Here. And a toned down version with source code can be found Here.

One further feature of this application was the use of the iframe to provide regular form processing for cart items that require further user input. The client wanted to be able to add and customize these forms through the CMS which precluded making them pre-compiled within the application and budget prevented dynamically building them. The compromise was to intercept the form post on the back end, and feed the results back into the application.

Demo application source.