MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Use Manual, Page: 57 / 158

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 “Debugging ActionScript”
on page 87 .
This completes the components tutorial. If you like, you can continue building the Flex Store by
completing the bindings tutorial.