Flex - VGroup

Advertisements


Introduction

The VGroup container is a Group container that uses the VerticalLayout class. Use the properties of the VGroup class to modify the characteristics of the VerticalLayout class.

Class declaration

Following is the declaration for spark.components.VGroup class:

public class VGroup 
   extends Group

Public properties

S.N.Property & Description
1firstIndexInView : int
[read-only] The index of the first layout element that is part of the layout and within the layout target's scroll rectangle, or -1 if nothing has been displayed yet.
2gap : int
The vertical space between layout elements, in pixels.
3horizontalAlign : String
The horizontal alignment of layout elements.
4lastIndexInView : int
[read-only] The index of the last row that's part of the layout and within the container's scroll rectangle, or -1 if nothing has been displayed yet.
5paddingBottom : Number
Number of pixels between the container's bottom edge and the bottom edge of the last layout element.
6paddingLeft : Number
The minimum number of pixels between the container's left edge and the left edge of the layout element.
7paddingRight : Number
The minimum number of pixels between the container's right edge and the right edge of the layout element.
8paddingTop : Number
Number of pixels between the container's top edge and the top edge of the first layout element.
9requestedMaxRowCount : int
The measured height of this layout is large enough to display at most requestedMaxRowCount layout elements.
10requestedMinRowCount : int
The measured height of this layout is large enough to display at least requestedMinRowCount layout elements.
11requestedRowCount : int
The measured size of this layout is tall enough to display the first requestedRowCount layout elements.
12rowCount : int
[read-only] The current number of visible elements.
13rowHeight : Number
If variableRowHeight is false, then this property specifies the actual height of each child, in pixels.
14variableRowHeight : Boolean
Specifies whether layout elements are allocated their preferred height.
15verticalAlign : String
The vertical alignment of the content relative to the container's height.

Public methods

S.N.Method & Description
1VGroup()
Constructor.

Methods inherited

This class inherits methods from the following classes:

  • 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

Flex VGroup Example

Let us follow the following steps to check usage of VGroup in a Flex application by creating a test application:

StepDescription
1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file 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>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex VGroup

Advertisements
Advertisements