1. DL manuals
  2. MACROMEDIA
  3. Other
  4. FLEX-FLEX BUILDER
  5. Tutorial

MACROMEDIA FLEX-FLEX BUILDER Tutorial

Summary of FLEX-FLEX BUILDER

  • Page 1

    1 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 produc...

  • Page 2

    2 flex builder tutorials install the flex server on your computer this part of the tutorial describes how to set up the developer edition of flex on the same computer as flex builder. To compile and run mxml and actionscript files, you need access to a flex server. The setup described in this part o...

  • Page 3

    Tutorial: setting up a development environment 3 5. On the install options dialog box, select the integrated jrun4/macromedia flex option. The dialog box gives you other installation options. This tutorial assumes that you selected the integrated jrun4/macromedia flex option. 6. After you finish ins...

  • Page 4

    4 flex builder tutorials 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: 1. Open the following url in your browser: http://localhost:8700/samples the f...

  • Page 5

    Tutorial: setting up a development environment 5 3. In the flex application root folder, locate the folder named products in the \samples\flexstore\assets\ folder and copy it to the \samples\fbbindings\assets\ folder. The products folder contains the product images used in the tutorial. If you're wo...

  • Page 6

    6 flex builder tutorials 5. 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 ...

  • Page 7

    Tutorial: creating a layout with flex builder 7 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...

  • Page 8

    8 flex builder tutorials 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 compon...

  • Page 9

    Tutorial: creating a layout with flex builder 9 4. Set the following property in the attributes panel of the tag inspector (window > tag inspector): ■ styles > verticalgap: 0 note: the angle bracket means the verticalgap property is located in the styles category of the attributes tab. This conventi...

  • Page 10

    10 flex builder tutorials 1. 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 app...

  • Page 11

    Tutorial: creating a layout with flex builder 11 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 requireme...

  • Page 12

    12 flex builder tutorials 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” on page 7 ...

  • Page 13

    Tutorial: creating a layout with flex builder 13 7. Click anywhere in the new tag, click the refresh button on the attributes tab, and set the following properties in the attributes tab: ■ common > id : bottomcanvas ■ size > height : 208 ■ size > width : 364 ■ size > widthflex : 1 ■ other > vscrollp...

  • Page 14

    14 flex builder tutorials 6. 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 7. Insert the grid view button by clicking inside t...

  • Page 15

    Tutorial: building custom components with flex builder 15 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 compone...

  • Page 16

    16 flex builder tutorials 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 gri...

  • Page 17

    Tutorial: building custom components with flex builder 17 4. With the insertion point still blinking in the vbox container, specify the values for the following properties in the attributes panel: ■ size > height : clear the value ■ size > width : clear the value ■ styles > verticalgap : 0 note: the...

  • Page 18

    18 flex builder tutorials 9. Switch to code view (view > code) and set column properties of the datagrid by locating the two tags, and adding the following properties (shown in bold type): width="300"/> textalign="right" marginright="4" /> you can use code hints to quickly set these properties. For ...

  • Page 19

    Tutorial: building custom components with flex builder 19 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...

  • Page 20

    20 flex builder tutorials 4. 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. 5. With the insertion point still blinking ...

  • Page 21

    Tutorial: building custom components with flex builder 21 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 compo...

  • Page 22

    22 flex builder tutorials 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: • “lay out the pro...

  • Page 23

    Tutorial: building custom components with flex builder 23 6. 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 bui...

  • Page 24

    24 flex builder tutorials 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 componen...

  • Page 25

    Tutorial: building custom components with flex builder 25 4. 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: ■ common > text : product name ■ co...

  • Page 26

    26 flex builder tutorials 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 i...

  • Page 27

    Tutorial: building custom components with flex builder 27 6. 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 attri...

  • Page 28

    28 flex builder tutorials 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 ...

  • Page 29

    Tutorial: building custom components with flex builder 29 4. Press enter to accept your change and close the quick tag editor. 5. 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...

  • Page 30

    30 flex builder tutorials 3. Click the plus (+) button to add a third column, and then set the following options in the datagrid dialog box: ■ id : dg ■ header text (first row) : name ■ header text (second row) : qty ■ header text (third row) : price ■ column name (first row) : name ■ column name (s...

  • Page 31

    Tutorial: building custom components with flex builder 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 ...

  • Page 32

    32 flex builder tutorials 5. 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: ■ common > text : total: $ ■ common > stylen...

  • Page 33

    Tutorial: building custom components with flex builder 33 1. Open the fbcomponents/flexstore.Mxml file in flex builder. Make sure you open the file located in the fbcomponents folder. 2. In design view, click anywhere inside the viewstack container in the product catalog panel, and select insert > l...

  • Page 34

    34 flex builder tutorials 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...

  • Page 35

    Tutorial: building custom components with flex builder 35 11. 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 s...

  • Page 36

    36 flex builder tutorials you decide to write an actionscript function called changeview() that sets the child component 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...

  • Page 37

    Tutorial: building custom components with flex builder 37 6. 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 of the tag inspector: ■ mousedown : changeview('thumb') when the ...

  • Page 38

    38 flex builder tutorials 5. 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 ...

  • Page 39

    Tutorial: binding components to data with flex builder 39 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 applicati...

  • Page 40

    40 flex builder tutorials 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. 1. In flex builder, open the flexstore.Mxml file located in the fbbindings folder (not the fbcomponents folder). 2. In the data panel (window...

  • Page 41

    Tutorial: binding components to data with flex builder 41 6. 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 ...

  • Page 42

    42 flex builder tutorials 6. 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. 7. In the right pane, expand the tree control, and select result. 8. Click finish to c...

  • Page 43

    Tutorial: binding components to data with flex builder 43 3. Save the actionscript file. 4. Switch to the flexstore.Mxml file. 5. 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): xmlns:mx="http:/...

  • Page 44

    44 flex builder tutorials 5. 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 c...

  • Page 45

    Tutorial: binding components to data with flex builder 45 6. In code view, locate the tag and add the following property (shown in bold type): dataobject="{catalog}" /> 7. Save the flexstore.Mxml file. 8. Make sure the flex server is running and then press f12 to test the flexstore.Mxml file in a br...

  • Page 46

    46 flex builder tutorials 3. Select and delete all the tags in the tile container. These placeholder images are no longer required. 4. With the insertion point still between the opening and closing tags, enter the following script block: /> the product data passed by the flexstore.Mxml file is store...

  • Page 47

    Tutorial: binding components to data with flex builder 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. 1. Open the gridview.Mxml file located in the fbbindings folder and enter the following tag after t...

  • Page 48

    48 flex builder tutorials 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. 1. Open th...

  • Page 49

    Tutorial: binding components to data with flex builder 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. 1. Open the productdetail.Mxml file located in the fbbindings folder. 2. In code v...

  • Page 50

    50 flex builder tutorials 7. With the to option selected, scroll down and select the text property (it should be selected by default). You want the text property to receive the product name data. 8. Specify the source of the data by clicking the next button, and then selecting the name element of th...

  • Page 51

    Tutorial: binding components to data with flex builder 51 14. Switch to the flexstore.Mxml file and in code view, locate the tag and add the following property (shown in bold type): id="productdetail" dataobject="{selecteditem}" ... You bind the dataobject property to the selecteditem variable to pa...

  • Page 52

    52 flex builder tutorials 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 t...

  • Page 53

    Tutorial: binding components to data with flex builder 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. 1. Open the cartview.Mxml file located in the fbbindings folde...

  • Page 54

    54 flex builder tutorials 9. 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 quant...

  • Page 55

    Next steps 55 this completes the tutorial on flex data bindings. If you want, you can continue experimenting with flex builder and flex development by adding more features to your flex store application. For example, you could add drag-and-drop support to let the user drag a product from the catalog...

  • Page 56

    56 flex builder tutorials.