Macromedia flex builder-using flex builder 用户手册

Tutorial: Building custom components with Flex Builder

57

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 the line with the breakpoint.

■

Displays the Call Stack panel in the Results panel group.

6.

Click the Variables tab next to the Call Stack tab and then expand the Locals category.

The Variables panel tells you that the 

view

 variable contains the value “thumb”. The value 

should be “grid”. The function is receiving an incorrect value from the grid view button.

7.

Switch to the flexstore.mxml file and click the Code button on the Document toolbar.

8.

Locate the 

<mx:Image>

 tag associated with the grid view button (it uses the list_off.png image) 

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.

Click the Stop button on the Debug toolbar and change the parameter from 

‘thumb’

 to 

‘grid’

 

in the 

<mx:Image>

 tag. 

Note: You cannot edit files when the debugger is running.

10.

Save the file.

11.

Click Debug to recompile the application and check the grid view button again.

After you click the application’s grid view button in the embedded browser, the Variables panel 
should confirm that the value of the 

view

 variable is now “grid”. 

12.

Click Continue on the Debug toolbar.

Since you didn’t set any other breakpoints, the application finishes executing. It should now 
display the catalog’s grid view.

For more information on using the ActionScript debugger, see 

.

This completes the components tutorial. If you like, you can continue building the Flex Store by 
completing the bindings tutorial.