FLEX学习笔记崔宏峰0309.docx
《FLEX学习笔记崔宏峰0309.docx》由会员分享，可在线阅读，更多相关《FLEX学习笔记崔宏峰0309.docx（29页珍藏版）》请在冰豆网上搜索。
FLEX学习笔记崔宏峰0309
FLEX学习笔记
贵
在
坚
持
崔二
宏零
峰一
一
年
二
月
十
七
一、配flex环境
需要软件：
1.jdk
2.tomcat
3.myeclipse
4.flexbuilder插件
5.blazeds.war
其它的安装比较简单。
只是装flexbuilder时注意。
有一步要选myeclipse的安装路径才行。
然后把D:
\ProgramFiles\adobe\AdobeFlashBuilder4Plug-in\eclipse下的features和plugins文件夹放在myeclipse的D:
\ProgramFiles\Genuitec\Common下（myeclipse8以后就是这种路径。
7好像是单独有一个eclipse文件夹），然后还有一个AMT文件夹放到D:
\ProgramFiles\Genuitec\MyEclipse-8.6\AMT文件夹（这个不知道是为啥）
（注：
也有人不拷贝这些。
只是像上边那样直接安装。
行不行有待考证）
二、建立采用flex的web工程
因为flex只是做为表示层展示，flex只接收java返回数据，那怎么和java服务端通信呢？
这时我们需要用到adobe公司开发的一个开源项目Blazeds。
Blazeds是一个基于服务器的Java远程控制（remoting）和Web消息传递（messaging）技术，以LGPL（LesserGNUPublicLicense）公共许可证书发布。
它能够使得后端的Java应用程序和运行在浏览器上的AdobeFlex应用程序相互通信。
在Java应用服务器上，它以servlet的形式存在，因此可以在任何标准Java网络应用中运用它。
下载好核心包解压出来就发现一个文件名是Blazeds.war，我们只需要把Blazeds.war改成Blazeds.rar然后解压就会出现：
1.打开Myeclise8.0新建一个javaweb工程，选择javaEE5.0如图
2.把blazeds解压后的2个文件夹覆盖到WebRoot下面，展开发现在WEB-INF目录下面多了flex文件夹，这个很重要主要是通信的4个配置文件。
如图：
3.web.xml的解说
xmlversion="1.0"encoding="UTF-8"?
>
DOCTYPEweb-appPUBLIC"-//SunMicrosystems,Inc.//DTDWebApplication2.3//EN""
BlazeDS
BlazeDSApplication
--HttpFlexSessionattributeandbindinglistenersupport监听Flex通信session-->
flex.messaging.HttpFlexSession
--MessageBrokerServletservices-config.xml这个配置文件重要，通信服务的主要配置文件-->
MessageBrokerServlet
MessageBrokerServlet
flex.messaging.MessageBrokerServlet
services.configuration.file
/WEB-INF/flex/services-config.xml
1
MessageBrokerServlet
/messagebroker/*
index.html
index.htm
--forWebSpheredeployment,pleaseuncomment-->
--
FlexMessagingWorkManager
wm/MessagingWorkManager
com.ibm.websphere.asynchbeans.WorkManager
Container
Shareable
-->
3.部署项目文件到tomcat里面。
这部重要因为下面要整合flex必须得启动服务。
我部署的服务器物理路径为：
D:
\ProgramFiles\ApacheSoftwareFoundation\Tomcat7.0\webapps\test。
把项目文件部署到tomcat下后（新安装一个tomcat服务器，不能用eclipse自带的）。
下边建立flex项目才能选。
4.转换为flex项目，首先选中你的web项目右键选择添加/更改项目类型，在选择添加flex项目类型
5.选服务器为j2ee，然后选择Blazeds
6.下一步配置你的服务器路径，上面说了我的项目发布到D:
\ProgramFiles\ApacheSoftwareFoundation\Tomcat7.0\webapps\test所以我下面就填如下信息
根文件夹就是服务物理路径，根URL就是你的访问路径，我这里tomcat的端口是8080所以就这样填，看你的端口而定然后在加上你的项目名称，上下文根目录就填项目名称就行了。
最后输出路径我把后面的目录改为flex。
记得点一下验证配置只有通过才有效
注：
解决创建的错误：
点重新重建html模板即可
7.新的问题又来了，src是java的源文件夹存java源代码地方，但是现在被flex给占用了
8.更改flex的项目源文件为flex_src，右键项目属性找到flex构键路径的主源文件夹把src改为flex_src
9.然后把src文件夹里面的flexweb.xml移动到flex_src文件夹里面，最终目录路径
三、准备工作完成了。
现在开始正式学习
学习ac3基础语法的在线手册
经验总结。
打开别人或者别的机器的eclipse工程一般会报错。
要重新建个工程。
然后把相应的程序和配置文件复制过去一般就不会报错了。
注意!
!
!
何为internal？
答：
internal是一个命名空间。
在此命名空间的调用必须处于同一个包才可以。
否则会报错。
如：
internalfunctioninit（）:
void{
styleArr.push（"ButtonClick"）;
styleArr.push（"HsliderValue"）;
cmbStyle.dataProvider=styleArr;
}
数据绑定?
答：
Flex实际上在编译的时候会产生一些Watcher代码去监视绑定标签所指定的表达式。
在运行的时候，当绑定源的属性得到修改，那么这个Watcher监视类就会触发change事件去执行绑定更新的工作。
在Flex中有三种绑定数据方式：
1、{} --这种最常用。
如
TextInputx="68"y="10"id="sText"/>
TextAreax="69"y="53"id="dText"width="205"text="{sText.text}"/>
绑定一个属性或者一段AS的表达式已经应用的非常普遍了。
偶尔我们需要用到绑定的是一个AS的函数，但是，绑定一个函数的时候很多人会碰到问题，为什么我的数据没有自动更新呢？
本人也曾经碰到过，看了开发文档才知道，原来忽略了一个细节问题。
就是在绑定函数的时候，通常情况下需要一个bindable的property作为该函数的参数。
如：
1.
xml version="1.0"?
>
2.
– binding/ASInBraces.mxml –>
3.Application xmlns:
mx="
4. Script>
5.
[CDATA[
6. [Bindable]
7. public var inString:
String; // 绑定此变量
8.
9. public function getNewText（sourceString:
String）:
String {
10. return sourceString.toUpperCase（）;
11. }
12. ]]>
13.
Script>
14. TextInput id="myTI" text="Enter text here"/>
15. Button label="Trigger Binding" click="inString=myTI.text;"/>
16. TextArea text="{getNewText（inString）}"/>
17.
Application>
click="inString=myTI.text;"――这种相当于直接执行一个表达式
TextArea text="{getNewText（inString）}"/>--这样写会自动执行这个函数。
然后取绑定过去的值
2、Binding>taginMXML
1.
xml version="1.0"?
>
2.
– binding/ASInBindingTags.mxml –>
3.Application xmlns:
mx="
4. Script>
5.
[CDATA[
6. public function whatDogAte（）:
String {
7. return "homework";
8. }
9. ]]>
10.
Script>
11. Binding source="’The dog ate my ‘+ whatDogAte（）" destination="field1.text"/>
12. Binding source="{’The dog ate my ‘+ whatDogAte（）}" destination="field2.text"/>
13. Binding source="The dog ate my {whatDogAte（）}" destination="field3.text"/>
14. TextArea id="field1"/>
15. TextArea id="field2"/>
16. TextArea id="field3"/>
17.
Application>
3、BindingUtilsmethodsinActionScript
这种方法是使用mx.binding.utils.BindingUtils类来实现的。
如：
BindingUtils.bindProperty（textarea,"text",textinput,"text"）;
就是直接绑定了两个输入框的text属性，还可以用bindSetter来绑定一个数据源和一个set函数。
如：
publicfunctionmySetterBinding（event:
FlexEvent）:
void{
varwatcherSetter:
ChangeWatcher= BindingUtils.bindSetter（setMyString,textInput2,"text"）;
}
这里就是将textInput2的text属性setter函数和setMyString函数绑定起来，
一旦textInput2的text被修改，那么将会触发setMyString函数。
[Bindable]是什么意思?
[Bindable]大概又是Flex用得最多的元数据了。
啥是元数据（metadata）首先要明白元数据不是语法的一部分，而是专门给编译器用的，说白了是告诉编译器做某些事情，学过java之类的应该知道。
那Bindable来讲，它的作用是告诉flex编译器，给某些某些东西建立绑定关系，flex编译器会在编译过程中给AS（flex编译器就是把mxml编译成as，再编译到swf，也可能直接编译倒swf，我这里假设有as这么个环节）加一点事件发生和处理之类的代码，由此绑定的关系便建立了，如果我们用纯粹as3代码来写也是可以实现的，就是太太太麻烦。
啥是绑定
举个例子：
给下面的public变量加上[Bindable]
[Bindable]
publicvarname:
String="";
作为一个public变量，肯定既可以被赋值，也能赋值给别的变量。
绑定的作用就是，当name改变的时候（被赋值了），可能通知其它被name影响（赋值给它们）的变量发生改变。
这里的“可能”就需要编译器来判断，这就是为什么元数据是给编译器用的原因了。
在mxml里用{}的语法的地方就是绑定的对象，比如label={xxx.name}，当name变化，label也跟着变化。
这样，我们只是很简单的改变了name的值，由于有绑定，界面上的label也跟着自动变化了，爽吧。
Eclipse下的flex插件技巧，
技巧一:
同类属性放一行。
比较整洁
Panelx="59"y="63"
width="400"height="250">
Panel>
技巧二：
在控件属性行里按“空格”，会出现这个控件的所有属性
技巧三：
Ctrl+”~”是代码界面和设置界面切换
技巧四：
Spark组件更方便的定义组件的样式。
它比较灵活.>型更适合简单的定义组件的样式
Panelx="59"y="63"
width="400"height="250">
Panel>
Panel>
Panel>
技巧五：
xmlversion="1.0"encoding="utf-8"?
>
Applicationxmlns:
fx="
xmlns:
s="library:
//
xmlns:
mx="library:
//
creationComplete="initApp（）"
minWidth="955"minHeight="600">
--这里的creationComplete="initApp（）"意思是最先执行这个函数
技巧六：
定义VO:
VO是跟数据库里表的映射，一个表对应一个VO ,也可以不完全相同。
即表10个字段。
VO5个字段
DAO是用VO来访问真实的表，对数据库的操作都在DAO中完成
O/RMapping是ObjectRelational Mapping（对象关系映射）的缩写。
通俗点讲，就是将对象与关系数据库绑定，用对象来表示关系数据。
在O/R Mapping的世界里，有两个基本的也是重要的东东需要了解，即VO，PO。
VO，值对象（ValueObject）
PO，持久对象（Persisent
Object），它们是由一组属性和属性的get和set方法组成。
从结构上看，它们并没有什么不同的地方。
但从其意义和本质上来看是完全不同的。
１．VO是用new关键字创建，由GC回收的。
PO则是向数据库中添加新数据时创建，删除数据库中数据时削除的。
并且它只能存活在一个数据库连接中，断开连接即被销毁。
２．VO是值对象，精确点讲它是业务对象，是存活在业务层的，是业务逻辑使用的，它存活的目的就是为数据提供一个生存的地方。
PO则是有状态的，每个属性代表其当前的状态。
它是物理数据的对象表示。
使用它，可以使我们的程序与物理数据解耦，并且可以简化对象数据与物理数据之间的转换。
３．VO的属性是根据当前业务的不同而不同的，也就是说，它的每一个属性都一一对应当前业务逻辑所需要的数据的名称。
PO的属性是跟数据库表的字段一一对应的。
PO对象需要实现序列化接口。
VO（valueobject）值对象
通常用于业务层之间的数据传递，和PO一样也是仅仅包含数据而已。
但应是抽象出的业务对象,可以和表对应,也可以不,这根据业务的需要.
不要纠结于什么O中，只需要大概明白什么意思。
并且应用到实际中就行了.vo是业务角度的抽象java表。
Po是一对一的数据表抽象表。
Dao负责具体的数据库操作。
一般包括增删改查等操作。
一般dao外面还有个接口类。
只定义空的方法。
没觉得有屁用。
上面讲这么多。
主要是想说一个事。
Flexas定义的vo.要和java的vo类的名字相同（当然字段名也最好一致，别给自己找麻烦）。
要不会报错。
Undefined错误。
出现这个现象的原因，一般是由于参数名称不匹配所致。
仔细检查一下你的as端的vo对象的名称，是否和java端接收对象的大小写完全一致，另外还须检查采用RemoteObject的时候，所用的java端方法名的首字母是否为小写（根据采用package不同而情况不一样）。
再有就是类型是否一致，比如as端用String类型，java端也一定要用String类型，as端用ArrayCollection类型，java端要用List类型等等，如果是用entity传递，那么as端的Object内容和java端的entity结构是否完全一致。
正确的方式为：
JAVA部分：
packagecom.test;
publicclassUserVo{
privateintid;
privateStringuser_id;
privateStringpassword;
publicintgetId（）{
returnid;
}
publicvoidsetId（intid）{
this.id=id;
}
publicStringgetUser_id（）{
returnuser_id;
}
publicvoidsetUser_id（StringuserId）{
user_id=userId;
}
publicStringgetPassword（）{
returnpassword;
}
publicvoidsetPassword（Stringpassword）{
this.password=password;
}
}
Flex部分：
packagecom.flex
{
[RemoteClass（alias="com.test.UserVo"）]
publicclassUserVo
{
//好像是如果是public型，那么就不用再写getter,setter方法
publicvarid:
int;
publicvaruser_id:
String;
publicvarpassword:
String;
//publicfunctiongetId（）:
int
//{
//returnid;
//}
//publicfunctionsetId（value:
int）:
void
//{
//id=value;
//}
//publicfunctiongetUser_id（）:
String{
//returnuser_id;
//}
//publicfunctionsetUser_id（value:
String）:
void{
//user_id=value;
//}
//publicfunctiongetPassword（）:
String{
//returnpassword;
//}
//publicfunctionsetPassword（value:
String）:
void{
//password=value;
//}
}
}
技巧七：
关于flex的命名空间
技巧八：
数据校验组件举例
必须定义在Declarations>区间内，source是校验的控件id
Declarations>
--将非可视元素（例如服务、值对象）放在此处-->
StringVali
升级会员 