MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Use Manual

Page: 56 / 158

56 Chapter 2: Flex Builder Tutorials
6.
Assign the event handler to the thumbnail view button by clicking anywhere in the first
<mx:Image>
tag in the flexstore.mxml file and setting the following property in the Events panel
of the Tag inspector:
■
mouseDown
: changeView('thumb')
When the user clicks the image, the
changeView()
function is called.
7.
Assign the event handler to the grid view button by clicking anywhere in the second
<mx:Image>
tag and setting the following property in the Events panel:
■
mouseDown
: changeView('thumb')
8.
Save the flexstore.mxml file.
9.
Click the Run button on the Document toolbar to test the buttons in the embedded browser.
You discover a bug. When you click the grid view button at the lower edge of the product
catalog, the application doesn’t switch to the grid view. The view should change when you click
the button.
You decide to run the ActionScript debugger to locate and fix the problem.
Debug the view buttons
One of the catalog view buttons is broken: it won’t 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 the problem.
1.
Make sure both the flexstore.mxml and flexstore_script.as files are open in Flex Builder.
2.
Switch to the flexstore_script.as file and review the event handler for the view buttons:
function changeView(view) {
currentView=view;
if (view=="thumb") {
bodyStack.selectedChild=thumbView;
} else if (view=="grid") {
bodyStack.selectedChild=gridView;
}
}
The changeView function will select
gridView
only if the string “grid” is passed to the
function’s
view
argument. You decide to set a breakpoint to check the value passed to the
function.
3.
Set a breakpoint on the following line by Control-clicking the line’s gutter:
currentView=view;
A breakpoint marker appears in the gutter. You set a breakpoint on this line because it
immediately follows the line that assigns a value to the
view
variable. When the debugger stops
here, the
view
variable will have a value.
4.
Switch to the flexstore.mxml file and click the Debug button on the Document toolbar.
Flex Builder compiles the application and runs it in its embedded browser.