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 2019/12/15 00:58:02 UTC
[royale-asjs] branch develop updated: jewel-iconbuttonbar: add
examples for IconButtonBar
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 d36cd8d jewel-iconbuttonbar: add examples for IconButtonBar
d36cd8d is described below
commit d36cd8d9571e3603727500917ab8bb9bd78fd4b7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Dec 15 01:57:53 2019 +0100
jewel-iconbuttonbar: add examples for IconButtonBar
---
.../src/main/resources/jewel-example-styles.css | 5 +++
.../src/main/royale/ButtonBarPlayGround.mxml | 40 +++++++++++++++++++---
.../src/main/royale/models/ListsModel.as | 16 +++++++++
3 files changed, 56 insertions(+), 5 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
index 9471b35..8bb7c01 100644
--- a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -22,6 +22,11 @@
@namespace "http://www.w3.org/1999/xhtml";
@namespace j "library://ns.apache.org/royale/jewel";
+j|IconButtonBar
+{
+ iconClass: ClassReference("org.apache.royale.icons.FontIcon")
+}
+
.tableStyle
{
IItemRenderer: ClassReference("itemRenderers.TableStyleListItemRenderer");
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
index 09a9bb1..964c6e3 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonBarPlayGround.mxml
@@ -24,6 +24,12 @@ limitations under the License.
xmlns:models="models.*"
xmlns:c="components.*" sourceCodeUrl="ButtonBarPlayGround.mxml">
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.html.beads.models.ButtonBarModel;
+ ]]>
+ </fx:Script>
+
<c:beads>
<js:ContainerDataBinding/>
</c:beads>
@@ -33,7 +39,7 @@ limitations under the License.
</c:model>
<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
- <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H3 text="Jewel ButtonBar"/>
@@ -65,7 +71,7 @@ limitations under the License.
<j:Label localId="bb_label"/>
</j:Card>
</j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H4 text="Jewel ButtonBar"/>
@@ -76,7 +82,7 @@ limitations under the License.
<j:ButtonBar localId="bb3" change="bb2_label.text = bb3.selectedItem as String"
emphasis="primary">
<j:beads>
- <j:ButtonBarLayout/>
+ <j:ButtonBarLayout widthType="{ButtonBarModel.PIXEL_WIDTHS}"/>
</j:beads>
<j:dataProvider>
<js:ArrayList source="[Home, Support, Operations, Service]" />
@@ -88,7 +94,7 @@ limitations under the License.
<j:ButtonBar localId="bb4" change="bb2_label.text = bb4.selectedItem as String"
emphasis="secondary" width="100%">
<j:beads>
- <j:ButtonBarLayout localId="ppw" gap="3"/>
+ <j:ButtonBarLayout localId="ppw" gap="3" widthType="{ButtonBarModel.PERCENT_WIDTHS}"/>
</j:beads>
<j:dataProvider>
<js:ArrayList source="[Home, Support, Operations, Service]" />
@@ -96,7 +102,7 @@ limitations under the License.
</j:ButtonBar>
<j:DropDownList dataProvider="{listModel.bblayout_options}"
- labelField="label" selectedIndex="2" width="230"
+ labelField="label" selectedIndex="1" width="230"
change="ppw.widthType = event.target.selectedItem.value">
<j:beads>
<j:RequireSelection requireSelection="true"/>
@@ -108,4 +114,28 @@ limitations under the License.
</j:GridCell>
</j:Grid>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel IconButtonBar"/>
+
+ <j:Label text="Use icons in the buttons"/>
+
+ <html:H4 text="Width 100% and emphasized color"/>
+
+ <j:IconButtonBar localId="ibb" change="ibb_label.text = ibb.selectedItem as String"
+ emphasis="primary" width="100%" material="true"
+ dataProvider="{listModel.iconButtonData}"/>
+
+ <html:H4 text="No Width and icons to the right"/>
+
+ <j:IconButtonBar localId="ibb2" change="ibb_label.text = ibb2.selectedItem as String"
+ emphasis="secondary" rightPosition="true" material="true" iconField="icon"
+ dataProvider="{listModel.iconButtonData}"/>
+
+ <j:Label localId="ibb_label"/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as b/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as
index a3f726d..3e76fc3 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as
@@ -150,5 +150,21 @@ package models
{
return _bblayout_options;
}
+
+ /**
+ * Used in the IconButtonBar example.
+ */
+ private var _iconButtonData:ArrayList = new ArrayList([
+ new IconListVO("Alert", MaterialIconType.WEB_ASSET),
+ new IconListVO("Button", MaterialIconType.CROP_7_5),
+ new IconListVO("List", MaterialIconType.LIST_ALT),
+ new IconListVO("CheckBox", MaterialIconType.CHECK_BOX),
+ new IconListVO("Label", MaterialIconType.LABEL)
+ ]);
+
+ public function get iconButtonData():ArrayList
+ {
+ return _iconButtonData;
+ }
}
}