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

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>