Licensed to the Apache Software Foundation (ASF) under one or more

contributor license agreements. See the NOTICE file distributed with

this work for additional information regarding copyright ownership.

The ASF licenses this file to You under the Apache License, Version 2.0

(the “License”); you may not use this file except in compliance with

the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an “AS IS” BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

layout: docpage title: Jewel HContainer description: The Jewel HContainer permalink: /component-sets/jewel/hcontainer

< Jewel Components list

Jewel HContainer

Reference

Available since version 0.9.7.

Class	Extends
org.apache.royale.jewel.HContainer{:target=‘_blank’}	org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainerWithGap{:target=‘_blank’}

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{:target=‘_blank’} for a more detailed list of properties and methods.

Properties

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 container. Is the DefaultProperty.
states	Array	The array of view states. These should be instances of org.apache.royale.states.State{:target=‘_blank’}
strandChildren	IParent{:target=‘_blank’}	An object to access the immediate children of the strand.
variableRowHeight	Boolean	Specifies whether layout elements are allocated their preferred height.

Methods

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 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

Bead Type	Implementation	Description
ContainerView{:target=‘_blank’}	org.apache.royale.core.IBeadView{:target=‘_blank’}	This is the default view bead.
HorizontalLayout{:target=‘_blank’}	org.apache.royale.core.IBeadLayout{:target=‘_blank’}	This is the default layout bead.
Viewport{:target=‘_blank’}	org.apache.royale.core.IViewport{:target=‘_blank’}	Define the area that display content.

Optional Beads

Bead Type	Implementation	Description
ContainerDataBinding{:target=‘_blank’}	org.apache.royale.binding.DataBindingBase{:target=‘_blank’}	Provide binding capabilities to the container.

More examples

Using Jewel TileHorizontalLayout{:target=‘_blank’}
Using View States to show or hide content{:target=‘_blank’}
Customization through the Royale API{:target=‘_blank’}

Related controls

Other useful Jewel containers components are: