< Jewel Components list

Jewel HGroup


Available since version 0.9.7.

Class Extends
org.apache.royale.jewel.HGroup org.apache.royale.jewel.supportClasses.group.AlignmentItemsGroupWithGap

Note: This component is currently only available for JavaScript.


The Jewel HGroup class is a Group that lays out elements horizontally and provides some properties to allow more flexibility like gap to define spacing between items, and itemsHorizontalAlign and itemsVerticalAlign to distribute elements in different ways along the horizontal or vertical axis.

Example of use

In MXML declare a HGroup like this:

<j:HGroup width="100%" height="300" gap="3" itemsHorizontalAlign="itemsCenter">
	<j:Card width="100" height="50%">
		<j:Label text="horz center"/>
	<j:Card width="100" height="50%">
		<j:Label text="horz center"/>

In ActionScript we can do the same in the following way.

var hg:HGroup = new HGroup();
// add a label to the HGroup
var label:Label = new Label();
label.text = "Some text";
// add the HGroup to the parent

where parent is the container to which the HGroup will be added.

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.HGroup for a more detailed list of properties and methods.


PROPERTY Type Description
currentState String The name of the current state.
itemsExpand Boolean Make items resize to the fill all container space.
itemsHorizontalAlign String Distribute all items horizontaly. Possible values are: itemsLeft, itemsCenter, itemsRight, itemsSpaceBetween, itemsSpaceAround
itemsVerticalAlign String Distribute all items verticaly. Possible values are: itemsSameHeight, itemsCenter, itemsTop, itemsBottom
gap Number Assigns variable gap in steps predefined in Jewel CSS.
numElements int The number of element children that can be laid out.
mxmlContent Array The array of childs for this group. Is the DefaultProperty.
states Array The array of view states. These should be instances of org.apache.royale.states.State
variableRowHeight Boolean Specifies whether layout elements are allocated their preferred height.


Method Parameters Description
addElement c(IChild), dispatchEvent(Boolean=true) Add a component to the parent.
addElementAt c(IChild), index(int), dispatchEvent(Boolean=true) Add a component to the parent at the specified index.
getElementIndex c(IChild) Gets the index of this subcomponent.
getElementAt index(int) Get a component from the parent at specified index.
removeElement c(IChild), dispatchEvent(Boolean=true) Remove a component from the parent.

Relevant Events

The most important event is initComplete, which indicates that initialization of the group is complete.

It is needed when some action coded in a callback function needs to be triggered when the group is ready to use after initialization.

You can attach callback listeners to the initComplete event in MXML as follows:

<j:HGroup initComplete="initCompleteHandler(event)"/>

the initComplete event uses the initCompleteHandler callback function you provide in ActionScript:

        private function initCompleteHandler(event:Event):void {
            trace("HGroup is ready!");

When the group is initialized the message “HGroup is ready!” appears in the console log.

In ActionScript we can add an event handler this way:

var hg:HGroup = new HGroup();
hg.addEventListener('initComplete', initCompleteHandler);

Relevant Beads

Bead Type Implementation Description
GroupView org.apache.royale.core.IBeadView This is the default view bead.
HorizontalLayout org.apache.royale.core.IBeadLayout This is the default layout bead.

Optional Beads

Bead Type Implementation Description
ContainerDataBinding org.apache.royale.binding.DataBindingBase Provide binding capabilities to the group.

More examples

Other useful Jewel containers components are: