| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
|
|
|
|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
| <html xmlns="http://www.w3.org/1999/xhtml">
|
| <head>
|
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
| <title>Flex Store Readme</title>
|
| <link href="../readme.css" rel="stylesheet" type="text/css" />
|
| </head>
|
|
|
| <body>
|
| <h1>Flex Store Readme </h1>
|
| <p><a href="flexstore.html" target="_blank">Run Flex Store </a></p>
|
| <p>The Flex Store application shows some of the user experiences that the Adobe<sup>®</sup> Flex<sup>™</sup> 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. </p>
|
|
|
| <h2>Flex framework features</h2>
|
|
|
| <p>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 (and back again) by clicking on the FlexStore logo in the upper-left corner of the application.</p>
|
|
|
| <h2>Notes for Adobe<sup class="h2sup">®</sup> Flex<sup class="h2sup">™</sup> Builder<sup class="h2sup">™</sup> 2</h2>
|
| <p>To support runtime loading the CSS files must be compiled. Right-click on the beige.css and blue.css files in the Navigator and choose "Compile CSS to SWF." If you've imported this project from the Welcome page this option may already be selected. </p>
|
| <p>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 <a href="bin/flexstore.html">bin</a> directory. </p>
|
| <h2>Notes for Adobe<sup class="h2sup">®</sup> Flex<sup class="h2sup">™</sup> SDK</h2>
|
| <p>The build script for the Flex Store application assumes that you run the application from the local
|
| file system (<code>file:///</code> in your browser). If you plan to run the application from a web
|
| server (<code>http://</code> in your browser), change the <code>-use-network</code> setting in
|
| the build script to <code>true</code>.</p>
|
| <p><a href="flexstore.html" target="_blank">Run Flex Store </a></p>
|
| </body>
|
| </html> |
