Flex - TitleWindow

introduction

La classe TitleWindow étend la classe Panel pour inclure un bouton de fermeture et une zone de déplacement.

Déclaration de classe

Voici la déclaration pour spark.components.TitleWindow classe -

public class TitleWindow
   extends Panel

Méthodes publiques

Sr.Non	Méthode et description
1	TitleWindow() Constructeur.

Événements

Sr.Non	Description de l'évenement
1	close Distribué lorsque l'utilisateur sélectionne le bouton de fermeture.
2	windowMove Distribué après que l'utilisateur a fait glisser la fenêtre avec succès.
3	windowMoveEnd Distribué lorsque l'utilisateur relâche le bouton de la souris après avoir fait glisser.
4	windowMoveStart Distribué lorsque l'utilisateur appuie et maintient le bouton de la souris dans la zone de déplacement et commence à faire glisser la fenêtre.
5	windowMoving Distribué lorsque l'utilisateur fait glisser la fenêtre.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

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

Exemple Flex TitleWindow

Suivons les étapes suivantes pour vérifier l'utilisation de TitleWindow dans une application Flex en créant une application de test -

Étape 1 - Créer un projet

Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .

Étape 2 - Créer un composant Title WIndow personnalisé

Lancez l'assistant de création de composant MXML à l'aide de l'option File > New > MXML Component

Entrez le package comme com.tutorialspoint.client, nom comme CustomTitleWindow et choisissez en fonction du contrôle Flex TitleWindow existant spark.component.TitleWindow. Modifié comme mentionné ci-dessous.

Voici le contenu du fichier mxml modifié 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>

Étape 3 - Modifiez HelloWorld.mxml

Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.

Voici le contenu du fichier mxml modifié 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>

Étape 4 - Application Complie and Run

Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page