Flex - VGroup

introduction

Le conteneur VGroup est un conteneur Group qui utilise la classe VerticalLayout. Utilisez les propriétés de la classe VGroup pour modifier les caractéristiques de la classe VerticalLayout.

Déclaration de classe

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

public class VGroup 
   extends Group

Propriétés publiques

Sr.Non	Propriété et description
1	firstIndexInView : int [lecture seule] Index du premier élément de mise en page qui fait partie de la mise en page et dans le rectangle de défilement de la cible de mise en page, ou -1 si rien n'a encore été affiché.
2	gap : int L'espace vertical entre les éléments de mise en page, en pixels.
3	horizontalAlign : String L'alignement horizontal des éléments de mise en page.
4	lastIndexInView : int [lecture seule] L'index de la dernière ligne qui fait partie de la mise en page et dans le rectangle de défilement du conteneur, ou -1 si rien n'a encore été affiché.
5	paddingBottom : Number Nombre de pixels entre le bord inférieur du conteneur et le bord inférieur du dernier élément de mise en page.
6	paddingLeft : Number Nombre minimum de pixels entre le bord gauche du conteneur et le bord gauche de l'élément de mise en page.
sept	paddingRight : Number Le nombre minimal de pixels entre le bord droit du conteneur et le bord droit de l'élément de mise en page.
8	paddingTop : Number Nombre de pixels entre le bord supérieur du conteneur et le bord supérieur du premier élément de mise en page.
9	requestedMaxRowCount : int La hauteur mesurée de cette disposition est suffisamment grande pour afficher la plupart des éléments de disposition MaxRowCount demandés.
dix	requestedMinRowCount : int La hauteur mesurée de cette disposition est suffisamment grande pour afficher au moins les éléments de disposition demandésMinRowCount.
11	requestedRowCount : int La taille mesurée de cette mise en page est suffisamment grande pour afficher les premiers éléments de mise en page demandés.
12	rowCount : int [lecture seule] Le nombre actuel d'éléments visibles.
13	rowHeight : Number Si variableRowHeight est false, cette propriété spécifie la hauteur réelle de chaque enfant, en pixels.
14	variableRowHeight : Boolean Spécifie si les éléments de mise en page reçoivent leur hauteur préférée.
15	verticalAlign : String L'alignement vertical du contenu par rapport à la hauteur du conteneur.

Méthodes publiques

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

Méthodes héritées

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

spark.components.Group
spark.components.supportClasses.GroupBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de Flex VGroup

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

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

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[
         private function applyVGroupProperties():void {
            mainVGroup.paddingTop = padTopV.value;
            mainVGroup.paddingLeft = padLeftV.value;
            mainVGroup.paddingRight = padRightV.value;
            mainVGroup.paddingBottom = padBottomV.value;
            mainVGroup.gap = gapV.value;
         }
      ]]>
   </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 = "vGroupPanel" title = "Using VGroup"
            width = "500" height = "300" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" />
            </s:layout>

            <s:VGroup top = "10" left = "15">
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Gap:" width = "100" />
                  <s:NumericStepper id = "gapV" maximum = "400" />
               </s:HGroup>
               
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Top:" width = "100" />
                  <s:NumericStepper id = "padTopV" maximum = "400" />
               </s:HGroup>
               
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Left:" width = "100" />
                  <s:NumericStepper id = "padLeftV" maximum = "400" />
               </s:HGroup>
               
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Right:" width = "100" />
                  <s:NumericStepper id = "padRightV" maximum = "400" />
               </s:HGroup>

               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Bottom:" width = "100" />
                  <s:NumericStepper id = "padBottomV" maximum = "400" />
               </s:HGroup>

               <s:Button label = "Apply Properties"
                  click = "applyVGroupProperties()" />
            </s:VGroup>

            <s:VGroup left = "300" top = "25" id = "mainVGroup">
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" />
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232" />
            </s:VGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

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