Flex4 创建自定义Panel

这里将创建一个自定义的Panel，命名为TestPanel。

如果单机了TestPanel的标题，则有事件headerClick进行响应。

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  creationComplete="onThisCreationComplete()">
<fx:Metadata>
  [Event(name="headerClick")] //创建元数据，声明TestPanel会分配headerClick时间
</fx:Metadata>
<fx:Script><![CDATA[
  import flash.events.Event;
  import spark.skins.spark.PanelSkin;
  
  private function onThisCreationComplete():void {
    var panelSkin:PanelSkin = skin as PanelSkin;
    if (panelSkin == null) return;
    panelSkin.addEventListener(MouseEvent.CLICK,onHeaderClick);//panelSkin 添加鼠标单击事件
  }
  
  private function onHeaderClick(event:MouseEvent):void {
	if (event.currentTarget is PanelSkin) {//单击事件检查当年目标是否是 PanelSkin
       var ps:PanelSkin = PanelSkin(event.currentTarget);
       if (event.localY < 30) {
         dispatchEvent(new Event("headerClick"));
       } 
     }
  }
]]></fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="10" paddingTop="10"
      paddingBottom="10" paddingRight="10"/>
  </s:layout>
</s:Panel>