ActionScript 3.0 详解(二)

ActionScript 3.0 详解(二) 

 27.ActionScript中的组件对象: 类似于Java中的Swing组件对象，ActionScript提供了很多组件!!
 (可以自行查看官网提供的组件列表学习，也可擦看已经拥有的flex+3+component+explorer.pdf文档)!!
  
  (一) 容器类组件对象:这里列举了几种常见的容器组件！！

  <1>Application和ApplicationControlBar组件对象: Application是一个可以独立运行的组件，也是默认创建MXML时自动创建的根容器组件对象，
  即组件想要运行可以放入到Application组件(不是只能放入Application组件中，只要是可以独立运行的组件都可以)，
  有些组件不能独立运行，它们可以附加在可以独立运行的组件之上，间接的实现自身组件的运行。

  *ApplicationControlBar是一个导航工具条，它有一个dock属性，为true表示该工具条将会和父组件紧密靠近成贴合状态，默认为false.
  在该组件中可以添加一些其他的组件(如按钮组件等),该容器组建区别于其他的组件的地方在于它有一个dock属性！！
  一般和Application组件配合使用！！

  <2>Canvas(画布)和Box(VBox(垂直)和HBox(水平))及DivideBox(也分为垂直和水平):
  Canvas组件是一个非独立运行容器组件(即可以附加其他组件的组件)，同时它的布局方式只有种，
  就是absolute绝对布局方式，没有vertical垂直和horizontal水平方式！！
  Box也是一个非独立运行的容器组件，放入VBox中的组件会垂直排列；放入HBox中的组件会水平排列！！
  DivideBox是特殊的Box，就是带有分割的Box组件，VDivideBox是垂直分割的Box组件；HDivideBox是水平分割的Box组件！！

  <3>Panel组件和TitleWindow组件: Panel容器组件区别与其他容器组件的地方是它有一个title属性，可以指定一个标题内容的显示文字！！
  TitleWindow组件也是一个容器组件，属性showCloseButton="true"可使该组件右上角有一个关闭的"X"按钮！！默认为false！！
  这个"X"按钮有个对应的事件方法即close事件。当点击的时候就会触发这个close事件指定的方法！！

  **注意: PopUpManager类是管理界面中所有的弹出窗口的工具类，可以让一个组件呈弹出状态的显示。
  如PopUpManager.addPopUp(被弹出组件, 从哪弹出(即父容器组件),是否为模式(Java中也有))方法可以弹出一个组件对象来显示，并且弹出组件可以拖动。
  PopUpManager.removePopUp(传入要移除的组件对象)可以移除一个已经呈弹出状态的组件！！
  Point类是一个定位坐标的辅助工具类！！

  <4>Form : Form对象组件就是一个表单(和HTML中的表单的作用没什么区别)，
  ActionScript中的Form对象组建中可以有FormHeading对象用于显示信息(和Label差不多)，
  可以有FormItem对象(也是类似Label)它内部要跟着TextInput对象一起使用，用来表示一个表单元素。
  例如:
   <mx:FormItem width="211" label="Age" required="false">
    <mx:TextInput id="age" width="100%"/>
   </mx:FormItem>
   **表示一个名字为Age的表单元素！！提交的元素值将会是<mx:TextInput>中输入的数据！！

  **针对Form对象提供了一套专用的验证<mx:Form>的标签：直接配置到有<mx:Form>标签的MXML文件中就可以起到验证指定表单元素的目的！！
   
   1)<mx:StringValidator source="{age}" property="text" minLength="4" maxLength="12" tooLongError="数据太长" tooShortError="数据太短"/>
   验证id值为age的TextInput对象的text属性，也就是<mx:TextInput>标签的值，如果小于4个字符那么显示"数据太小",大于12个字符显示"数据太大"！！
  
   2)<mx:PhoneNumberValidator source="{要验证的对象名称即id值}" property="对象的属性"/>表达的意思同上，只不过这个验证的是电话号码！！

   3)<mx:DateValidator source="" property=""/>验证日期格式！

   4)<mx:EmailValidator source="" property=""/>验证Email格式。

   5)<mx:NumberValidator source="" property="" domain="int" integerError="请输入int类型的数据"
    maxValue="100" minValue="18" invalid="Alert.show("错误操作");"/> 表示验证某对象的某属性的int类型(可以更改)的数据，
    如果输入的不是int类型数据，那么提示"请输入int类型的数据"，如果输入数据不在18-100之间，即验证出错时显示"错误操作"！！

   6)<mx:SocialSecurityValidator source="" property=""/>表示验证对应属性的身份证等的社会安全验证。

   7)<mx:ZipCodeValidator source="" property=""/>

   8)等等

  <5>Tile对象组件也是一个小容器，放入它中的组件将会以"平铺"的效果显示，
  可用direction属性来选择使用vertical(垂直)或horizontal(水平)两种之中的一种平铺方式！！

  <6>Grid对象组件是一个容器，在它中的组件能以表格的方式来排列显示！！该组件中可以用GridRow对象来表示一行，GridItem表示一个单元格！！
  类似于Java中Swing中的GridLayout布局对象和HTML中的<table>标签！！
  
   例子: 一个Grid容器，有一行，一行中有一个单元格，其中放一个按钮！！

    <mx:GridRow id="grid" width="400" height="25">
     <mx:GridItem>
      <mx:Button label="Button" height="25"/>
     </mx:GridItem>
    </mx:GridRow>

  <7>Accordion、ViewStack、TabNavigator组件: 这三个组件一般都用与导航中，就像QQ分组的栏目，点击的时候就会收缩或展开！！
  
   1)使用图形界面添加Accordion组件的时候，拖到界面后会有一个"+"号和"-"号，用来添加和移除组件的，添加一个组件要指定标题和组件容器对象！！
   然后当我们点击标题的时候就会展开进而显示对应的容器组件中的内容！！
    
    例如:
     <mx:Accordion id="accordion" width="400" height="300">
      <!-- 第一个标题导航 -->
      <mx:VBox label="first" id="number" width="100%" height="100%">
      </mx:VBox>
      <!-- 第二个标题导航 -->
      <mx:HBox label="second" width="100%" height="100%">
      </mx:HBox>
     </mx:Accordion>
     *说明: 当点击first标题的时候将会显示<mx:VBox>容器中的内容；当点击"second"标题的时候则会显示<mx:HBox>容器中的内容！！

     *注意: 不光点击事件可以触发一个标题展开，也可以在程序中通过事件触发，如下！
     <mx:Button click="accordion.selectedIndex = 1" x="10" y="318" label="选中标题二"/>
     其中accordion.selectedIndex = 1就是让Accordion组件选中第二个标题然后展开(索引值从0开始)！！
     也可以换成: <mx:Button click="accordion.selectedChild = number" x="10" y="318" label="选中标题二"/>来展开id为nunmber的标题！！

   2)ViewStack组件: 效果相当于一个选项卡的切换，很类似于上边的Accordion组件，使用方式也非常的相似！！

    例如:
     <mx:ViewStack id="viewStack" width="100%" height="100%">
      <!-- 第一个选项卡的容器组件对象 -->
      <mx:Canvas id="hotMovie" label="hotMovie" width="100%" height="100%" backgroundColor="#F60F0F" backgroundAlpha="0.18">
      </mx:Canvas>
      <!-- 第一个选项卡的容器组件对象 -->
      <mx:Canvas id="newMovie" label="newMovie" width="100%" height="100%" backgroundColor="#0D7C07" backgroundAlpha="0.48">      
      </mx:Canvas>
     </mx:ViewStack>
     <!-- 使用事件触发选项卡的切换，组建功能的设计思想同Accordion组件相同！！ -->
     <mx:Button label="热门电影" click="viewStack.selectedChild = hotMovie"/>

   3)TabNavigator组件: 同ViewStack接近，不过个人认为效果更舒服一些！！

    例如:
     <mx:TabNavigator width="100%" height="100%" fontSize="12" fontWeight="bold">
      <mx:Canvas label="军事" width="100%" height="100%" fontSize="12" fontWeight="bold" backgroundColor="#D119C6" backgroundAlpha="0.47">
      </mx:Canvas>
      <mx:Canvas label="新闻" width="100%" height="100%" fontSize="12" fontWeight="bold" backgroundColor="#10A14A" backgroundAlpha="0.54">
      </mx:Canvas>
     </mx:TabNavigator>

    **注意: 这里不同ViewStack组件相同，它不需要通过额外的按钮通过事件来触发选项卡的切换，这里只要点击"标题(<mx:Canvas>的label属性值)"就会切换到对应的组件容器(这里值<mx:Canvas>容器)！！
    当然也可以使用额外的按钮像上边的ViewStack组件的切换那样，通过调用selectedIndex或selectedChild方法来切换选项卡！！

  (二) 常规类组件: 列举几种！

  <1>Alert、ColorPicker(颜色拾取器)、ComboBox(下拉列表框)对象组件:Alert对象主要就是显示一个信息，可以自行查看文档API学习！！
  ColorPicker是一个拾取颜色的组件，响应点击事件，当点击后，会弹出一个框，可以选择颜色，颜色对应的RGB值将会赋值给<mx:ColorPicker>的selectedColor属性！

   例如:当动态改变ColorPicker组件的颜色时，Canvas组件的背景色也会跟着做相应的改变！！
    <mx:ColorPicker id="colorPicker" selectedColor="0xFFFFFF"  x="302.5" y="77" />
    <mx:Canvas x="213" y="130" width="200" height="200" backgroundColor="{colorPicker.selectedColor}"/>

  ComboBox是一个下拉列表框组件，一般使用它的是有会有一个数据源来为它提供数据！

   例如:
    <mx:Script>
     <![CDATA[
  
      //创建一个集合对象，用于绑定作为数据源，且其中传入的为原对象，就是JSON格式的对象
      [Bindable]
      var provider:ArrayCollection = new ArrayCollection([
       {label:"China", data:1},
       {label:"America", data:2},
       {label:"Japan", data:3}
      ]);
      
      //事件响应方法
      internal function selectItem(event:Event):void{
       Alert.show("所选内容为: " + ComboBox(event.target).selectedItem.label + "  对应data为: " + ComboBox(event.target).selectedItem.data);
      }
     ]]>
    </mx:Script>
    <!-- 当选中某一条后，会导致下拉列表框收缩回去，此时会触发close事件，进而调用selectItem方法 -->
    <mx:ComboBox dataProvider="{provider}" close="selectItem(event)" x="280.5" y="338"/>

  <2>List、TileList和HorizontalList三个组件: 
  HorizontalList组件是用来水平放置数据的集合容器，具体使用见文档"Flex3 Component Explorer"
  TileList组件是平铺效果，和HorizontalList的使用方法一样，也可参看文档！！
  List组件的使用见文档，非常简单易懂！！

  <3>Tree、TabBar和DataGrid组件: 见文档！其中TabBar的效果很类似于TabNavigator的效果！！

  <4>ProcessBar是进度条、Spacer站位组件，就是占据一个位置，显示成空白！
  NumericStepper是数字微调组件、Vrule显示一条垂直线，当鼠标移动到线上再离开它会由短变长！通过属性rollOverEffect="WipeUp"特效来设定！
  VSlider滑动条、VScrollBar滚动条！

  **注意: 可以在属性icon="@Embed(source='图片地址')"来引用一个图片作为图标！！

  <5>Button、ButtonBar和LinkBar、ChexBox、PopUpButton(点击后会下拉一个菜单)、
  RadioButton、RadioButtonGroup、ToggleButtonBar(点击按钮时会有一个下陷的效果)等组件！

  <6>DateChooser和DateField两个日期选择组件，非常使用！！

  <7>MenuBar(菜单条，可以作为页面导航按钮)----其中可以包含Menu、MenuItem等组件、PopUpMenuButton组件(和PopUpMenu差不多)

  **说明: event.item.@data中的"@"表示取得XML文档中item中的data属性值！！

  <8>Label、Text、TextInput和RichTextEditor组件(富文本组件，带有一些文本编辑按钮等)！！

  (三)数据验证类的组件:看文档！

  (四)格式化组件: 看文档！

  (五)行为与特效类组件: 就是可以事先定义特效组件，然后在想要使用特效的组件上用特定的事件触发器来引用特效组件！！

  (六)可视化数据组件(就是图标组件): 自己看文档！

 

注意:本文中提到的《Flex3 Component Explorer》文档可以到本人的下载空间下载得到！