flex入门学习笔记

首先，下载应用软件 flash bulider ，可以是任何版本，我用的是4.5的

其次，破解这个软件，http://blog.csdn.net/bychentufeiyang/article/details/7457051

                               学习笔记（一）控件学习

Flex控件详解

Flex控件分为2种，一种是布局控件，另外一种是元素控件。请看下文详细介绍。

◆Canvas

Canvas容器绘置一个长方形的区域用来放置子组件（其他容器或者控件），与其他容器不同，Canvas子组件的位置必须指定绝对坐标或使用约束条件布局。

◆Box,HBox,andVBox

Box容器用来横向或者纵向的放置子组件，使用direction属性来决定是横向布局还是纵向布局。HBox,VBox就是指定了direction属性的Box。

◆ControlBar

Flex控件中ControlBar容器一般与Panel容器或者TitleWindow容器配合使用，比如在Panel容器的底部放置一个ControlBar作为Footer。

◆ApplicationControlBar

ApplicationControlBar容器一般起到导航的作用，作用于整个应用程序的运行期间，比如我们使用的Word,Excel顶部用来放置工具栏和菜单栏的区域。
ApplicationControlBar容器有2种模式，分别是Docked模式和Normal模式。Docked模式将ApplicationControlBar容器一直显示的停靠在应用程序的顶部，并且自动将宽度调整为应用程序的宽度。Normal模式可以将ApplicationControlBar容器以任意的大小放置在应用程序的任何位置。

◆DividedBox,HDividedBox,andVDividedBox

DividedBox容器类似与Box容器，用来横向或者纵向的放置子组件，不同的是DividedBox用显示的间隔物将自组件分割开，你可以拖动间隔物来扩大或缩小每个子组件所占的空间，HDividedBox和VDividedBox相与DivideBox的区别与HBox和VBox相对与Box的区别一样。

◆Form,FormHeading,andFormItem

Form是Web应用最为常见的容器了，常见的有用户注册，帐单信息等。FormHeading用来区分每一组Form信息，如用户注册的过程中，可以指定2个FormHeading分别是必添项目和选添项目。FormItem是Form中具体的某一个项目，包含一个Label和若干个控件。

◆Grid

Grid容器用来以表格的形式放置组件，好比Html中没有Border的Table。Grid容器的每一个单元格(cell)都可以放置0个或1个子组件，如果想要在一个单元格中放置多个控件，那么就在这个单元格中再多加一个容器。Grid中使用GridRow来创建行，用GridItem来创建单元格。类似与Html的table，你也可以使用rowSpan,colSpan来合并单元格。

◆Panel

Panel容器是Flex控件中一个比较常用的容器，包含标题(title)区域，放置子组件的容器(content)区域，以及边框(border)。content区域有3种形式，分别是横向布局(horizontal)，纵向布局(vertical)，绝对坐标布局(absolute)。Panel会很普遍的与Form结合起来使用，当然还有前面提到的ControlBar组件也是Panel容器中很常用的一个子容器。

◆Tile

Tile容器将子组件按照表格的形式放置，与Grid容器的区别是，Tile容器每个单元格的大小都是一样的。Tile容器子组件具体的放置位置由Flex来安排，而Tile容器的宗旨是将所有的子组件都能以横竖排列最佳的位置摆放。比如Tile容器有16个子组件，就将16个子组件以4行4列的位置摆放，如果是15个子组件，也是4行4列摆放，只不过最后一行的最后一列是空着的。

◆TitleWindow

TitleWindow容器继承与Panel容器，所以TitleWindow拥有Panel的所有特性，而不同的是TitleWindow容器是用来做弹出(popup)面板的。

 

控件学习，不错的网站，里面有很多的实例，正好适合新手学习。共享下http://examples.adobe.com/flex3/componentexplorer/explorer.html

其中遇到的问题，Altert，就好像winfrom里面的messagebox，但是在控件中找不到这个控件，需要我们定义下。如下

 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   protected function button1_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    text.text='123';
     
   }
   
   protected function checkbox1_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    if(testch.selected)
    { 
     text.text='1123';
     Alert.show("123");
     
    }
   }
   
  ]]>
 </fx:Script>

其次就是要把各个控件产生事件，比如butten，在设计页面中选中右键，出来菜单，选择编辑click处理函数

全部代码

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   protected function button1_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    text.text='123';
     
   }
   
   protected function checkbox1_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    if(testch.selected)
    { 
     text.text='1123';
     Alert.show("123");
     
    }
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <s:Button x="137" y="187" label="按钮" click="button1_clickHandler(event)"/>
 <s:RichText id="text" x="304" y="213" text="RichText"/>
 <s:Panel x="457" y="16" width="366" height="443">
  <s:CheckBox id="testch" x="243" y="262" label="CheckBox" click="checkbox1_clickHandler(event)"/>
 </s:Panel>
</s:Application>