Flex - HGroup

Introducción

El contenedor HGroup es un contenedor de grupo que usa la clase HorizontalLayout. Use las propiedades de la clase HGroup para modificar las características de la clase HorizontalLayout.

Declaración de clase

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

public class HGroup 
   extends Group

Propiedades publicas

No Señor	Descripción de propiedad
1	firstIndexInView : int [solo lectura] El índice del primer elemento de diseño que forma parte del diseño y dentro del rectángulo de desplazamiento del destino del diseño, o -1 si aún no se ha mostrado nada.
2	gap : int El espacio vertical entre elementos de diseño, en píxeles.
3	horizontalAlign : String La alineación horizontal de los elementos del diseño.
4	lastIndexInView : int [solo lectura] El índice de la última fila que forma parte del diseño y dentro del rectángulo de desplazamiento del contenedor, o -1 si aún no se ha mostrado nada.
5	paddingBottom : Number Número de píxeles entre el borde inferior del contenedor y el borde inferior del último elemento de diseño.
6	paddingLeft : Number El número mínimo de píxeles entre el borde izquierdo del contenedor y el borde izquierdo del elemento de diseño.
7	paddingRight : Number El número mínimo de píxeles entre el borde derecho del contenedor y el borde derecho del elemento de diseño.
8	paddingTop : Number Número de píxeles entre el borde superior del contenedor y el borde superior del primer elemento de diseño.
9	requestedMaxRowCount : int La altura medida de este diseño es lo suficientemente grande para mostrar en la mayoría de los elementos de diseño solicitadosMaxRowCount.
10	requestedMinRowCount : int La altura medida de este diseño es lo suficientemente grande para mostrar al menos los elementos de diseño requiredMinRowCount.
11	requestedRowCount : int El tamaño medido de este diseño es lo suficientemente alto como para mostrar los primeros elementos de diseño de RowCount solicitados.
12	rowCount : int [solo lectura] El número actual de elementos visibles.
13	rowHeight : Number Si variableRowHeight es falso, esta propiedad especifica la altura real de cada niño, en píxeles.
14	variableRowHeight : Boolean Especifica si a los elementos de diseño se les asigna su altura preferida.
15	verticalAlign : String La alineación vertical del contenido en relación con la altura del contenedor.

Métodos públicos

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

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de Flex HGroup

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

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

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[
         private function applyVGroupProperties():void {
            mainHGroup.paddingTop = padTopH.value;
            mainHGroup.paddingLeft = padLeftH.value;
            mainHGroup.paddingRight = padRightH.value;
            mainHGroup.paddingBottom = padBottomH.value;
            mainHGroup.gap = gapH.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 = "hGroupPanel" title = "Using HGroup"
            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 = "gapH" maximum = "400" />
               </s:HGroup>
               
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Top:" width = "100" />
                  <s:NumericStepper id = "padTopH" maximum = "400" />
               </s:HGroup>
               
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Left:" width = "100" />
                  <s:NumericStepper id = "padLeftH" maximum = "400" />
               </s:HGroup>
               
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Right:" width = "100" />
                  <s:NumericStepper id = "padRightH" maximum = "400" />
               </s:HGroup>
               
               <s:HGroup verticalAlign = "middle">
                  <s:Label text = "Padding Bottom:" width = "100" />
                  <s:NumericStepper id = "padBottomH" maximum = "400" />
               </s:HGroup>
               
               <s:Button label = "Apply Properties" click = "applyVGroupProperties()" />
            </s:VGroup>
            
            <s:HGroup left = "300" top = "25" id = "mainHGroup">
               <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:HGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

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