使用TileList+TitleWindow组件开发聊天表情功能
2010-05-17 17:52
549 查看
使用TileList+TitleWindow组件开发聊天表情功能
使用XML将表情图片的的存放路径进行配置,程序中通过加载这个XML文件获取到所有的聊天表情的图片信息。如下XML配置:CODE:<?xml version="1.0" encoding="utf-8"?> <faces> <face> <imageUrl>Images/face/bq_001.png</imageUrl> </face> <face> <imageUrl>Images/face/bq_002.png</imageUrl> </face> <face> <imageUrl>Images/face/bq_003.png</imageUrl> </face> <faces>聊天表情通过TitleWindow组件实现,方便做弹出式窗体。在TitleWindow放置一个 TileLis并设置其ItemRenderer,以指定的格式显示表情图片。CODE:
<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="460" height="300" showCloseButton="true" title="聊天表情" close="closeWindow()" creationComplete="init()"> <mx:TileList x="0" y="0" width="100%" height="100%" id="faceList" dataProvider="{faceArray}" itemClick="onItemClick(event)"> <mx:itemRenderer> <mx:Component> <mx:Image source="{data.ImageUrl}"/> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:TitleWindow>在此窗体初始化的时候就加载XML,读取出里面的配置信息放入数组。并将读出的数据设置为 TileList的数据源。CODE:
[Bindable] private var faceArray:Array; private function init():void { var loader:URLLoader = new URLLoader(); loader.addEventListener(Event.COMPLETE,handlerComplete); loader.load(new URLRequest("data/face.xml")); } private function handlerComplete(event:Event):void { var xml:XML = new XML(event.target.data); faceArray = new Array(); for(var i:Number = 0;i <xml.children().length();i++) { var f:Face = new Face(); f.ImageUrl = xml.face.imageUrl; faceArray.push(f); } }代码中的Face是自定义的一个VO类,就一个成员字段,方便在TileList组件的ItemRenderer中使用而定义,如 下:CODE:
package vo { [Bindable] public class Face { public function Face() { } public var ImageUrl:String; } }另外还需要实现TileList组件的项事件处理程序,点击其中某一项的时候做什么(这里点击一项则是发送该表情图片或动画)。CODE:
private function onItemClick(event:ListEvent):void { var imageUrl:String = event.itemRenderer.data.ImageUrl; //实现将表情发送到对方聊天界面/自己的聊天窗口显示出来 this.closeWindow(); } private function closeWindow():void { PopUpManager.removePopUp(this); }在要弹出选择了表情的窗体中通过PopUpManager就可以实现动态弹出窗体,如下代码片段:CODE:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="assets/css/common.css"/> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; import components.Expression; private function onSendExpress(event:MouseEvent):void { var exp:Expression = new Expression(); exp.x = 90; exp.y = 100; PopUpManager.addPopUp(exp,this,false); } ]]> </mx:Script> <mx:TextArea x="102" y="255" width="430" height="138"/> <mx:TextInput x="102" y="423" width="341"/> <mx:Button x="454" y="423" label="发送消息"/> <mx:LinkButton x="102" y="397" label="聊天表情" click="onSendExpress(event)" color="#8028AE"/> </mx:Application>以下是完整的表情窗体Flex代码:*** Hidden to visitors ***下面贴出运行效果:
ChatExpress.jpg
相关文章推荐
- 使用TileList+TitleWindow组件开发聊天表情功能
- 使用TileList+TitleWindow组件开发聊天表情功能
- 使用TileList+TitleWindow组件开发聊天表情功能
- IOS开发之使用Speex格式实现简单的语音聊天功能(二)
- IOS开发之使用Speex格式实现简单的语音聊天功能(二)
- Ionic2 使用JMessage进行即时聊天功能的开发
- IOS开发之使用Speex格式实现简单的语音聊天功能(一)
- IOS开发之使用Speex格式实现简单的语音聊天功能(一)
- Flex 自定义组件 -- 弹出窗口 [PopUpManager TitleWindow 组件]的使用
- Ionic2 使用JMessage进行即时聊天功能的开发
- [Asp.net 开发系列之SignalR篇]专题二:使用SignalR实现酷炫端对端聊天功能
- 如何使用友盟 Cocos2d-x 分享组件实现 Android/iOS 分享功能
- React-Native开发:react-native-file-selector选择文件组件的使用(安卓)
- 32Spannable的使用(Android显示html带图片 (表情开发))
- 使用Delphi Xe8 开发微信功能 -- (一)微信支付商户平台之对账单下载
- 使用Delphi Xe8 开发微信功能 -- (三)微信支付商户平台之查询退款详情
- kendo-ui的使用和开发自己的组件(思路清晰)
- 使用图灵机器人接口开发微信公众号聊天功能
- .NET开发邮件发送功能的全面教程(含邮件组件源码)
- 使用定制开发的CHROME内置集成SSH功能实现代理