混沌未开,顾名思义就是匹萨店里面烘烤的色香味俱全的一个pizza大饼,在一个面饼的底板上,混合所有的原料。 Lets make Pizza!
Flex与生俱来的是它的事件驱动(event-driven)的特点。就是说,Flex可以使用它的标签做到任何事情。因此开发一个Flex应用程序最简单,最基础的方法就是使用Flex标签,先来看看代码。
Loginview,用户界面部分:
<mx:Form id=”loginForm” x=”0″ y=”0″>
<mx:FormItem label=”Username:” >
<mx:TextInput id=”username” />
</mx:FormItem>
<mx:FormItem label=”Password:” >
<mx:TextInput id=”password” displayAsPassword=”true” />
</mx:FormItem>
<mx:FormItem direction=”horizontal” verticalGap=”15″ paddingTop=”5″ width=”170″>
<mx:Button id=”loginBtn” label=”Login” click=”login()”/>
</mx:FormItem>
</mx:Form>
使用 <mx:RemoteObject> 标签调用远程服务:
<mx:RemoteObject id=”loginReq” destination=”flexmvcRO”>
<mx:method name=”login” result=”loginHandler(event)” fault=”mx.controls.Alert.show(event.fault.faultString)”>
<mx:arguments>
<userName>{username.text}</userName>
<password>{password.text}</password>
</mx:arguments>
</mx:method>
</mx:RemoteObject>
现在,在login方法中发送请求:
if(Validator.validateAll(validators).length == 0){
loginReq.login.send();
}
在发送请求之后,需要建立一个返回结果的处理方法:
private function loginHandler(event:ResultEvent):void{
var isLogin:Boolean = event.result as Boolean;
if(isLogin){
this.parentApplication.viewStack.selectedIndex=1;
dispatchEvent(new LoginUserEvent(username.text));
}
}
最后,在页面之间建立联系,在这里我使用播送事件:
dispatchEvent(new LoginUserEvent(username.text));
播送用户自定义的事件,就必须在代码最前面写入下述的元标签代码:
<mx:Metadata>
[Event(name="loginUser", type="flash.events.Event")]
</mx:Metadata
然后,建立用户自定义的事件LoginUserEvent.as:
import flash.events.Event;
public class LoginUserEvent extends Event
{
public static const LOGINUSEREVENT:String =”loginUser”;
public var loginUserName:String = “”;
public function LoginUserEvent(userName:String)
{
super(LOGINUSEREVENT, true, true);
this.loginUserName = userName;
}
override public function clone():Event {
return new LoginUserEvent(loginUserName);
}
当登录成功后,密友列表页面将会显示,BuddyListVew.mxml:
重要的是在列表代码中,首先要监听LoginUserEvent,因此要创建一个preinitialize的方法:
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” title=”Buddy List of {loginUserName}” preinitialize=”init()” width=”500″ height=”320″>
private function init():void{
this.parentApplication.addEventListener(LoginUserEvent.LOGINUSEREVENT, getUserName);
}
然后完成事件监听的管理程序:
private function getUserName(event:LoginUserEvent):void{
loginUserName = event.loginUserName;
loginReq.getAllFriends.send();
}
发送获得全部密友列表的请求,并且创建对应的管理方法:
private function getAllFriendsHandler(event:ResultEvent):void{
mybuddyList = event.result as ArrayCollection;
}
在代码中,必须包含定义远程对象的标签:
<mx:RemoteObject id=”loginReq” destination=”flexmvcRO”>
<mx:method name=”getAllFriends” result=”getAllFriendsHandler(event)” fault=”mx.controls.Alert.show(event.fault.faultString)”>
<mx:arguments>
<userName>{loginUserName}</userName>
</mx:arguments>
</mx:method>
</mx:RemoteObject>
使用Flex标签完成程序方法非常简单,并且对于简单的系统来说, 也是非常有效,其商务逻辑层也不复杂。但在实际的应用中,并非只存在这样的项目,相反,实际工作中往往需要大量的远程对象的通讯。
好了,来看看:中央管理-Flex Central Management.
分享到:
相关推荐
flex开发系列书籍:WebGIS开发实战-Flex篇.pptx
AEC-Q200-005A:2010 Board Flex - Terminal Bond Strength Test - 完整英文电子版(5页).zip
flex开发系列书籍:基于Flex的虚拟仿真实验系统.pdf
@ twilio-labs / plugin-flex Twilio CLI插件可与进行交互该插件为添加了功能,以便在本地开发,构建和部署; 它使用 。要求安装Twilio CLI 通过npm或yarn : $ npm install -g twilio-cli$ yarn global add twilio-...
flex开发系列书籍:基于Flex的统计分析平台的设计与实现.kdh
flex开发系列书籍:Flex+4.0+RIA开发详解讲义.ppt
flex-direction: row; } .nav { flex-wrap: wrap; justify-content: center; padding-top: 20rpx; background: #fff; } .nav-item { margin: 30rpx 50rpx 10rpx; width: 80rpx; } .nav-item image { ...
动画演示flex布局,包括flex父容器属性以及flex布局子元素...flex-start:侧轴开始 flex-end:侧轴结束 center:居中 stretch:拉伸(默认值) 四. justify-content 子盒子主轴方向上的对齐方式 等,字数不够,无法一一列举
wxflex 微信小程序的Flex布局demo-4种必备常用的Flex布局模式 微信小程序开发论坛 垂直微信小程序开发交流社区:http://weappdev.com 官方建议的Flex布局 > Flex的布局相比传统的float布局来... align-self: flex-end;
FlexBox-flex-direction:flex,inline-flex。 弹性方向
基于VS2017编译的64位 Gstreamer 1.16.2 。编译工具: gst_build 支持项目: FFmpeg: YES dssim: NO gl-headers: YES ... win-flex-bison-binaries: YES win-nasm: YES x264: YES zlib: YES
flex开发系列书籍:Cairngorm_MVC_框架
主要给大家介绍了CSS中的display:flex和display:inline-flex属性,文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。
非常好DEMO参考,这个项目已经转到Apache名下了,最新的版本1.2,308个例子,已经全站打包,搜索:flex-tour-de-flex-component-explorer-1.2-308demo。开源代码http://flex.apache.org/download-tourdeflex.html
非常好DEMO参考,这个项目已经转到Apache名下了,最新的版本1.2,308个例子,已经全站打包,搜索:flex-tour-de-flex-component-explorer-1.2-308demo。开源代码http://flex.apache.org/download-tourdeflex.html
产品核心将覆盖Flex产品自身的体系架构分析,包括 SDK,编译器和播放器分析,工具及数据服务则包括围绕Flex的应用开发工具Flex Builder,Flash Catalyst,设计师和开发人员工作流,以及Flex与后台应用数据服务...
Food-Blog-Template --- Using-Flex-Box:食品博客模板-使用Flex Box
-ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgba(0,0,0,0.5); font-size: 2rem; min-height: 100%...
\基于RIA的管理信息系统开发技术及其应用.kdh
NULL 博文链接:https://yuchengj-824316079-qq-com.iteye.com/blog/1184429