kaka111222333-kaka111222333.github.io/_posts/2014-04-20-flex.md

---
layout: post
title: Flex
tags: Flex ActionScript script
categories: front-end
---

* TOC
{:toc}


# 产品

1. Adobe® Flex™ SDK

2. Adobe® Flex™ Builder™

3. Adobe® Flex™ Data Services

4. Adobe® Flex™ Charting


# Flex基础

## 应用程序模型

用容器（如Box）控件（如Button）来描述用户的操作界面

## MVC模型

1. 模型/Model 组件封装了数据和与数据相关的行为。

2. 视图/View 组件定义了应用程序的用户界面。

3. 控制器/Controller 组件则负责处理程序中的数据连接。

## Flex 编程模型

Flex 包含了**Flex 类库**、**MXML** 和**ActionScript** 编程语言，以及**Flex 编译器**和**调试器**。

>MXML 和 ActionScript 编程语言都提供了访问Flex 类库的能力。

通常的做法是：使用MXML 去定义用户界面的元素，使用ActionScript 去定义客户端的逻辑并进行控制。

Flex 类库包括了**Flex 组件**、**管理器**和**行为**。


## Flex 元素

* Flex framework

* MXML

* ActionScript 3.0

* CSS

* 图形资源

* 数据 


~~~xml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Panel>
        <mx:TextArea text="Say hello to Flex!" />
        <mx:Button label="Close" />
    </mx:Panel>
</mx:Application>

~~~

## 发布方式

1. 客户端模式，即应用程序只运行在客户端上而不需要服务器资源。

2. 使用简单的RPC 访问服务器数据，即使用HTTPService（HTTP GET 或POST 请求）和WebService（通过使用SOAP）。

3. Flex Data Services 模式，可以提供更为高级的特性，如数据同步、安全增强等等。



# 界面布局

样式

~~~xml
<mx:Style>
     {
        fontSize: 36px;
        fontWeight: bold;
     }
</mx:Style>

~~~
外部样式

~~~xml
<mx:Style source="styles.css"/>

~~~

## 控制应用程序的外观

1. 大小/Sizes，即组件或应用程序的高度和宽度。

2. 样式/Styles，即一组特性，如字体、排列方式、颜
色等。它们都是通过层叠样式（ CSS）来进行设置的。

3. 皮肤/Skins，即可以进行改变的组件视觉元素。

4. 行为/Behaviors，即Flex 组件在视觉或听觉效果方面的变化。

5. 视图状态/View state 可以让你通过修改它的基础内容，来改变组件或程序的内容和外观。

6. 变换/Transitions 可以让你定义屏幕上发生改变的视图状态。


## 受约束的布局

受约束的布局可以确保用户界面中的组件在程序窗

口大小发生变化时，也能自动地作出调节。备注：可以通过使用嵌套的布局容器/nested layout container 来实现相同的目的

创建受约束的布局，你必须将容器的布局属性设置为绝对方式（ `layout="absolute"`）备注：帆布容器/canvas container 并不需要进行layout=”absolute”的属性设置，因为它默认是绝对布局方式。

在Flex 中，所有的约束都是被设置为与**容器**的相对距离，它们不可能被设置为相对于其它控件

**控件**

ComboBox，List，HorizontalList。



# 事件与行为

外部ActionScript

~~~xml
<mx:Script source="myFunctions.as" />

~~~

被事件触发的行为

mxml中的组件被赋予id后，在as中将可以直接作为对象进就行操作，如例子中的`vBox`

~~~xml
var locales:ArrayCollection = new ArrayCollection([{label:"en_us", data:"en_us"},{label:"zh_cn", data:"zh_cn"}]);

var child:ComboBox = new ComboBox();
child.dataProvider=locales;
vBox.addChild(child);

~~~

也可以在as中为事件绑定行为

~~~xml
//change事件绑定
localeComboBox.addEventListener(ListEvent.CHANGE,localeComboxChangeHandler);

~~~

## 多态页面

用ViewStack 组件、创建单独的MXML 文件、或者使用视图状态

## 创建行为

~~~xml
<mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>
<mx:Button x="40" y="60" label="View" id="myButton" mo
useUpEffect="{buttonGlow}" />

~~~




# 连接数据

数据源，url获取xml类型数据

flex 不直接连接数据库，而是用数据服务组件获取xml数据

~~~xml
<mx:HTTPService id="simpleData" url="..."/>

~~~

数据绑定，并非简单的引用，dataProvider与simpleData.lastResult.products.items是同步变化的

~~~xml
<mx:DataGrid dataProvider="{simpleData.lastResult.products.items}" >
            <mx:columns>
                <mx:DataGridColumn headerText="resources" dataField="resources" />
            </mx:columns>
        </mx:DataGrid>

~~~

事件绑定

~~~xml
<mx:Button label="load" click="simpleData.send();"/>

~~~

## 连接数据服务器

1. WebService 提供对使用SOAP 的web 服务器的访问。

2. HTTPService 提供对返回数据的HTTP URLs 的访问。

3. RemoteObject 通过使用AML 协议提供对Java 对象（Java Beans、EJBs、POJOs）的访问。该选项目前仅适用于Flex Data Services 或Macromedia ColdFusion MX 7.0.2.


## 安全性

1. swf与数据源必须同域

2. 可以使用代理访问远程数据源，但是swf必须与代理服务器同域

3. 安装`crossdomain.xml`（跨域策略/cross-domain policy）文件在数据源的宿主Web 服务器上。
crossdomain.xml 文件允许位于其它域中的SWF 文件对数据源的访问。 




# 图表组件

* 区域形图表/Area charts

* 气泡形图表/Bubble charts

* 烛形图表/Candlestick charts

* 柱形图表/Column charts

* 高低开合形图表/HighLowOpenClose charts

* 线形图表/Line charts

* 饼形图表/Pie charts

* 标绘形图表/Plot charts

* 扩展CartesianChart 控件来创建定制的图表

>使用`dataProvider` 属性定义图表的数据

# MXML

MXM 相关的技术标准有

1. XML 标准。XML 文档使用标签去决定结构化信息的内容，以及它们之间的关系。

2. 事件模型标准。Flex 事件模型是文档对象模型/Document Object Model （DOM）第三级事件的一个子集，该模型是由World Wide Web Consortium（W3C）起草制定。

3. Web 服务标准Flex 提供与服务器交互的MXML 标签，遵循了Web 服务描述语言/Web Services
Description Language（WSDL）的规则。具体包括了简单对象访问协议/Simple Object Access Pr
otocol（SOAP）和超文本传送协议/Hypertext Transfer Protocol（HTTP）。

4. Java 标准

Flex 提供了与服务器端Java 对象交互的MXML 标签，包括plain old Java objects（POJOs），Java

Beans 和企业级/Enterprise JavaBeans（EJBs）。

5. HTTP 标准

Flex 提供了相应的MXML 标签去支持标准的HTTP GET 和POST 请求，以及对HTTP 返回数据的处理。

6. 图形标准

Flex 还提供了相应的MXML 标签去使用JPEG，GIF 和PNG 图象。Flex 还能够将SWF 文件和Scala
ble Vector Graphics（SVG）文件导入到应用程序中。

7. 层叠样式表标准MXML 样式的定义和使用遵循了W3C Cascading Style Sheets （CSS）标准。



# ActionScript

ActionScript 3.0 的特性完全实现了ECMAScript for XML (E4X)。
在flex中使用ActionScript

1. 在`<mx:Script>`标签中插入ActionScript 代码块。

2. 调用存储在**system_classes** 目录结构中的全局ActionScript 功能函数。

3. 引用**user_classes **中的外部类和包来处理更为复杂的任务。

4. 使用标准的Flex 组件。

5. 使用ActionScript 类扩展已有的组件。

6. 使用ActionScript 创建新的组件。

7. 在Flash 创建环境中创建新的组件（ SWC 文件）。


# XML

## 创建xml对象

* 字面量方式，AS可以自动识别，如果加上引号就不是XML类型而是String类型了

~~~xml
var textXmlObj:XML = <test><element>text</element></test>;  

~~~

* XML字面量中可以加入动态内容

~~~xml
var text_node:String = "text";  
var textXmlObj:XML = <test><element>{text_node}</element></test>;  

~~~

* 通过XML类创建实例

~~~xml
var myText:String = "text";  
var str:String = "<test><element>"+ myText + "</element></test>";  
var textXmlObj:XML = new XML(str);  

~~~

* 从外部加载XML对象

~~~xml
 <mx:HTTPService id="simpleData" url="simpleData.xml" useProxy="false" result="test(event);"/> 

~~~


## 处理XML对象

~~~xml
<items>
	<item index="0">
		<name>Mobile Phone</name>
		<price>$199</price>
	</item>
	<item index="1">
		<name>Car Charger</name>
		<price>$34</price>
	</item>
</items>

~~~

使用**`E4X`**简化对XML的操作

~~~xml
 <mx:HTTPService id="simpleData" url="simpleData.xml" useProxy="false" result="test(event);" resultFormat="e4x"/>

~~~

### 查询

使用`.`操作符查询节点

~~~xml
simpleData.lastResult.item

~~~
使用`[]`访问指定索引的节点，**将无法检测到数据变化**，根节点被忽略

~~~xml
simpleData.lastResult.item[0]

~~~
使用`..`访问所有指定名称的节点，忽略上下级关系

~~~xml
simpleData.lastResult..name

~~~
使用`@`访问节点属性

~~~xml
simpleData.lastResult.item[0].@index

~~~
过滤节点(`<`与`>`无法在mxml中使用，需要转义)

~~~xml
simpleData.lastResult.item.(price==34)

~~~
过滤属性

~~~xml
simpleData.lastResult.item.(@index==0)

~~~
修改获取的数据（不改变xml源对象）

~~~xml
simpleData.lastResult.item.(price=998)}

~~~
HttpService对象在加载外部XML后会自动把它转换成ArrayCollection对象

如果需要属性结构如（Tree组件），需要在HTTPService对象中加上resultFormat="e4x"以XML的格式读取进来而不要转换为ArrayCollection

### 修改

>如果绑定的xml数据发生的变化，如何将变化传递到引用？目前发现似乎是自动的，有待研究。


~~~xml
var myxml:XML = <books>
     <book name="flex tutorial">
         <price>30</price>
         <author>adobe</author>
     </book>
 </books>

~~~
添加节点，insert指定子节点位置插入，append添加到子节点末尾，prepend插入到子节点开头

~~~xml
myxml.insertChildAfter(myxml.book[0],<newbook name="After"/>);
myxml.insertChildBefore(myxml.book[0],<newbook name="Before"/>);
myxml.appendChild(<newbook name="Append"/>);
myxml.prependChild(<newbook name="Prepend"/>);   

~~~
添加属性

~~~xml
myxml.book[0].@date="2008";

~~~
修改xml对象，此处增加`<author>`标签content为奥多比

~~~xml
myxml.book[0].author="奥多比";

~~~
删除节点，属性，content

~~~xml
delete myxml.book[0].@name;
delete myxml.book[0].author;
delete myxml.book[0].price.text()[0];

~~~



# 备忘

IDEA 编译出错 **java.net.SocketTimeoutException: Accept timed out**
>[Stack Overflow](http://stackoverflow.com/questions/11016571/intellij-idea-11-flex-compilation-issue)
>
>1. Go to **Settings** > **Compiler** > **Flex Compiler**
>
>2. Choose **Mxmlc/compx** instead of the default **Built-in compiler shell**
>
>3. Compile your application

# 整合SpringMVC

Flex要想与Spring进行配合使用，需要一个附加的组件BlazeDS。BlazeDS可以将Flex前端的通信内容（amf 格式 Action Message format，一种flex定义的通信规则）转换为java的相关类和对象。

请求处理的简单流程是，flex客户端向服务器发送Request请求，服务器根据Web.xml中的映射，找到Spring配置文档中与flex相关的配置，这个配置就是`MessageBroker`，MessageBroker是Spring容器根据flex的`services-config.xml`文件生成的，在services-config.xml中指定了消息通道，Spring将请求交给这个通道（一般是默认通道），通道根据`remoting-config.xml`中配置的remoting-service和Adapter将flex的amf转换为java的实例信息。如果需要安全或者消息订阅（jms）还需要提供`messaging-config.xml`和`proxy-config.xml`配置文件。

结合使用Spring和BlazeDS必须对MessageBroker进行配置。从flex客户端发来的Http 消息（messages）通过Spring的DispatcherServlet（在web.xml中配置）传递给Spring管理的MessageBroker（在Spring的配置文档中指明）。如果使用Spring管理的MessageBroker就不必配置BlazeDS的`MessageBrokerServlet`（在web.xml文档中指明）了。

## 依赖

~~~xml
  <properties>
    <spring.version>3.0.1.RELEASE</spring.version>
    <flex.version>4.6</flex.version>
  </properties>

  <dependencies>
      <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-webmvc</artifactId>
          <version>${spring.version}</version>
      </dependency>
      <dependency>
          <groupId>org.springframework.flex</groupId>
          <artifactId>org.springframework.flex</artifactId>
          <version>1.0.3.RELEASE</version>
      </dependency>

      <!-- flex library -->

      <dependency>
          <groupId>com.adobe.flex</groupId>
          <artifactId>messaging-common</artifactId>
          <version>${flex.version}</version>
      </dependency>
      <dependency>
          <groupId>com.adobe.flex</groupId>
          <artifactId>messaging-core</artifactId>
          <version>${flex.version}</version>
      </dependency>
      <dependency>
          <groupId>com.adobe.flex</groupId>
          <artifactId>messaging-remoting</artifactId>
          <version>${flex.version}</version>
      </dependency>
      <dependency>
          <groupId>backport-util-concurrent</groupId>
          <artifactId>backport-util-concurrent</artifactId>
          <version>3.1</version>
      </dependency>
      <dependency>
          <groupId>cglib</groupId>
          <artifactId>cglib</artifactId>
          <version>2.2.2</version>
      </dependency>
  </dependencies

~~~

## 配置web.xml

~~~xml
<servlet>
    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
            classpath:applicationContext.xml
        </param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

<!-- MessageBroker Servlet flex mapping-->
<servlet-mapping>
    <servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
    <url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>

~~~

Flex通过`AMF`通道的形式进行通信的，所谓的AMF通道就是指一种编码形式。MessageBroker可以将Flex格式的请求转换成具体的java的调用，并将反馈回的内容（response）编码成Flex能够识别的对象（amf）。

## Srping容器

使用了默认位置的配置文件

~~~xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:flex="http://www.springframework.org/schema/flex"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/flex http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">

        <!-- 使用默认位置的配置文件/WEB-INF/flex/services-config.xml-->
       <flex:message-broker/>
    </bean>
</beans>

~~~


## 通道

在BlazeDS的配置文件services-config.xml中定义的通道必须与相应的映射相对应。

~~~xml
<channels>
	<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
    <!-- {context.root}之后的messagebroker必须与ServletMapping相同 -->
    <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"
              class="flex.messaging.endpoints.AMFEndpoint"/>
	</channel-definition>
</channels>

~~~

## 配置远程服务

这里有列举了两种发布方式，任选一种即可。

①创建使用注解发布的服务

~~~java
package top.rainynight.flex2spring;

import org.springframework.flex.remoting.RemotingDestination;
import org.springframework.flex.remoting.RemotingInclude;
import org.springframework.stereotype.Component;

@Component
@RemotingDestination
public class AnnotationRPC {

    public String read(String id) {
        return "annotation works";
    }

}

~~~
②创建使用xml发布的服务

~~~java
package top.rainynight.flex2spring;

/**
 * Created by sllx on 2015-03-16.
 */
public class XmlConfRPC {
    public String read(String id) {
        return "xml works";
    }
}

~~~
发布配置发布方式任选一种即可

~~~xml
<context:component-scan base-package="top"/>

<bean id="xmlConfRPC" class="top.rainynight.flex2spring.XmlConfRPC">
 <flex:remoting-destination/>
</bean>

~~~


## flex使用默认channel
flex配置编译参数

~~~
-services "pathToWebappRoot/WEB-INF/flex/services-config.xml" -locale en_US

~~~

## 测试

~~~xml
<?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" applicationComplete="applicationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import mx.messaging.events.MessageAckEvent;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			
			protected function resultHandler(event:ResultEvent):void
			{
				Alert.show(event.result.toString(),"result");
			}
			
			protected function faultHandler(event:FaultEvent):void
			{
				Alert.show(event.message.toString() ,"error");
			}
			
			protected function applicationCompleteHandler(event:FlexEvent):void
			{
				ro.read("1");
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:RemoteObject destination="annotationRPC" id="ro" result="resultHandler(event)" fault="faultHandler(event)" />
	</fx:Declarations>
</s:Application>


~~~