说起来好像我好久没有在这里讨论任何关于Flex的消息了,其实是天天都在和Flex密会,无暇和大家分享而已,这不这么多时间做东西,因为需要实现了不少有用的组件,今天有空,就发出来和大家共享下了。

一、AutoQueryTextInput

首先要说的是这个AutoQueryTextInput组件,做Web开发的应该都有用过这也的组件,就是在用户边输入内容,自动根据用户数据从后台取回数据,并显示一个下拉列表提示用户,以自动补齐或动态查询。这个AutoQueryTextInput组件实现这一功能的Flex实现。另外考虑到后台获取数据的方式的诧异性,实际的后台数据获取是由用户自己实现(监听query事件并向后台获取数据),然后在数据获取到后,将获取的数据赋值给AutoQueryTextInput.serviceData。下面是一个示例:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:eshangrao="http://www.eshangrao.com">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			private function doQuery():void{
				var data:ArrayCollection=new ArrayCollection();
				for(var i:int;i<6;i++){
					var obj:Object=new Object();
					obj.ID=i;
					obj.label=aqti.text+"index:"+i;
					data.addItem(obj);
				}
				aqti.serviceData=data;//获取到数据后,显示提示列表
			}
			private function serviceDataShowFunction(item:Object):String{
				return item.ID+"-"+item.label;
			}
		]]>
	</mx:Script>
	<mx:Form>
		<mx:FormItem label="test:">
			<eshangrao:AutoQueryTextInput id="aqti" query="doQuery()" serviceDataShowType="{AutoQueryTextInput.SHOW_CUSTOM}" serviceDataShowFunction="{serviceDataShowFunction}"/>
		</mx:FormItem>
	</mx:Form>
</mx:Application>

二、SystemFontsRichTextEditor

SystemFontsRichTextEditor组件的功能很简单,就是一个会自动读取您的系统当前可用字体列表并添加到字体选择框的RichTextEditor

三、AttachFileRichTextEditor

AttachFileRichTextEditor组件在前面的SystemFontsRichTextEditor基础上增加了一个可以添加附件按钮(一个回行针),可以用来向文本中添加附件,用户点击添加附件会弹出一个文件选择框供用户选择文件,选择文件后并不立刻上传文件,而是在实际要上传文件时(接受文件上传的服务地址设置在:serviceURL中),直接调用uploadAttaches()来上传文件,如果存在文件在服务端需要重新命名的,服务端必须返回附件的新的文件名(必须设置isServerReturnData=true),所有的文件上传完毕后会触发一个attachedUploaded事件,您可以监听该事件来进行文件上传完毕的后续处理。

同样的如果存在已经上传了文件,也可将这些文件的文件名列表赋值给oldAttaches,这样AttachFileRichTextEditor就会自动显示已经上传的附件,并支持用户直接点击下载(需要设置downloadServicePath属性,用于标识文件的存放位置),注意这里有一个attachesReadonly属性,如果该值为True,那么附件不能删除,只能下载,否则可以删除附件,但是这个删除只是在UI上的一个删除附件显示,实际的删除后台文件,需要监听removeAttachEvent事件来实际向后台发起删除文件操作等。

以上组件已经包含入Plum中,点击这里下载源码及二进制SWC包。除了上面的组件,Plum还提供了很多其他组件(多年项目积累),发掘Plum的宝藏及查看详细的组件用法请访问Plum API文档