This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git
The following commit(s) were added to refs/heads/master by this push:
new 0d0a41e jewel container and group complete docs
0d0a41e is described below
commit 0d0a41e7ed6c9ea682ea20f0b1e7278d6a77cb07
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Aug 13 15:28:16 2020 +0200
jewel container and group complete docs
---
component-sets/jewel/jewel-container.md | 93 +++++++++++++++++++++++++++++++--
component-sets/jewel/jewel-group.md | 28 +++++-----
2 files changed, 104 insertions(+), 17 deletions(-)
diff --git a/component-sets/jewel/jewel-container.md
b/component-sets/jewel/jewel-container.md
index 0da429d..1164322 100644
--- a/component-sets/jewel/jewel-container.md
+++ b/component-sets/jewel/jewel-container.md
@@ -36,15 +36,15 @@ Available since version __0.9.4__.
## Overview
-The Jewel Container class is a container that adds up to the features already
provided by Jewel Group.
+The Jewel Container class is a container that adds up to the features already
provided by [Jewel Group](component-sets/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 making children arrange in different
ways (i.e: horizontal, vertical,...)
+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 making children arrange in
different ways (i.e: horizontal, vertical,...)
-Container clip content by default thanks to its Viewport bead. This bead can
also manage clipping trough `clipContent` property. To add scrolling
functionality Viewport bead can be changed by ScrollingViewport.
+Container clip content by default thanks to its `Viewport` bead. This bead can
also manage clipping trough `clipContent` property. To add scrolling
functionality Viewport bead can be changed by `ScrollingViewport`.
-Other Group feature are "View States" to provide state management to show
diferent parts to the user.
+Other Container feature are [View States](/features/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 (throught
`strandChildren` property) instead to its view content unlike the
`addElement()` APIs which place children into the contentView.
+Finally Container can add elements directly to the strand (throught
`strandChildren` property) instead 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.
@@ -74,4 +74,87 @@ parent.addElement(Container);
where `parent` is the container where the control will be added.
+## Relevant Properties and Methods
+
+> Check the Reference of
[org.apache.royale.jewel.Container](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/Container){:target='_blank'}
for a more detailed list of properties and methods.
+
+### Properties
+
+| 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](features/as3/metadata#default-property). |
+| __states__ | _Array_ | The array of view states. These
should be instances of
[org.apache.royale.states.State](https://royale.apache.org/asdoc/index.html#!org.apache.royale.states/State){:target='_blank'}|
+| __strandChildren__ |
_[IParent](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IParent){:target='_blank'}_
| An object to access the immediate children of the strand. |
+
+### 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 the
initialization of the container is complete.
+
+Is needed when some action coded in a callback function need to be triggered
as the container is ready to use after initialization.
+
+You can attach callback listeners to the _initComplete_ event in __MXML__ as
follows:
+
+```mxml
+<j:Container initComplete="initCompleteHandler(event)"/>
+```
+
+the _initComplete_ event will use the `initCompleteHandler` callback function
you provide in __ActionScript__:
+
+```mxml
+<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:
+
+```as3
+var c:Container = new Container();
+c.addEventListener('initComplete', initCompleteHandler);
+parent.addElement(c);
+```
+
+## Relevant Beads
+
+| Bead Type | Implementation |
Description |
+|----------------- |------------------------------------------------
|------------------------------------------------ |
+|
[ContainerView](https://royale.apache.org/asdoc/index.html#!org.apache.royale.html.beads/ContainerView){:target='_blank'}
|
[org.apache.royale.core.IBeadView](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBeadView){:target='_blank'}
| This is the default view bead. |
+|
[BasicLayout](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.layouts/BasicLayout){:target='_blank'}
|
[org.apache.royale.core.IBeadLayout](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IBeadLayout){:target='_blank'}
| This is the default layout bead. |
+
+### Common Beads
+
+Jewel `Container` can use any of the layout beads available in Jewel library.
Also you can check [Related
controls](component-sets/jewel/container.html#related-controls) section to see
some preconfigured containers with specific layouts.
+
+## More examples
+
+* [Using Jewel
TileHorizontalLayout](https://royale.codeoscopic.com/using-jewel-tilehorizontallayout/){:target='_blank'}
+* [Using View States to show or hide
content](https://royale.codeoscopic.com/using-view-states-to-show-or-hide-content/){:target='_blank'}
+* [Customization through the Royale
API](https://royale.codeoscopic.com/customization-through-the-royale-api/){:target='_blank'}
+
+## Related controls {#related-controls}
+
+Other useful Jewel containers components are:
+
+*
[HContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/HContainer){:target='_blank'}
+*
[VContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/VContainer){:target='_blank'}
+*
[Group](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/Group){:target='_blank'}
+
diff --git a/component-sets/jewel/jewel-group.md
b/component-sets/jewel/jewel-group.md
index 549553c..4971c50 100644
--- a/component-sets/jewel/jewel-group.md
+++ b/component-sets/jewel/jewel-group.md
@@ -40,7 +40,9 @@ The Jewel Group class provides a light-weight container for
visual elements. By
The Jewel Group class provides a light-weight container for visual elements.
By default Group have a Basiclayout, allowing its children to be positioned
using absolute values (Notice Basic version doesn't provide any layout at all).
Group doesn't clip content so elements inside the group aren't hidden far
beyond group boundaries. Group doesn't have any chrome or visuals just position
inner childs.
-Also, no scrolling support is built in Group. For scrolling and clipping you
can use Jewel Container
+Also, no scrolling support is built in Group. For scrolling and clipping you
can use [Jewel Container](component-sets/jewel/container).
+
+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.
## Example of use
@@ -74,19 +76,22 @@ where `parent` is the container where the control will be
added.
### Properties
-| PROPERTY | Type | Description
|
-|-------------- |---------- |
----------------------------------------------------------------------------- |
-| __currentState__ | _String_ | The name of the current state. |
-| __mxmlContent__ | _Array_ | The array of childs for this group.
Is the [DefaultProperty](features/as3/metadata#default-property). |
-| __states__ | _Array_ | The array of view states. These should be
instances of
[org.apache.royale.states.State](https://royale.apache.org/asdoc/index.html#!org.apache.royale.states/State){:target='_blank'}|
+| 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](features/as3/metadata#default-property). |
+| __states__ | _Array_ | The array of view states. These
should be instances of
[org.apache.royale.states.State](https://royale.apache.org/asdoc/index.html#!org.apache.royale.states/State){:target='_blank'}|
### 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. |
-| __removeElement__ | c(IChild), dispatchEvent(Boolean=true)
| Remove a component from the parent. |
+| 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
@@ -133,7 +138,6 @@ parent.addElement(g);
Jewel `Group` can use any of the layout beads available in Jewel library. Also
you can check [Related
controls](component-sets/jewel/group.html#related-controls) section to see some
preconfigured groups with specific layouts.
-
## More examples
* [Using Jewel
TileHorizontalLayout](https://royale.codeoscopic.com/using-jewel-tilehorizontallayout/){:target='_blank'}
