* Flex开发中可用两种语言

1.MXML

2.ActionScript

* Flex中使用两个组件集

1.MX (mx.*) 早期的Flex版本用到的组件集

2.Spark (spark.*) Flex4及以后的版本用到的组件集。

Spark比MX组件有更多皮肤外观及其它方面的优点。它们有相同的组件(如按钮,文本框,列表控件等)。官方推荐使用Spark组件集。

* MXML文件

MXML文件是一种普通的xml文件,和html一样是标记语言,不过MXML被编译成.swf文件在FlashPlayer或者AIR中运行。

<?xml version="1.0" encoding="utf-8"?>
<!-- mxml\HellowWorld.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:MyComps="myComponents.boxes.*">
<s:layout> <s:VerticalLayout /> </s:layout>
<s:Panel title="My Application">
<s:Label text="Hello World" fontWeight="bold" fontSize="24"/>
<MyComps:CustomBox/>
</s:Panel>
</s:Application>
  • xmlns:fx="http://ns.adobe.com/mxml/2009" ActionScript顶级命名空间,如对象,数组等为标签构建MXML 编译器,如<fx:script>,<fx:Declarations>,<fx:Style>,<fx:Model>
  • xmlns:mx="library://ns.adobe.com/flex/mx" MX组件集命名空间
  • xmlns:s="library://ns.adobe.com/flex/spark" Spark组件命名空间,包括WebService, HTTPService, RemoteObject组件及支持RPC组件的类
  • xmlns:MyComps="myComponents.boxes.*"> 自定义组件命名空间

* Application标签

定义应用程序容器,应用程序的根标签。

<s:Appliction> </s:Application>

* 编译运行

1) IDE运行,生成swf,在AIR中或包装在html中运行。

2) 命令行编译:

cd flex_install_dir/bin
mxmlc --show-actionscript-warnings=true --strict=true c:/app_dir/hello.mxml

* MXML与ActionScript的关系

Flex作为ActionScript的类库,包括组件(容器和控件),管理类,数据服务类及其它特性类。基于这些类库,用MXML和ActionScript语言开发应用程序。MXML标签对应ActionScript类,MXML标签属性Attribute对应类的属性Property,样式或事件。Flex将MXML转换成等价的AS对象。定义MXML标签即为声明一个ActionScript类的实例。

* 应用程序结构

MXML应用程序可以定义一个包含<s:Application>标签的主文件,及引用其它MXML,ActionScript文件或者两种语言混写的文件。MXML文件与AS文件的分离对应不同的模块,可以让开发更容易,提高可重用性,可维护性。

* MXML id属性

id属性在MXML文件中唯一标识元素,在AS代码中通过该id引用对应标签的组件。定义id后,MXML编译器会成该id的公共变量,指向该组件的实例引用。

<?xml version="1.0"?>
<!-- mxml/UseIDProperty.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
private function writeToLog():void {
trace(myText.text);
}
]]>
</fx:Script>
<s:VGroup id="myVGroup">
<s:TextInput id="myText" text="Hello World!" />
<s:Button id="mybutton" label="Get Weather" click="writeToLog();"/>
</s:VGroup>
</s:Application>

* 触发运行时脚本执行

<s:Button label="Submit" click="textarea1.text='Hello World';"/>

* 绑定数据

用花括号{}来绑定数据源值

<s:Label text="Enter Text:"/>
<s:TextInput id="textinput1" text="Hello"/>
<s:Label text="Bind Text to the TextArea control:"/>
<s:TextArea id="textarea1" text="{textinput1.text}"/>
<s:Button label="Submit" click="textinput1.text='Goodbye';"/>

* 声明RPC服务

支持以下服务

• WebService provides access to SOAP-based web services.
• HTTPService provides access to HTTP URLs that return data.
• RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only)

<fx:Declarations>
<s:WebService id="WeatherService"
wsdl="http:/example.com/ws/WeatherService?wsdl"
useProxy="false">
<s:operation name="GetWeather">
<s:request>
<ZipCode>{zip.text}</ZipCode>
</s:request>
</s:operation>
</s:WebService>
</fx:Declarations>

* 存储数据

<fx:Declarations>
<fx:Model id="contact">
<info>
<homePhone>{homePhoneInput.text}</homePhone>
<cellPhone>{cellPhoneInput.text}</cellPhone>
<email>{emailInput.text}</email>
</info>
</fx:Model>
</fx:Declarations>

* 验证数据

<fx:Declarations>
<mx:PhoneNumberValidator id="pnV" source="{homePhoneInput}" property="text"/>
<mx:EmailValidator id="emV" source="{emailInput}" property="text" />
</fx:Declarations>

* 格式化数据

<fx:Script>
<![CDATA[
[Bindable]
private var storedZipCode:Number=123456789;
]]>
</fx:Script>
<fx:Declarations>
<mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/>
</fx:Declarations>
<s:Panel title="My Application">
<s:TextInput text="{ZipCodeDisplay.format(storedZipCode)}"/>
</s:Panel>

* 使用CSS

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class selector */
.myClass {
color: Red
}
/* type selector */
s|Button {
font-size: 18pt
}
</fx:Style>
<s:Panel title="My Application">
<s:Button styleName="myClass" label="This is red 18 point text."/>
</s:Panel>

* 皮肤风格

Skinning

* 特效

<fx:Declarations>
<s:Resize id="myResize" heightBy="25" widthBy="50" target="{myButton}"/>
</fx:Declarations>
<s:Button id="myButton" label="Resize target" click="myResize.end();myResize.play();"/>

* 自定义MXML组件

<?xml version="1.0"?>
<!-- mxml/CustomMXMLComponent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:MyComps="myComponents.boxes.*">
<s:Panel title="My Application" height="150">
<MyComps:MyComboBox/>
</s:Panel>
</s:Application>

* MXML语法

MXML的大部分标签与AS3类及属性一一对应,Flex将标签编译成相应的AS3对象生成到swf文件中。

#AS3语言特性:

• 类形式的语法定义
• 包结构形式
• 类型变量,参数,返回值
• get/set显示定义存取值
• 继承
• 公共及私有成员
• 静态成员
• 转换操作符

#命名MXML文件

  1. 用字母和数字,下划线且只能字母或下划线开头
  2. 文件名不能和类名,组件id,应用程序名及fx:,s:,mx:命名空间中的tag重名
  3. .mxml扩展名要小写

#用tag代表AS3类,类名首字母大写

#设置组件属性,属性名小写开头,大写分隔属性名称(驼峰标识)

<s:Label width="50" height="25" text="Hello World"/>

或者用子标签的方式。

<s:Label>
<s:width>50</s:width>
<s:height>25</s:height>
<s:text>Hello World</s:text>
</s:Label>

子标签方式可指定更复杂的对象值

<s:List>
<s:dataProvider>
<s:ArrayCollection>
<fx:String>AK</fx:String>
<fx:String>AL</fx:String>
<fx:String>AR</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:List>

组件的属性为下面类型之一:

  1. 标量值(数字或字符串)
  2. 标量值数组,数字数组或者字符串数组
  3. AS3对象
  4. AS3对象数组
  5. AS3属性
  6. xml数据

# 转义符\

\{\}

\\

\n

#组件属性值

  • 混合类型 p25
  • 标量值数组
  • 对象 p26
  • 对象数组
  • 矢量Vector p29
  • xml
  • 样式属性 p30
  • 事件属性
  • 指定URL
<fx:Style source="http://www.somesite.com/mystyles.css">
<fx:Script source="/myscript.as"/>
<fx:Script source="../myscript.as"/>
<mx:HTTPService url="@ContextRoot()/directory/myfile.xml"/>

@ContextRoot() web层根目录

  • 正则表达式
  • 编译器标签

• <fx:Binding>
• <fx:Component>
• <fx:Declarations>
• <fx:Definition>
• <fx:DesignLayer>
• <fx:Library>
• <fx:Metadata>
• <fx:Model>
• <fx:Private>
• <fx:Reparent>
• <fx:Script>
• <fx:Style>

# MXML标签规则

  1. 不是所有的标签都需要id属性
  2. id属性不能在根标签中定义
  3. Boolean类型的值只能为true,false
  4. <fx:Binding>标签需要同时指定source,destination两个属性
  5. <fx:Binding>不能包含id属性

* 使用ActionScript

  1. 添加事件侦听
  2. 添加<fx:Script>标签,必须为<s:Application>或者其它顶层标签的子标签。
    1. <s:TextArea id="textarea1" width="155" x="0" y="0"/>
      <s:Button label="Click Me" click="textarea1.text='Hello World';" width="92" x="31.5" y="56"/> <fx:Script>
      <![CDATA[
      public var s:Boolean;
      public function doSomething():void {
      // The following statements must be inside a function.
      s = label1.visible;
      label1.text = "label1.visible = " + String(s);
      }
      ]]>
      </fx:Script> <fx:Script source="includes/IncludedFile.as">
  3. 引入外部as文件
  4. 导入as类
    1. <fx:Script>
      <![CDATA[
      /* The myfunctions.as file defines two methods that
      return Strings. */
      include "includes/myfunctions.as";
      ]]>
      </fx:Script>
  5. 创建组件

Spark容器用addElement(),addElementAt()方法添加可视化组件(实现IVisualElement接口),setItemIndex()改变层级, removeElement(), removeElementAt(),removeAllElements()移除组件

MX容器用addChild(),addChildAt()方法添加,setChildIndex()改变层级。removeChild(),removeChildAt(),removeAllElements()

添加到容器后,应用程序的可视化层级树中即添加该组件。移除后,实际上不从内存移除,该对象无任何引用之后,内存管理器在未来某个时间回收。

* 程序范围 Scope

p42

* 事件

p56

spark.events.*
mx.events.*
flash.events.*

* SDK 配置

p97

sdk_install_dir/
bin/jvm.config
bin/mxmlc
bin/mxmlc.exe
bin/compc
bin/compc.exe
bin/fdb
bin/fdb.exe
frameworks/flex-config.xml

第2章 开始Flex的更多相关文章

  1. FLEX 网格布局及响应式处理

    上一篇文章用Flex实现BorderLayout,这一章我们来实现常用的网格布局和响应式处理. 首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构. ...

  2. flex与bison

    flex与bison 中文版 目录: 第一章:flex和bison简介 第二章:使用flex 第三章:使用bison 第四章:分析sql 第五章:flex规范参考 第六章:bison规范参考 第七章: ...

  3. Flex4 初始化过慢解决方法

    昨天找了个免费.net空间,想测试一下做的一个简单Flex4 上传项目的效果.上传所有文件到网站之后,访问项目页面,进度条一点一点艰难的向前移动,到了100%后却不出现程序界面,等待一会儿还是没有出现 ...

  4. frontEnd(前端基础)

    第一章:前端概述 第二章:前端三剑客 第三章:第一个页面 第四章:html常用标签 第五章:标签分类 第六章:css三种引入方式 第七章:样式与长度颜色 第八章:常用样式 第九章:CSS选择器 第十章 ...

  5. 第二章 flex输入输出结构

    对于一个词法分析程序,一般读取文件或者终端 一个默认lex程序大致看上去像这样 YY_BUFFER_STATE bp; extern FILE* yyin; ... whatever the prog ...

  6. 第二章 flex输入输出

    flex程序默认总是从标准输入读取, 实际上,词法分析程序都从文件读取输入 flex总是通过名为yyin的文件句柄读取输入, 下面的例子,我们修改单词计数程序,使得它能从文件读取输入 /* even ...

  7. 第二章 flex处理二义性

    大多数flex程序有二义性,相同的输入可能被多种模式匹配 flex通过下面2个规则来解决 匹配尽可能长的字符 如果2个模式都可以匹配, 匹配更早出现的那个模式 例子 "+" { r ...

  8. 第一章 flex单词计数程序

    学习Flex&Bison目标, 读懂SQLite中SQL解析部分代码 Flex&Bison简介Flex做词法分析Bison做语法分析 第一个Flex程序, wc.fl, 单词计数程序 ...

  9. 第1章 Flex介绍

    * Flex Flex 是一个高效.免费的开源框架,可用于构建具有表现力的 Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器.桌面和操作系统 ...

随机推荐

  1. s5_day14作业

    import re # 1. 匹配一段文本中的每行的邮箱 # ret=re.findall('\w+@\w+\.com','10000@qq.com,qwe48645313@163.com') # p ...

  2. 微信小程序之日期与时间插件

    页面 <picker mode="time" value="{{time}}" start="{{minTime}}" end=&qu ...

  3. HDU 4370 - 0 or 1 (SPFA+思维)

    题意:给一个N*N的矩阵C,和一个N*N的只由0和1组成的矩阵X. X满足以下条件: 1.X 12+X 13+...X 1n=1  2.X 1n+X 2n+...X n-1n=1  3.任意 i (1 ...

  4. lock关键字的用法

    一直以来对于lock关键字的用法都存有疑惑,也从网上看到很多关于他的资料包括MSDN,无奈MSDN讲述的真是让人上火.今天决定小小研究一下 一直都知道lock是锁定某一变量从而实现对某一代码段的独占执 ...

  5. 【Head First Servlets and JSP】笔记24:include指令与include动作 & param动作 & foward动作

    include指令与include动作 1.样例代码 <%@ page contentType="text/html;charset=UTF-8" language=&quo ...

  6. Vim:gvim安装配置(windows)

    Vim:gvim安装配置(windows) 一.gvim的特点: vim要求全部键盘操作,而gvim可以使用鼠标进行可视化操作,即gvim是vim的图形化界面: 二.gvim安装: 下载地址:http ...

  7. zabbix api

    #!/usr/bin/env python # -*-coding:utf-8 -*- import requests import json class AutoZabbix: def __init ...

  8. Oracle 配置tnsnames.ora

    之所以要配置这个文件,是因为里面有配置数据库 服务器的地址. 目录: E:\app\PC-Gang\product\11.2.0\dbhome_1\NETWORK\ADMIN

  9. tomcat集群基于Nginx——共享同一个应用

    1.首先准备两个tomcat,也可以一个复制两个.和一个Nginx tomcat官方下载连接——安装版&绿色版 Nginx官网下载链接:http://nginx.org/download/ 博 ...

  10. MergeSortedArray,合并两个有序的数组

    问题描述:You may assume that nums1 has enough space (size that is greater or equal to m + n) to hold add ...