Flex4 创建自定义Event

 

以加载一个XML文档为例

 

首先创建一个名为DataLoader的ActionScript Class,用来处理数据加载和分析工作。

 

package net
{
	//events.ContentEvent为自定义的Event类
	import events.ContentEvent;
	import flash.events.ErrorEvent;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IOErrorEvent;
	import flash.events.SecurityErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import mx.collections.ArrayCollection;
	//添加元数据方便MXML代码提醒
	[Event(name="dataBack", type="events.ContentEvent")]
	[Event(name="dataError", type="events.ContentEvent")]
	public class DataLoader extends EventDispatcher
	{
		protected var _loader:URLLoader;
		
		public function DataLoader()
		{
			super();
			_loader = new URLLoader();
			_loader.addEventListener(Event.COMPLETE,onComplete);
			_loader.addEventListener(IOErrorEvent.IO_ERROR,onError);
			_loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onError);
		}

		public function load(url:String):void
		{
			_loader.load(new URLRequest(url));
		}
		
		protected function onComplete(event:Event):void
		{
			var users:ArrayCollection = new ArrayCollection();
			for each(var user:XML in XML(_loader.data).user)
			{
				users.addItem(user.@name+"-"+user.@site);
			}
			var ev:ContentEvent = new ContentEvent(ContentEvent.DATA_BACK);
			ev.users = users;
			dispatchEvent(ev);
		}
		protected function onError(event:ErrorEvent):void
		{
			var ev:ContentEvent = new ContentEvent(ContentEvent.DATA_ERROR);
			ev.error =event.text;
			dispatchEvent(ev);
		}
	}
}

 然后创建一个事件处理的自定义ContentEvent

 

 

package events
{
	import flash.events.Event;
	
	import mx.collections.ArrayCollection;
	
	public class ContentEvent extends Event
	{
		public static const DATA_BACK:String = "dataBack";
		public static const DATA_ERROR:String = "dataError";
		
		public var users:ArrayCollection;
		public var error:String;
		
		//框架
		public function ContentEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)
		{
			super(type,bubbles,cancelable);
		}
		//重写Clone 自定义Event必须重写Clone方法
		override public function clone():Event
		{
			var event:ContentEvent = new ContentEvent(type,bubbles,cancelable);
			event.users = users;
			event.error = error;
			return event;
		}
	}
}

 以上,DataLoader对于数据处理的逻辑就完成了,现在要创建一个MXML应用程序

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			    applicationComplete="init()" xmlns:net="net.*">

	<fx:Script>
		<![CDATA[
			import events.ContentEvent;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			import net.DataLoader;
			
			protected function init():void
			{
				var dataLoader:DataLoader = new DataLoader();
				dataLoader.addEventListener(ContentEvent.DATA_BACK,onData);
				dataLoader.addEventListener(ContentEvent.DATA_ERROR,onError);
				dataLoader.load("data/content.xml");
			}
			
			protected function onData(event:ContentEvent):void
			{
				userList.dataProvider = event.users;
			}
			protected function onError(event:ContentEvent):void
			{
				Alert.show(event.error,"Error!");
			}
		]]>
	</fx:Script>
	<s:Panel verticalCenter="0" horizontalCenter="0" title="Mix" width="450" height="300">
		<s:List id="userList" width="100%" height="100%"/>
	</s:Panel>
</s:Application>

 

 

关于传入的XML,在于data/content.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<users>
    <user name="" site=""/>
</users>

 的形式。

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以的。你可以使用JavaScript和HTML/CSS创建一个自定义的下拉列表框,并将其嵌入WPS中。WPS支持使用JavaScript和HTML/CSS创建自定义UI元素,只需要将代码嵌入到WPS中即可使用。以下是一个简单的示例代码,可供参考: ```html <!DOCTYPE html> <html> <head> <title>Custom Select Box</title> <style> /* Style for custom select box */ .custom-select { position: relative; display: inline-block; font-size: 16px; color: #000; width: 200px; height: 40px; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } .custom-select select { display: none; } .custom-select .select-selected { background-color: #FFF; padding: 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .custom-select .select-selected:after { content: "\25BC"; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #000; font-size: 16px; } .custom-select .select-items { position: absolute; background-color: #FFF; top: 100%; left: 0; right: 0; z-index: 99; display: none; max-height: 200px; overflow-y: auto; border: 1px solid #ccc; border-top: none; border-radius: 4px; } .custom-select .select-items div { padding: 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .custom-select .select-items div:hover { background-color: #f1f1f1; } </style> </head> <body> <div class="custom-select"> <select> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> <div class="select-selected">Select an option</div> <div class="select-items"> <div data-value="1">Option 1</div> <div data-value="2">Option 2</div> <div data-value="3">Option 3</div> <div data-value="4">Option 4</div> <div data-value="5">Option 5</div> </div> </div> <script> // Custom select box functionality var selectBox = document.querySelector('.custom-select'); var select = selectBox.querySelector('select'); var selectSelected = selectBox.querySelector('.select-selected'); var selectItems = selectBox.querySelectorAll('.select-items div'); selectSelected.addEventListener('click', function() { selectItems.forEach(function(item) { if (item.dataset.value === select.value) { item.classList.add('selected'); } else { item.classList.remove('selected'); } }); selectBox.classList.toggle('opened'); select.focus(); }); selectItems.forEach(function(item) { item.addEventListener('click', function() { var value = this.dataset.value; select.value = value; selectSelected.innerHTML = this.innerHTML; selectItems.forEach(function(item) { if (item.dataset.value === value) { item.classList.add('selected'); } else { item.classList.remove('selected'); } }); selectBox.classList.remove('opened'); }); }); document.addEventListener('click', function(event) { if (!selectBox.contains(event.target)) { selectBox.classList.remove('opened'); } }); </script> </body> </html> ``` 将以上代码保存为一个名为“custom-select.html”的文件,然后在WPS的菜单栏中选择“插入”->“网页”,在弹出的对话框中选择“custom-select.html”文件即可将自定义的下拉列表框插入到WPS中。 ### 回答2: 能够在WPS上使用自定义的列表框,只需将编写好的JavaScript和HTML/CSS代码嵌入到WPS的相关功能中即可。 首先,将你的JavaScript代码保存为一个.js文件,并在HTML文件中引用该文件,例如: ```html <script src="your_custom_list.js"></script> ``` 其次,编写HTML/CSS代码来创建列表框的外观和布局,例如: ```html <div class="custom-list"> <select id="my-select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> ... </select> </div> <style> .custom-list { width: 200px; height: 30px; background-color: #f2f2f2; border: 1px solid #ccc; border-radius: 5px; } #my-select { width: 100%; height: 100%; border: none; background-color: transparent; padding: 5px; } </style> ``` 最后,在WPS的相关功能中添加一个插入HTML代码的选项,并将上述HTML代码粘贴进去。在WPS中预览或保存后,你就可以看到你自定义的列表框,并能够使用它。 需要注意的是,WPS可能会有一些限制和安全设置,可能会影响到JavaScript和HTML的运行。但基本上,只要遵循常规的JavaScript和HTML/CSS编码规范,并确保在WPS中正确地引入和使用这些代码,你应该能够在WPS上使用自定义的列表框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值