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 ea0ac36 add datacontainer start
ea0ac36 is described below
commit ea0ac363371d478189ae55fdf81734922c3f026d
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Aug 13 16:22:40 2020 +0200
add datacontainer start
---
component-sets/jewel/jewel-container.md | 8 ++---
component-sets/jewel/jewel-datacontainer.md | 47 +++++++++++++++++++++++++++--
2 files changed, 49 insertions(+), 6 deletions(-)
diff --git a/component-sets/jewel/jewel-container.md
b/component-sets/jewel/jewel-container.md
index 1164322..8c980a5 100644
--- a/component-sets/jewel/jewel-container.md
+++ b/component-sets/jewel/jewel-container.md
@@ -30,7 +30,7 @@ Available since version __0.9.4__.
| Class | Extends |
Implements |
|------------------------------ |----------------------------------
|--------------------------------- |
-|
[org.apache.royale.jewel.Container](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/Container){:target='_blank'}
| [Jewel
ContainerBase](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.group/ContainerBase){:target='_blank'}
|
[org.apache.royale.core.IMXMLDocument](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IMXMLDocument){:target='_blank'}
|
+|
[org.apache.royale.jewel.Container](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/Container){:target='_blank'}
| [Jewel
ContainerBase](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.container/ContainerBase){:target='_blank'}
|
[org.apache.royale.core.IMXMLDocument](https://royale.apache.org/asdoc/index.html#!org.apache.royale.core/IMXMLDocument){:target='_blank'}
|
<sup>_Note: This component is currently only available for JavaScript._</sup>
@@ -64,12 +64,12 @@ In __MXML__ declare a `Container` like this:
In __ActionScript__ we can do the same in the following way:
```as3
-var Container:Container = new Container();
+var container:Container = new Container();
// add a button to the Container
var button:Button = new Button();
-Container.addElement(button);
+container.addElement(button);
// add the Container to the parent
-parent.addElement(Container);
+parent.addElement(container);
```
where `parent` is the container where the control will be added.
diff --git a/component-sets/jewel/jewel-datacontainer.md
b/component-sets/jewel/jewel-datacontainer.md
index 7a26d66..c52942c 100644
--- a/component-sets/jewel/jewel-datacontainer.md
+++ b/component-sets/jewel/jewel-datacontainer.md
@@ -23,6 +23,49 @@ permalink: /component-sets/jewel/datacontainer
# Jewel DataContainer
-subtitle
-text
+## Reference
+
+Available since version __0.9.4__.
+
+| Class | Extends |
Implements |
+|------------------------------ |----------------------------------
|--------------------------------- |
+|
[org.apache.royale.jewel.DataContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/DataContainer){:target='_blank'}
| [Jewel
ContainerBase](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.container/DataContainerBase){:target='_blank'}
| [Jewel
IListWithPresentationModel](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel.supportClasses.list/IListWithPresentationModel){:target='_blank'}
|
+
+<sup>_Note: This component is currently only available for JavaScript._</sup>
+
+## Overview
+
+The Jewel DataContainer class is a component that displays multiple data items.
+
+This component gets the data through its `dataProvider` property that receives
an `ArrayList` of data objects. To represent each item the component use an
[ItemRenderer](/features/item-renderers) class that can be configured and
customized. The component generate dynamically as many instances of
ItemRenderer as items in the data provider array and fill each instance with
the appropiate data. By default it uses `StringItemRenderer` as the item
renderer.
+
+By default items are layout vertically using Jewel `VerticalLayout`. This
component has a `Viewport` that clip generated items.
+
+## Example of use
+
+In __MXML__ declare a `DataContainer` like this:
+
+```mxml
+<j:DataContainer width="100%" height="250">
+ <js:ArrayList localId="avengers" source="[Iron Man, Hulk, Thor, Captain
America, Black Widow]"/>
+</j:DataContainer>
+```
+
+> Notice that we can nest the ArrayList directly to the DataContainer tag
because "dataProvider" is its
[DefaultProperty](features/as3/metadata#default-property).
+
+In __ActionScript__ we can do the same in the following way:
+
+```as3
+var dc:DataContainer = new DataContainer();
+dc.dataProvider = new ArrayList(["Iron Man", "Hulk", "Thor", "Captain
America", "Black Widow", "Hawkeye"]);
+// add the Container to the parent
+parent.addElement(dc);
+```
+
+where `parent` is the container where the control will be added.
+
+## Relevant Properties and Methods
+
+> Check the Reference of
[org.apache.royale.jewel.DataContainer](https://royale.apache.org/asdoc/index.html#!org.apache.royale.jewel/DataContainer){:target='_blank'}
for a more detailed list of properties and methods.
+
