Available since version 0.9.4.
Class | Extends | Implements |
---|---|---|
org.apache.royale.jewel.Group{:target=‘_blank’} | Jewel GroupBase{:target=‘_blank’} | org.apache.royale.core.IMXMLDocument{:target=‘_blank’} |
Note: This component is currently only available for applications compiled into JavaScript.
The Jewel Group class provides a lightweight container for visual elements. By default the group has a Basic Layout, so you can size and position its children with absolute positioning (the Basic layout groups the children, but does not provide layout information). You can swap the layout for any other one available (for instance horizontal or vertical) to arrange the children in different ways. The group doesn‘t clip content, so elements inside the group aren’t hidden if they extend beyond the group boundaries. The group doesn't have any chrome or visuals; it just contains the children.
Also, the group has no scrolling support. For scrolling and clipping you can use Jewel Container.
While the container is relatively lightweight, you should generally not use it 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 Group
like this:
<j:Group 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:Group>
In ActionScript we can do the same in the following way:
var group:Group = new Group(); // add a button to the group var button:Button = new Button(); group.addElement(button); // add the group to the parent parent.addElement(group);
where parent
is the container where the control will be added.
Check the Reference of org.apache.royale.jewel.Group{: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 group. Is the DefaultProperty. |
states | Array | The array of view states. These should be instances of org.apache.royale.states.State{:target=‘_blank’} |
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 group is complete. You can use this when some action coded in a callback function need to be triggered when the group has initialized and is ready to use.
You can attach callback listeners to the initComplete event in MXML as follows:
<j:Group 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("Group is ready!"); } ]]> </fx:Script>
When the group is initialized the message “Group is ready!” appears in the console log.
In ActionScript we can add an event handler this way:
var g:Group = new Group(); g.addEventListener('initComplete', initCompleteHandler); parent.addElement(g);
Bead Type | Implementation | Description |
---|---|---|
GroupView{: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 group. |
Jewel Group
can use any of the layout beads available in Jewel library. Also you can check Related controls section to see some preconfigured groups with specific layouts.
Other useful Jewel group components are: