Flex TitleWindow

介紹

TitleWindow類擴(kuò)展了Panel類，以包括關(guān)閉按鈕和移動(dòng)區(qū)域。

類聲明

以下是 spark.components.TitleWindow 類的聲明:

public class TitleWindow
   extends Panel

公共方法

事件

繼承的方法

此類繼承以下類中的方法:

• spark.components.Panel

• spark.components.SkinnableContainer

• spark.components.supportClasses.SkinnableContainerBase

• spark.components.supportClasses.SkinnableComponent

• mx.core.UIComponent

• mx.core.FlexSprite

• flash.display.Sprite

• flash.display.DisplayObjectContainer

• flash.display.InteractiveObject

• flash.display.DisplayObject

• flash.events.EventDispatcher

• Object
  

Flex標(biāo)題窗口示例

讓我們按照以下步驟通過(guò)創(chuàng)建測(cè)試應(yīng)用程序來(lái)檢查Flex應(yīng)用程序中TitleWindow的使用:

步驟1:創(chuàng)建項(xiàng)目

在 Flex - 創(chuàng)建應(yīng)用程序章節(jié)中所述，在包 com.tutorialspoint.client 下創(chuàng)建名為 HelloWorld 的項(xiàng)目。

步驟2:創(chuàng)建自定義Title WIndow組件

使用選項(xiàng)File > New > MXML Component創(chuàng)建MXML組件向?qū)А?/span>

將包名稱為 com.tutorialspoint.client ，命名為 CustomTitleWindow ，并根據(jù)現(xiàn)有的flex TitleWindow控件 spark.component.TitleWindow 進(jìn)行選擇。 修改它如下所述。

以下是修改的mxml文件的內(nèi)容

src / com.tutorialspoint.client / CustomTitleWindow.mxml 。

<?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" width="400" height="300"
   title="Title Window Container"
   close="PopUpManager.removePopUp(this);"> 
   <s:layout>
      <s:VerticalLayout verticalAlign="middle" horizontalAlign="center" />
   </s:layout>
   <fx:Script>
      <![CDATA[
         import mx.managers.PopUpManager;
      ]]>
   </fx:Script>
   <s:Label text="Content area of title window"/>
</s:TitleWindow>

步驟3:修改HelloWorld.mxml

修改 HelloWorld.mxml ，如下所述。 保持文件的其余部分不變。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的內(nèi)容。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%" height="100%" minWidth="500" minHeight="500"
   >  
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
      <fx:Script>
      <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.managers.PopUpManager;
            private function showWindow():void{
               var popUp:IFlexDisplayObject = 
                  PopUpManager.createPopUp(this,CustomTitleWindow,true);
               PopUpManager.centerPopUp(popUp);
            }
      ]]>
      </fx:Script>
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Layout Panels Demonstration" 
         fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel id="titleWindowPanel" title="Using TitleWindow" 
            width="500" height="300">
         <s:layout> 
            <s:VerticalLayout  gap="10" verticalAlign="middle" 
               horizontalAlign="center"/>	
         </s:layout>				
         <s:Button id="showButton" 
            label="Click to show the TitleWindow container" 
            click="showWindow();"/>
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

步驟4:編譯并運(yùn)行應(yīng)用程序

編譯并運(yùn)行應(yīng)用程序，以確保業(yè)務(wù)邏輯按照要求工作。

準(zhǔn)備好所有更改后，讓我們以正常模式編譯和運(yùn)行應(yīng)用程序，就像在 Flex - 創(chuàng)建應(yīng)用程序中一樣 章節(jié)。 如果一切順利，您的應(yīng)用程序，這將產(chǎn)生以下結(jié)果:[在線試用]