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 2018/07/07 08:02:43 UTC
[royale-asjs] branch develop updated: icon list item renderer
example in JewelExample
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 41fed79 icon list item renderer example in JewelExample
41fed79 is described below
commit 41fed79c89e294bea97ba3b4e213d1c535227aae
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jul 7 10:02:38 2018 +0200
icon list item renderer example in JewelExample
---
.../resources/jewel-example-index-template.html | 1 -
.../src/main/resources/jewel-example-styles.css | 11 ++++-
.../src/main/royale/ListPlayGround.mxml | 16 +++++++-
.../royale/itemRenderers/IconListItemRenderer.mxml | 47 ++++++++++++++++++++++
.../src/main/royale/models/ListsModel.as | 24 +++++++++++
.../{models/ListsModel.as => vos/IconListVO.as} | 32 ++++++---------
6 files changed, 108 insertions(+), 23 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html b/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
index d98e4cf..140ba98 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
@@ -17,7 +17,6 @@
<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Custom Template for injecting custom style CSS">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index 00b87e8..4eb1ae9 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -25,12 +25,21 @@
padding: 20px;
}
+.iconListItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
+}
+.iconListItemRenderer .fonticon
+{
+ margin-right: 24px;
+}
+
.navIconLinkItemRenderer
{
IItemRenderer: ClassReference("itemRenderers.NavigationIconLinkItemRenderer");
}
-.navIconLinkItemRenderer .icon
+.navIconLinkItemRenderer .fonticon
{
margin-right: 24px;
}
diff --git a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
index df2560e..ea4247c 100644
--- a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
@@ -51,7 +51,7 @@ limitations under the License.
</fx:Script>
<j:model>
- <models:ListsModel/>
+ <models:ListsModel id="listModel"/>
</j:model>
<j:beads>
@@ -73,4 +73,18 @@ limitations under the License.
<j:Button text="Assign new data" emphasis="{Button.PRIMARY}" click="assignNewData()"/>
</j:Card>
+
+ <j:Card>
+ <html:H3 text="Jewel List With ItemRenderer"/>
+
+ <j:List width="200" height="300" className="iconListItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconListData"
+ destinationPropertyName="dataProvider" />
+ </j:beads>
+ </j:List>
+
+ </j:Card>
</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/itemRenderers/IconListItemRenderer.mxml b/examples/royale/JewelExample/src/main/royale/itemRenderers/IconListItemRenderer.mxml
new file mode 100644
index 0000000..9a3119b
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/itemRenderers/IconListItemRenderer.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:html="library://ns.apache.org/royale/html"
+ xmlns="http://www.w3.org/1999/xhtml">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.IconListVO;
+
+ [Bindable("dataChange")]
+ public function get iconList():IconListVO
+ {
+ return data as IconListVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <mdl:beads>
+ <js:ItemRendererDataBinding />
+ </mdl:beads>
+
+ <js:FontIcon text="{iconList.icon}" material="true" visible="{iconList.icon != null}"/>
+
+ <html:Span text="{iconList.label}"/>
+
+</j:ListItemRenderer>
+
diff --git a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as b/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
index 7f93d19..c25ab93 100644
--- a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
@@ -18,6 +18,9 @@
////////////////////////////////////////////////////////////////////////////////
package models
{
+ import vos.IconListVO;
+ import org.apache.royale.collections.ArrayList;
+
public class ListsModel
{
/**
@@ -37,5 +40,26 @@ package models
return _watchmen;
}
+
+ /**
+ * Used in the List example.
+ */
+ private var _iconListData:ArrayList = new ArrayList([
+ new IconListVO("Alert", "web_asset"),
+ new IconListVO("Button", "crop_7_5"),
+ new IconListVO("DropDownList", "credit_card"),
+ new IconListVO("CheckBox", "check_box"),
+ new IconListVO("Label", "label"),
+ new IconListVO("List", "list_alt"),
+ new IconListVO("RadioButton", "radio_button_checked"),
+ new IconListVO("Slider", "storage"),
+ new IconListVO("Text", "subject"),
+ new IconListVO("TextInput", "text_fields")
+ ]);
+
+ public function get iconListData():ArrayList
+ {
+ return _iconListData;
+ }
}
}
diff --git a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as b/examples/royale/JewelExample/src/main/royale/vos/IconListVO.as
similarity index 74%
copy from examples/royale/JewelExample/src/main/royale/models/ListsModel.as
copy to examples/royale/JewelExample/src/main/royale/vos/IconListVO.as
index 7f93d19..f30d42c 100644
--- a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
+++ b/examples/royale/JewelExample/src/main/royale/vos/IconListVO.as
@@ -16,26 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package models
+package vos
{
- public class ListsModel
- {
- /**
- * Used in the List example.
- */
- private var _watchmen:Array = [
- "The Comedian",
- "Doctor Manhattan",
- "Nite Owl",
- "Ozymandias",
- "Rorschach",
- "Silk Spectre"
- ];
-
- public function get watchmen():Array
- {
- return _watchmen;
- }
+ [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;
+ }
+ }
}