Flex

#产品

Adobe® Flex™ SDK
Adobe® Flex™ Builder™
Adobe® Flex™ Data Services
Adobe® Flex™ Charting

#Flex基础

##应用程序模型

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

##MVC模型

模型/Model 组件封装了数据和与数据相关的行为。
视图/View 组件定义了应用程序的用户界面。
控制器/Controller 组件则负责处理程序中的数据连接。

##Flex 编程模型

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

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

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

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

##Flex 元素

Flex framework
MXML
ActionScript 3.0
CSS
图形资源
数据

<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>

##发布方式

客户端模式，即应用程序只运行在客户端上而不需要服务器资源。
使用简单的RPC 访问服务器数据，即使用HTTPService（HTTP GET 或POST 请求）和WebService（通过使用SOAP）。
Flex Data Services 模式，可以提供更为高级的特性，如数据同步、安全增强等等。

#界面布局

样式

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

外部样式

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

##控制应用程序的外观

大小/Sizes，即组件或应用程序的高度和宽度。
样式/Styles，即一组特性，如字体、排列方式、颜色等。它们都是通过层叠样式（ CSS）来进行设置的。
皮肤/Skins，即可以进行改变的组件视觉元素。
行为/Behaviors，即Flex 组件在视觉或听觉效果方面的变化。
视图状态/View state 可以让你通过修改它的基础内容，来改变组件或程序的内容和外观。
变换/Transitions 可以让你定义屏幕上发生改变的视图状态。

##受约束的布局

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

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

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

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

控件

ComboBox，List，HorizontalList。

#事件与行为

外部ActionScript

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

被事件触发的行为

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

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中为事件绑定行为

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

##多态页面

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

##创建行为

<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数据

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

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

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

事件绑定

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

##连接数据服务器

WebService 提供对使用SOAP 的web 服务器的访问。
HTTPService 提供对返回数据的HTTP URLs 的访问。
RemoteObject 通过使用AML 协议提供对Java 对象（Java Beans、EJBs、POJOs）的访问。该选项目前仅适用于Flex Data Services 或Macromedia ColdFusion MX 7.0.2.

##安全性

swf与数据源必须同域
可以使用代理访问远程数据源，但是swf必须与代理服务器同域
安装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 相关的技术标准有

XML 标准。XML 文档使用标签去决定结构化信息的内容，以及它们之间的关系。
事件模型标准。Flex 事件模型是文档对象模型/Document Object Model （DOM）第三级事件的一个子集，该模型是由World Wide Web Consortium（W3C）起草制定。
Web 服务标准Flex 提供与服务器交互的MXML 标签，遵循了Web 服务描述语言/Web Services Description Language（WSDL）的规则。具体包括了简单对象访问协议/Simple Object Access Pr otocol（SOAP）和超文本传送协议/Hypertext Transfer Protocol（HTTP）。
Java 标准

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

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

HTTP 标准

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

图形标准

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

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

#ActionScript

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

在<mx:Script>标签中插入ActionScript 代码块。
调用存储在system_classes 目录结构中的全局ActionScript 功能函数。
引用**user_classes **中的外部类和包来处理更为复杂的任务。
使用标准的Flex 组件。
使用ActionScript 类扩展已有的组件。
使用ActionScript 创建新的组件。
在Flash 创建环境中创建新的组件（ SWC 文件）。

#XML

##创建xml对象

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

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

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

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

通过XML类创建实例

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

从外部加载XML对象

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

##处理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的操作

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

###查询

使用.操作符查询节点

simpleData.lastResult.item

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

simpleData.lastResult.item[0]

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

simpleData.lastResult..name

使用@访问节点属性

simpleData.lastResult.item[0].@index

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

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

过滤属性

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

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

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

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

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

###修改

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

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

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

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"/>);   

添加属性

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

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

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

删除节点，属性，content

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

Go to Settings > Compiler > Flex Compiler

Choose Mxmlc/compx instead of the default Built-in compiler shell

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文档中指明）了。

##依赖

  <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

<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 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中定义的通道必须与相应的映射相对应。

<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>

##配置远程服务

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

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

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发布的服务

package top.rainynight.flex2spring;

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

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

<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 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>

Flex

Flex

ActionScript

script

markdown自动生成github博客(前篇)

Servlet乱码分析

JS 闭包

WebService

Custom Fileupload