Hybrid Store Readme

Run Hybrid Store

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 (license). 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.

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.

Notes for Adobe® Flex™ Builder™ 2

Creating a project in Flex Builder for the Hybrid Store application:

  1. Name your default application catalog.mxml.
  2. Prevent Flex Builder from generating an HTML wrapper: select Project > Properties. Select the Flex Compiler page, deselect the Generate HTML wrapper file option .
  3. Create a Run configuration for your project but deselect the Use defaults option and instead assign the Run setting to the hybridstore.html in your project's bin directory.
  4. To enable debugging of the Hybrid Store application you must create a copy of hybridstore.html. Open it in an editor (you can right-click on the file and select Open With > Text Editor). Find the line that says "src", "catalog" and change it to "src", "catalog-debug". Assign the Debug setting to this new HTML file.

The "run" links in this Readme file point to an HTML wrapper that is located in the same directory as the Readme, which in turn must be in the same directory as the compiled SWF file. If you are running this application in Flex Builder, the compiled SWF file and its matching HTML wrapper may be in the bin directory.

Notes for Adobe® Flex™ SDK

The build script for the Hybrid Store application assumes that you run the application from the local file system (file:/// in your browser). If you plan to run the application from a web server (http:// in your browser), change the -use-network setting in the build script to true.

Run Hybrid Store