You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/08/21 11:56:33 UTC
[royale-docs] branch master updated: jewel hgroup and vgroup doc
pages
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 3bb24e9 jewel hgroup and vgroup doc pages
3bb24e9 is described below
commit 3bb24e914b90cd5e7c70767b61c57e8b29928510
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Aug 21 13:56:21 2020 +0200
jewel hgroup and vgroup doc pages
---
component-sets/jewel/jewel-container.md | 2 +-
component-sets/jewel/jewel-hcontainer.md | 4 +-
.../jewel/{jewel-hcontainer.md => jewel-hgroup.md} | 65 ++++++++++------------
component-sets/jewel/jewel-vcontainer.md | 6 +-
.../jewel/{jewel-vcontainer.md => jewel-vgroup.md} | 65 ++++++++++------------
5 files changed, 64 insertions(+), 78 deletions(-)
diff --git a/component-sets/jewel/jewel-container.md b/component-sets/jewel/jewel-container.md
index 7217db7..603800a 100644
--- a/component-sets/jewel/jewel-container.md
+++ b/component-sets/jewel/jewel-container.md
@@ -84,7 +84,7 @@ where `parent` is the container where the control will be added.
|------------------- |--------------| ------------------------------------------------------------------------------------------------------|
| __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). |
+| __mxmlContent__ | _Array_ | The array of childs for this container. 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. |
diff --git a/component-sets/jewel/jewel-hcontainer.md b/component-sets/jewel/jewel-hcontainer.md
index aa6e78c..f22b0ac 100644
--- a/component-sets/jewel/jewel-hcontainer.md
+++ b/component-sets/jewel/jewel-hcontainer.md
@@ -80,7 +80,7 @@ where `parent` is the container where the HContainer will be added.
| __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 group. Is the [DefaultProperty](features/as3/metadata#default-property). |
+| __mxmlContent__ | _Array_ | The array of childs for this container. 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. |
| __variableRowHeight__ | _Boolean_ | Specifies whether layout elements are allocated their preferred height. |
@@ -147,12 +147,12 @@ parent.addElement(hc);
Other useful Jewel containers components are:
-* [Card](component-sets/jewel/card)
* [Container](component-sets/jewel/container)
* [VContainer](component-sets/jewel/vcontainer)
* [Group](component-sets/jewel/group)
* [HGroup](component-sets/jewel/hgroup)
* [VGroup](component-sets/jewel/vgroup)
+* [Card](component-sets/jewel/card)
diff --git a/component-sets/jewel/jewel-hcontainer.md b/component-sets/jewel/jewel-hgroup.md
similarity index 69%
copy from component-sets/jewel/jewel-hcontainer.md
copy to component-sets/jewel/jewel-hgroup.md
index aa6e78c..17dadd9 100644
--- a/component-sets/jewel/jewel-hcontainer.md
+++ b/component-sets/jewel/jewel-hgroup.md
@@ -15,13 +15,13 @@
# limitations under the License.
layout: docpage
-title: Jewel HContainer
-description: The Jewel HContainer
-permalink: /component-sets/jewel/hcontainer
+title: Jewel HGroup
+description: The Jewel HGroup
+permalink: /component-sets/jewel/hgroup
---
[< Jewel Components list](component-sets/jewel)
-# Jewel HContainer
+# Jewel HGroup
## Reference
@@ -29,46 +29,46 @@ Available since version __0.9.7__.
| Class | Extends |
|------------------------------ |---------------------------------- |
-| [org.apache.royale.jewel.HContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/HContainer){:target='_blank'} | [org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainerWithGap](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.container/AlignmentItemsContainerWithGap){:target='_blank'} |
+| [org.apache.royale.jewel.HGroup](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/HGroup){:target='_blank'} | [org.apache.royale.jewel.supportClasses.group.AlignmentItemsGroupWithGap](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.group/AlignmentItemsGroupWithGap){:target='_blank'} |
<sup>_Note: This component is currently only available for JavaScript._</sup>
## Overview
-The Jewel HContainer class is a [Container](component-sets/jewel/container) that layout elements horizontaly and provide some properties to allow more flexibility like `gap` to define some spacing between items, or `itemsHorizontalAlign` and `itemsVerticalAlign`, to distribute elements in different ways along horizontal and vertical axis respectively.
+The Jewel HGroup class is a [Group](component-sets/jewel/group) that layout elements horizontaly and provide some properties to allow more flexibility like `gap` to define some spacing between items, or `itemsHorizontalAlign` and `itemsVerticalAlign`, to distribute elements in different ways along horizontal and vertical axis respectively.
## Example of use
-In __MXML__ declare a `HContainer` like this:
+In __MXML__ declare a `HGroup` like this:
```mxml
-<j:HContainer width="100%" height="300" gap="3" itemsHorizontalAlign="itemsCenter">
+<j:HGroup 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>
+</j:HGroup>
```
In __ActionScript__ we can do the same in the following way.
```as3
-var hc:HContainer = new HContainer();
-// add a label to the HContainer
+var hg:HGroup = new HGroup();
+// add a label to the HGroup
var label:Label = new Label();
label.text = "Some text";
-hc.addElement(label);
-// add the HContainer to the parent
-parent.addElement(hc);
+hg.addElement(label);
+// add the HGroup to the parent
+parent.addElement(hg);
```
-where `parent` is the container where the HContainer will be added.
+where `parent` is the container where the HGroup will be added.
## Relevant Properties and Methods
-> Check the Reference of [org.apache.royale.jewel.HContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/HContainer){:target='_blank'} for a more detailed list of properties and methods.
+> Check the Reference of [org.apache.royale.jewel.HGroup](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/HGroup){:target='_blank'} for a more detailed list of properties and methods.
### Properties
@@ -82,7 +82,6 @@ where `parent` is the container where the HContainer will be added.
| __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. |
| __variableRowHeight__ | _Boolean_ | Specifies whether layout elements are allocated their preferred height. |
### Methods
@@ -97,14 +96,14 @@ where `parent` is the container where the HContainer will be added.
## Relevant Events
-The most important event is `initComplete`, which indicates that the initialization of the container is complete.
+The most important event is `initComplete`, which indicates that the initialization of the group 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.
+Is needed when some action coded in a callback function need to be triggered as the group is ready to use after initialization.
You can attach callback listeners to the _initComplete_ event in __MXML__ as follows:
```mxml
-<j:HContainer initComplete="initCompleteHandler(event)"/>
+<j:HGroup initComplete="initCompleteHandler(event)"/>
```
the _initComplete_ event will use the `initCompleteHandler` callback function you provide in __ActionScript__:
@@ -113,29 +112,28 @@ the _initComplete_ event will use the `initCompleteHandler` callback function yo
<fx:Script>
<![CDATA[
private function initCompleteHandler(event:Event):void {
- trace("HContainer is ready!");
+ trace("HGroup is ready!");
}
]]>
</fx:Script>
```
-When the container is initialized the message _"HContainer is ready!"_ appears in the console log.
+When the group is initialized the message _"HGroup is ready!"_ appears in the console log.
In __ActionScript__ we can add an event handler this way:
```as3
-var hc:HContainer = new HContainer();
-hc.addEventListener('initComplete', initCompleteHandler);
-parent.addElement(hc);
+var hg:HGroup = new HGroup();
+hg.addEventListener('initComplete', initCompleteHandler);
+parent.addElement(hg);
```
## 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. |
+| [GroupView](https://royale.apache.org/asdoc/index.html#!org.apache.royale.html.beads/GroupView){: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. |
| [HorizontalLayout](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.layouts/HorizontalLayout){: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. |
-| [Viewport](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses/Viewport){:target='_blank'} | [org.apache.royale.core.IViewport](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IViewport){:target='_blank'} | Define the area that display content. |
## More examples
@@ -147,14 +145,9 @@ parent.addElement(hc);
Other useful Jewel containers components are:
-* [Card](component-sets/jewel/card)
-* [Container](component-sets/jewel/container)
-* [VContainer](component-sets/jewel/vcontainer)
* [Group](component-sets/jewel/group)
-* [HGroup](component-sets/jewel/hgroup)
* [VGroup](component-sets/jewel/vgroup)
-
-
-
-
-
+* [Container](component-sets/jewel/container)
+* [HContainer](component-sets/jewel/hcontainer)
+* [VContainer](component-sets/jewel/vcontainer)
+* [Card](component-sets/jewel/card)
diff --git a/component-sets/jewel/jewel-vcontainer.md b/component-sets/jewel/jewel-vcontainer.md
index fbfc8f8..56bc26b 100644
--- a/component-sets/jewel/jewel-vcontainer.md
+++ b/component-sets/jewel/jewel-vcontainer.md
@@ -42,7 +42,7 @@ The Jewel VContainer class is a [Container](component-sets/jewel/container) that
In __MXML__ declare a `VContainer` like this:
```mxml
-<j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom" className="wrapper">
+<j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom">
<j:Card width="50%" height="100">
<j:Label text="vert bottom"/>
</j:Card>
@@ -80,7 +80,7 @@ where `parent` is the container where the VContainer will be added.
| __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 group. Is the [DefaultProperty](features/as3/metadata#default-property). |
+| __mxmlContent__ | _Array_ | The array of childs for this container. 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. |
| __variableRowHeight__ | _Boolean_ | Specifies whether layout elements are allocated their preferred height. |
@@ -147,12 +147,12 @@ parent.addElement(vc);
Other useful Jewel containers components are:
-* [Card](component-sets/jewel/card)
* [Container](component-sets/jewel/container)
* [HContainer](component-sets/jewel/hcontainer)
* [Group](component-sets/jewel/group)
* [HGroup](component-sets/jewel/hgroup)
* [VGroup](component-sets/jewel/vgroup)
+* [Card](component-sets/jewel/card)
diff --git a/component-sets/jewel/jewel-vcontainer.md b/component-sets/jewel/jewel-vgroup.md
similarity index 69%
copy from component-sets/jewel/jewel-vcontainer.md
copy to component-sets/jewel/jewel-vgroup.md
index fbfc8f8..d3586c4 100644
--- a/component-sets/jewel/jewel-vcontainer.md
+++ b/component-sets/jewel/jewel-vgroup.md
@@ -15,13 +15,13 @@
# limitations under the License.
layout: docpage
-title: Jewel HContainer
-description: The Jewel VContainer
-permalink: /component-sets/jewel/vcontainer
+title: Jewel VGroup
+description: The Jewel VGroup
+permalink: /component-sets/jewel/vgroup
---
[< Jewel Components list](component-sets/jewel)
-# Jewel VContainer
+# Jewel VGroup
## Reference
@@ -29,46 +29,46 @@ Available since version __0.9.7__.
| Class | Extends |
|------------------------------ |---------------------------------- |
-| [org.apache.royale.jewel.VContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/VContainer){:target='_blank'} | [org.apache.royale.jewel.supportClasses.container.AlignmentItemsContainerWithGap](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.container/AlignmentItemsContainerWithGap){:target='_blank'} |
+| [org.apache.royale.jewel.VGroup](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/VGroup){:target='_blank'} | [org.apache.royale.jewel.supportClasses.group.AlignmentItemsGroupWithGap](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.group/AlignmentItemsGroupWithGap){:target='_blank'} |
<sup>_Note: This component is currently only available for JavaScript._</sup>
## Overview
-The Jewel VContainer class is a [Container](component-sets/jewel/container) that layout elements verticaly and provide some properties to allow more flexibility like `gap` to define some spacing between items, or `itemsHorizontalAlign` and `itemsVerticalAlign`, to distribute elements in different ways along horizontal and vertical axis respectively.
+The Jewel VGroup class is a [Group](component-sets/jewel/group) that layout elements verticaly and provide some properties to allow more flexibility like `gap` to define some spacing between items, or `itemsHorizontalAlign` and `itemsVerticalAlign`, to distribute elements in different ways along horizontal and vertical axis respectively.
## Example of use
-In __MXML__ declare a `VContainer` like this:
+In __MXML__ declare a `VGroup` like this:
```mxml
-<j:VContainer width="100%" height="300" gap="3" itemsVerticalAlign="itemsBottom" className="wrapper">
+<j:VGroup 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>
+</j:VGroup>
```
In __ActionScript__ we can do the same in the following way.
```as3
-var vc:VContainer = new VContainer();
-// add a label to the VContainer
+var vg:VGroup = new VGroup();
+// add a label to the VGroup
var label:Label = new Label();
label.text = "Some text";
-vc.addElement(label);
-// add the VContainer to the parent
-parent.addElement(vc);
+vg.addElement(label);
+// add the VGroup to the parent
+parent.addElement(vg);
```
-where `parent` is the container where the VContainer will be added.
+where `parent` is the container where the VGroup will be added.
## Relevant Properties and Methods
-> Check the Reference of [org.apache.royale.jewel.VContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/VContainer){:target='_blank'} for a more detailed list of properties and methods.
+> Check the Reference of [org.apache.royale.jewel.VGroup](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/VGroup){:target='_blank'} for a more detailed list of properties and methods.
### Properties
@@ -82,7 +82,6 @@ where `parent` is the container where the VContainer will be added.
| __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. |
| __variableRowHeight__ | _Boolean_ | Specifies whether layout elements are allocated their preferred height. |
### Methods
@@ -97,14 +96,14 @@ where `parent` is the container where the VContainer will be added.
## Relevant Events
-The most important event is `initComplete`, which indicates that the initialization of the container is complete.
+The most important event is `initComplete`, which indicates that the initialization of the group 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.
+Is needed when some action coded in a callback function need to be triggered as the group is ready to use after initialization.
You can attach callback listeners to the _initComplete_ event in __MXML__ as follows:
```mxml
-<j:VContainer initComplete="initCompleteHandler(event)"/>
+<j:VGroup initComplete="initCompleteHandler(event)"/>
```
the _initComplete_ event will use the `initCompleteHandler` callback function you provide in __ActionScript__:
@@ -113,29 +112,28 @@ the _initComplete_ event will use the `initCompleteHandler` callback function yo
<fx:Script>
<![CDATA[
private function initCompleteHandler(event:Event):void {
- trace("VContainer is ready!");
+ trace("VGroup is ready!");
}
]]>
</fx:Script>
```
-When the container is initialized the message _"VContainer is ready!"_ appears in the console log.
+When the group is initialized the message _"VGroup is ready!"_ appears in the console log.
In __ActionScript__ we can add an event handler this way:
```as3
-var vc:VContainer = new VContainer();
-vc.addEventListener('initComplete', initCompleteHandler);
-parent.addElement(vc);
+var vg:VGroup = new VGroup();
+vg.addEventListener('initComplete', initCompleteHandler);
+parent.addElement(vg);
```
## 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. |
+| [GroupView](https://royale.apache.org/asdoc/index.html#!org.apache.royale.html.beads/GroupView){: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. |
| [VerticalLayout](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.beads.layouts/VerticalLayout){: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. |
-| [Viewport](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses/Viewport){:target='_blank'} | [org.apache.royale.core.IViewport](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IViewport){:target='_blank'} | Define the area that display content. |
## More examples
@@ -147,14 +145,9 @@ parent.addElement(vc);
Other useful Jewel containers components are:
-* [Card](component-sets/jewel/card)
-* [Container](component-sets/jewel/container)
-* [HContainer](component-sets/jewel/hcontainer)
* [Group](component-sets/jewel/group)
* [HGroup](component-sets/jewel/hgroup)
-* [VGroup](component-sets/jewel/vgroup)
-
-
-
-
-
+* [Container](component-sets/jewel/container)
+* [HContainer](component-sets/jewel/hcontainer)
+* [VContainer](component-sets/jewel/vcontainer)
+* [Card](component-sets/jewel/card)