Flex 基础
来源:互联网 发布:网络教育有用吗 编辑:程序博客网 时间:2024/04/26 01:02
应用程序模型
简单的说Flex程序用MXML来实现界面设计,用ActionScript来实现程序逻辑。
Flex的MVC模型
为了增强系统的复用性和可维护性,应采用具有良好体系架构的模型,即Model-View-Controller(MVC)。
1、Model组件封装了数据和与数据有关的行为;
2、View组件定义了应用程序的用户界面;
3、Controller组件则负责处理程序中的数据连接。
web服务器的运用
通常会涉及到的web服务器类型有:
1、纯web服务器,它们仅将用户的请求回复一个静态HTML页面。在这种情况下,你需要将Flex应用程序的SWF文件嵌入一个HTML页面中。
2、web应用服务器,如JRun、ColdFusion或者PHP,它们可以动态的生成页面。在这种情况下将使用到与服务器技术相关的库,并动态的处理它们的内容。
3、J2EE应用服务器或servlet容器。向一个J2EE应用服务器或servlet容器发出请求,如JRun、Tomcat或WebSphere,通常你需要使用Flex Data Services。
程序开发的通常步骤
1、在一个文本编辑器或集成开发环境(IDE)中插入MXML根标签;
2、添加一个或多个容器;
3、在容器中添加控件,如输入栏、按钮和输出栏;
4、定义一种数据模型;
5、添加一个web服务器,HTTP服务器,或向远程Java对象发送请求;
6、为数据输入添加验证;
7、为组件添加脚本
8、将应用程序编译成SWF文件
发布应用程序
可以将应用程序发布成一个编译好的SWF文件,或者如果有Flex Data Service的话,则可以将应用程序发布为一组MXML和ActionScript文件。客户端进行访问的格式分别是:http://hostname/path/filename.swf http://hostname/path/filename.mxml
Flex编程模型
Flex包含了Flex类库、MXML和ActionScript编程语言,
ActionScript可以出色地完成如下任务:
1、处理事件
2、处理错误
3、在MXML语句中将数据对象绑定到Flex控件上
4、定制组件
使用数据绑定{}
使用事件去处理错误
<![CDATA[
public function showErrorDialog(error:String):void ...{
// 具体功能实现...
}
]]>
</mx:Script>
...
<mx:WebService id="WeatherService" ...">
<mx:operation name="getFoo"
fault="showErrorDialog(event.fault.faultString);"/>
</mx:WebService>
控制应用程序的外观
1、Sizes,即组件或应用程序的高度和宽度;
2、Styles,一组特性,如字体、排列方式、颜色等。它们都是通过层叠样式(CSS)来进行设置的;
3、Skins,可以改变组件视觉元素;
4、Behaviors,Flex组件在视觉或听觉效果方面的变化;
5、View state,通过修改它的基础内容,来改变组件或程序的内容和外观;
6、Transitions,定义屏幕上发生改变的视图状态。
使用数据服务器
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.
Flex Data Services
Flex Data Services在Java应用服务器上或Java容器中执行,提供如下所示的强大的功能:
1、增强的数据服务;
2、与多个客户端进行数据共享;
3、支持客户端到客户端的通信;
4、自动服务器数据推进;
5、客户端对服务器端资源的可靠访问;
6、数据服务日志;
7、增强的远程过程调用(RPC)功能。
Flex图表组件
1、Area charts---区域形图表
2、Bubble charts---气泡形图表
3、Candlestick charts---烛形图表
4、Column charts---柱形图表
5、HighLowOpenClose charts---高低开合形图表
6、Line charts---线形图表
7、Pie charts---饼形图表
8、Plot charts---标绘形图表
所有的图表控件都使用dataProvider属性去定义图表的数据。
MXML程序中的ActionScript的使用方法
1、在<mx:Script>标签中插入ActionScript代码块;
2、调用存储在system_classes目录结构中的全局ActionScript功能函数;
3、引用user_classes中的外部类和包来处理更为复杂的任务;
4、使用标准Flex组件;
5、使用ActionScript类扩展已有的组件;
6、使用ActionScript创建新的组件;
7、在Flash创建环境中创建新的组件(SWC文件)。
创建ActionScript组件
...{
public class MyButton extends Button ...{
public function MyButton() ...{
...
}
...
}
}
xmlns:cmp="myControls.*" >
<cmp:MyButton label="Jack"/>
</mx:Application>
一个样例代码:
<!--MXML root Element-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function Duplicate():void...{
myArea.text=myInput.text;
}
]]>
</mx:Script>
<!--Define a Panel to contain other components-->
<mx:Panel title="My Application" paddingTop="10" paddingRight="10" paddingBottom="10"
paddingLeft="10">
<mx:Label text="Hello World" fontWeight="bold" fontSize="24"/>
<!--Get user input-->
<mx:TextInput id="myInput" text="" width="150"/>
<!--Display user's input-->
<mx:TextArea id="myArea" text="" width="150"/>
<!--To invoke the copy action to happen-->
<!--
<mx:Button id="myButton" label="Copy Text" click="{myArea.text=myInput.text}"/>
-->
<mx:Button id="myButton" label="Copy Text" click="Duplicate()"/>
<!--Use Data Binding-->
<mx:TextArea id="myDisplay" text="{myInput.text}" width="150"/>
</mx:Panel>
</mx:Application>
- Flex 基础
- Flex 基础
- flex基础
- Flex基础
- flex 基础
- Flex基础-----之Flex数据模型
- [flex module]Flex Module基础
- flex基础(1)
- flex基础(2)
- flex基础(3)
- Flex 101: RPC基础
- Flex基础控件--Button
- Flex基础控件--ComboBox
- Flex基础控件--DateField
- flex的基础
- Flex基础知识点
- Flex基础-----之DataProvider
- 【Flex基础功能】MenuBar
- UTF-8 字符处理在 Web 开发中的应用
- JNLP介绍
- GB/BIG5/UTF-8 文件编码批量转换程序
- DB2的分页高效率实现总结
- IE中bordercolorlight的CSS实现
- Flex 基础
- 企业集成与 Web Services 和 BPEL
- 网页设计技巧类网站收集
- 怎样提高你的Google Adsense收入
- 获取页面高度,窗口高度,滚动条高度等参数值
- Linux系统环境下的Socket编程详细解析 (3)
- Web打印的实现方法
- 利用WebBrowser彻底解决Web打印问题
- Linux系统环境下的Socket编程详细解析 (4)