`
wangcheng
  • 浏览: 1464789 次
  • 性别: Icon_minigender_1
  • 来自: 青岛人在北京
社区版块
存档分类
最新评论

CodeBehind and DI 分离MXML中的ActionScript

阅读更多

你是否开始厌倦在 mxml 中写 <mx:Script></mx:Script> 代码块?
你是否有通用的业务方法,要在多个mxml中使用?
你是否想过,让mxml专门负责页面效果,而让as文件去负责业务?

 

下面的方法将提供一种方案

 

1. 创建一个工程叫asCodeBehind


2. 创建package


3. 创建一个as文件叫LoginPage.as

 

package cee.view {
	
	import mx.containers.Canvas;
	import mx.controls.Alert;
	import mx.controls.Button;
	import mx.controls.TextInput;

	public class LoginPage extends Canvas {

		private var _userNameInput : TextInput;
		
		private var _passwordInput : TextInput;
		
		private var _loginBtn : Button;
				
		public function LoginPage() {
			super();
		}
		
		public function doLogin() : void {
			var message : String = " UserName : " + _userNameInput.text;
			message += "\n Password : " + _passwordInput.text;
			Alert.show(message);
		}

		public function set userNameInput(textInput : TextInput) : void {
			this._userNameInput = textInput;
		}
		
		public function set passwordInput(textInput : TextInput) : void {
			this._passwordInput = textInput;
		}
		
		public function set loginBtn(btn : Button) : void {
			this._loginBtn = btn;
		}
	}
}

 

4. 创建一个mxml文件叫LoginPageView.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<LoginPage xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns="cee.view.*" 
	styleName="greenBorderCanvas"
	width="382" height="252">
	
	<mx:Label x="57" y="78" text="Username"/>
	<mx:TextInput id="userNameInput" x="151" y="76"/>
	
	<mx:Label x="57" y="120" text="Password"/>
	<mx:TextInput id="passwordInput" x="151" y="118" displayAsPassword="true"/>
	
	<mx:Button id="loginBtn" x="151" y="178" label="Login" styleName="commandButtonBlue" 
		click="doLogin()" />
	
	<mx:Button x="246" y="178" label="Cancel" styleName="commandButtonBlue"/>
	
</LoginPage>
 

5. 要注意的几点是:

  • mxml的父类是LoginPage.as
  • mxml中几个组件的id名字,要对应LoginPage.as中的 set xxx 方法
  • LoginPage.as中的组件(TextInput, Button)在被Flex加载之前都是null

 

6. 主程序如下

 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	xmlns:view="cee.view.*">
	
	<mx:Style source="assets/style/style.css"/>
	
	<view:LoginPageView verticalCenter="0" horizontalCenter="0"/>
	
</mx:Application>
 

运行看看效果吧。这样就分离了表现层的mxml和逻辑的ActionScript代码

 

参考

 

http://www.onflex.org/ted/2007/02/code-behind-in-flex-2.php

 

http://www.adobe.com/devnet/flex/articles/dependency_injection.html

 

  • src.zip (2.6 KB)
  • 下载次数: 45
分享到:
评论
2 楼 seraphwh 2010-05-27  
为什么不是反过来,由AS继承MXML,最后引用AS呢?private变量和SET方法不就不需要了?
1 楼 gznofeng 2009-08-25  

相关推荐

    原创:实现view(mxml)和代码分离的好方法

    通过上述方法,我们可以有效地将用户界面的定义(MXML)与逻辑代码(ActionScript)进行分离,这不仅简化了MXML文件,也使得代码更加模块化、易于维护。同时,这种方法避免了使用重型框架所带来的额外负担,适用于...

    STRUTS2:零配置插件CodeBehind

    本文将详细介绍Struts2中的两个插件——Zero Config(零配置)与CodeBehind,以及它们如何共同工作以减少配置文件的复杂度。 #### 二、Zero Config插件介绍 Zero Config插件的主要目的是减少甚至消除`struts.xml`...

    Migrate an ASP.NET 1.1 Web Page Using the CodeBehind Attribute to ASP.NET 2.0

    在 ASP.NET 2.0 中,引入了一种新的 Web 页面代码隐藏模型,它基于部分类(partial classes),这种模型可以更好地分离页面的标记与代码。 #### 迁移步骤详解 1. **理解 ASP.NET 2.0 中的新代码隐藏模型** - 在 ...

    ASP.Net中程序构架与程序代码的分离

    CodeBehind是ASP.NET中实现代码分离的关键技术之一。它允许开发者将界面设计与业务逻辑代码分离开来,使得HTML代码与C#或VB.NET代码分别存在于不同的文件中。例如,在上面提到的例子中,`Example1.aspx`文件包含了...

    ASP.NET中的Inherits、CodeFile、CodeBehind的区别详解

    在 ASP.NET 中使用代码隐藏方法来设计Web 窗体,可使页代码能够更清晰地从 HTML 内容中分离到完全单独的文件中。 通常一个 @page 指令如下: 代码如下:&lt; %@ Page language=”c#” Codebehind=”WebForm1.aspx.cs...

    struts2-codebehind-plugin-2.3.1.2.jar

    struts2-codebehind-plugin-2.3.1.2.jar

    struts2-codebehind-plugin-2.1.6.jar

    struts2-codebehind-plugin-2.1.6.jar

    struts2-codebehind-plugin-2.0.11.1.jar的简易使用

    博文链接:https://xuxiannian.iteye.com/blog/233790

    struts2.1.6-codebehind-plugin.api.chm

    struts2.1.6-codebehind-plugin.api.chm 自己打包 javadoc文档

    修改的CodeSmith生成MVC4项目工程模板

    2)修改后的版本可以直接生成VS2010解决方案,并且生成的web工程可以直接在VS中打开,不需要手动添加到项目工程中; 3)生成的Global.asax中的 &lt;&#37;&#64; Application Codebehind="Global.asax.cs" Inherits=...

    jxl.jar;dom4j.jar;jsonplugin-0.34.jar;junit-3.8.2.jar;log4j-1.2.14.jar;struts2-codebehind-plugin-2.0

    CodeBehind插件可能是Struts2的一个扩展,它可能提供了将业务逻辑代码与视图分离的能力,增强代码的可维护性和可测试性。Struts2的核心特性包括拦截器、动作类、结果类型等,使得开发者可以更加规范和高效地构建Web...

    动网新闻.net

    ?...  ?...Aspx文件全部采用codebehind进行代码分离,界面修改容易  ?CSS过滤功能,可过滤word生成的html和从其它网站copy的html的样式表 首次使用:管理员账号admin,密码admin,请登陆后修改。

    动网新闻.Net

    ...·Aspx文件全部采用codebehind进行代码分离,界面修改容易 ·CSS过滤功能,可过滤word生成的html和从其它网站copy的html的样式表 ·会员功能,会员属于会员组,可设置指定会员组有权阅读新闻

    思锐文章.Net

    Aspx文件全部采用codebehind进行代码分离,界面修改容易 网站设计人员可以自行定制文章和文章列表的样式,使用同样的思锐文章管理.net 可以设计出风格迥异的网站 部分内容制作成userControl,用户可以自己选择...

    Kid编写的线型图源代码(C#).7z

    Codebehind是ASP.NET或WPF(Windows Presentation Foundation)开发中的一种常见模式,它将UI(用户界面)元素的声明与事件处理程序和其他逻辑代码分离。在这种模式下,代码通常写在单独的.CS文件中,与.XAML或.aspx...

    iwms新闻系统整站下载

    系统主要功能: ...·网站调查功能 ·广告管理系统,广告分组按权限随机显示 ...·aspx文件全部采用codebehind进行代码分离,界面修改容易 ·友情链接功能,可设置分类,链接是否做为首页链接 ····

    新闻发报系统

    3.Aspx文件全部采用codebehind进行代码分离,界面修改容易。 4.系统管理员可设置默认风格,用户可自由选择系统风格。 5.可设推荐新闻和首页新闻. 6.可设置首页滚动图片,并自动生成缩略图。 7....

Global site tag (gtag.js) - Google Analytics