高级弹出框

superTitleWindow：

<?xml version="1.0" encoding="utf-8"?>
<!--作者：黄记新-->
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      cornerRadius="6"
      close="titlewindow1_closeHandler(event)"
      mouseDownOutside="{dispatchEvent(new CloseEvent(CloseEvent.CLOSE))}"
      xmlns:components="view.components.*" alpha="0.85">
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <fx:Declarations>
  <!-- 将非可视元素（例如服务、值对象）放在此处 -->
 </fx:Declarations>
 <fx:Metadata>
  [Event("indexChanged",type="flash.events.Event")]
 </fx:Metadata>
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.CloseEvent;
   import mx.events.FlexEvent;
   import mx.managers.PopUpManager;
   
   import view.components.event.SuperDataGroupEvent;
  
   //数据组的数据源
   [Bindable]
   public var dataProvider:ArrayCollection=new ArrayCollection([{url: "assets/css/blue/icons/disc.png", title: "首页"}, {url: "assets/css/blue/icons/dvddrive.png", title: "组织架构"}, {url: "assets/css/blue/icons/fax.png", title: "传真机"}, {url: "assets/css/blue/icons/floppy.png", title: "打印机"}, {url: "assets/css/blue/icons/floppydrive.png", title: "打印机 光驱"}, {url: "assets/css/blue/icons/camera.png", title: "SLR 摄像机"}, {url: "assets/css/blue/icons/disc.png", title: "DVD 索尼"}, {url: "assets/css/blue/icons/dvddrive.png", title: "DVD 光驱"}, {url: "assets/css/blue/icons/fax.png", title: "传真机"}, {url: "assets/css/blue/icons/floppy.png", title: "打印机"}, {url: "assets/css/blue/icons/floppydrive.png", title: "打印机 光驱"}, {url: "assets/css/blue/icons/camera.png", title: "SLR 摄像机"}, {url: "assets/css/blue/icons/disc.png", title: "DVD 索尼"}, {url: "assets/css/blue/icons/dvddrive.png", title: "DVD 光驱"}, {url: "assets/css/blue/icons/fax.png", title: "传真机"}, {url: "assets/css/blue/icons/floppy.png", title: "打印机"}, {url: "assets/css/blue/icons/floppydrive.png", title: "打印机 光驱"}, {url: "assets/css/blue/icons/imac.png", title: "苹果 iMac"}]);
   
//   [Bindable]
//   public var dataProvider:ArrayCollection=null;

   private var _selectedIndex:int;

   [Bindable]
   public function get selectedIndex():int
   {
    return _selectedIndex;
   }

   public function set selectedIndex(value:int):void
   {
    _selectedIndex = value;
   }

   //窗体关闭函数
   protected function titlewindow1_closeHandler(event:CloseEvent):void
   {
    dataProvider=null;
    PopUpManager.removePopUp(this);
   }

   //Called when the item in the dataGroup is clicked on.
   protected function imagesDataGroup_item_clickHandler(event:SuperDataGroupEvent):void
   {
    selectedIndex=event.index;
    
    dispatchEvent(new Event("indexChanged"));
   }
  ]]>
 </fx:Script>
 <s:Rect id="tbFill"
   left="0"
   right="0"
   top="0"
   bottom="0">
  <s:fill>
   <s:LinearGradient rotation="90">
    <s:GradientEntry color="0xa3acb1"/>
    <s:GradientEntry color="0x656f78"/>
   </s:LinearGradient>
  </s:fill>
 </s:Rect>

 <s:SkinnableContainer width="100%"
        height="100%">

  <components:SuperDataGroup1 id="imagesDataGroup"
         top="60"
         left="60"
         right="60"
         bottom="60"
         width="100%"
         height="100%"
         dataProvider="{dataProvider}"
         alpha="1"
         item_click="imagesDataGroup_item_clickHandler(event)"
         itemRenderer="assets.css.blue.skins.itemrenderers.ImageRender">
   <components:layout>
    <s:TileLayout horizontalGap="60"
         horizontalAlign="center"
         verticalAlign="middle"
         verticalGap="60"/>
   </components:layout>
  </components:SuperDataGroup1>
 </s:SkinnableContainer>

</s:TitleWindow>

 

NavModule：

<?xml version="1.0" encoding="utf-8"?>
<!--//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
//_/_/  jixin_huang，2010
//_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/-->
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx"
     layout="vertical"
     verticalGap="0"
     width="100%"
     height="100%"
     creationComplete="onCreateComplete(event)"
     implements="com.kingdee.abaci.modules.IUnloadModule"
     xmlns:components="view.components.*"
     xmlns:components1="com.kingdee.abaci.modules.navmodule.view.components.*">
 <fx:Script>
  <![CDATA[
   

  ]]>
 </fx:Script>

 <!--@author Jixin_Huang -->
 <fx:Declarations>

 </fx:Declarations>
 <fx:Script source="com/kingdee/abaci/modules/navmodule/NavModule_Script.as"/>
 <s:SkinnableContainer id="nav_HGroup"
        width="100%"
        height="32"
        styleName="nav_HGroup">
  <s:layout>
   <s:LayoutBase/>
  </s:layout>
  <mx:Spacer width="10"/>
  <!--itemRenderer="assets.css.blue.skins.blue.TabBarItemRenderer4" skinClass="assets.skins.blue.SuperTabBarSkin" skinClass="assets.skins.blue.CusTabBarSkin"-->
  <components:SuperTabBar1 id="superTabBar"
         x="45"
         y="4"
         dataProvider="{nav_viewstack}"
         item_close="superTabBar_item_closeHandler(event)">
   <components:layout>
    <s:HorizontalLayout gap="25"
         verticalAlign="bottom"/>
   </components:layout>

  </components:SuperTabBar1>

  <components:DirectionBtnBar id="directionBtnBar"
         x="0"
         y="12"
         styleName="directionBtnBar"
         width="{nav_HGroup.width}"
         height="20">
   <components:layout>
    <s:HorizontalLayout horizontalAlign="right"
         verticalAlign="middle"
         gap="0"/>
   </components:layout>
   <components:LeftArrowButton id="leftArrowBtn"/>
   <components:RightArrowButton id="rightArrowBtn"/>
   <components:TileButton id="tileArrowBtn"
           click="tileArrowBtn_clickHandler(event)"/>
  </components:DirectionBtnBar>
 </s:SkinnableContainer>
 <mx:ViewStack id="nav_viewstack"
      creationPolicy="{ContainerCreationPolicy.ALL}"
      width="100%"
      height="100%"
      selectedIndex="{_selecedIndex}"
      change="nav_viewstack_changeHandler(event)">
  <s:NavigatorContent label="功能导航"
       width="100%"
       height="100%">
   <s:HGroup width="100%"
       height="100%"
       gap="0">

    <s:SkinnableContainer id="nav_LeftSC"
           width="20%"
           height="100%"
           styleName="module_LeftSC">
     <s:SkinnableContainer width="100%"
            height="100%"
            left="10"
            right="10"
            bottom="10"
            top="10">
      <s:layout>
       <s:HorizontalLayout verticalAlign="middle"
            horizontalAlign="center"
            gap="10"/>
      </s:layout>
      <components1:NavLeftPanel id="navLeftPanel"
             width="100%"
             height="100%"
             dropShadowVisible="false">
      </components1:NavLeftPanel>
     </s:SkinnableContainer>
    </s:SkinnableContainer>
    <s:SkinnableContainer id="nav_RightSC"
           width="80%"
           height="100%"
           styleName="module_RightSC">
    </s:SkinnableContainer>
   </s:HGroup>
  </s:NavigatorContent>
  <!--<components1:OrgArchitecture id="orgArchitectureNC"
          label="组织架构"
          width="100%"
          height="100%"/>-->
 </mx:ViewStack>
</mx:Module>

/************************************************************************
 **
 **   金蝶国际软件集团
 **   @author 记新
 **   @time 2010-08-26
 **
 ************************************************************************
 */

import com.kingdee.abaci.modules.navmodule.NavConstance;
import com.kingdee.abaci.modules.navmodule.NavFacade;
import com.kingdee.abaci.modules.navmodule.view.components.OrgArchitecture;

import flash.events.MouseEvent;

import mx.controls.Tree;
import mx.events.FlexEvent;
import mx.events.ListEvent;

import spark.components.NavigatorContent;

import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.ContainerCreationPolicy;
import mx.core.UIComponent;
import mx.events.IndexChangedEvent;
import mx.graphics.ImageSnapshot;
import mx.managers.PopUpManager;

import spark.components.TitleWindow;
import spark.events.IndexChangeEvent;

import view.components.SuperTitleWindow;
import view.components.event.SuperTabBarEvent;

[Bindable]
public var _selecedIndex:int=0;
public var titleWindow:SuperTitleWindow;

[Bindable]
public var dataPro:ArrayCollection=new ArrayCollection();

private var facade:NavFacade;

protected function onCreateComplete(event:FlexEvent):void
{
 facade=NavFacade.getInstance(NavConstance.NAME);
 facade.startUp(this);

 this.navLeftPanel.orgArcTree.doubleClickEnabled=true;
 this.navLeftPanel.orgArcTree.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, onDoubleClick);

 //截首页的图
 var object:Object={};
 object=snap(UIComponent(nav_viewstack.getElementAt(nav_viewstack.numElements - 1)), NavigatorContent(nav_viewstack.getElementAt(nav_viewstack.numElements - 1)).label);

 dataPro.addItem(object);
}

/**
 * 响应树的双击，创建一个容器并且添加到viewStack当中，选中该容器,发出截图事件
 * @param event
 */
private function onDoubleClick(event:ListEvent):void
{
 //获得当前树的项
 var node:XML=this.navLeftPanel.orgArcTree.selectedItem as XML;

 if (node.children().length() == 0)
 {
  if ('组织架构' == node.@label)
  {
   var orgChiTree1:OrgArchitecture=new OrgArchitecture();
   orgChiTree1.percentHeight=100;
   orgChiTree1.percentWidth=100;
   orgChiTree1.label=node.@label;

   this.nav_viewstack.addElement(orgChiTree1);
   this.nav_viewstack.selectedIndex=nav_viewstack.numElements - 1;
   orgChiTree1.addEventListener(FlexEvent.CREATION_COMPLETE, onNavConCreationComplete);
   return;
  }

  var orgChiTree:NavigatorContent=new NavigatorContent();
  orgChiTree.percentHeight=100;
  orgChiTree.percentWidth=100;
  orgChiTree.label=node.@label;

  this.nav_viewstack.addElement(orgChiTree);
  this.nav_viewstack.selectedIndex=nav_viewstack.numElements - 1;
  orgChiTree.addEventListener(FlexEvent.CREATION_COMPLETE, onNavConCreationComplete);
 }

 var isOpen:Boolean=this.navLeftPanel.orgArcTree.isItemOpen(node);
 this.navLeftPanel.orgArcTree.expandItem(node, !isOpen);

}

//创建完实例之后截图
private function onNavConCreationComplete(event:FlexEvent):void
{
 var object:Object={};
 object=snap(UIComponent(nav_viewstack.getElementAt(nav_viewstack.numElements - 1)), NavigatorContent(nav_viewstack.getElementAt(nav_viewstack.numElements - 1)).label);

 dataPro.addItem(object);
}

//Handler for tileArrowBtn click event
protected function tileArrowBtn_clickHandler(event:MouseEvent):void
{
 titleWindow=PopUpManager.createPopUp(this, SuperTitleWindow, false) as SuperTitleWindow;
 titleWindow.width=this.width * 0.85;
 titleWindow.height=this.height * 0.8;
 titleWindow.x=this.width / 2 - titleWindow.width / 2;
 titleWindow.y=this.height / 2 - titleWindow.height / 2;
 titleWindow.addEventListener("indexChanged", onIndexChanged);
 //    PopUpManager.centerPopUp(titleWindow);
 //    getDataPro();
 titleWindow.dataProvider=dataPro;
}

//Handler for indexChanged event;
private function onIndexChanged(event:Event):void
{
 if (titleWindow.selectedIndex >= nav_viewstack.numElements)
 {
  return;
 }
 _selecedIndex=titleWindow.selectedIndex;

 PopUpManager.removePopUp(titleWindow);
}

//Change the virable instance
protected function nav_viewstack_changeHandler(event:IndexChangedEvent):void
{
 _selecedIndex=nav_viewstack.selectedIndex;
}

// Components screen snapshot
protected function snap(source:IBitmapDrawable, title:String):Object
{
 var obj:Object=new Object();

 try
 {
  var snapShot:ImageSnapshot=ImageSnapshot.captureImage(source);
  var imagebyteArr:ByteArray=snapShot.data;
 }
 catch (event:Error)
 {
  //     Alert.show("页签没有被点击过的界面，没有办法做缩略图！", "警告");
 }

 obj.url=imagebyteArr;
 obj.title=title;

 return obj;
}

//截取导航子组件图片
/*protected function getDataPro():void
{
 dataPro.removeAll();

 for (var i:int=0; i < nav_viewstack.numElements; i++)
 {
  var object:Object={};
  object=snap(UIComponent(nav_viewstack.getElementAt(i)), NavigatorContent(nav_viewstack.getElementAt(i)).label);

  dataPro.addItem(object);
 }
}*/

//响应条目关闭，移除数组当中的截图
protected function superTabBar_item_closeHandler(event:SuperTabBarEvent):void
{
 dataPro.removeItemAt(event.index);
}

public function removeAll():void
{
 facade.removeCoreMVC();
}

public function dispose():void
{
 removeAll();
}

 

TitleWindowSkin

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    blendMode="normal"
    mouseEnabled="false"
    minWidth="76"
    minHeight="76"
    alpha.disabled="0.5"
    alpha.disabledWithControlBar="0.5">
 <fx:Metadata>
  <![CDATA[
        [HostComponent("spark.components.TitleWindow")]
        ]]>
 </fx:Metadata>

 <fx:Script fb:purpose="styling">
  /* Define the skin elements that should not be colorized.
   For panel, border and title background are skinned, but the content area and title text are not. */
  static private const exclusions:Array=["background", "titleDisplay", "contentGroup"];

  override public function get colorizeExclusions():Array
  {
   return exclusions;
  }

  override protected function initializationComplete():void
  {
   useChromeColor=true;
   super.initializationComplete();
  }

  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
  {
   if (getStyle("borderVisible") == true)
   {
    border.visible=true;
    background.left=background.top=background.right=background.bottom=1;
    contents.left=contents.top=contents.right=contents.bottom=1;
   }
   else
   {
    border.visible=false;
    background.left=background.top=background.right=background.bottom=0;
    contents.left=contents.top=contents.right=contents.bottom=0;
   }

   dropShadow.visible=getStyle("dropShadowVisible");

   var cr:Number=getStyle("cornerRadius");
   var withControls:Boolean=(currentState == "disabledWithControlBar" || currentState == "normalWithControlBar" || currentState == "inactiveWithControlBar");

   if (cornerRadius != cr)
   {
    cornerRadius=cr;

    dropShadow.tlRadius=cornerRadius;
    dropShadow.trRadius=cornerRadius;
    dropShadow.blRadius=cornerRadius;
    dropShadow.brRadius=cornerRadius;

    setPartCornerRadii(topMaskRect, true);
    setPartCornerRadii(border, true);
    setPartCornerRadii(background, true);
   }

   if (bottomMaskRect)
    setPartCornerRadii(bottomMaskRect, true);

   borderStroke.color=getStyle("borderColor");
   borderStroke.alpha=getStyle("borderAlpha");
   backgroundFill.color=getStyle("backgroundColor");
   backgroundFill.alpha=getStyle("backgroundAlpha");

   super.updateDisplayList(unscaledWidth, unscaledHeight);
  }

  private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
  {
   target.topLeftRadiusX=cornerRadius;
   target.topRightRadiusX=cornerRadius;
   target.bottomLeftRadiusX=cornerRadius;
   target.bottomRightRadiusX=cornerRadius;
  }

  private var cornerRadius:Number=0;
 </fx:Script>

 <s:states>
  <s:State name="normal"/>
  <s:State name="inactive"
     stateGroups="inactiveGroup"/>
  <s:State name="disabled"/>
  <s:State name="normalWithControlBar"
     stateGroups="withControls"/>
  <s:State name="inactiveWithControlBar"
     stateGroups="withControls, inactiveGroup"/>
  <s:State name="disabledWithControlBar"
     stateGroups="withControls"/>
 </s:states>

 <!--- drop shadow can't be hittable so it stays sibling of other graphics @private-->
 <s:RectangularDropShadow id="dropShadow"
        blurX="20"
        blurY="20"
        alpha="0.32"
        alpha.inactiveGroup="0.22"
        distance="11"
        distance.inactiveGroup="7"
        angle="90"
        color="0x000000"
        left="0"
        top="0"
        right="0"
        bottom="0"/>

 <!--- drop shadow can't be hittable so all other graphics go in this group -->
 <s:Group left="0"
    right="0"
    top="0"
    bottom="0">

  <!--- top group mask @private-->
  <s:Group left="1"
     top="1"
     right="1"
     bottom="1"
     id="topGroupMask">
   <!--- @private-->
   <s:Rect id="topMaskRect"
     left="0"
     top="0"
     right="0"
     bottom="0">
    <s:fill>
     <s:SolidColor alpha="0"/>
    </s:fill>
   </s:Rect>
  </s:Group>

  <s:Group left="1"
     top="1"
     right="1"
     bottom="1"
     id="bottomGroupMask"
     includeIn="withControls">

   <s:Rect id="bottomMaskRect"
     left="0"
     top="0"
     right="0"
     bottom="0">
    <s:fill>
     <s:SolidColor alpha="0"/>
    </s:fill>
   </s:Rect>
  </s:Group>

  <s:Rect id="border"
    left="0"
    right="0"
    top="0"
    bottom="0"
    bottomLeftRadiusX="2"
    bottomLeftRadiusY="2"
    bottomRightRadiusX="2"
    bottomRightRadiusY="2">
   <s:stroke>
    <s:SolidColorStroke id="borderStroke"
         color="0x000000"
         weight="1"/>
   </s:stroke>
  </s:Rect>

  <!-- layer 2: background fill -->
  <!--- Defines the appearance of the TitleWindowSkin class's background. -->
  <s:Rect id="background"
    left="1"
    top="1"
    right="1"
    bottom="0"
    bottomLeftRadiusX="2"
    bottomLeftRadiusY="2"
    bottomRightRadiusX="2"
    bottomRightRadiusY="2">
   <s:fill>
    <!--- Defines the TitleWindowSkin class's background fill. The default color is 0xFFFFFF. -->
    <s:SolidColor id="backgroundFill"
         color="#000000"/>
   </s:fill>
  </s:Rect>

  <!-- layer 3: contents -->
  <!--- Contains the vertical stack of title bar content and control bar. -->
  <s:Group left="1"
     right="1"
     top="1"
     bottom="1"
     id="contents">
   <s:layout>
    <s:VerticalLayout gap="0"
          horizontalAlign="justify"/>
   </s:layout>
   <!--- @private -->
   <s:Group id="topGroup"
      mask="{topGroupMask}">

    <!--- layer 0: title bar fill @private -->
    <s:Rect id="tbFill"
      left="0"
      right="0"
      top="0"
      bottom="0">
     <s:fill>
      <s:LinearGradient rotation="90">
       <s:GradientEntry color="0xeeefee"/>
       <s:GradientEntry color="0xa3acb1"/>
      </s:LinearGradient>
     </s:fill>
    </s:Rect>

    <!-- layer 3: text -->
    <!--- @copy spark.components.Panel#titleDisplay -->
    <s:Label id="titleDisplay"
       maxDisplayedLines="1"
       left="9"
       right="36"
       top="1"
       bottom="0"
       minHeight="30"
       verticalAlign="middle"
       fontWeight="bold"/>

    <!-- layer 4: moveArea -->
    <!--- @copy spark.components.TitleWindow#moveArea -->
    <s:Group id="moveArea"
       left="0"
       right="0"
       top="0"
       bottom="0"/>

    <!--- @copy spark.components.TitleWindow#closeButton -->
    <s:Button id="closeButton"
        skinClass="spark.skins.spark.TitleWindowCloseButtonSkin"
        width="15"
        height="15"
        right="7"
        top="7"/>
   </s:Group>

   <!--- @copy spark.components.SkinnableContainer#contentGroup -->
   <s:Group id="contentGroup"
      width="100%"
      height="100%"
      minWidth="0"
      minHeight="0">
   </s:Group>

  </s:Group>
 </s:Group>
</s:SparkSkin>