ViewStack Code：
==================
……
<mx:ViewStack  id="viewstack1" width="100%" height="100%">
        <custom:No1View id="No1View"/>
        <custom:No2View id="No2View"/>
        <custom:No3View id="No3View"/>
</mx:ViewStack>
……


Custom Component Code：
==================
……
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Button label="Show Next ViewStack" click="this.parentApplication.viewStack1.selectChild  =
this.parent.viewStack1.No1View;"/>
    <!–
        or try this code:
         parentApplication.viewStack1.selectedChild  =
parentApplication.No1View;
    –>

</mx:Canvas>
……

为什么需要专门的导航系统?
Flex应用区别与以往的Web应用, 它具备典型的C/S特性:
1.One-page application的架构, 没有多页面的情况.
2.控件高度封装.
3.本地运算能力高.

由于Flex应用是运行在浏览器中, 它会有下面的限制:
1.对浏览器历史的支持
2.对Deep link的支持,以及URL参数的支持.
3.对浏览器刷新后状态的保留.

可以看出, 如果不设计, Flex下的导航变得很复杂.

主要导航方案:

ViewStack导航
很多的容器控件, 如ButtonBar, TabNavigator, 都需要一个ViewStack的数据源.

ViewStack有以下特征:
1.延迟初始化控件. 只初始化当前显示的控件, 在导航的过程中才会初始化其他的控件(Lazy Load).
2.只初始化一次. 一旦一个导航页完成了初始化, ViewStack不会再次创建.
3.导航面积比较大, 或者内部控件结构复杂, 都会导致运行效率降低.
4.支持HistoryManager, 允许浏览器的前进后退.
5.支持特效.
6.可以绑定到导航控件, 如ButtonBar, TabNavigator.

State导航

State导航有以下特征:
1.延迟初始化控件.
2.只初始化一次.
3.效率比较高.
4.不支持HistoryManager.
5.支持特效.
6.不能绑定导航控件.

导航选择策略
通常会混合使用. 单独使用任何一种都可能会使导航变得过于复杂. 必须根据项目的特点来进一步确定.
较大面积, 范围的导航尽量使用State(如子系统之间的导航).

如果几个导航界面之间有共同的部分(即, 整个界面只有一部分控件在变化),使用State较好.

如果几个导航界面之间完全不同, 两者都可以使用.

如果需要绑定到导航控件, 使用ViewStack. 这个时候使用State, 只能手写代码控制.

最佳实践
一个系统可以分成不同的子系统模块, 主mxml文件里使用任何一种作为主要导航.
每个子系统模块内部的导航有自己完成, 可以使用任何一种.
牵涉到跨子系统的导航需要在主程序, 或者是主框架的层次上解决.
使用AnimateProperty做动画, 尽可能不使用标准的效果(Resize, Zoom, Blur…).

附记
关于如何实现自定义控件的浏览器历史功能, 请参看帮助文档.
Flex 2不支持Deep link. Flex 3支持.

Flex开发的时候，会有关闭浏览器的需求~比如：点击退出按钮~
遇到这样的需求时可以如下处理：

<?xml version="1.0"?>
<mx:Application xmlns:mx='http://www.adobe.com/2006/mxml' >
<mx:Script>
           <![CDATA[
                 private function closeIE():void{
                       var request:URLRequest = new URLRequest("javascript:window.close()");
                       navigateToURL(request,"_self");
                 }
           ]]>
</mx:Script>

<mx:Panel title="My IE close App">
      <mx:Button textAlign="center" label="Close current IE" click="closeIE()"/>
</mx:Panel>


在Actionscript 2及以前，要打开任何网址，只需调用全局函数getURL()即可。在Actionscript 3中，已经取消了getURL()这个全局函数，取而代之的是flash.net包中的函数navigateToURL()，API格式如下：
public function navigateToURL(request:URLRequest,window:String=null):void

如果你想在flex应用中关闭浏览器窗口，可以利用navigateToURL调用javascript来实现，网上搜索得到如下示例：


引用
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function closeIE():void{
var request:URLRequest = new URLRequest("javascript:window.close()");
navigateToURL(request,"_self");
}
]]>
</mx:Script>
<mx:Button textAlign="center" label="Close current IE" click="closeIE()"/>
</mx:Application>


测试一下，你会发现关闭窗口之前会弹出确认的信息提示。如果想关闭窗口且不弹出信息窗口，将上述代码稍加改动（改动request变量声明那一行，注意黑体部分）即可实现。


引用
var request:URLRequest = new URLRequest("javascript:window.opener=null;window.close()");


实际上还可以更简单一些，如下：

引用
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button textAlign="center" label="Close current IE" click="navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self')"/>
</mx:Application>

===================

升级：可以加上Alert，确认是否关闭

HTML代码

<br /> import mx.events.CloseEvent;<br /> import mx.controls.Alert;<br /> private var btn:Class;<br /> private function cancelLogin(event:Event):void{<br /> Alert.okLabel="确定";<br /> Alert.cancelLabel="取消";<br /> Alert.show("关闭窗口？",<br /> "确认",<br /> Alert.OK | Alert.CANCEL,<br /> this,<br /> closeWindow);<br /> }<br /> private function closeWindow(event:CloseEvent):void{<br /> if(event.detail == Alert.OK){<br /> var request:URLRequest = new URLRequest("javascript:window.opener=null;window.close();");<br /> navigateToURL(request,"_self");<br /> }<br /> }<br />


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

【Accordion】  
—-headerHeight  标签头高度  Accordion组件中每个标签头的高度
—-dropShadowEnabled  是否显示投影  true和false 2个属性
—-shadowDistance  投影的大小  从0~20
—-shadowDirection  投影方向  left right center
—-dropShadowColor  投影的颜色
—-borderStyle  边框的样式  none solid
—-borderThickness  边框的粗细  从0~20
—-backgroundColor  背景色  整个Accordion组件包括标签头和主体内容都会应用上背景色
—-fillColors  未选中的标签头填充色  这个属性要设置4个色彩值：渐变起始色，渐变结束色，鼠标经过时渐变起始色，鼠标经过时渐变结束色
—-fillAlphas  未选中的标签头填充色透明度  对应于fillColors设置4个透明度数值从0.00~1.00
—-selectedFillColors  选中的标签头填充色  这个属性要设置2个色彩值：渐变起始色，渐变结束色
—-color  标签头文字的颜色
—-textRollOverColor  鼠标经过标签头时的文字颜色
—-textSelectedColor  鼠标点击标签头时的文字颜色
—-textIndent  标签头文字缩进距离的大小  数值从0~100
—-openDuration  打开新标签的速度  数值从0~1000

【Application】
—-backgroundImage  背景图  使用Embed(source=" ");来应用
—-backgroundColor  背景色
—-backgroundGradientColors  背景渐进色  这个属性要设置2个色彩，渐进起始色和渐进结束色，中间以逗号分隔
—-backgroundGradientAlphas  背景渐进色透明度  这个属性要设置2个透明度，对应渐进色中的2种颜色 值的范围是0.00~1.00，中间以逗号分隔

【ApplicationControlBar】  
—-cornerRadius  边框圆角度  数值从0~20
—-dropShadowEnabled  是否显示边框投影  true和false
—-shadowDistance  投影大小  数值从0~20
—-dropShadowColor  投影颜色
—-borderStyle  边框样式  default none solid
—-borderColor  边框颜色
—-borderThickness  边框粗细  数值从0~20
—-backgroundColor  背景颜色
—-fillColors  填充渐变色  这个属性要设置2个色彩，渐变起始色和渐变结束色，中间以逗号分隔
—-fillAlphas  填充色透明度  这个属性要设置2个透明度 渐变起始色透明度和渐变结束色透明度
—-highlightAlphas  高光透明度  2个数值，中间以逗号分隔 前一个为高光亮度，从0.00~1.00，为1时最亮，为白色后一个为高光透明度，从0.00~1.00，为1时最透明(可通过设置制作出水晶半透明效果)
—-backgroundColor  背景色

【Button】
—-cornerRadius  边框圆角度  数值从0`28
—-textIndent  Button标题文本缩进值  数值从0`20
—-paddingLeft  Button内部左侧填充值  数值从0`20
—-paddingRight  Button内部右侧填充值  数值从0`20
—-paddingTop  Button内部上侧填充值  数值从0`20
—-paddingBottom   Button内部下侧填充值  数值从0`20
—-fillColors  Button背景填充色   这个属性要设置4个色彩值：渐变起始色，渐变结束色，鼠标经过时渐变起始色，鼠标经过时渐变结束色
—-fillAlphas  填充色透明度   针对fillColors属性这个属性要设置4个透明度 渐变起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从0.00~1.00
—-highlightAlphas  高光透明度  针对fillColors属性2个数值，中间以逗号分隔 前一个为高光亮度，从0.00~1.00，为1时最亮，为白色 后一个为高光透明度，从0.00~1.00，为1时最透明(可通过设置制作出水晶半透明效果)
—-color   文字颜色
—-textRollOverColor  鼠标经过时的文字颜色
—-textSelectedColor  鼠标点击时的文字颜色
—-borderColor  边框颜色

【ButtonBar】
—-buttonHeight  ButtonBar的高度  数值从0`50
—-horizontalGap  ButtonBar中每个Button在水平方向的间隔  数值从0`20
—-textIndent  每个Button中的文本缩进值  数值从0`20
—-color   每个Button中的文本颜色
—-textRollOverColor  鼠标经过时每个Button中的文本颜色
—-textSelectedColor  鼠标点击时每个Button中的文本颜色

  ButtonBar中Button的一些属性需要单独来设置一个样式：buttonStyleName:"myButtonBar";

.myButtonBar中设置如下：
—-cornerRadius  边框圆角度  数值从0`28
—-fillColors  PopUpButton背景填充色   这个属性要设置4个色彩值：渐变起始色，渐变结束色，鼠标经过时渐变起始色，鼠标经过时渐变结束色
—-fillAlphas  填充色透明度   针对fillColors属性这个属性要设置4个透明度 渐变起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从0.00~1.00
—-highlightAlphas  高光透明度  针对fillColors属性 2个数值，中间以逗号分隔 前一个为高光亮度，从0.00~1.00，为1时最亮，为白色 后一个为高光透明度，从0.00~1.00，为1时最透明(可通过设置制作出水晶半透明效果)  

【CheckBox】（包含单选和多选）
—-borderColor  边框颜色
—-color   文本颜色
—-textRollOverColor  鼠标经过选择框时的文本颜色
—-textSelectedColor  鼠标点击选择框时的文本颜色
—-fillColors  选择框的背景填充色  这个属性要设置4个色彩值：渐变起始色，渐变结束色，鼠标经过时渐变起始色，鼠标经过时渐变结束色
—-fillAlphas  填充色透明度  针对fillColors属性 这个属性要设置4个透明度 渐变起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从0.00~1.00
—-highlightAlphas  高光透明度  针对fillColors属性2个数值，中间以逗号分隔 前一个为高光亮度，从0.00~1.00，为1时最亮，为白色 后一个为高光透明度，从0.00~1.00，为1时最透明(可通过设置制作出水晶半透明效果)

【ComboBox】
—-color  所有选项中文本颜色
—-borderColor  边框颜色
—-cornerRadius   边框圆角度  数值从0~20
—-fillColors  被选择项的渐变填充色  这个属性要设置4个色彩值：渐变起始色，渐变结束色，鼠标经过时渐变起始色，鼠标经过时渐变结束色
—-fillAlphas  填充色透明度  针对fillColors属性 这个属性要设置4个透明度 渐变起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从0.00~1.00
—-highlightAlphas  高光透明度  针