FlexLearnFirst

Flex专题一

2010端午节，久违的阳光灿烂，小兔和我却窝在房里打扑克，由于
            //
             //_
          .---(')
        o( )_-/_  的脑筋比较长，所以在其思前想后决定出什么牌的时候，我收了点空来了解下当前流行的Flex技术，深深感觉到当今页面编程技术的XML统治地位，无论是微软的WPF、还是当前的Flex，而且在数据库和程序设计端，XML的使用皆是愈见重要。

参考书籍：Flex3权威指南
开发工具：Adobe Flex Builder3

 

Flex页面解释

flex.mxml，Flex中使用特有的mxml编写页面。

 

<?xml version="1.0" encoding="utf-8"?>

 

//整个Flex应用包含在Application节点下，layout属性表示其整个页面的布局方式，有absolute（绝对）、horizontal（水平）、vertical（垂直）
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

 //ApplicationControlBar节点，可用作整个页面上部的菜单导航条背景
 <mx:ApplicationControlBar dock="true">
  
  //LinkButton节点，定义一个连接，可定义其各种事件，click、change事件、等，这里定义为改变当前页面的视图this.currentState
  <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>
 
 //states节点，包含各类State视图节点
 <mx:states>
  
  //State节点，定义页面一个视图
  <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>
 </mx:states>
 
 //Panel节点，面板对象，为容器对象，可设置其标题Title属性，里面可添加其他对象
 <mx:Panel id="sales" title="Sales Chart" width="100%" height="100%">
  <mx:ControlBar >
   
  </mx:ControlBar>
 </mx:Panel>

 //VBox对象，垂直放置容器对象，其内部对象为垂直放置。
 <mx:VBox id="rightCharts" width="100%" height="100%">
  <mx:Panel id="type" width="100%" height="100%" title="Category Chart">
   <mx:ControlBar >
    
   </mx:ControlBar>
  </mx:Panel>
  <mx:Panel id="comp" width="100%" height="100%" title="Comprison Chart">
   <mx:ControlBar>
    
   </mx:ControlBar>
  </mx:Panel>
 </mx:VBox>
</mx:Application>

 

页面效果：