Available since version 0.9.7.
Class | Extends |
---|---|
org.apache.royale.jewel.VContainer{:target=‘_blank’} | org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainerWithGap{:target=‘_blank’} |
Note: This component is currently only available for JavaScript.
The Jewel VContainer class is a Container that lays out elements verticaly and provides some properties to allow more flexibility like gap
to define some spacing between items, and itemsHorizontalAlign
and itemsVerticalAlign
to distribute elements in different ways along the horizontal and vertical axes.
In MXML declare a VContainer
like this:
<j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom"> <j:Card width="50%" height="100"> <j:Label text="vert bottom"/> </j:Card> <j:Card width="50%" height="100"> <j:Label text="vert bottom"/> </j:Card> </j:VContainer>
In ActionScript we can do the same in the following way.
var vc:VContainer = new VContainer(); // add a label to the VContainer var label:Label = new Label(); label.text = "Some text"; vc.addElement(label); // add the VContainer to the parent parent.addElement(vc);
where parent
is the container where the VContainer will be added.
Check the Reference of org.apache.royale.jewel.VContainer{: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:VContainer initComplete="initCompleteHandler(event)"/>
the initComplete event will use the initCompleteHandler
callback function you provide in ActionScript:
<fx:Script> <![CDATA[ private function initCompleteHandler(event:Event):void { trace("VContainer is ready!"); } ]]> </fx:Script>
When the container is initialized the message “VContainer is ready!” appears in the console log.
In ActionScript we can add an event handler this way:
var vc:VContainer = new VContainer(); vc.addEventListener('initComplete', initCompleteHandler); parent.addElement(vc);
Bead Type | Implementation | Description |
---|---|---|
ContainerView{:target=‘_blank’} | org.apache.royale.core.IBeadView{:target=‘_blank’} | This is the default view bead. |
VerticalLayout{: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: