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 0d9f471 removeBE0015: more improvements
0d9f471 is described below
commit 0d9f471974e80592f948390b6f60fabf1dd6f035
Author: Carlos Rovira <[email protected]>
AuthorDate: Fri Jun 5 20:07:19 2020 +0200
removeBE0015: more improvements
---
.../BE0015_Using_Jewel_TileHorizontalLayout.mxml | 115 ++++++++++++++-------
.../TabBarVerticalIconItemRenderer.mxml | 51 +++++++++
.../VerticalIconListItemRenderer.mxml | 47 +++++++++
.../src/main/royale/vos/IconListVO.as | 33 ++++++
.../src/main/royale/vos/TabBarButtonVO.as | 35 +++++++
5 files changed, 241 insertions(+), 40 deletions(-)
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 cbbe603..3d91d10 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
@@ -20,17 +20,39 @@
<j:Application 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:html="library://ns.apache.org/royale/html"
+ xmlns:vos="vos.*">
+
<fx:Script>
- <![CDATA[
-
-
- ]]>
+ <![CDATA[
+ import vos.TabBarButtonVO;
+ import vos.IconListVO;
+ import org.apache.royale.collections.ArrayList;
+
+ [Bindable]
+ public var tabBarData:ArrayList = new ArrayList([
+ new TabBarButtonVO("Tile Container",
"sec1", FontAwesome5IconType.TH_LARGE),
+ new TabBarButtonVO("Tile List", "sec2",
FontAwesome5IconType.TH_LIST)
+ ]);
+
+ [Bindable]
+ public var listData:ArrayList = new ArrayList([
+ new IconListVO("All Jewel UI Set Controls",
FontAwesome5IconType.ANCHOR),
+ new IconListVO("Alert", FontAwesome5IconType.AREA_CHART),
+ new IconListVO("Button", FontAwesome5IconType.BACKWARD),
+ new IconListVO("DropDownList", FontAwesome5IconType.DASHCUBE),
+ new IconListVO("CheckBox",
FontAwesome5IconType.CALENDAR_MINUS),
+ new IconListVO("Label", FontAwesome5IconType.EDGE),
+ new IconListVO("List", FontAwesome5IconType.FEMALE),
+ new IconListVO("RadioButton", FontAwesome5IconType.FILE),
+ new IconListVO("Slider", FontAwesome5IconType.GENDERLESS),
+ new IconListVO("Text", FontAwesome5IconType.HACKER_NEWS),
+ new IconListVO("TextInput", FontAwesome5IconType.GIFT)
+ ]);
+ ]]>
</fx:Script>
- <fx:Style>
-
+ <fx:Style>
.box {
background: #666;
border-radius: 3px;
@@ -50,33 +72,55 @@
<j:Paddings padding="50"/>
</j:beads>
- <j:Card width="460" height="550">
+ <j:Card width="500">
<j:CardHeader>
<html:H3 text="Using TileHorizontalLayout"
className="primary-normal"/>
</j:CardHeader>
- <j:CardPrimaryContent height="330">
- <j:Container width="400">
- <j:beads>
- <j:ScrollingViewport/>
- <j:TileHorizontalLayout localId="thl"
waitForSize="true"
- horizontalGap="6" verticalGap="6"
columnWidth="120" rowHeight="60"/>
- </j:beads>
-
- <html:Div className="box" text="1"/>
- <html:Div className="box" text="2"/>
- <html:Div className="box" text="3"/>
- <html:Div className="box" text="4"/>
- <html:Div className="box" text="5"/>
- <html:Div className="box" text="6"/>
- <html:Div className="box" text="7"/>
- <html:Div className="box" text="8"/>
- <html:Div className="box" text="9"/>
- <html:Div className="box" text="10"/>
- <html:Div className="box" text="11"/>
- <html:Div className="box" text="12"/>
+
+ <j:CardExpandedContent>
+ <j:TabBar localId="tabbar" width="100%" selectedIndex="0"
+
itemRenderer="itemRenderers.TabBarVerticalIconItemRenderer"
+ dataProvider="{tabBarData}" sameWidths="true"/>
+ </j:CardExpandedContent>
+
+ <j:CardPrimaryContent>
+ <j:TabBarContent selectedContent="{(tabbar.selectedItem as
TabBarButtonVO).hash}">
+ <j:SectionContent name="sec1">
+ <j:Container width="100%">
+ <j:beads>
+ <j:ScrollingViewport/>
+ <j:TileHorizontalLayout localId="thl"
waitForSize="true"
+ horizontalGap="6" verticalGap="6"
columnWidth="85" rowHeight="60"/>
+ </j:beads>
+ <html:Div className="box" text="1"/>
+ <html:Div className="box" text="2"/>
+ <html:Div className="box" text="3"/>
+ <html:Div className="box" text="4"/>
+ <html:Div className="box" text="5"/>
+ <html:Div className="box" text="6"/>
+ <html:Div className="box" text="7"/>
+ <html:Div className="box" text="8"/>
+ <html:Div className="box" text="9"/>
+ <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="280"
+
itemRenderer="itemRenderers.VerticalIconListItemRenderer"
+ dataProvider="{listData}">
+ <j:beads>
+ <j:TileHorizontalLayout localId="thll"
waitForSize="true"
+ horizontalGap="6" verticalGap="6"
columnWidth="120" rowHeight="60"/>
+ </j:beads>
+ </j:List>
+ </j:SectionContent>
- </j:Container>
+ </j:TabBarContent>
</j:CardPrimaryContent>
+
<j:CardActions>
<j:BarSection width="50%">
<j:beads>
@@ -84,7 +128,7 @@
</j:beads>
<j:VGroup>
<j:Label
text="columnWidth"/>
- <j:HSlider width="200"
value="60" minimum="50" maximum="150" valueChange="thl.columnWidth =
event.target.value"/>
+ <j:HSlider width="200"
value="85" minimum="50" maximum="150" valueChange="thl.columnWidth =
event.target.value"/>
</j:VGroup>
<j:VGroup>
<j:Label
text="horizontalGap"/>
@@ -94,20 +138,11 @@
<j:Label
text="requestedColumnCount"/>
<j:HSlider width="200"
value="4" minimum="1" maximum="8" valueChange="thl.requestedColumnCount =
event.target.value"/>
</j:VGroup>
- <!-- <j:ToggleButton localId="ruleVisibility"
- outlined="true" emphasis="emphasized"
- text="Hide Rule" selectedText="Show Rule"
selected="true">
- <j:icon>
- <js:MaterialToggleIcon
text="{MaterialIconType.VISIBILITY_OFF}"
selectedText="{MaterialIconType.VISIBILITY}"/>
- </j:icon>
- </j:ToggleButton> -->
</j:BarSection>
<j:BarSection width="50%"
itemsHorizontalAlign="itemsRight">
<j:beads>
<j:VerticalLayout/>
</j:beads>
- <!-- <j:Label text="Slide to fill"/>
- <j:HSlider localId="slider" value="0" minimum="0"
maximum="500" valueChange="changeFill(event)"/> -->
<j:VGroup>
<j:Label
text="rowHeight"/>
<j:HSlider width="200"
value="60" minimum="50" maximum="150" valueChange="thl.rowHeight =
event.target.value"/>
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
new file mode 100644
index 0000000..beb6bc9
--- /dev/null
+++
b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/TabBarVerticalIconItemRenderer.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<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";>
+
+ <fx:Script>
+ <![CDATA[
+ import vos.TabBarButtonVO;
+ import org.apache.royale.icons.FontAwesomeIcon;
+
+ [Bindable("dataChange")]
+ public function get tabButton():TabBarButtonVO
+ {
+ return data as TabBarButtonVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+
+ <j:VGroup gap="3" itemsHorizontalAlign="itemsCenter">
+ <js:FontAwesomeIcon text="{tabButton.icon}"
+ faStyle="{FontAwesomeIcon.LIGHT}"
+ relativeSize="{FontAwesomeIcon.SIZE_LG}"/>
+ <html:Span text="{tabButton.label}"/>
+ </j:VGroup>
+
+</j:TabBarButtonInidicatorRestrictedToContentItemRenderer>
+
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
new file mode 100644
index 0000000..156de19
--- /dev/null
+++
b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/itemRenderers/VerticalIconListItemRenderer.mxml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+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"; width="145" height="50">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.IconListVO;
+
+ [Bindable("dataChange")]
+ public function get iconList():IconListVO
+ {
+ return data as IconListVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ <j:VerticalLayout gap="3" itemsHorizontalAlign="itemsCenter"/>
+ </j:beads>
+
+ <js:FontAwesomeIcon text="{iconList.icon}"/>
+
+ <j:Label html="{text}"/>
+
+</j:ListItemRenderer>
+
diff --git
a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/vos/IconListVO.as
b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/vos/IconListVO.as
new file mode 100644
index 0000000..f30d42c
--- /dev/null
+++
b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/vos/IconListVO.as
@@ -0,0 +1,33 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package vos
+{
+ [Bindable]
+ public class IconListVO
+ {
+ public var label:String;
+ public var icon:String;
+
+ public function IconListVO(label:String, icon:String = null)
+ {
+ this.label = label;
+ this.icon = icon;
+ }
+ }
+}
diff --git
a/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/vos/TabBarButtonVO.as
b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/vos/TabBarButtonVO.as
new file mode 100644
index 0000000..9b22fe8
--- /dev/null
+++
b/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout/src/main/royale/vos/TabBarButtonVO.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package vos
+{
+ [Bindable]
+ public class TabBarButtonVO
+ {
+ public var label:String;
+ public var hash:String;
+ public var icon:String;
+
+ public function TabBarButtonVO(label:String, hash:String, icon:String
= null)
+ {
+ this.label = label;
+ this.hash = hash;
+ this.icon = icon;
+ }
+ }
+}
