User manual MACROMEDIA FLEX-FLEX BUILDER TUTORIALS

[. . . ] Flex Builder Tutorials This series of four interconnected tutorials explains how you can build a simple Macromedia Flex application using Macromedia Flex Builder. The application is part of a website for the fictitious Flex Store company. The application gives visitors the ability to view a product catalog, find out more about each product, and add products to a shopping cart. The application is a simplified version of the Flex Store application installed with the Flex server. [. . . ] Insert a button by clicking to the right of the NumericStepper control in the ControlBar container, and clicking the Button control on the Insert bar. 8. Modify the button text by double-clicking the button to open the Quick Tag Editor, and then changing the value of the label property as follows (shown in bold type): <mx:Button label="Add to Cart" /> 9. Save your work. In Design view, the completed product detail component should look similar to the following figure if you select the Panel container: Tutorial: Building custom components with Flex Builder 27 Build the shopping cart component According to the component's functional specification, the shopping cart component should display the products that the user wants to bring to the checkout area for purchase. The user can delete items from the cart by selecting an item and clicking the Delete button. The user can also proceed to the checkout area by clicking the Checkout button. The following is a mock-up of the component: The shopping cart component does not contain any data in this tutorial. Another tutorial describes how to add data (see "Tutorial: Binding components to data with Flex Builder" on page 39). In this part of the tutorial, you complete the following tasks: · "Lay out the shopping cart component" on page 28 · "Add the product list to the shopping cart" on page 29 · "Finish the footer of the shopping cart component" on page 31 Lay out the shopping cart component After studying the component mock-up, you decide to use the following Flex containers to lay out the component: · A Panel container to create the header and position the component's child containers vertically · A ControlBar container to create the footer You start by creating a component file based on a Panel container. 1. In Flex Builder, press Control+N. The New Document dialog box appears. 2. Select Flex Development in the left pane and double-click MXML Component:Panel in the right pane. The dialog box closes and a component file with a Panel container appears. 3. Double-click the Panel container and enter the following property value (shown in bold type) in the Quick Tag Editor: <mx:Panel. . . title="Shopping Cart" /> 28 Flex Builder Tutorials 4. Insert a ControlBar container by clicking inside the Panel container and clicking the ControlBar button in the Containers category of the Insert bar. Flex Builder inserts an empty ControlBar container and automatically positions it at the lower edge of the Panel container. 6. With the insertion point still blinking in the ControlBar container, specify the value for the following property in the Attributes panel: Common > id: ctrl 7. Save the component file in the fbComponents folder by pressing Control+S and naming the component file as follows: CartView. mxml In Design view, the component's layout should look similar to the following figure if you select the Panel container: Add the product list to the shopping cart According to the mock-up, the component should display a list of products the user wants to bring to the checkout area for purchase. Insert a DataGrid by clicking anywhere inside the Panel container and clicking the DataGrid button in the Controls category of the Insert bar. The DataGrid dialog box appears. Tutorial: Building custom components with Flex Builder 29 3. Click the Plus (+) button to add a third column, and then set the following options in the DataGrid dialog box: ID: dg Name Qty Price name qty price Header Text (first row): Header Text (second row): Header Text (third row): Column Name (first row): Column Name (second row): Column Name (third row): The DataGrid dialog box should look similar to the following figure: 4. Click OK. Flex Builder inserts a DataGrid component in your component file. 5. Click the DataGrid component to select it and set the following properties in the Attributes panel: Size > heightFlex: Size > widthFlex: 1 1 6. [. . . ] In Code view, add the ShoppingCart class to your application by entering the following tag after the opening <mx:Application> tag: <ShoppingCart id="cart" xmlns="*" /> You can open the ShoppingCart. as file in Flex Builder to view the class members. ShoppingCart is a model class created in ActionScript that defines the functions you need to track the items that are in the cart, how many there are, and the total price for the items. 3. Save the flexstore. mxml file. Tutorial: Binding components to data with Flex Builder 51 Add products to the shopping cart The product detail view (ProductDetail component) must not only display details about a product, it must let the user do the following tasks: · Specify the quantity of the displayed product the user wants to add to the shopping cart · Add the product and quantity to the shopping cart. You modify the ProductDetail component so that it adds the displayed product and quantity to the shopping cart when the user clicks the Add to Cart button. 1. In Code view, locate the <mx:Script> tag and enter the following variable declaration (shown in bold type): <mx:Script> var dataObject:Object; var shoppingCart; </mx:Script> The variable declaration creates a property of the ProductDetail component. [. . . ]