1. Manuals
  2. Brands
  3. MACROMEDIA Manuals
  4. Software
  5. FLEX-FLEX BUILDER
  6. Tutorial

MACROMEDIA FLEX-FLEX BUILDER Tutorial

Hide thumbs
Table of Contents

Advertisement

Quick Links

Download this manual
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.
The tutorials focus on using the development tools in Flex Builder, not on developing Flex
applications. The goal is to show you how to use Flex Builder to develop a Flex application more
rapidly and with less coding.
You can complete each tutorial as a stand-alone unit or as a part of a larger four-part tutorial. You
don't have to complete all the tutorials or complete them in order, except for the first tutorial,
which you must complete before you can start any of the others.
The first tutorial shows you how to set up a Flex development environment. The second shows
you how to lay out a Flex user interface with Flex Builder. The third shows you how to use Flex
Builder to create custom components, the building blocks of Flex applications. The fourth shows
you how to visually bind components to data with Flex Builder.
This chapter includes the following tutorials:
•
•
•
•

Tutorial: Setting up a development environment

This tutorial shows you how to install the Flex server on your computer, copy sample files to a
folder, and define a Flex Builder site. You must complete these tasks to complete the other
tutorials in this chapter.
In this tutorial, you'll accomplish the following tasks:
•
•
•
Flex Builder Tutorials
1

Advertisement

Table of Contents
loading

Related Manuals for MACROMEDIA FLEX-FLEX BUILDER

Summary of Contents for MACROMEDIA FLEX-FLEX BUILDER

  • Page 1: Table Of Contents

    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.

  • Page 2: Install The Flex Server On Your Computer

    (plus localhost), but you can still use it for development and testing as long as you want. The software does not expire. Copy the Windows version of the Flex installer from the Macromedia Flex CD. In Windows, double-click the Flex installer file, flex-10-win.exe.
  • Page 3 After you finish installing Flex 1.0, install any Flex updaters available on the Macromedia website at www.macromedia.com/go/flex_updaters. Start the server by selecting Start > All Programs > Macromedia > Macromedia Flex > Start Integrated Flex Server. The server displays startup information.

  • Page 4: Copy The Tutorial Folders To The Flex Samples Folder

    For more information, see the Flex installation documentation on the Macromedia website at www.macromedia.com/go/flex_install/. You can verify that the Flex server is running normally as follows: Open the following URL in your browser: http://localhost:8700/samples The Flex Sample Apps page appears.

  • Page 5: Define A Flex Builder Site

    The products folder contains the product images used in the tutorial. If you're working with the integrated JRun4/Flex server locally, the path of the original products folder is as follows: C:\Program Files\Macromedia\Flex\jrun4\servers\default\samples\flexstore\assets\products After copying the folder, it should also appear at the following location:...

  • Page 6: Tutorial: Creating A Layout With Flex Builder

    In the URL Prefix text box, enter the following URL: http://localhost:8700/samples/ Caution: Flex Builder may auto-populate this text box with http://localhost:8700/flex/. Make sure you change the value to http://localhost:8700/samples/. To get the Flex server to compile files while you work, Flex Builder uploads the file to the application root folder you specified and attempts to request it using the URL prefix.

  • Page 7: Review The Approved User Interface Mock-Ups

    Review the approved user interface mock-ups During the planning and approval stages of the project, members of your team produced final mock-ups of the user interface for the Flex Store. You will use these mock-ups to guide you when you create the MXML layout. The final mock-ups for the Flex Store application are stored in your fbLayout folder: /fbLayout/mockups You can open a mock-up file in your favorite image editor from the Files panel in Flex Builder.

  • Page 8: Create An Mxml File

    The user will also have the option of viewing thumbnails in the product catalog on the left side of the layout. The second mock-up file, uiThumbs.png, shows this thumbnail view: The layout contains the following custom components: • Two interchangeable product catalog components on the left side, which give the user two views of the catalog •...

  • Page 9: Import Your Css Styles

    Set the following property in the Attributes panel of the Tag inspector (Window > Tag Inspector): Styles > verticalGap: Note: The angle bracket means the verticalGap property is located in the Styles category of the Attributes tab. This convention is used throughout the tutorials. Save the file in the fbLayout folder by selecting File >...
  • Page 10 In Design view, click the Expanded button on the Document toolbar and then click anywhere inside the Application container. Expanded mode adds borders and padding to controls and containers in Design view to help you lay out your application. (The borders and padding appear only at design time.) You can click the Standard button at any time to get a better representation of how your project will look after it’s compiled.

  • Page 11: Position The Catalog Component

    Position the catalog component In this part of the tutorial, you position the product catalog on the left side of the user interface as shown in the mock-ups (see “Review the approved user interface mock-ups” on page 7). To meet this design requirement, you decide to use an HBox (for horizontal box) container to position the two halves of your user interface side by side.

  • Page 12: Position The Product Detail And Shopping Cart Components

    Position the product detail and shopping cart components In this part of the tutorial, you position the product detail and shopping cart components on the right side of the user interface as shown in the mock-ups (see “Review the approved user interface mock-ups”...

  • Page 13: Add View Buttons To The Product Catalog

    Click anywhere in the new tag, click the Refresh button on the Attributes tab, <mx:Canvas> and set the following properties in the Attributes tab: : bottomCanvas Common > id : 208 Size > height : 364 Size > width Size > widthFlex : off Other >...
  • Page 14 Insert the thumbnail view button by clicking inside the HBox container, clicking the Image button in the Controls category of the Insert bar, and selecting the following image file: /fbLayout/assets/images/thumb_off.png Insert the grid view button by clicking inside the HBox container on the right side of the thumbnail view button (without selecting the button), clicking the Image button on the Insert bar, and selecting the following image file: /fbLayout/assets/images/list_off.png...

  • Page 15: Tutorial: Building Custom Components With Flex Builder

    Tutorial: Building custom components with Flex Builder In this tutorial, you learn how to use Flex Builder to create custom components, the building blocks of Flex applications. The Flex Store application requires the following custom components: • Two catalog components that give the user different views of the product catalog •...

  • Page 16: Build The Grid View Component

    Build the grid view component According to the following mock-up, the grid view component should display the Flex Store product catalog as a two-column grid of names and prices. The user can select the grid view by clicking a button at the lower edge of the catalog. The grid view component does not contain any product data in this tutorial.
  • Page 17 With the insertion point still blinking in the VBox container, specify the values for the following properties in the Attributes panel: : Clear the value Size > height : Clear the value Size > width Styles > verticalGap Note: The “Size > height” expression means the height property is located in the Size category of the Attributes tab.
  • Page 18 Switch to Code view (View > Code) and set column properties of the DataGrid by locating the tags, and adding the following properties (shown in bold type): <mx:DataGridColumn> <mx:DataGridColumn headerText="Name" columnName="name" width="300"/> <mx:DataGridColumn headerText="Price" columnName="price" textAlign="right" marginRight="4" /> You can use Code hints to quickly set these properties. For example, to set the property, width click in the tag before the closing angle bracket, press the Spacebar to display the code hints,...

  • Page 19: Build The Thumbnail View Component

    Build the thumbnail view component According to the following mock-up, the thumbnail view component should display the Flex Store product catalog as a set of thumbnails with names and prices. The user can select the thumbnail view by clicking a button at the lower edge of the catalog. The thumbnail view component will not contain any product data in this tutorial.
  • Page 20 Insert a Tile container to lay out the products by clicking anywhere in the VBox container, and clicking the Tile button in the Containers category of the Insert bar. Flex Builder inserts a Tile container in the component file. With the insertion point still blinking in the Tile container, specify the values for the following properties in the Attributes panel: : tileView Common >...

  • Page 21: Build The Product Detail Component

    In Design view, the completed component should look similar to the following figure if you select the VBox container: Note: The component will scale to fit in the space allotted to it in the flexstore.mxml file. Build the product detail component According to the component’s functional specification, the product detail component should display product details when a user clicks one of the products in the product catalog.
  • Page 22 The product detail component will 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: •...
  • Page 23 Insert a Canvas container to position the product thumbnail by clicking anywhere inside the HBox container, clicking the Canvas button on the Insert bar, clearing the default values in the dialog box that appears, and clicking OK. Flex Builder inserts an empty Canvas container in the component. With the Canvas container still selected, specify the values for the following properties in the Attributes panel: : 140...
  • Page 24 In Design view, the component’s layout 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. Add the product details According to the mock-up, the component should display the following information: a thumbnail image, the product name and price, and a brief product description.
  • Page 25 Insert a Label component for the product name by clicking anywhere inside the VBox container, clicking the Label button on the Insert bar, and specifying the following properties in the Attributes panel: : Product Name Common > text : title Common >...
  • Page 26 In Design view, the component should look similar to the following figure if you select the Panel container: Finish the footer of the product detail component According to the component mock-up, the footer has a control that lets users specify the quantity of the selected item they want to add to the shopping cart.
  • Page 27 Insert a NumericStepper control by clicking to the right of the Quantity label in the ControlBar container, clicking the NumericStepper button in the Controls category of the Insert bar, and specifying the following properties in the Attributes panel: : qty Common >...

  • Page 28: Build The Shopping Cart Component

    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.
  • Page 29 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.
  • Page 30 Click the Plus (+) button to add a third column, and then set the following options in the DataGrid dialog box: : dg : Name Header Text (first row) : Qty Header Text (second row) : Price Header Text (third row) : name Column Name (first row) : qty...
  • Page 31 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.

  • Page 32: Insert The View Components In The Flex Store Layout

    Insert a Label component by clicking to the right of the Checkout button in the ControlBar container, clicking the Label button on the Insert bar, and specifying the values for the following properties in the Attributes panel: : Total: $ Common >...
  • Page 33 Open the fbComponents/flexstore.mxml file in Flex Builder. Make sure you open the file located in the fbComponents folder. In Design view, click anywhere inside the ViewStack container in the Product Catalog panel, and select Insert > Local Component. The Insert Local Component dialog box appears: Click the Browse button and select the ThumbnailView component, ThumbnailView.mxml, in the Open dialog box that appears.

  • Page 34: Insert The Detail And Cart Components In The Layout

    Insert the detail and cart components in the layout Two Canvas containers were inserted in the Flex Store layout to position the product detail and shopping cart components. In this part of the tutorial, you insert the two components that you created, ProductDetail.mxml and CartView.mxml, into the Canvas containers.

  • Page 35: Activate The Catalog View Buttons

    Make sure the Flex server is started, and then press F12 to run the flexstore.mxml file in a browser. The file should look similar to the following figure: If the Results panel displays validation errors, carefully retrace the preceding steps. If you get a server error, make sure the testing server is correctly defined in Flex Builder.
  • Page 36 You decide to write an ActionScript function called that sets the child component changeView() of the ViewStack container, which displays when the user clicks one of the buttons. The ViewStack container has two child components: the GridView and the ThumbnailView components that you inserted in it (see “Insert the view components in the Flex Store layout”...
  • Page 37 Assign the event handler to the thumbnail view button by clicking anywhere in the first tag in the flexstore.mxml file and setting the following property in the Events panel <mx:Image> of the Tag inspector: : changeView('thumb') mouseDown When the user clicks the image, the function is called.
  • Page 38 Scroll down the Flex Store page and click the grid view button. The click event calls the changeView function in the ActionScript file. Flex Builder does the following: Stops the application’s execution at the breakpoint you set. Switches to Code view and centers on the line with the breakpoint. Displays the Call Stack panel in the Results panel group.

  • Page 39: Tutorial: Binding Components To Data With Flex Builder

    Tutorial: Binding components to data with Flex Builder This tutorial shows you how to use Flex Builder to visually bind Flex components to data. It also explains how to use the Network Monitor to monitor the data passed between your application and the Flex server.

  • Page 40: Specify The Web Service To Use

    Specify the web service to use The source of the Flex Store product data is a web service that returns an array containing the data. In Flex Builder, open the flexstore.mxml file located in the fbBindings folder (not the fbComponents folder). In the Data panel (Window >...

  • Page 41: Bind The Web Service To A Data Model

    Expand the tree control in the Data panel to inspect the web service. The catalogWS web service has one method called getList that returns an array. Bind the web service to a data model A Flex data model provides a convenient way to refer to and manipulate data in Flex applications. For the Flex Store, you decide to create a data model and bind it to the product data returned by the web service.

  • Page 42: Send The Web Service Request

    In the left pane in the Add Binding - Step 2 dialog box, select the catalogWS web service. The Flex component containing the data you want to pass to the data model is the web service. In the right pane, expand the tree control, and select result. Click Finish to create the binding.
  • Page 43 Switch to the flexstore.mxml file. In Code view, assign the event handler to the application’s initialize event by locating the tag, and adding the following property (shown in bold type): <mx:Application> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="initApp()" When the application is initialized, the function is called. initApp() Save the flexstore.mxml file.

  • Page 44: Bind The Gridview Component To The Data

    Click the final WebServer event (onResult) and inspect the information in the right pane. If the application successfully called the web service when it was initialized, then the data for the product catalog should appear in the right pane. Note how the Network Monitor converts the raw data passed between the server and the application into ActionScript.

  • Page 45: Bind The Thumbnailview Component To The Data

    In Code view, locate the tag and add the following property (shown in <local:GridView> bold type): <local:GridView xmlns:local="*" id="gridView" dataObject="{catalog}" /> Save the flexstore.mxml file. Make sure the Flex server is running and then press F12 to test the flexstore.mxml file in a browser.

  • Page 46: Bind The Product Detail Component

    Select and delete all the tags in the Tile container. <mx:Image> These placeholder images are no longer required. With the insertion point still between the opening and closing tags, enter the <mx:Tile> following script block: <mx:Repeater id="list" dataProvider="{dataObject}"> <ProductThumbnail id="product" xmlns="*" dataObject="{list.currentItem}" />...
  • Page 47 Detect the product in the GridView component The first task is to modify the GridView component so it can detect when a user clicks a product. Open the GridView.mxml file located in the fbBindings folder and enter the following tag after the opening tag: <mx:VBox>...
  • Page 48 Retrieve the product selection After detecting the product selected by the user, you must pass the information from the GridView and ThumbnailView components to the main application. If the user hasn’t selected a product yet, you must specify a default selection. Open the flexstore_script.as file located in the fbBindings folder.
  • Page 49 Display the product detail After detecting and retrieving the product selection, you can retrieve the product’s data and use it in the ProductDetail component. Open the ProductDetail.mxml file located in the fbBindings folder. In Code view, enter the following code after the opening tag to declare an object <mx:Panel>...
  • Page 50 With the To option selected, scroll down and select the property (it should be selected by text default). You want the property to receive the product name data. text Specify the source of the data by clicking the Next button, and then selecting the name element of the dataModel data model, as follows: Click Finish to create the binding.

  • Page 51: Bind The Shopping Cart Component

    Switch to the flexstore.mxml file and in Code view, locate the <local:ProductDetail> and add the following property (shown in bold type): <local:ProductDetail xmlns:local="*" id="productDetail" dataObject="{selectedItem}" You bind the property to the variable to pass the product stored in dataObject selectedItem the variable to the ProductDetail component.
  • Page 52 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 •...
  • Page 53 Display the products in the shopping cart After using the shoppingCart object to add products to the shopping cart, you can retrieve the data and use it in the CartView component. Open the CartView.mxml file located in the fbBindings folder. In Code view, enter the following code after the opening tag: <mx:Panel>...
  • Page 54 Press F12 to test the file in a browser. Click any product in the list view or the thumbnail view. The product details should appear in the product detail area. Click the Add to Cart button to add the product to the shopping cart. Choose another product, change the quantity, and click the Add to Cart button again.
  • Page 55 For example, you could add drag-and-drop support to let the user drag a product from the catalog view to the product detail view. Next steps For more samples and tutorials, see the following websites: • Flex Builder pages on the Macromedia website at www.macromedia.com/go/fb_devcenter/ • Flex Developer Center on the Macromedia website at www.macromedia.com/go/...
  • Page 56 Flex Builder Tutorials...

This manual is also suitable for:

Flex builder

Table of Contents