Flex - Ventana de título

Introducción

La clase TitleWindow extiende la clase Panel para incluir un botón de cierre y un área de movimiento.

Declaración de clase

A continuación se muestra la declaración de spark.components.TitleWindow clase -

public class TitleWindow
   extends Panel

Métodos públicos

No Señor	Método y descripción
1	TitleWindow() Constructor.

Eventos

No Señor	Descripción del evento
1	close Se envía cuando el usuario selecciona el botón de cierre.
2	windowMove Se envía después de que el usuario arrastró la ventana correctamente.
3	windowMoveEnd Se envía cuando el usuario suelta el botón del mouse después de arrastrar.
4	windowMoveStart Se envía cuando el usuario presiona y mantiene presionado el botón del mouse en el área de movimiento y comienza a arrastrar la ventana.
5	windowMoving Se envía cuando el usuario arrastra la ventana.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de ventana de título de Flex

Sigamos los siguientes pasos para verificar el uso de TitleWindow en una aplicación Flex creando una aplicación de prueba:

Paso 1: crea un proyecto

Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .

Paso 2: cree un componente de ventana de título personalizado

Inicie el asistente Crear componente MXML usando la opción File > New > MXML Component

Ingrese el paquete como com.tutorialspoint.client, nombre como CustomTitleWindow y elija según el control Flex TitleWindow existente spark.component.TitleWindow. Lo modificó como se menciona a continuación.

A continuación se muestra el contenido del archivo 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>

Paso 3: modificar HelloWorld.mxml

Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.

A continuación se muestra el contenido del archivo 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>

Paso 4: Cumplir y ejecutar la aplicación

Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page