Available since version 0.9.4.
Class | Extends | Implements |
---|---|---|
org.apache.royale.jewel.Container{:target=‘_blank’} | Jewel ContainerBase{:target=‘_blank’} | org.apache.royale.core.IMXMLDocument{:target=‘_blank’} |
Note: This component is currently only available for JavaScript.
The Jewel Container class extends the features already provided by Jewel Group.
The position and size of the children are determined by BasicLayout
while the size of a Container can either be determined by its children or by specifying an exact size in pixels or as a percentage of the parent element. You can swap the layout for any other one available to arrange the children in different ways (i.e: horizontal, vertical,...)
Container clips content by default thanks to its Viewport
bead. This bead can also manage clipping through the clipContent
property. To add scrolling functionality replace the Viewport
bead with ScrollingViewport
.
Other Container feature are View States to provide state management to show diferent parts of the interface to the user.
Finally, Container can add elements directly to the strand (through the strandChildren
property) instead of adding them to its view content unlike the addElement()
APIs which place children into the contentView
.
While the container is relatively lightweight, it should generally not be used as the base class for other controls, even if those controls are composed of children. That's because the fundamental API of Container is to support an arbitrary set of children, and most controls only support a specific set of children.
In MXML declare a Container
like this:
<j:Container width="200" height="200" className="wrapper"> <j:Button text="Origin"/> <j:Button text="x:30,y:30" x="30" y="30"/> <j:Button text="x:60,y:60" x="60" y="60"/> <j:Button text="bottom/right" style="bottom:0;right:0"/> </j:Container>
In ActionScript we can do the same in the following way:
var container:Container = new Container(); // add a button to the Container var button:Button = new Button(); container.addElement(button); // add the Container to the parent parent.addElement(container);
where parent
is the container where the control will be added.
Check the Reference of org.apache.royale.jewel.Container{:target=‘_blank’} for a more detailed list of properties and methods.
PROPERTY | Type | Description |
---|---|---|
currentState | String | The name of the current state. |
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. |
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:Container 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("Container is ready!"); } ]]> </fx:Script>
When the container is initialized the message “Container is ready!” appears in the console log.
In ActionScript we can add an event handler this way:
var c:Container = new Container(); c.addEventListener('initComplete', initCompleteHandler); parent.addElement(c);
Bead Type | Implementation | Description |
---|---|---|
ContainerView{:target=‘_blank’} | org.apache.royale.core.IBeadView{:target=‘_blank’} | This is the default view bead. |
BasicLayout{:target=‘_blank’} | org.apache.royale.core.IBeadLayout{:target=‘_blank’} | This is the default layout bead. |
Bead Type | Implementation | Description |
---|---|---|
ContainerDataBinding{:target=‘_blank’} | org.apache.royale.binding.DataBindingBase{:target=‘_blank’} | Provide binding capabilities to the container. |
Jewel Container
can use any of the layout beads available in the Jewel library. Also you can check Related controls section to see some preconfigured containers with specific layouts.
Other useful Jewel containers components are: