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.
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.
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.
Check the Reference of org.apache.royale.jewel.HContainer{:target=‘_blank’} 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 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. |
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. |
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);
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. |
Bead Type | Implementation | Description |
---|---|---|
ContainerDataBinding{:target=‘_blank’} | org.apache.royale.binding.DataBindingBase{:target=‘_blank’} | Provide binding capabilities to the container. |
Other useful Jewel containers components are: