使用TileList+TitleWindow组件开发聊天表情功能

      使用XML将表情图片的的存放路径进行配置，程序中通过加载这个XML文件获取到所有的聊天表情的图片信息。如下XML配置：

<?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，以指定的格式显示表情图片。

<?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的数据源。

[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[i].imageUrl;
        faceArray.push(f);
    } 
}

      代码中的Face是自定义的一个VO类，就一个成员字段，方便在TileList组件的ItemRenderer中使用而定义，如下：

package vo
{
    [Bindable]
    public class Face
    {
        public function Face()
        {
        }
        public var ImageUrl:String;
    }
}

      另外还需要实现TileList组件的项事件处理程序，点击其中某一项的时候做什么（这里点击一项则是发送该表情图片或动画）。

private function onItemClick(event:ListEvent):void
{
    var imageUrl:String = event.itemRenderer.data.ImageUrl;
    //实现将表情发送到对方聊天界面/自己的聊天窗口显示出来
    this.closeWindow();
}

private function closeWindow():void
{
    PopUpManager.removePopUp(this);
}

      在要弹出选择了表情的窗体中通过PopUpManager就可以实现动态弹出窗体，如下代码片段：

<?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代码：

<?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:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.managers.PopUpManager;
            import vo.Face;
            
            [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[i].imageUrl;
                    faceArray.push(f);
                } 
            }
            
            private function onItemClick(event:ListEvent):void
            {
                var imageUrl:String = event.itemRenderer.data.ImageUrl;
                //实现将表情发送到对方聊天界面/自己的聊天窗口显示出来
                this.closeWindow();
            }
            
            private function closeWindow():void
            {
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>
    
    <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>

            

版权说明

  本文属原创文章，欢迎转载，其版权归作者和博客园共有。  

  作      者：Beniao

 文章出处：http://beniao.cnblogs.com/  或  http://www.cnblogs.com/