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

来源：互联网发布：淘宝联盟自己买东西编辑：程序博客网时间：2024/06/05 04:03

a.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
  <![CDATA[
   import mx.managers.PopUpManager;
   private function onSendExpress(event:MouseEvent):void
   {
    var exp:b = new b();
    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>

b.mxml

<?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;

   [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>

Face,as

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

}

face.xml

<?xml version="1.0" encoding="utf-8"?>
<faces>
<face>
       <imageUrl>assets/images/2.gif</imageUrl>
</face>
<face>
       <imageUrl>assets/images/2.gif</imageUrl>
</face>
<face>
       <imageUrl>assets/images/2.gif</imageUrl>
</face>
</faces>