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/12 10:50:27 UTC
[royale-asjs] branch develop updated: BE0015 : finish example
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new e97d2a7 BE0015 : finish example
e97d2a7 is described below
commit e97d2a7e0aad51a63eb095f8d131c41f3fb12fc0
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Aug 12 12:50:16 2020 +0200
BE0015 : finish example
---
.../README.txt | 8 ++-
.../pom.xml | 18 +-----
.../BE0015_Using_Jewel_TileHorizontalLayout.mxml | 73 +++++++++++-----------
.../TabBarVerticalIconItemRenderer.mxml | 6 +-
.../VerticalIconListItemRenderer.mxml | 5 +-
5 files changed, 48 insertions(+), 62 deletions(-)
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/README.txt b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/README.txt
index 05f3524..43359df 100644
--- a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/README.txt
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/README.txt
@@ -21,7 +21,9 @@ DESCRIPTION
Using Jewel TileHorizontalLayout
-This example shows some supported ways to work with vector graphics in Apache Royale.
-SVG graphics and the powerful ActionScript 3 drawing API:
+This example shows how to use the Jewel TileHorizontalLayout in Jewel component containers
+and data containers to arrange items as tiles.
-https://royale.apache.org/working-with-vector-graphics/
+The layout allows customization of tile's size, gaps between tiles, and requested columns and/or rows.
+
+https://royale.apache.org/using-jewel-tilehorizontallayout/
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/pom.xml b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/pom.xml
index 43d9687..19e8baa 100644
--- a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/pom.xml
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/pom.xml
@@ -16,7 +16,8 @@
See the License for the specific language governing permissions and
limitations under the License.
---><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
@@ -49,17 +50,9 @@
</plugins>
</build>
-
<dependencies>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Network</artifactId>
- <version>0.9.8-SNAPSHOT</version>
- <type>swc</type>
- <classifier>js</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
<artifactId>Jewel</artifactId>
<version>0.9.8-SNAPSHOT</version>
<type>swc</type>
@@ -89,13 +82,6 @@
<dependencies>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Network</artifactId>
- <version>0.9.8-SNAPSHOT</version>
- <type>swc</type>
- <classifier>swf</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
<artifactId>Jewel</artifactId>
<version>0.9.8-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml
index ace1c39..691b0c0 100644
--- a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/BE0015_Using_Jewel_TileHorizontalLayout.mxml
@@ -22,30 +22,6 @@
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:html="library://ns.apache.org/royale/html"
xmlns:vos="vos.*">
-
- <fx:Script>
- <![CDATA[
- import vos.TabBarButtonVO;
- import vos.IconListVO;
- import org.apache.royale.collections.ArrayList;
-
- [Bindable]
- public var listData:ArrayList = new ArrayList([
- new IconListVO("Ank", FontAwesome5IconType.ANKH),
- new IconListVO("Atom", FontAwesome5IconType.ATOM),
- new IconListVO("Burn", FontAwesome5IconType.BURN),
- new IconListVO("Candy Cane", FontAwesome5IconType.CANDY_CANE),
- new IconListVO("Fire", FontAwesome5IconType.FIRE_ALT),
- new IconListVO("Duck", FontAwesome5IconType.DUCK),
- new IconListVO("Clound And Moon", FontAwesome5IconType.CLOUD_MOON),
- new IconListVO("Europe", FontAwesome5IconType.GLOBE_EUROPE),
- new IconListVO("Electric Guitar", FontAwesome5IconType.GUITAR_ELECTRIC),
- new IconListVO("Mask", FontAwesome5IconType.MASK),
- new IconListVO("Skull", FontAwesome5IconType.SKULL),
- new IconListVO("Spider", FontAwesome5IconType.SPIDER)
- ]);
- ]]>
- </fx:Script>
<fx:Style>
.box {
@@ -73,9 +49,8 @@
</j:CardHeader>
<j:CardExpandedContent>
- <j:TabBar localId="tabbar" width="100%" selectedIndex="0"
- itemRenderer="itemRenderers.TabBarVerticalIconItemRenderer"
- sameWidths="true">
+ <j:TabBar localId="tabbar" width="100%" selectedIndex="0" sameWidths="true"
+ itemRenderer="itemRenderers.TabBarVerticalIconItemRenderer">
<js:ArrayList>
<fx:Array>
<vos:TabBarButtonVO label="Tile Container" hash="sec1" icon="{FontAwesome5IconType.TH_LARGE}"/>
@@ -91,9 +66,10 @@
<j:Container width="100%">
<j:beads>
<j:ScrollingViewport/>
- <j:TileHorizontalLayout localId="thl" waitForSize="true"
+ <j:TileHorizontalLayout localId="thl"
horizontalGap="6" verticalGap="6" requestedColumnCount="3"/>
</j:beads>
+
<html:Div className="box" text="1"/>
<html:Div className="box" text="2"/>
<html:Div className="box" text="3"/>
@@ -106,17 +82,35 @@
<html:Div className="box" text="10"/>
<html:Div className="box" text="11"/>
<html:Div className="box" text="12"/>
+
</j:Container>
</j:SectionContent>
<j:SectionContent name="sec2">
<j:List width="100%" height="250"
- itemRenderer="itemRenderers.VerticalIconListItemRenderer"
- dataProvider="{listData}">
+ itemRenderer="itemRenderers.VerticalIconListItemRenderer">
<j:beads>
- <j:TileHorizontalLayout localId="thll" waitForSize="true"
- horizontalGap="6" verticalGap="6" columnWidth="140" rowHeight="70"/>
+ <j:TileHorizontalLayout localId="thll"
+ horizontalGap="6" verticalGap="6" columnWidth="130" rowHeight="70"/>
</j:beads>
+
+ <js:ArrayList>
+ <fx:Array>
+ <vos:IconListVO label="Ank" icon="{FontAwesome5IconType.ANKH}"/>
+ <vos:IconListVO label="Atom" icon="{FontAwesome5IconType.ATOM}"/>
+ <vos:IconListVO label="Burn" icon="{FontAwesome5IconType.BURN}"/>
+ <vos:IconListVO label="Candy Cane" icon="{FontAwesome5IconType.CANDY_CANE}"/>
+ <vos:IconListVO label="Fire" icon="{FontAwesome5IconType.FIRE_ALT}"/>
+ <vos:IconListVO label="Duck" icon="{FontAwesome5IconType.DUCK}"/>
+ <vos:IconListVO label="Cloud And Moon" icon="{FontAwesome5IconType.CLOUD_MOON}"/>
+ <vos:IconListVO label="Europe" icon="{FontAwesome5IconType.GLOBE_EUROPE}"/>
+ <vos:IconListVO label="Electric Guitar" icon="{FontAwesome5IconType.GUITAR_ELECTRIC}"/>
+ <vos:IconListVO label="Mask" icon="{FontAwesome5IconType.MASK}"/>
+ <vos:IconListVO label="Skull" icon="{FontAwesome5IconType.SKULL}"/>
+ <vos:IconListVO label="Spider" icon="{FontAwesome5IconType.SPIDER}"/>
+ </fx:Array>
+ </js:ArrayList>
+
</j:List>
</j:SectionContent>
@@ -130,15 +124,18 @@
</j:beads>
<j:VGroup>
<j:Label text="columnWidth"/>
- <j:HSlider width="200" value="85" minimum="50" maximum="150" valueChange="thl.columnWidth = thll.columnWidth = event.target.value;"/>
+ <j:HSlider width="200" value="85" minimum="50" maximum="150"
+ valueChange="tabbar.selectedIndex == 0 ? thl.columnWidth = event.target.value : thll.columnWidth = event.target.value;"/>
</j:VGroup>
<j:VGroup>
<j:Label text="horizontalGap"/>
- <j:HSlider width="200" value="6" minimum="0" maximum="20" valueChange="thl.horizontalGap = thll.horizontalGap = event.target.value"/>
+ <j:HSlider width="200" value="6" minimum="0" maximum="20"
+ valueChange="tabbar.selectedIndex == 0 ? thl.horizontalGap = event.target.value : thll.horizontalGap = event.target.value;"/>
</j:VGroup>
<j:VGroup>
<j:Label text="requestedColumnCount"/>
- <j:HSlider width="200" value="4" minimum="1" maximum="8" valueChange="thl.requestedColumnCount = thll.requestedColumnCount = event.target.value"/>
+ <j:HSlider width="200" value="4" minimum="1" maximum="8"
+ valueChange="tabbar.selectedIndex == 0 ? thl.requestedColumnCount = event.target.value : thll.requestedColumnCount = event.target.value;"/>
</j:VGroup>
</j:BarSection>
<j:BarSection width="50%" itemsHorizontalAlign="itemsRight">
@@ -147,11 +144,13 @@
</j:beads>
<j:VGroup>
<j:Label text="rowHeight"/>
- <j:HSlider width="200" value="60" minimum="50" maximum="150" valueChange="thl.rowHeight = thll.rowHeight = event.target.value"/>
+ <j:HSlider width="200" value="60" minimum="50" maximum="150"
+ valueChange="tabbar.selectedIndex == 0 ? thl.rowHeight = event.target.value : thll.rowHeight = event.target.value;"/>
</j:VGroup>
<j:VGroup>
<j:Label text="verticalGap"/>
- <j:HSlider width="200" value="6" minimum="0" maximum="20" valueChange="thl.verticalGap = thll.verticalGap = event.target.value"/>
+ <j:HSlider width="200" value="6" minimum="0" maximum="20"
+ valueChange="tabbar.selectedIndex == 0 ? thl.verticalGap = event.target.value : thll.verticalGap = event.target.value;"/>
</j:VGroup>
</j:BarSection>
</j:CardActions>
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
index beb6bc9..37a8754 100644
--- a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
@@ -17,11 +17,11 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
-<j:TabBarButtonInidicatorRestrictedToContentItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+<j:TabBarButtonInidicatorRestrictedToContentItemRenderer
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns="http://www.w3.org/1999/xhtml">
+ xmlns:html="library://ns.apache.org/royale/html" >
<fx:Script>
<![CDATA[
diff --git a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/VerticalIconListItemRenderer.mxml b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/VerticalIconListItemRenderer.mxml
index c780050..c2e7ca4 100644
--- a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/VerticalIconListItemRenderer.mxml
+++ b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/VerticalIconListItemRenderer.mxml
@@ -18,9 +18,8 @@ limitations under the License.
-->
<j:ListItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns="http://www.w3.org/1999/xhtml">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic">
<fx:Script>
<![CDATA[