royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: icon list item renderer example in JewelExample
Date Sat, 07 Jul 2018 08:02:43 GMT
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 <carlosrovira@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;
+        }
+    }
 }


Mime
View raw message