Flex Store sample application - Overview

Additional Requirements

Sample Files

To download and view the source code for this sample, browse the application, right-click the sample, and select view source. You will find detailed instructions for implementing and deploying the application in the Read Me for the application.

Note: This article was created based on Flex 2. Minor changes in the description and code may be necessary before it can be applied to Flex 3.

The Flex Store application shows some of the user experiences that the Adobe Flex 2 framework provides. The Products page shows how you can use states, transitions, and UI techniques, such as showing more information as space becomes available, to improve your application. For example, if you change the filter options in the panel on the left, you can see the phones drop out and move around in the main Catalog panel. As you hover the mouse over a phone, more buttons appear that provide opportunities for adding the phone to the compare list, the shopping cart, or viewing its details. You can also drag the phone into the compare panel. If you add the phone to the shopping cart, the panel shifts and exposes the cart, which was hidden underneath. This behavior shows how you can re-use the screen real estate (the drag-and-drop operation also works with the shopping cart when it's visible). There are also grips on the sides of the screen that can change from viewing the cart to the filter panel and back. The labels in the upper-right corner of the panel also show which page you are currently viewing, and you can click the label to change the state.

Experience the application

To download and view the full source, right-click the Flex application and select View Source from the context menu.

Flex framework features

Effects are clearly the highlight of the Flex Store application because they are used extensively for the animation between different states. The states are used to help hide and show different areas of information, and the ProductCatalogThumbnail has different states for the levels of detail visible. You can see how the drag-and-drop operation is implemented; it is initiated in the ProductCatalogPanel and handled in the ProductList. The application also employs extensive component customization; for example, the Panel container has buttons in its titleBar. This example exposes the power of using style sheets. You can change the default beige and orange theme to blue by commenting out the beige.css style sheet in flexstore.mxml and uncommenting the blue.css style sheet. (Currently, Flex 2 does not support the run-time loading of style sheets.) You can change the default beige and orange theme to blue (and back again) by clicking on the FlexStore logo in the upper-left corner of the application.