< Jewel Components list

Jewel HContainer

Reference

Available since version 0.9.7.

^{Note: This component is currently only available for JavaScript.}

Overview

The Jewel HContainer class is a Container 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 HContainer like this:

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

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

var hc:HContainer = new HContainer();
// add a label to the HContainer
var label:Label = new Label();
label.text = "Some text";
hc.addElement(label);
// add the HContainer to the parent
parent.addElement(hc);

where parent is the container where the HContainer will be added.

Relevant Properties and Methods

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

Properties

Methods

Relevant Events

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

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

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

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

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

<fx:Script>
    <![CDATA[      
        private function initCompleteHandler(event:Event):void {
            trace("HContainer is ready!");
        }
    ]]>
</fx:Script>

When the container is initialized the message “HContainer is ready!” appears in the console log.

In ActionScript we can add an event handler this way:

var hc:HContainer = new HContainer();
hc.addEventListener('initComplete', initCompleteHandler);
parent.addElement(hc);

Relevant Beads

Optional Beads

More examples

• Using Jewel TileHorizontalLayout
• Using View States to show or hide content
• Customization through the Royale API

Related controls

Other useful Jewel containers components are:

• Container
• VContainer
• Group
• HGroup
• VGroup
• Card