Flex - TitleWindow

Introdução

A classe TitleWindow estende a classe Panel para incluir um botão Fechar e área de movimentação.

Declaração de Classe

A seguir está a declaração para spark.components.TitleWindow classe -

public class TitleWindow
   extends Panel

Métodos Públicos

Sr. Não	Método e Descrição
1	TitleWindow() Construtor.

Eventos

Sr. Não	Descrição do Evento
1	close Enviado quando o usuário seleciona o botão Fechar.
2	windowMove Enviado depois que o usuário arrastou a janela com sucesso.
3	windowMoveEnd Enviado quando o usuário libera o botão do mouse após arrastar.
4	windowMoveStart Despachado quando o usuário pressiona e segura o botão do mouse na área de movimentação e começa a arrastar a janela.
5	windowMoving Enviado quando o usuário arrasta a janela.

Métodos herdados

Esta classe herda métodos das seguintes classes -

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

Exemplo de Flex TitleWindow

Vamos seguir as etapas a seguir para verificar o uso do TitleWindow em um aplicativo Flex criando um aplicativo de teste -

Etapa 1 - Criar um projeto

Crie um projeto com um nome HelloWorld em um pacote com.tutorialspoint.client conforme explicado no capítulo Flex - Criar aplicativo .

Etapa 2 - Criar um componente personalizado da janela Title

Inicie o assistente Criar componente MXML usando a opção File > New > MXML Component

Insira o pacote como com.tutorialspoint.client, nome como CustomTitleWindow e escolha com base em um controle flexível TitleWindow existente spark.component.TitleWindow. Modificado conforme mencionado abaixo.

A seguir está o conteúdo do arquivo mxml modificado 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>

Etapa 3 - Modificar HelloWorld.mxml

Modifique HelloWorld.mxml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.

A seguir está o conteúdo do arquivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.

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

Etapa 4 - Completar e executar o aplicativo

Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.

Quando estiver pronto com todas as alterações feitas, vamos compilar e executar o aplicativo no modo normal como fizemos no capítulo Flex - Criar aplicativo . Se tudo estiver bem com sua aplicação, ele produzirá o seguinte resultado: [ Experimente online ]

↰ Previous page