使用代码分离构建自定义组件
下面以一个TitleWindow的自定义组件为例:
1. 传统的创建自定义组件,是基于TitleWindow,建立一个mxml。
Login.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.PopUpManager;
protected function submit_clickHandler(event:MouseEvent):void
{
var usernameValue:String = username.text;
var passwordValue:String = password.text;
if(usernameValue == "" || passwordValue == "")
{
Alert.show("用户名或密码不能为空", "提示");
}
else if(usernameValue == "root" && passwordValue == "123")
{
Alert.show("登录成功", "提示");
PopUpManager.removePopUp(this);
}
else
{
Alert.show("用户名或密码不正确,请重新输入", "提示");
}
}
protected function closeWindow_clickHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self');
}
]]>
</fx:Script>
<s:Form>
<s:FormHeading label="用户登录"/>
<s:FormItem label="用户名:">
<s:TextInput id="username"/>
</s:FormItem>
<s:FormItem label="密码:">
<s:TextInput id="password"
displayAsPassword="true"/>
</s:FormItem>
</s:Form>
<s:Button id="submit"
x="25" y="168"
label="登录"
click="submit_clickHandler(event)"/>
<s:Button id="closeWindow"
x="138" y="168"
label="取消"
click="closeWindow_clickHandler(event)"/>
</s:TitleWindow>
这样,使用一个script标签来编写as代码,mxml代码和as代码混淆在一起,比较混乱,维护困难,看着也比较乱。
2. 有了缺点才有了解决方案,下面是通过代码分离的方式定义自定义。
1) 首先创建一个as文件,LoginAS.as
package components.control
{
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
import spark.components.Button;
import spark.components.Form;
import spark.components.TextInput;
import spark.components.TitleWindow;
public class LoginAS extends TitleWindow
{
public var username:TextInput;
public var password:TextInput;
public var submit:Button;
public var closeWindow:Button;
/**
* 构造器
*/
public function Login()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
}
/**
* 组件初始化完成后调用的函数
*/
protected function creationCompleteHandler(event:FlexEvent):void
{
submit.addEventListener(MouseEvent.CLICK, submit_clickHandler);
closeWindow.addEventListener(MouseEvent.CLICK, closeWindow_clickHandler);
}
/**
* 登录校验
*/
protected function submit_clickHandler(event:MouseEvent):void
{
var usernameValue:String = username.text;
var passwordValue:String = password.text;
if(usernameValue == "" || passwordValue == "")
{
Alert.show("用户名或密码不能为空", "提示");
}
else if(usernameValue == "root" && passwordValue == "123")
{
Alert.show("登录成功", "提示");
PopUpManager.removePopUp(this);
}
else
{
Alert.show("用户名或密码不正确,请重新输入", "提示");
}
}
/**
* 关闭浏览器
*/
protected function closeWindow_clickHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self');
}
}
}
2) 然后建立一个基于LoginAS的mxml文件,Login.mxml
<?xml version="1.0" encoding="utf-8"?>
<control:Login xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*" xmlns:control="components.control.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Form>
<s:FormHeading label="用户登录"/>
<s:FormItem label="用户名:">
<s:TextInput id="username"/>
</s:FormItem>
<s:FormItem label="密码:">
<s:TextInput id="password"
displayAsPassword="true"/>
</s:FormItem>
<s:Button id="submit"
x="25" y="168"
label="登录"/>
<s:Button id="closeWindow"
x="138" y="168"
label="取消"/>
</s:Form>
</control:Login>
这样,as代码和mxml代码分离,这样的好处是显而易见的,as文件负责逻辑,mxml负责展示,达到了分层开发的目的,后期容易维护,代码整洁,逻辑清晰。
注意:在进行代码分离的时候要注意两点,一是as中声明的组件变量名要与mxml文件中的组件id一一对应,并且组件类型要相同,二是as中的组件变量访问权限要设置为public。这样的话,在组件初始化的时候,就会给as中的组件变量进行实例化,然后在组件初始话完之后给组件注册事件。
本人初学flex,文中如有不当之处,请指出,谢谢。
分享到:
相关推荐
所以如果您想帮助我,请告诉我专注/动机/特点使用React Context API(需要16.3) 简约的方法验证方法不告诉你如何设计仅帮助您进行数据流形式,验证和输入完全相互分离构建为可组合的高阶组件专注于纯无状态组件支持...
内置代码引擎,采用配置化构建,所有部件都支持自定义,可单独使用引擎实现属于你自己的低代码平台,对标 Low-Code Engine。 IDE 提供本地离线服务,安全易接入,采用设计器和渲染器分离,不污染项目代码。 内置丰富...
自定义组件服务 第12章:安全 .NET安全架构 配置权限 编程式安全 Visual Studio 2005与安全 基于主体的安全 其他安全问题 附录A:基于接口的Web服务 附录B:统一Windows Forms和ASP.NET安全 附录C:反射和属性 附录D...
根据松耦合的原则,通过软件工程中样式展现与逻辑处理相分离,构建一套完整的组件库,该组件库可以使程序开发人员与美术人员的工作不再相互依赖,让频繁的需求变更不再过多的影响到项目开发的进度,有效提高前端Flash界面...
笔记: 依赖注入(Dagger)和视图注入(Butterknife) 可重用的自定义适配器,使用 RecyclerView,带有 Header View 交易列表 UI 的可重用自定义组件谷歌地图关注点分离使用 Jackson 库的 Json 解析器。 集中造型。 ...
它包含了一个简单但功能完善的插件系统,允许开发者轻松地添加新功能和自定义组件。 本项目采用 TypeScript 作为主要编程语言,提供了强类型检查和更好的代码提示,有助于提高开发效率和代码质量。同时,它还支持 ...
美元用于构建自定义USD工具的Qt组件当前分支兼容性主人:USD 19.07 应该与19.07 USD之后的dev分支兼容,包括 dev:USD 19.11+项目目标组成usdview的UI组件是功能性的很好参考,但它们是为应用程序专门构建的,并且以...
针对使用JSF构建的系统中经常遇到的大量的分页查询问题。结合JSF自定义呈现器组件技术实现分页查询呈现 器,从而迭到显示逻辑和业务逻辑的分离、代码重用以及易于维护的目的。
应用程序配置资源文件(定义页面导航规则、配置bean和其它的自定义对象,如自定义组件) 部署描述文件( web.xml ) 一组由应用程序开发者创建的自定义对象(有可能) 一些可能包含自定义组件、约束、...
16.2.1 构建数据访问组件 414 16.2.2 构建数据对象 417 16.2.3 显示绑定对象 418 16.2.4 更新数据库 419 16.2.5 更改通知 420 16.3 绑定到对象集合 422 16.3.1 显示和编辑集合元素 422 16.3.2 插入和移除集合...
使用实体组件体系结构明确分离关注点 轻松修改的摄像头系统 内置碰撞检测系统 预建平台游戏物理(即将推出) 音频,图像和精灵表管理 键盘,鼠标和游戏手柄支持 内置动画 可以用作Node.js模块或直接加载到浏览器中 ...
从上述代码中可以看出,在头部声明的时候,单文件页模型只包含Language=“C#”,而代码隐藏页模型包含了CodeFile=“Default.aspx.cs”,说明被分离出去处理事物的代码被定义在Default.aspx.cs中,示例代码如下所示。...
Spring Boot 集成的技术栈丰富,不同公司使用的技术框架大部分可以无配置集成,即使不行,也可以通过自定义 spring-boot-starter 进行快速集成。这就意味着 Spring Boot 的应用场景非常广泛,包括常见的 Web、SOA 和...
Java生成自定义控件源代码 2个目标文件 Java实现HTTP连接与浏览,Java源码下载 1个目标文件 摘要:Java源码,网络相关,HTTP Java实现HTTP连接与浏览,Java源码下载,输入html文件地址或网址,显示页面和HTML源文件...
现在 UI 呈现与天气提供者完全分离,以允许使用任何天气数据源,该组件目前带有 2 个天气提供者(WeatherBit 和 OpenWeather),您可以轻松创建自己的提供者并提供数据到组件,这两个提供者被构建为一个自定义的...
自定义组件样式属性 9.9节.同一个程序中使用多个主题 9.10节.编译主题SWC 9.11节.应用嵌入字体 9.12节.从SWF文件中嵌入字体 9.13 节. 嵌入图像的皮肤 9.14节.从SWF文件中嵌入皮肤 9.15节.编程实现组件应用皮肤 9.16 ...
它通过提供模块化组件,实时双向数据绑定,具有DOM映射的对象序列化,事件处理,托管组件绘制周期,CommonJS依赖管理,简化了丰富HTML5应用程序的开发,还有许多其他便利来帮助构建健壮的单页Web应用程序。...
构建脚本同样是代码50 工具50 Gruntjs51 测试库与工具51 Jasmine51 Karmarunner52 23组织文件和目录52 根目录52 进入源代码目录54 AngularJS的特定文件54 轻装上路56 深入测试目录57 文件命名约定57 24...
1、使用Visual Studio Code来编辑Delphi源代码,并具有完整的代码完成功能 2、LSP对Include文件的认识 3、自动重新启动LSP服务器 4、用Tab键自动完成代码 5、支持类辅助工具 6、赋值数组时的数组建议 七、Data 1、新...