自己给自己挖的坑...哎...

自己给自己挖的坑，哭着也要填！那就开始吧！

下面内容是一个Flex小白，两天下来的总结

这里要说的，就是那些SWF .

SWF 大多数人的概念，应该就是动画了吧。就像在几年前，大学里面那时候adobe dreamweaver嵌在网页里面用的flash。

其实，不然

SWF还有一个分身，就是EXE程序。

还有一个比较牛逼的名字：富英特尔应用

今天的重点是: Flex

Adobe Air的由来和目的

这个Adobe Air发布的玩意儿，可以生成web版本和桌面EXE版本的SWF

我们来看看官方怎么宣传的：
通过adobe air 运行时，开发员可以将同一份代码打包到windows，macos，以及ios，android设备的原生应用程序和游戏中。覆盖范围：5亿台移动设备，10亿多桌面系统和移动应用商店。

前提是：依赖Adobe Flash player

但是，现在HTML5各种飞起，苹果已经准备抛弃flash player，这...就尴尬了...

SWF两个生成物的区别

SWF有两种

• Flash

使用时间轴和动画帧的概念，做成动画效果。

• Flex

使用MXML标签设计用户界面和组建，然后和连接数据源的方式来实现。

Flex 更多的是面向对象编程, Flash更像是视频编辑

对于Flex如果你有javascript开发经验的话，你会发现，其实更像这就网页开发。MXML开发界面，然后actionscript写逻辑处理，并且做数据绑定。
说到这个数据绑定，actionscript 的数据绑定跟前几天看的google家的angularJS的写法一样！?
而且，数据定义和swift一样？！（我还没有看swift，囧...）

别的不多说，从程序开始：先看Flex程序的组成

Flex程序至少要包含两个东西：

• 一个MXML文件
• 一个程序描述xml文件

就这么简单

MXML:界面实现代码的玩意儿

下面说说MXML和HTML的差别

上面说到MXML文件，用来写界面，其实，也就是和HTML差不多概念。

在HTML里面定义一个button可以是这样：

<button></button>

在MXML里面，是这样：

<mx:Button label=""/> 

就多了一个前缀而已，新版本的话，准备抛弃mx前缀，使用s前缀，具体详情，大家可以看新的SDK。

MXML的说法是这样的：

• 从xml演变过来的，同时也遵循W3C标准，所以，就当作一个XML来写吧。xml支持的事件标准也可以在MXML里面来实现。
• 支持超文本协议HTTP和简单对象访问协议OAP
• 在Flex里面，提供了和服务器端JAVA对象交互标签：POJOs和EJBs。
• CSS
• 支持图像标准：JPEG GIF PNG SVG。

那么，就这样OK了，这个写MXML，其实就当作写HTML界面吧。而且也可以用CSS的方式做layout和屏幕适配。

那，说到适配，既然adobe说，adobe air一套代码可以在多个平台上发布，那么适配总归是一个问题。
那，怎么适配呢？

它用nested layout container来实现！

做过ios开发的人，是不是有印象，NSLayoutConstraint！
爽不爽！

而且，和xcode一样，一样可以用代码或者使用storyboard来实现！不过呢，这是Flex Builder4.7以前的版本的事情了，4.6以前还有视图开发功能的，4.7以后的版本就木有啦，各位，请纯代码开发吧。
就是这么任性！
对于码农来说，这都不算事儿。

剩下的，就权当是写HTML了吧。

那个放程序逻辑的地方

Actionscript实现程序逻辑

Actionscript完全实现了E4x，就是ECMAScript For XML。
ECMAscript For XML 是什么玩意儿呢？其实我也不知道...我理解就是啊，Actionscript很牛逼！就这样。

HTML代码添加自己的脚本:

<script> </script>

MXML代码添加自己的脚本:

<mx:script> 

因为Actionscript基本上就是script

• 所以我理解成：Actionscript可以做javascript能做的事情：自定义class，package，扩展新的组建，使用内建组建。

读 Actionscript 代码的正确姿势

面向对象编程 Actionscript

Actionscript 完全基于OOP的概念做的，还有package的概念，所以，有点像是c#混javascript（本人没有好好学过java，所以不清楚java的东西。）所以，也和HTML开发里面的，HTML写界面，然后，新建js文件来实现各种逻辑。

举个栗子:

自定义一个button，并使用这个button

自定义一个button
package myCustomControls{
    
    public class greatButton extends Button(){

        ...my code.
    }
    ...
}

那，怎么用呢！？

就酱用：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cmp="myCustomControls.*">
    <cmp:greatButton label=“Great”/>
</mx:Application>

javascript 可以添加js文件，同样，Actionscript也可以，并且通过文件引用在MXML文件里面使用你的script逻辑。

新建一个ActionScript文件大家都会，问题是在mxml里面怎么使用呢？

• 需要和js一样，先引用，like this：

<fx:Script>
        <![CDATA[
            import Reader.mainController;
            var myController:Reader.mainController = new Reader.mainController();
            public function completeHandle():void{
                trace("window complete");
                myController.echo("Good morrning");
            }
        ]]>
    </fx:Script>

不过，需要注意的是，<fx:Script>标签有一个source属性，如果source属性指向的文件，是一个package，并且有一个类的话，就一定需要用import的方式来引用文件。

上面是新SDK的写法，老SDK的我就不写了...

再看一个button事件响应的例子

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" windowComplete="completeHandle()"
                       width="1024"
                       height="768">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
         
            import Reader.mainController;
            
            var myController:Reader.mainController = new Reader.mainController();
            var someFloatValue:int = 9988;
            public function completeHandle():void{
                
                trace("window complete");
                
                myController.echo("Good morrning");
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    
   
    <fx:Script>
        <![CDATA[
            import Functions.loginAccout;
            
            var loginFunction:Functions.loginAccout = new Functions.loginAccout();
            
            private function md5ButtonClick():void{
                
                loginFunction.activate("ruidian","643600zxy@");
            }
        ]]>
    </fx:Script>
    <s:Panel id="userInfo" width="300" height="300" title="UserName And Password">
        
        <s:TextInput id="userName" top="20" left="20" right="20">
            
        </s:TextInput>
        
        <s:TextInput id="password" top="60" left="20" right="20">
            
        </s:TextInput>
        
        <s:Button label="confirm" top="100" left="20" right="20" height="40" click="md5ButtonClick()">
            
        </s:Button>
        
    </s:Panel>
    
</s:WindowedApplication>

** 到这里，如果你有一般的HTML+javascript编程基础的话，应该也可以看懂Flex程序，足够看别人的代码，并且开始自己写代码了。**

但是，问题来了：

• 在哪里写代码?
• 怎么调试代码?
• 怎么打包代码？
• 怎么发布程序？

在哪里写代码

OPTIONS

• 普通的文本编辑器
• IDE

• Flex Builder
• eclipse
• 还有另外一个...忘了叫什么了

** 简单说一下我了解的情况 **

Flex Builder

比较好用的一个GUI类型的IDE，windows版本，直接去官网下就可以了，需要license，该怎么做，你们懂的。

Mac OS版本，在我的Mac OS10.11.6上安装不了，到7%的时候，就不动了...估计是因为之前安装了adobe master之后，有系统进程的关系。回头可以研究一下是不是把系统启动的时候一起启动的adobe进程关掉就可以装。

eclipse

可以配置adobe air的SDK，就当作普通的项目来新建，编译...后面给出网友发的文章，大家可以参考一下。
然后，就该说到文本编辑器了！
一说到文本编辑器，就不得不提sublime，BBEdit，VIM，AND SO ON....

*** 可惜，我都不太会用。将就一下说说sublime吧。***

• package
  在stackoverflow上，一个老帖子里面有人问过。当时的回答是用bison的package，不过，有网友说，不行，不好用。
  刚才我搜了一下，其实在packagecontrol.io里面就有actionScript3的package用的，不过我没有下载。因为我的windows电脑，木有网...网线不够长，也木有无线网卡...如果各位想折腾，还可以看一下我转载的这篇文章。
• 配置sublime
  让sublime更方便的编译项目：看过一篇文章，忘记在哪里的了，出处链接找不到了，只能对作者说一声抱歉了。

怎么调试？

Flex Builder

简单了，代码左边，添加断点，然后点虫子。就OK了。

说到这里，Flex Builder有坑！

On Windows

• 首先，需要安装flashplayer的debug安装包。
• 然后，更坑的，就是刚才我明明该了mxml里面的入参，但是我的类里面断点看到的参数是之前的值，于是，我clean了一下...

然后，整个项目都不好了,各种报错，我整个人都不好了...

On Mac OS

我是用SDK的ADL命令行执行debug模式，然后用trace在终端里面输出。这不是debug的王道...因为我还没有在Mac OS上玩起来，暂时不写。回头再填坑。

怎么打包？

ADT，活着直接用IDE里面的打包，都方便。

怎么发布？

各种途径，HTTP，官方推荐HTTPserver，好像也有例子的，但是我没有深入看那内容，暂时不打算深入。

写写代码

** 关于注释 **

先用Flex BUilder For windows 的4.7版本新建一个Flex Project。 命名为：adobeAir
选择一个adobe air application类型。

快速弹出代码提示比较怪异，因为 输入s之后，点击alt+/ 可以弹出S：所属的所有标签。 输入属性值，例如width，heigh之类的 用 ctrl+alt+/ 可以弹出。但是官方说用 alt+/

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark"                        xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Panel title="First application" width="200" height="300">
        <s:Label text="my first label" mouseDownEffect="WipeRight">
        </s:Label>
    </s:Panel>
</s:WindowedApplication>

框架

和java一样，各种个样的框架支持各种类型的开发需求

常用的框架有下面几个：

• Cairngorm
• SpringActionscript
• Parsley
• PureMVC
• Mate
• Swiz
  因为我不是Flex达人，也不打算深入的做Flex，纯粹是为了好玩而已，所以，谁有需要，自己去研究吧。

两天得到的文档也很多了，明天补上来。