Flex 入门

开始之前先谈我对Flex的理解

学习Flex也有一段时间了，当最近对Ext js有一定的了解，对其他javascript库也有了一定的认识，对Flex的理解也有了进一步的认识，就表现形式来说Flex和Ext js有很多相同的地方，首先他们都是一种RIA技术（富互联网应用），也都建立了类似于java swing的类库和相应component(组件)。而且界面表现能力一流，所达到的效果也差不多，但是对于这两种技术，我更亲睐于Flex,不仅仅是Flex提供了一套界面化编程（这个是Ext js不能相比的），还有Flex对底层的可操作性：Flex能够调用底层的东西，比如可以调用摄像头实现视频，而且视频本身就嵌入在Flex应用中,由Flex player直接播放。

Flex简介

1.Flex是一种客户端技术，同时也属于Flash平台。Flex代码最终被编译成SWF文件运行在Flash Player中，编译是通过Flex SDK实现的,Flex SDK包括Flex编译器，文档工具和用户组件库。

2.Flex是基于MXML的，大家都知道之前学习的web体系都是基于HTML，在HTML体系中有Javascript，jsp等等，而Flex是基于MXML，使用的是ActionScript脚本语言（可以说mxml更加规范化、标准化）。

Flex的开发环境

一般每掌握一种技术首先做的第一件事就是在自己的电脑上搭建好开发环境，对于搭建Flex的开发环境真是让我纠结了好久。

1.下载Flex SDK

一般的话是不用下载的，因为安装开发工具Flash Builder时会自带SDK，但是我还是建议大家去官网下载最新的SDK，我最近去下的时候是4.6，而自带的sdk好像是4.1的，所以建议还是用最新SDK。

2.安装开发工具Flex Builder

(到了第四版之后改名叫Flash Builder，我安装的是Flash Builder 4,建议大家安装最新的版本的）

(1)独立安装

直接去Adobe官网下载Flash Builder 4,然后安装，破解的话自己想办法。

(2)插件安装

以Eclipse插件安装，对于我们来说什么东西只有在eclipse中才用的顺手，Flex可以作为eclipse插件的形式安装，首先要下载一个插件安装包，然后以eclipse插件安装（由于篇幅有限，这里就不详细其中具体的问题，下次博客详细分享一下我的经验）。

Flex的知识框架

（1）MXML语法基础（这个类似于HTML）

（2）Actionscript语法基础

（3）文本设计

（4）按钮设计

（5）图表设计

（6）布局和导航

（7）数据和通信

我的学习经验

1.还是要多看官方文档和官方示例。

2.要对比学习，Actionscript和Javascript，MXML和HTML,他们基本上都差不多

3.要熟悉Flex的界面化编程，善于运用界面编程。

4.多写多看多调试。

看一段MXML代码

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\ListToListShowFeedback.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initApp();">

    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.events.DragEvent;
            import mx.collections.ArrayCollection;
    
            private function initApp():void {
                firstList.dataProvider = new ArrayCollection([
                    {label:"第一列", data:"1"},
                    {label:"第二列", data:"2"},
                    {label:"第三列", data:"3"},
                    {label:"第四列", data:"4"}
                ]);
                secondList.dataProvider = new ArrayCollection([]);
            }

            private var tempBorderColor:uint;
            private var borderColorSet:Boolean = false;

            private function dragOverHandler(event:DragEvent):void {
                event.preventDefault();
                
                // 调用showDropFeedback(event)来显示放置标记。
                event.currentTarget.showDropFeedback(event);
            
                if (event.dragSource.hasFormat("items"))
                {
                     if (borderColorSet == false) {                 
                        tempBorderColor = 
                            event.currentTarget.getStyle('borderColor');
                        borderColorSet = true;
                    }
                
                    // 设定拖动回复的标记，并改变放置目标外框为红色。
                    event.currentTarget.setStyle('borderColor', 'red');
                    if (event.ctrlKey) {                    
                        DragManager.showFeedback(DragManager.COPY);
                        return;
                    }
                    else if (event.shiftKey) {
                        DragManager.showFeedback(DragManager.LINK);
                        return;
                    }
                    else {
                        DragManager.showFeedback(DragManager.MOVE);
                        return;
                    }
                }

                // 标记不能放置。
                DragManager.showFeedback(DragManager.NONE);                
            }
            
            private function dragDropHandler(event:DragEvent):void {
                dragExitHandler(event);
            }            

            // 恢复外框的颜色。
            private function dragExitHandler(event:DragEvent):void {
              event.currentTarget.setStyle('borderColor', tempBorderColor);
              borderColorSet = true;
            }
        ]]>
    </mx:Script>
  <mx:Panel 
        title="改变放置目标属性示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">   
	    <mx:HBox id="myHB">
	        <mx:List  id="firstList" 
	            dragEnabled="true"/>
	
	        <mx:List  id="secondList" 
	            borderThickness="2"
	            dropEnabled="true"
	            dragMoveEnabled="true"
	            dragOver="dragOverHandler(event);"
	            dragDrop="dragExitHandler(event);"
	            dragExit="dragExitHandler(event);"/>
	    </mx:HBox>
  </mx:Panel>
</mx:Application>

 

看一个Flex实现的实例