flex的一个简单的页面跳转功能

这个功能不止可以在软件和应用程序中使用，还可以在网页里面使用，确实蛮强大的，呵呵，有点意思的哦，欢迎大家前来观看哦！第一部分是代码，随后的是界面效果：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
?layout="horizontal">
?<!--<mx:Text text="I am using the Flex Properties view" x="10" y="10"/>-->
?
?<!--第一步创建这样的一个组件，然后给它的布局设置成水平布局；我们的设想是能做成一个上面的linkbutton点击的时候，
?下面的窗口会做出一些改变的效果；按照布局的话，首先可以分成两个部分：上面是一个applicationcontrolbar控件，下面
?分为左右两个部分，左边呢用一个panel控件，右边用一个vbox控件；-->
?
?<mx:ApplicationControlBar dock="true">
??<mx:LinkButton label="All" click="this.currentState=''"/>
??<mx:LinkButton label="Sales" click="this.currentState='fullSales'"/>
??<mx:LinkButton label="Categories" click="this.currentState='fullType'"/>
??<mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/>
??
?</mx:ApplicationControlBar>
?<mx:states>
??<mx:State name="fullSales">
???<mx:SetProperty target="{rightCharts}"
?????????????????? name="width" value="0"/>
??????????? <mx:SetProperty target="{rightCharts}"
??????????? ????name="height" value="0"/>
??</mx:State>
??<mx:State name="fullType">
???<mx:SetProperty target="{sales}" name="width" value="0"/>
???<mx:SetProperty target="{sales}" name="height" value="0"/>
???<mx:SetProperty target="{comp}" name="width" value="0"/>
???<mx:SetProperty target="{comp}" name="height" value="0"/>
??</mx:State>
??<mx:State name="fullComp">
???<mx:SetProperty target="{sales}" name="width" value="0"/>
???<mx:SetProperty target="{sales}" name="height" value="0"/>
???<mx:SetProperty target="{type}" name="width" value="0"/>
???<mx:SetProperty target="{type}" name="height" value="0"/>
??</mx:State>
??<!--这里为何要设置为0呢，一个很重要的观点就是：当把sales的value设置为0之后，才能完整的显示所需要的；-->
?</mx:states>
?<mx:Panel id="sales" title="SalesChart" width="100%" height="100%">
?? <mx:ControlBar>
?? ?<!--这里定义的就是左边的panel控件，给了id，给了title；这样看起来也会直观一些；同时还设置了panel的高度和宽度；
?? ?这里的100%指的是随着界面的大小变化而变化的，就不是死数据摆在那了。更好看一些。-->
?? </mx:ControlBar>
?</mx:Panel>
?
?<mx:VBox id="rightCharts" width="100%" height="100%">
??<mx:Panel id="type" title="Category Chart"
???????????? height="100%" width="100%">
???<mx:ControlBar>
????
???</mx:ControlBar>
??</mx:Panel>
??<mx:Panel id="comp" title="Comparison Chart" width="100%" height="100%">
???
??</mx:Panel>
?</mx:VBox>
?
</mx:Application>
-----------------------------------上面这一部分是整个功能的代码，下面就是界面，界面有四种状态，主要是当点击linkbutton的时候会出现什么样的情况而已：【里面的内容自己可以做一些自己喜欢的编辑，这个都无所谓的，只要最后的功能显示出来了就足够了。】