MACROMEDIA FLEX-FLEX BUILDER, Tutorial, Page: 36 / 56

36 Flex Builder Tutorials
You decide to write an ActionScript function called
changeView()
that sets the child component
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
“Insert the view components in the Flex Store layout”
on page 32 ).
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.
1.
In Flex Builder, press N.
The New Document dialog box appears.
2.
Select Flex Development in the left pane and double-click the ActionScript item in the
right pane.
The dialog box closes and a blank ActionScript file appears.
3.
Copy and paste, or enter, the following code into the file:
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.
4.
Save the ActionScript file in the fbComponents folder by pressing S and naming the
file as follows:
flexstore_script.as
5.
Switch to your flexstore.mxml file, make sure you’re in Code view, and enter the following tag
immediately after the opening
<mx:Application>
tag:
<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 D.