Updated Dec 15, 2008 by Thom...@Universalmind.com
Labels:	Featured, Phase-Support

FlexStore

Sample RIA: Adobe Flex Store

Introduction

The FlexBuilder 2 Installer from Macromedia installed a sample application called the Flex Store. The FlexStore was provided to the community to demonstrate rich-client application concepts that offered online by using UI components, filters, effects, transitions, view states, etc.

The FlexStore displays 3 screens of content: Home, Products, Support. The Products screen dynamically loads an xml catalog file with data for available mobile phones. In the Product screen (shown above), users can interactively:

filter which phones are displayed by criteria of cost, features, and other options.
compare features of 1 or more phones
add/remove phones from the shopping cart
drag 'n drop phones to the compare or shopping cart areas.

The FlexStore is quite amazing in the plethora of features that it demonstrates in a sample application. Developers can explore the source code to discover techniques and solutions that can be applied to their own custom applications.

Issues

Unfortunately the original FlexStore suffers from 4 significant problems:

The code is poorly organized, hard to understand, and impossible to enhance (as is).
Business logic is mixed with view logic and code.
Access to remote data services is mixed with view code.
View components are not using events properly.
View components have badly coupling relationships.

With these considerations, it is obvious that the FlexStore is not an example of code that would be used to create a production or enterprise application. This application (in its original state) would be a nightmare to enhance or reuse.

Solution

To remove the above issues, The FlexStore application desperately needed its components separated into an MVC architecture. Java uses Struts or Swing, ColdFusion uses Mach-ii or Model-Glue. Flex uses the Adobe Cairngorm MVC framework.

Below are links to the versions of the FlexStore with and without Cairngorm MVC. Developers are encouraged to download all versions below and compare the changes between the architectures, components, data structures, and couplings.

Version	Download	SVN Link
FlexStore (original)	download winzip
FlexStore (w/ Cairngorm MVC)	download winzip
FlexStore (w/ Cairngorm MVC and UM Extensions)	coming soon	pending

Note: the above FlexStore links include the FlexBuilder project files. These project files require FlexBuilder 3 and include the Cairngorm 2.2.1 flex library (.swc).

Developers will notice that the visual aspects have not changed at all. Only the code under the hood has changed. Component relationships, use of events, and code partitioning have all been significant improved.

Developers are encouraged to use the directory and file comparison tool BeyondCompare to compare the different versions of the FlexStore. Comparing the changes will be the primary method that developers can learn about the changes and non-visual enhancements to the FlexStore.

Comment by manuraj.dhanda, Sep 24, 2008

When could we expect a sample for Flex Store using Cairngorm Extensions ?

Comment by bjaysheel, Dec 13, 2008

Hey everyone,

I was trying to download the Cairngorm version but it seems that the file doesn't exist or as been moved, can some one please look into this. I was also wondering if anyone has a complete working version of this application (i.e use of search feature, and zoom in/out of map in support section perhaps use google maps for it, integration of a merchant for shopping cart) I didn't want to reinvent the wheel if this has been done.

Thank you Jay

Comment by Thom...@Universalmind.com, Dec 15, 2008

Fixed download link to the FlexStore (w/ Cairngorm MVC)

Comment by luchopintado, Dec 21, 2008

somebody have the code for flex builder 3?

Comment by Scorpion.Blood, Jan 25, 2009

luchopintado this is for FB3 :)

Comment by jasoncaijg, Feb 20, 2009

This method checks the runtime type of the sub-controller.
If not a subclass of ModuleController?, then an error is thrown.
@subController This is an instance of a class that "should be" a sub-Controller

private function checkModuleType(subController:):Boolean {
if (subController is ModuleController?) return false; else {
var msg : String = "SubControllers? must be subclasses of ModuleController?."; throw new Error( msg );
}
}

if (subController is ModuleController?) return false???????????????????????

Comment by olaveggen, Feb 25, 2009

One thing that doesn't work any longer is the filtering based on features triband-video-camera. Clicking the check-boxes has no effect. Also - all items shows all three features regardless what is specified in the catalog.xml. How can this be fixed?

Comment by christian.linde00, May 11, 2009

Any updates on this project or a working flexstore application?

Comment by jerrygag, May 26, 2009

ya i need an example with a delegate that uses the UM ext

Comment by absolute.relativity, Jul 26, 2009

To fix filtering problem with triband video mentioned above:

ProductXMLUtils.as

product.triband = (it.triband == "true") ; product.camera = (it.camera == "true") ; product.video = (it.video == "true") ;

Comment by gopal8060, Oct 22, 2009

TypeError?: Error #1009: Cannot access a property or method of a null object reference.

at com.flexstore.view.products.browser::ProductCatalogPanel?/animateShowProductDetails() sometime we get error when click on productthumbnail to get productdetail