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/13 12:17:52 UTC

[royale-docs] branch master updated: jewel container doc page start

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 569fd43  jewel container doc page start
569fd43 is described below

commit 569fd436d470424445f1ad1267c81ae77970ea4c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Aug 13 14:17:32 2020 +0200

    jewel container doc page start
---
 component-sets/jewel/jewel-container.md | 53 +++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/component-sets/jewel/jewel-container.md b/component-sets/jewel/jewel-container.md
index 5e76096..0da429d 100644
--- a/component-sets/jewel/jewel-container.md
+++ b/component-sets/jewel/jewel-container.md
@@ -23,6 +23,55 @@ permalink: /component-sets/jewel/container
 
 # Jewel Container
 
-subtitle
 
-text
+## Reference
+
+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'} 	|
+
+<sup>_Note: This component is currently only available for JavaScript._</sup>
+
+## Overview
+
+The Jewel Container class is a container that adds up to 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 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.
+
+Other Group feature are "View States" to provide state management to show diferent parts 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.
+
+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
+
+In __MXML__ declare a `Container` like this:
+
+```mxml
+<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: 
+
+```as3
+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.
+
+