Flex sample application - The Hybrid Store
Requirements
User level
All
Required products
Additional Requirements
To download 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 ReadMe 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 Hybrid Store application shows how easy it is to integrate an Adobe Flex component into an existing HTML application, taking advantage of the expressiveness that the Flex framework and the Adobe Flash Player 9 provide. The sliders in the application are from the Yahoo User Interface Library. As you move the slider, the Hybrid Store application calls functions on the Flex SWF file to adjust the specified properties. When you release the slider, the application calls another function that indicates that filtering is complete, so the catalog can animate any changes necessary. Selecting or deselecting the check boxes causes similar actions. Those functions in the Flex application are exposed through the ExternalInterface API. The actual catalog display is a simplified version of the ProductCatalogPanel found in the Flex Store application.
To download and view the full source, right-click the Flex application and select View Source from the context menu.
Implementation notes
This example is a simple demonstration of integrating HTML and Flex, and it is not meant as a best-practice use of HTML. For example, the CSS used for positioning all elements could be improved; the thumbRight style is necessary to get everything working in Firefox and Microsoft Internet Explorer, but using that style may be excessive. Also, the ExternalInterface approach may prove frustrating for more extensive applications. At the same time as the Flex 2 release, Adobe released the Flex-Ajax Bridge on Adobe Labs. This provides the beginnings of a more robust framework for communicating between HTML and Flex.
