Join David Gassner for an in-depth discussion in this video Managing navigation with ActionScript, part of Flash Builder 4 and Flex 4 Essential Training.
The ViewStack container is a navigation container. It provides navigational functionality. But it doesn't have any visual interface of its own. In order to allow your user to move from one screen to another, you need to provide user interface controls. Buttons, link buttons, tabs or something like that lets the user move from one screen to another by clicking on items. You can provide this functionality in a couple of different ways. Either through manual navigation using ActionScript code or through a special component called the ButtonBar that binds to the ViewStack and creates the navigational functionality more automatically.
In this demonstration, I will show you how to write a little bit of ActionScript code that reacts to some buttons and moves the user from one screen to another. I will be working with the application file ASNavigation.mxml. In this application, I have a ViewStack with three NavigatorContent containers. The NavigatorContent containers contain instances of the Home, Products, and Login components. If I run the application in its current state, I see that the ViewStack only exposes its first view or first layer.
So I am going to create three buttons in the application that when clicked take the user to the particular layers that they want. I will return to the code. First, I'll create the buttons. I could place the buttons anywhere on the screen I'd like. But I'll take an opportunity here to show you a particular feature of the Application component in Flex 4. The Application component implements a property called controlBarContent. When you add visual objects to the controlBarContent array, it places them in a horizontal group across the top of the screen.
And then if the rest of the application has to scroll up and down, that component stays docked to the top. I will add the controlBarContent right after the Declarations element, and before the logo. I'll create a pair of tags called s: controlBarContent and then I'll create three buttons, and I'll assign the first one an explicit label of Home. Now, I'm going to clone that line of code by holding down the Ctrl and Alt keys on Windows or the Command and Alt keys on Mac, and pressing the Down arrow.
There is one more button and two more buttons. Then I'll release all of the keys, and I'll change the label for the second button to Products and for the third button to Login. Here's how the application looks now with the controlBarContent and the three buttons. I have buttons labeled Home, Products, and Login. And again, they are contained within his control bar that's docked to the top of the screen. Now, in order to move from one screen to another in a ViewStack, you can use one of two properties.
The first property is called selectedIndex. If you want to navigate using the selectedIndex property, you have to know the index position of a component within the ViewStack. The first component, that is the NavigatorContent that wraps the Home component, would have an index of zero. The second would have an index of one, and so on. That can be useful in some applications, but a lot of times it doesn't make any sense. For example, in this application, I have three components called Home, Products, and Login.
I don't care about the order in which they are declared and later on that order might change. So it's going to be more maintainable to address and expose these layers by their unique identifiers. To do that, make sure that you've assigned an id to each of the components that you want to expose. Then in order to navigate from screen to screen when the user clicks the buttons, use this code. I'll add a Click event and I'm not going to generate a full clickHandler function, because I only need to execute a single line of code which will look like this, views.selectedChild = home.
The home reference refers to the home id of the NavigatorContent in the first position. Now, I'm going to select and copy that code that sets the click event and I'll paste it into the other two buttons, and I'll change the references for the selectedChild property to Products and to Login. So this is now programmatic navigation. I am listening for events that are dispatched by visual controls, which I have placed in the controlBarContent area, but could be placed anywhere on the screen.
And when the user clicks on those buttons, I'm calling a little bit of ActionScript code to move from screen to screen. I will run the application and here's the result. I can now go from the Home screen to the Product screen to the Login screen. All of the navigation is being controlled by my explicit ActionScript code. Now, there are more automated ways of creating this form of navigation. Now, I'll show you one that uses a component called the ButtonBar in another video. But it's worth knowing that if you need to use explicit navigation, you can control it completely with your own ActionScript code.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?