MACROMEDIA FLEX-FLEX BUILDER Скачать руководство пользователя страница 13 | Manualshive

Страница: 13 / 56

MACROMEDIA FLEX-FLEX BUILDER Скачать руководство пользователя страница 13

Tutorial: Creating a layout with Flex Builder

13

7.

Click anywhere in the new

<mx:Canvas>

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 > vScrollPolicy

:

off

8.

Switch back to Design view to inspect your layout.

Tip:

Press F4 to hide the workspace and maximize the Document window. Press F4 again to

restore the workspace.

9.

Save your work.

Add view buttons to the product catalog

The product catalog area of the layout gives the user two views of the products—a grid view and a
thumbnail view. According to the user interface mock-ups, the user should be able to switch views
by clicking view buttons at the lower edge of the catalog. For information about the user interface
mock-ups, see

“Review the approved user interface mock-ups” on page 7

.

After studying the mock-up, you decide to use the following containers 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 following steps to lay out and insert the buttons with Flex Builder.

1.

Make sure the flexstore.mxml file is open in Flex Builder.

2.

Insert a ControlBar container by clicking inside the lower edge of the Panel container (without
clicking inside the ViewStack container), and then 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.

3.

With the insertion point still blinking in the ControlBar container, specify the values for the
following properties in the Attributes panel:

■

Size > height

:

45

■

Styles > horizontalAlign

:

right

4.

Insert an HBox container by clicking anywhere inside the ControlBar container, and clicking
the HBox button on the Insert bar.

5.

With the insertion point still blinking in the HBox container, set the value for the following
property in the Attributes panel:

■

Styles > horizontalGap

:

0

«
...
11
12
13
14
15
...
»

Содержание FLEX-FLEX BUILDER

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 56: ...56 Flex Builder Tutorials...

Отзывы:

Нет отзывов