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. [. . . ] 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. Press Enter to accept your change and close the Quick Tag Editor. 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. The list should include the quantity and price of each product. You decide to use a DataGrid component for this task. 1. Make sure the component file, CartView. mxml, is open in Flex Builder. 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. Switch to Code view (View > Code) and set the column properties of the DataGrid component by locating the three <mx:DataGridColumn> tags and adding the following properties (shown in bold type): <mx:DataGridColumn headerText="Name" columnName="name" width="180" /> <mx:DataGridColumn headerText="Qty" columnName="qty" width="50" textAlign="right" marginRight="4" /> <mx:DataGridColumn headerText="Price" columnName="price" width="60" textAlign="right" marginRight="4" /> Tip: You can use Code hints to quickly set these properties. 7. To make sure the component fits correctly in the Flex Store user interface, locate and delete the height and width properties in the <mx:Panel> tag. 8. Save your work. 30 Flex Builder Tutorials In Design view, the component should look similar to the following figure if you select the Panel container: Note: The component will scale to fit in the space allotted to it in the flexstore. mxml file. Finish the footer of the shopping cart component According to the component mock-up, the footer has one button to let the user delete a selected item in the shopping cart, and another button to let the user proceed to the checkout area. [. . . ] You want to use this property in the <local:ProductDetail> tag in the flexstore. mxml file to pass a shopping cart object to the component. This object keeps track of items in the shopping cart. 3. Locate the <mx:Button> tag in the file, and add the following property (shown in bold type): <mx:Button label="Add to Cart" click="shoppingCart. addItem(dataObject, qty. value); qty. value=1;" /> When the user clicks the Add to Cart button, the addItem method of the shoppingCart object adds the product (dataObject) and the quantity (qty. value) to the shoppingCart object. Note: The qty identifier is the name of the NumericStepper component that you use to specify a quantity. 4. In Code view, locate the <local:ProductDetail> tag, and add the following property (shown in bold type): <local:ProductDetail xmlns:local="*" id="productDetail" dataObject="{selectedItem}" shoppingCart="{cart}" . . . You bind the shoppingCart property to the shopping cart object (cart) to pass the object to the ProductDetail component. 7. [. . . ]