MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual page 55

You decide to write an ActionScript function called
of the ViewStack container, which displays when the user clicks one of the buttons. The
ViewStack container has two child components: the GridView and the ThumbnailView
components that you inserted in it (see
on page 51).
To make your code more readable, you decide to place the ActionScript function in a separate file
called flexstore_script.as, which you then import in the flexstore.mxml file.
In Flex Builder, press Control+N.
1.
The New Document dialog box appears.
Select Flex Development in the left pane and double-click the ActionScript item in the
2.
right pane.
The dialog box closes and a blank ActionScript file appears.
Copy and paste, or enter, the following code into the file:
3.
var currentView="thumb";
// Handle view button 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 at the top of the code sample.
If the user clicks the thumbnail button, the ViewStack container displays the ThumbnailView
component. If the user selects the list button, the ViewStack container displays the GridView
component.
Note: You assigned the IDs bodyStack, gridView, and thumbView to the ViewStack, GridView,
and ThumbnailView components, respectively.
Save the ActionScript file in the fbComponents folder by pressing Control+S and naming the
4.
file as follows:
flexstore_script.as
Switch to your flexstore.mxml file, make sure you're in Code view, and enter the following tag
5.
immediately after the opening
<mx:Script source="flexstore_script.as" />
This line imports the ActionScript file into the flexstore.mxml file.
Tip: To quickly open an ActionScript file in Flex Builder, click anywhere on the filename in the
<mx:Script> tag (in this case, flexstore_script.as) and press Control+D.
changeView()
"Insert the view components in the Flex Store layout"
tag:
<mx:Application>
Tutorial: Building custom components with Flex Builder
that sets the child component
55