manualshive.com logo in svg

MACROMEDIA FLEX-FLEX BUILDER, Tutorial, Page: 35 / 56

Share
Download
MACROMEDIA FLEX-FLEX BUILDER Tutorial Download 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 steps. If you get a 
server error, make sure the testing server is correctly defined in Flex Builder. For more 
information, see 

“Define a Flex Builder site” on page 5

.

Activate the catalog view buttons

According to the functional specifications, the Flex Store application should give the user the 
ability to switch between the grid view and the thumbnail view of the product catalog. The user 
interface contains two buttons for that purpose at the lower edge of the product catalog, as in the 
following figure:

In this part of the tutorial, you configure the view buttons so that the user can switch views.

Summary of Contents for FLEX-FLEX BUILDER

Page 1: ...ou 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...

Page 2: ...stallation guide on the Macromedia website at www macromedia com go flex_install The Developer edition is for noncommercial use for developing and testing Flex applications It is not licensed for depl...

Page 3: ...un4 Macromedia Flex option 6 After you finish installing Flex 1 0 install any Flex updaters available on the Macromedia website at www macromedia com go flex_updaters 7 Start the server by selecting S...

Page 4: ...hard disk C Program Files Macromedia Flex Builder Tutorial If you didn t install Flex Builder to the default location locate the Tutorial folder on your hard disk 2 Select the three folders fbBinding...

Page 5: ...ton in the Manage Sites dialog box and select Flex Site from the context menu The Flex Server Site Setup dialog box appears Tip You can also open this dialog box by clicking the Flex Site link on the...

Page 6: ...ial Creating a layout with Flex Builder on page 6 Tutorial Building custom components with Flex Builder on page 15 Tutorial Binding components to data with Flex Builder on page 39 Tutorial Creating a...

Page 7: ...n your favorite image editor from the Files panel in Flex Builder This feature is useful if you want to quickly change or touch up a mock up 1 In Flex Builder make sure the Flex Builder Samples site i...

Page 8: ...ese components see Tutorial Building custom components with Flex Builder on page 15 In this tutorial you create the basic layout of the application Create an MXML file In this part of the tutorial you...

Page 9: ...anel Window CSS Styles and click the Attach Style Sheet button at the lower edge of the panel The Attach External Style Sheet dialog box appears 3 In the Attach External Style Sheet dialog box click B...

Page 10: ...the Attributes panel Size widthFlex 0 Tip To verify that the component is selected check that mx VBox and its associated icon appear at the top of the Attributes panel 4 Insert the page title by clic...

Page 11: ...ew Design click anywhere in the HBox container and click the Panel button in the Containers category of the Insert bar Flex Builder inserts a Panel container in the file You want to use a Panel contai...

Page 12: ...With the insertion point still blinking in the VBox container set the following property in the Attributes panel Size widthFlex 1 You want the VBox container to scale based on its content 4 Click anyw...

Page 13: ...ers to lay out the buttons A ControlBar container in the left Panel container to create a footer An HBox container in the ControlBar container to position the buttons horizontally You use the followin...

Page 14: ...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 8 Save your work...

Page 15: ...t of a multipart tutorial In either case you must complete the setup tutorial before you begin For instructions see Tutorial Setting up a development environment on page 1 The tutorial includes a pre...

Page 16: ...ial Another tutorial describes how to add data see Tutorial Binding components to data with Flex Builder on page 39 1 In Flex Builder make sure the Flex Builder Samples site is selected in the Files p...

Page 17: ...ner and clicking the DataGrid button in the Controls category of the Insert bar The DataGrid dialog box appears 6 Set the dialog box options as follows ID list Header Text first row Name Header Text s...

Page 18: ...example to set the width property click in the tag before the closing angle bracket press the Spacebar to display the code hints type the letter w to quickly select the property and press Enter Type 3...

Page 19: ...ata in this tutorial Another tutorial describes how to add data see Tutorial Binding components to data with Flex Builder on page 39 1 In Flex Builder select File New The New Document dialog box appea...

Page 20: ...ner clicking the Image button in the Controls category of the Insert bar and selecting the following image in the mockups folder fbComponents mockups tnProduct png You want to insert five or more plac...

Page 21: ...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 click...

Page 22: ...uct name on top of the price A ControlBar container to create the footer You start by creating a new component file based on a Panel container 1 In Flex Builder press Control N The New Document dialog...

Page 23: ...VBox button on the Insert bar Flex Builder inserts an empty VBox container in the component 9 Insert a ControlBar container by clicking inside the Panel container outside and below the HBox container...

Page 24: ...mxml is open in Flex Builder 2 Insert a placeholder image for the product thumbnail by clicking in the upper left corner of the Canvas container clicking the Image button in the Controls category of...

Page 25: ...in the flexstore mxml file 5 Insert another Label component for the product price by switching to Code view View Code clicking immediately after the existing mx Label tag and clicking the Label butto...

Page 26: ...t file ProductDetail mxml is open in Flex Builder 2 In Design view click inside the ControlBar container at the lower edge of the Panel container Make sure the blinking insertion bar appears inside th...

Page 27: ...value 1 Size width 40 7 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 b...

Page 28: ...e 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 shoppi...

Page 29: ...ponent 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...

Page 30: ...operties in the Attributes panel Size heightFlex 1 Size widthFlex 1 6 Switch to Code view View Code and set the column properties of the DataGrid component by locating the three mx DataGridColumn tags...

Page 31: ...l the products in the cart 1 Make sure the component file CartView mxml is open in Flex Builder 2 In Design view click anywhere inside the ControlBar container at the lower edge of the Panel container...

Page 32: ...w components in the Flex Store layout After completing the custom components you re ready to insert them in the Flex Store layout The layout is already created in this tutorial To create it yourself s...

Page 33: ...mmediately after the local ThumbnailView tag selecting Insert Local Component from the menu and selecting your GridView component You insert the GridView component in the same ViewStack container as t...

Page 34: ...ml 4 Click Open and then click OK to close the dialog boxes Flex Builder inserts the custom component in the Canvas 5 Click the mx Canvas tag on the tag selector on the lower edge of the Document wind...

Page 35: ...ing server is correctly defined in Flex Builder For more information see Define a Flex Builder site on page 5 Activate the catalog view buttons According to the functional specifications the Flex Stor...

Page 36: ...events function changeView view currentView view if view thumb bodyStack selectedChild thumbView else if view grid bodyStack selectedChild gridView Note Make sure you include the variable declaration...

Page 37: ...display the catalog s grid view You believe you can find clues to the problem in the ActionScript file that contains the buttons event handler You decide to run the ActionScript debugger to pinpoint...

Page 38: ...mage and check the value of the changeView function s parameter mx Image source Embed assets images list_off png mouseDown changeView thumb The value of the parameter is wrong it should be grid 9 Clic...

Page 39: ...layout or components tutorials first If you completed the components tutorial you can overwrite the files in the fbBindings folder with your files in the fbComponents folder Tip This tutorial require...

Page 40: ...server samples samples WEB INF flex flex config xml Note If you get an error message that says the WSDL fetch failed make sure the Flex server is running Also make sure you entered the correct values...

Page 41: ...y the web service 1 Make sure your flexstore mxml file is open in Flex Builder 2 Switch to Code view and insert a data model by entering the following lines after the closing mx WebService tag mx Mode...

Page 42: ...t sends a request to the web service for the product data The Flex Store functional specification approved by the client says that the product catalog must be displayed every time the flexstore mxml f...

Page 43: ...r in Flex Builder to make sure the web service is passing catalog data to your application When enabled the Network Monitor intercepts all data transactions with the server and displays the informatio...

Page 44: ...and when to retrieve the data and then verifying that the data is passed to the application you can use the data to populate the GridView component 1 Open the GridView mxml file located in the fbBindi...

Page 45: ...er edge of the catalog The catalog should now display the actual product data as follows Bind the ThumbnailView component to the data After binding the GridView component to the data you bind the Thum...

Page 46: ...ew mxml file 6 Switch to the flexstore mxml file 7 In Code view locate the local ThumbnailView tag and add the following property shown in bold type local ThumbnailView xmlns local id thumbView dataOb...

Page 47: ...id id list dataProvider dataObject change selectedItem event target selectedItem dispatchEvent type change 4 Save the GridView mxml file Detect the product in the ThumbnailView component You also modi...

Page 48: ...old type local GridView xmlns local id gridView dataObject catalog change selectedItem event target selectedItem When a change is detected in the GridView component for example when the user clicks a...

Page 49: ...l id dataModel name dataObject name name price dataObject price price description dataObject description description image dataObject image image mx Model You want to store the data passed to the Prod...

Page 50: ...peating steps 5 through 9 select the control clear the placeholder value for the text property start a new binding select text as the destination property and select the price element of the data mode...

Page 51: ...of each item The total price of all the products in the cart must be displayed as well as a button to delete items in the cart and a button to let the user proceed to the checkout pages Note The Chec...

Page 52: ...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 f...

Page 53: ...in the flexstore mxml file to pass the shoppingCart object to the component 3 Locate the mx DataGrid tag and add the following property shown in bold type mx DataGrid id dg dataProvider dataObject ite...

Page 54: ...gCart function removeItem if dg selectedIndex undefined dataObject removeItemAt dg selectedIndex mx Script The function calls the remoteItemAt method of the cart object 3 Locate the mx Button tag for...

Page 55: ...website at www macromedia com go fb_devcenter Flex Developer Center on the Macromedia website at www macromedia com go flex_devcenter For more information on the Flex Builder features discussed in the...

Page 56: ...56 Flex Builder Tutorials...

Reviews:

No comments