flex4.0标签
FLEX4_Flex4教程
Flex 应用的构建形式 尽管用 Flex 开发 RIA 有多种形式，但现在主流的架构是：Flex 作为 Client（客户端），Java、PHP、 Asp、Ruby 等技术作为 Server（服务器端）。
本教程之后的内容主要介绍 Flex 与 Java 技术的整合。
Flex 访问服务器端数据的 3 种方式 既然 Flex 可以和 Java 等 Sever 端技术整合，那么它们之间怎样实现通信的呢？Flex 通过 HTTPService，WebService 和 RemoteObject 这 3 个组件实现与 Server 端的通信。
外观与样式设计 使用 CSS 和图形属性编辑器自定义应用程序外观。快速设置最常用的属性，并在“Design”（设计） 视图中预览结果。使用新的 Theme Browser（主题浏览器）浏览可用主题，并将它们应用于您的项目。
与 Adobe Creative Suite 设计工具集成 导入使用 Adobe Flash Professional、Illustrator®、Photoshop® 或 Fireworks® 软件创建的设计 资源，或导入使用 Flash Catalyst 创建的整个应用程序用户界面。Flash Professional 与 Flash Builder 之间的新工作流程简化了自定义 Flex 组件的导入和更新。
HTTPService 组件
HTTPService 组件允许你与 HTTP 服务交互，可以是接收 HTTP 请求和发送 HTTP 响应的任何 HTTP URI。 你可以通过 HTTPService 组件调用任何类型的 Server 端技术，包括 PHP pages, ColdFusion Pages, JavaServer Pages, Java servlets, Ruby on Rails 和 ASP pages。 HTTPService 组件允许你发送 HTTP GET、POST、HEAD、OPTIONS、PUT、TRACE 和 DELETE 请求，并典 型的以 XML 形式返回。
MyEclipse 8.0+flex 4 plugin+Blazeds配置
需要软件：jdk-6u12-windows-i586-p.exe、apachetomcat.exe、myeclipse-8.0.0-win32.exe、blazeds-turnkey-4.0.0.14931.zip、FlashBuilder_4_Plugin_LS10.exe一、安装jdk按照步骤，选择路径安装，安装成功后，在安装路径下有java文件，包含jdk和jre 两个子文件。
二、JDK环境变量配置的步骤如下：1.我的电脑-->属性-->高级-->环境变量.2.配置用户变量:a.新建JAVA_HOMEC:\Program Files\Java\jdk1.5.0（JDK的安装路径）b.新建 PATH%JAVA_HOME%\bin;c.新建CLASSPATH.;%JAVA_HOME%\lib;3.测试环境变量配置是否成功：开始-->运行--〉CMD键盘敲入：JAVAC -version出现jdk版本信息，而不是出错信息，即表示配置成功！环境变量配置的理解：1. PATH环境变量。
作用是指定命令搜索路径，在i命令行下面执行命令如javac编译ja va程序时，它会到PATH变量所指定的路径中查找看是否能找到相应的命令程序。
我们需要把jdk安装目录下的bin目录增加到现有的PATH变量中，bin目录中包含经常要用到的可执行文件如javac/java/javadoc等待，设置好PATH变量后，就可以在任何目录下执行javac/java 等工具了。
2. CLASSPATH环境变量。
作用是指定类搜索路径，要使用已经编写好的类，前提当然是能够找到它们了，JVM就是通过CLASSPTH来寻找类的。
我们需要把jdk安装目录下的lib子目录中的dt.jar和tools.jar设置到CLASSPATH中，当然，当前目录“.”也必须加入到该变量中。
3. JAVA_HOME环境变量。
它指向jdk的安装目录，Eclipse/NetBeans/Tomcat等软件就是通过搜索JAVA_HOME变量来找到并使用安装好的jdk。
flex4.0学习记录
在Flex4.0中使用正则表达式正则表达式可以高效地匹配查找字符串数据。
可方便地定义复杂的规则。
对于复杂的规则，若采用代码来表示，会产生较多的代码行，并且逻辑复杂、容易出错。
另外，使用正则表达式远比自定义算法效率要高。
1.使用RegExp类用以定义和处理正则表达式。
语法有两种方式。
一种是使用“/“符定义正则表达式：var RegExp变量：RegExp=/正则表达式语句/；一种是使用字符串定义正则表达式：var RegExp变量：RegExp=new RegExp(“正则表达式”)；2.使用RegExp类匹配数据一种是使用RegExp类的exec( )方法匹配数据。
用于匹配字符串，并返回匹配结果数组。
RegExp变量.Exec(字符串数据)；如：var r : RegExp=/\d+/;var arr : Array=r.exec(“4256@322”);trace(arr); 结果为“4256“、”“322“两个子串。
一种是使用RegExp类的test()方法匹配数据。
用于匹配字符串，并返回布尔值。
如：var r : RegExp=/\d+/;var flag: boolean=r.exec(“4256@322”);trace(arr);一种是使用String类的match()方法匹配数据，用于匹配字符串并返回结果数组。
如：var r : RegExp=/\d+/;var s : String = “4256@322”;var arr : Array=s.match(r);trace(arr);数据传输与交互Flex4.0中的数据传输方式包括内部数据传输、文件流方式传输、xml方式传输、其他方式传输。
应用程序内部的数据传输大多通过变量传递来实现。
外部文件的数据可分为简单文本数据、xml数据和复杂数据。
对于简单的文本数据可以采用文件流方式传输。
对于xml数据可采用xml方式传输。
对于复杂的数据，如大型数据库中的数据，需要通过其他程序来辅助数据传输。
VueUI--iView4.0简单使用
VueUI--iView4.0简单使⽤⼀、iView（View UI）1、简介2、安装、使⽤（1）使⽤ npm 安装（项⽬中如何使⽤，命令⾏运⾏）npm install view-design --save【⼩案例：在项⽬的 main.js 中引⼊】【main.js】import Vue from 'vue'import App from './App.vue'// step1: 引⼊ ViewUIimport ViewUI from 'view-design'// step2: 引⼊ cssimport 'view-design/dist/styles/iview.css'Vue.config.productionTip = false// step3:声明使⽤ ViewUIe(ViewUI)new Vue({render: h => h(App),}).$mount('#app')【修改App.vue】<template><div><i-button @click="show">Click me!</i-button><Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal></div></template><script>export default {data() {return {visible: false}},methods: {show() {this.visible = true}}}</script><style></style>（2）不使⽤ npm 安装（单 html 中使⽤，直接运⾏）【使⽤ <script> 标签引⼊ js ⽂件】<script type="text/javascript" src="/view-design/dist/iview.min.js"></script>【使⽤ <link> 标签引⼊ css ⽂件】<link rel="stylesheet" type="text/css" href="/view-design/dist/styles/iview.css">【⼩案例：（index.html）】<!DOCTYPE html><html><head><meta charset="utf-8"><title>ViewUI example</title><link rel="stylesheet" type="text/css" href="/view-design/dist/styles/iview.css"><script type="text/javascript" src="/js/vue.min.js"></script><script type="text/javascript" src="/view-design/dist/iview.min.js"></script></head><body><div id="app"><i-button @click="show">Click me!</i-button><Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal></div><script>new Vue({el: '#app',data: {visible: false},methods: {show: function () {this.visible = true}}})</script></body></html>⼆、组件 -- 基础1、颜⾊（Color）2、字体（Font）3、按钮（Button）【App.vue】<template><div><p>通过 type 来设置不同样式的按钮</p><Button>Default</Button> <Button type="primary">Primary</Button> <Button type="dashed">Dashed</Button> <Button type="text">Text</Button> <Button type="info">Info</Button> <Button type="success">Success</Button> <Button type="warning">Warning</Button> <Button type="error">Error</Button><br/><br/><br/><p>通过 ghost 可以将背景⾊置为透明，通常⽤于有⾊背景上</p><Button ghost>Default</Button> <Button type="primary" ghost>Primary</Button> <Button type="dashed" ghost>Dashed</Button> <Button type="text" ghost>Text</Button> <Button type="info" ghost>Info</Button> <Button type="success" ghost>Success</Button> <Button type="warning" ghost>Warning</Button> <Button type="error" ghost>Error</Button><br/><br/><br/><P>icon 可以设置图标、shape 可以设置按钮的图形,在 Button 内部使⽤ Icon 可以⾃定义图标的位置</P> <Button type="primary" shape="circle" icon="ios-search"></Button> <Button type="primary" icon="ios-search">Search</Button> <Button type="primary" shape="circle">Search <Icon type="ios-search"></Icon></Button> <Button type="primary">Circle</Button><br/><br/><br/><p>size 可以⽤来设置尺⼨，large、default、small</p><Button type="success">Success</Button> <Button type="success" size="large">success</Button> <Button type="success" size="default">success</Button> <Button type="success" size="small">success</Button><br/><br/><br/><p>long可以⽤来填充宽度，宽度100%</p><Button type="success" size="large" long>success</Button> <Button type="success" size="large" long style="width: 600px;">success</Button><br/><br/><br/><p>loading 可以使按钮处于加载中的样式。
flex4整合MyEclipse教程
flex4整合MyEclipse教程2010-03-28 23:27冰川今天给大家开始讲解flex4的教程，第一课如何和Myeclipse8.0整合，然后建立一个jspweb 一、下载好需要的软件MyEclipse8.0正式版 and flash builder 4插件版 ,记住flex4版本支持核心3.4以上，所以最低也得二、安装流程1.首先安装Myeclipse8.0软件。
在安装中有2个路径选择。
请记住第一个路径的位置，简单来说要知道在哪里。
2.安装flex4，也就是上面的flash builder4。
记住如果你想汉化你的Myeclipse那现在就得先汉化主开发的一键汉化程序。
下载地址是：myeclipse语言互换工具v1.3，下面说说安装注意下面以图这里是安装路径，这个路径不是整合Myeclipse路径所以不要选择Myeclipse运行路径。
我这里安步。
看到我上面图所选择的路径这是myeclise的运行目录，记得关键之处，如果这个不是选择运行文成功了。
三、删除多余的文件夹找到第一个的安装路径我图1的路径是D:\soft\Adobe\fb 找到在下面的D:\soft\Adobe\fb\eclipse\p 因为在安装整合Myeclise整合后运行Myeclise会现出一个错误，大家仔细看弹出的错误提示窗口径，名称是：com.adobe.flexbuilder.utils.osnative.mac_4.0.0.253292 删除它然后在启动就好了。
提供一组注册码,试过都可以用:Subscriber:MaYongSubscription Code:ZLR8ZO-655444-54678656985359684Subscriber:LauChengSubscription Code:YLR8ZC-855550-6765665204902409Subscriber:accpSubscription Code:nLR8ZC-855550-6765855499710139Subscriber:AdministratorSubscription Code:NLR8ZC-855550-6552685393219112Subscriber:accptechSubscription Code:nLR8ZC-855550-6765855429037911MyEclipse.8.0.GA下载（官方8.0GA原版）ed2k://|file|%5BMyEclipse.8.0.GA%EF%BC%88%E5%AE%98%E6%96%B98.0GA%E5%8E%9F%E7%89%8 4%E6%96%B0%E5%BD%92%E6%A1%A3%E5%8D%87%E7%BA%A7%E7%89%88%E6%9C%AC%EF%B BMyEclipse.8.0.GA%5D.myeclipse-8.0.0-win32.exe|820481847|3fb5c1623b69b6006b4bb5495522bfa8|h=z7l 我一般在ajava下载的,一般跟的上官方更新!。
flex4 读书笔记
chapter 11、flex包含一个基于组件的开发模型，你只需要按需求继承现有的组件并扩展相关的方法就可开发你的应用。
2、可视化组件包括以下主要特性：尺寸、事件、样式、效果、皮肤。
3、flex定义了两套组件。
一套为Spark，放在spark.*包下。
一套为MX，放在mx.*包下。
Spark是在flex4中新添加的，mx为旧版本中定义的。
两套组件的主要不同点在于样式及皮肤的使用。
另外对于容器组件，布局的方式也改变了。
4、有些组件在两套UI中都存中，例如按钮，在这种情况下adobe建议你使用Spark中的组件。
有些组件是某套UI特有的。
例如Spark中的3d效果。
mx组件中的数据可视化组件，例如DataGrid、AdvancedDataGrid。
所以你的应用会包含两套UI中的组件。
5、可视化组件的继承层次结构：Object-EventDispatcher-DisplayObject-InteractiveObject-DisplayObjectContainer-Sprite-FlexSprite-UIComponent。
flex中所有的可视化对像都继承自UIComponent。
6、UIComponent中需要注意以下属性。
doubleClickEnabled:flex默认是不支持双击的，如果要开启双击，请把该属性设为true;height:在mxml中你可以设置值为数字，这时默认单位为pix。
你也可以设置为70%这种比例。
在as中，如果要设置百分比，你需要用percentHeight这个属性。
x,y:这组属性只在layout为绝对布局时才有效。
7、每一个flex组件都有对应的mxml接口和as接口。
两者之间是相等的。
8、每个一可视化组件都包含以下三个生命周期事件：preInitialize:组件刚被创建，还没有添加子节点，且不可见。
initialize：把子节点初始化好，并尺寸也设置好，但仍然处于不可见状态。
FLEX优缺点分析
用了一年多Flex，感触多多。
偶尔有同行的朋友问我啥是Flex，说实话，一时半会儿我还真说不清楚。
尤其是对于一个从未接触过Flex的朋友，想要由浅入深地只用嘴巴不用电脑给他讲明白，这确实难为一个整天只跟机器打交道的程序员了。
后来我想了一个办法，我说你知道开心农场吧，那就是拿Flex做的。
这下子很多人有兴趣了，呵呵，如果你也有兴趣，请继续往下看。
失言未察之处，欢迎拍砖。
一般来说，一项技术的产生都是为了解决业界的重大难题而出现的。
那么说到Flex我们就不得不先说一下RIA。
RIA这个概念其实早就出现了，我最初是07年在《程序员》杂志上关于Ajax技术的介绍时看到的。
到了08年，伴随着网络视频的飞速发展，RIA应用已经搞得有声有色热火朝天了，其实翻译过来就是个富客户端（Rich Internet Application），相较于BS 的瘦客户端，也可以称之为胖客户端。
当然如果你已经被这些名词概念熏得焦头烂额，请连跳四段（小黑好心提示，本部分仅余四段。
）。
RIA简单的说，就是CS+BS的开发部署模式。
CS和BS大家都很熟悉，CS的全拼是Client/Server，它的优点在于借助局域网的信息安全和带宽优势，充分利用客户机器的运算能力从而降低服务器压力，缺点就是安装部署更新麻烦，比如老板让我跑到一千公里外的客户那安装一千台机器的客户端，过几天我回来了，老板说那边有几台机器运行有问题，你去维护一下~！过几个月，老板说你去把那一千台机器全部升级一遍，他们自己不会装。
呵呵，这些痛苦我当然不曾经历，我杜撰的。
那么在1998年，互联网风起云涌的时候，BS，Browser/Server，逢时而生。
BS充分利用互联网的优势，解决了CS安装部署更新的一大难题。
通过把业务逻辑处理放在服务器端，然后解析为HTML，利用HTTP协议传输到客户的浏览器上就万事大吉。
看起来很美，其实干过就知道也很痛苦。
哪儿痛呢，痛的当然是我们这些开发者。
Flex4权威指南-学习笔记
SkinnableDataContainer－DataGroup 的可设计外观的版本。
Application－针对基于浏览器的 Flex 应用程序、可设计外观的顶级容器（与 AIR 应用程序相反，后者使用下述 Spark WindowedApplication 容器）。
第5课：事件处理
5.1 用户事件
定义相应函数
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
//单击按钮“ViewCart”调用该方法handleViewCartClick，响应单击事件
private function handleViewCartClick( event:MouseEvent ):void {
this.currentState="cartView";
}
]]>
</fx:Script>
调用函数：
<s:Button label="View Cart" click="handleViewCartClick( event )" includeIn="State1"/>
Spark 媒体组件
VideoPlayer－支持回放视频媒体、可设计外观的组件，它构建在开放源媒体框架*之上。
---------------------------------------------------------------
第3课：
3.1.1 容器
Group： 不可见
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Flex 4 读取xml文件，xml文件的格式：
<root>根节点
<leaf>叶子
<info>信息
<in id="logo">test-logo</in>
<in id="left">test-left</in>
</info>
</leaf>
<in id="middle">test-middle</in>
</root>
fx:Binding可以使用 <fx:Binding> 标签将某个对象的数据绑定到另一个对象。
可以使用 <fx:Component> 标签在 MXML 文件中定义内联单元格渲染器或单元格fx:Component
编辑器。
fx:Declarations可以使用 <fx:Declarations> 标签声明当前类的非默认、不可视属性。
可以在 <fx:Library> 标签内使用 <fx:Definition> 标签定义图形子对象，然后fx:Definition
可以将子对象用于应用程序的其他部分中。
fx:DesignLayer<fx:DesignLayer> 标签仅供内部使用。
fx:Library可以使用 <fx:Library> 标签声明当前类的非默认、非可视属性。
fx:Metadata使用 <fx:Metadata> 标签可以在 MXML 文件中插入 metadata 标签。
fx:Model可以使用 <fx:Model> 标签在 MXML 中声明数据模型。
fx:Private可以使用 <fx:Private> 标签提供有关 MXML 或 FXG 文档的元数据信息。
作为视图状态更改的一部分，可以使用 <fx:Reparent> 标签更改某个组件的父容fx:Reparent
器。
fx:Script可以使用 <fx:Script> 标签定义 ActionScript 代码块。
fx:Style可以使用 <fx:Style> 标签定义适用于当前文档及其子项的样式。
fx:XML可以使用 <fx:XML> 标签在 MXML 中声明 XML 格式的数据模型。
可以使用 <fx:XMLList> 标签在 MXML 中通过文本格式的模型创建 E4X XMLList fx:XML List
对象。
fx:Binding在使用<fx:Binding>标签时，需要提供源属性和目标属性。
可以使用<fx:Binding>标签将视图或用户界面与模型完全分离。
通过<fx:Binding>标签，您还可以将不同的source 属性绑定到同一个destination 属性。
fx:Component<fx:Component> 标签将在 MXML 文件内定义一个新作用域，其中项目渲染器或项目编辑器的本地作用域由 MXML 代码块定义，并由 <fx:Component> 和 </fx:Component> 标签分隔。
要访问项目渲染器或项目编辑器的本地作用域之外的元素，可以在该元素名称前添加 outerDocument 关键字作为前缀.outerDocument 关键字的用途之一是，可以初始化内嵌项目编辑器控件的数据提供程序。
<fx:Component
id=""
className=""
>;
...
child tags
...
</fmx:Component>;
不能创建空的 <fx:Component></fx:Component> 标签；必须在 <fx:Component></fx:Component> 标签内至少定义一个子标签。
通过 id 属性可以为内嵌组件指定一个标识符，从而可以将它用作数据绑定表达式的源。
通过 className 属性可以指定 Flex 为内嵌组件生成的类的名称，从而可以在 ActionScript 中引用该组件的元素。
fx:Declarations标签的语法如下：
<fx:Declarations>
<!-- Non-visual declarations. -->
</fx:Declarations>
fx:Definition标签的语法如下：
<fx:Library>
<fx:Definition name=defName>
<!-- Graphical children. -->
</fx:Definition>
...
<fx:Definition name=defName>
<!-- Graphical children. -->
</fx:Definition>
</fx:Library>
<fx:Definition> 标签必须定义 name 属性。
在实例化该元素时，将使用该属性作为标签名。
<fx:Library>标签的语法如下：
<fx:Library>
<fx:Definition name=defName>
<!-- Non-visual declarations. -->
</fx:Definition>
...
<fx:Definition name=defName>
<!-- Non-visual declarations. -->
</fx:Definition>
</fx:Library>
<fx:Library> 标签必须是文档的根标签的第一个子对象。
每个文档只能有一个 <fx:Library> 标签。
<fx:Metadata>标签的语法如下：
<mx:Metadata>
<!-- Metadata tags go here. -->
</mx:Metadata>
请注意，在 <mx:Metadata> 块中只能插入 metadata 标签；不能插入 MXML 或 ActionScript 代码。
在 ActionScrip 类文件中使用 metadata 标签时，可以直接将 metadata 标签插入类定义中，而不必使用 <mx:Metadata> 标签。
在 MXML 文件中，可以将 metadata 标签与 ActionScript 代码一起插入 <mx:Script> 块，或将 metadata 标签插入 <mx:Metadata> 块。
<fx:Model><mx:Model> 标签放在 Flex 应用程序文件或 MXML 组件文件中。
该标签必须有一个 ID 值，它不能是 MXML 组件的根标签。
<mx:Model> 标签的语法如下：
<mx:Model id="modelID">
model declaration
</mx:Model>
或者:
<mx:Model id="modelID" source="fileName" />
source 为数据模型指定外部源（如文件）。
外部源可包含静态数据和数据绑定表达式。
source 属性中引用的文件位于服务器而非客户端计算机上。
编译器将读取源值，并将该源编译为应用程序；不会在运行时读取 source 值。
模型声明（内嵌在标签或源文件中）必须具有一个包含所有其它节点的单个根节点。
可以在模型声明中使用 MXML 绑定表达式，如 {stName.text}。
这样，就可以将表单字段的内容绑定到结构化数据表示形式。
<fx:Private>标签的语法如下：
<fx:Private>
<!-- Private declarations. -->
</fx:Private>
<fx:Private> 标签必须是根文档标签的子对象，并且必须是文件中的最后一个标签。