royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From p...@apache.org
Subject [royale-asjs] branch develop updated: Improved the DataGrid for Express and the Express example.
Date Tue, 30 Jan 2018 19:55:08 GMT
This is an automated email from the ASF dual-hosted git repository.

pent 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 e5dcddd  Improved the DataGrid for Express and the Express example.
e5dcddd is described below

commit e5dcddde0bd1bf4ed65a9adb200b283d72564a3d
Author: Peter Ent <pent@apache.org>
AuthorDate: Tue Jan 30 14:57:36 2018 -0500

    Improved the DataGrid for Express and the Express example.
---
 .../src/main/royale/MyInitialView.mxml             | 138 +++++++++++++++------
 .../src/main/royale/models/ProductsModel.as        |  16 +--
 .../Express/src/main/resources/defaults.css        |  31 ++++-
 3 files changed, 134 insertions(+), 51 deletions(-)

diff --git a/examples/express/DataGridExample/src/main/royale/MyInitialView.mxml b/examples/express/DataGridExample/src/main/royale/MyInitialView.mxml
index 1f5673a..bc47c8b 100644
--- a/examples/express/DataGridExample/src/main/royale/MyInitialView.mxml
+++ b/examples/express/DataGridExample/src/main/royale/MyInitialView.mxml
@@ -24,33 +24,56 @@ limitations under the License.
 			import org.apache.royale.collections.ArrayList;
 			import org.apache.royale.express.DataGrid;
 			import products.Product;
+			import models.ProductsModel;
 
 			[Bindable]private var provider:ArrayList = new ArrayList();
-
-		 public function dataGridChange(grid:DataGrid) : void
-		 {
-			 output.text = "Clicked on row "+grid.selectedIndex;
-			 trace("Click on row "+grid.selectedIndex);
-		 }
-		 private function setProvider():void{
-			provider.source = [
-				new Product("ps100","Widgets",44,200,"assets/smallbluerect.jpg"),
-				new Product("tx200","Thingys",5,285,"assets/smallgreenrect.jpg"),
-				new Product("rz300","Sprockets",80,105,"assets/smallyellowrect.jpg"),
-				new Product("dh440","Doohickies",10,340,"assets/smallredrect.jpg"),
-				new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")
-			];
-
-		 }
-		 private function addToProvider():void{
-			 var num:Number = Number((Math.random()*1000).toFixed());
-			 provider.addItem(
-				 new Product("ps" + num,"Weejets",35,num,"assets/smallorangerect.jpg")
-			);
-		 }
-		
-		 [Bindable]
-		 private var nameList:Array = ["Bob", "Joe", "Frank", "Sally", "Mike", "Amy", "Karen",
"Will", "Grace", "Jack"];
+			
+			override public function toString():String
+			{
+				return "MyInitialView";
+			}
+			
+			public function dataGridChange(grid:DataGrid) : void
+			{
+				output.text = "Clicked on row "+grid.selectedIndex;
+				trace("Click on row "+grid.selectedIndex);
+			}
+			
+			private function setProvider():void{
+				provider.source = [
+					new Product("ps100","Widgets",44,200,"assets/smallbluerect.jpg"),
+					new Product("tx200","Thingys",5,285,"assets/smallgreenrect.jpg"),
+					new Product("rz300","Sprockets",80,105,"assets/smallyellowrect.jpg"),
+					new Product("dh440","Doohickies",10,340,"assets/smallredrect.jpg"),
+					new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")
+				];
+				
+			}
+			private function addToProvider():void{
+				var num:Number = Number((Math.random()*1000).toFixed());
+				provider.addItem(
+					new Product("ps" + num,"Weejets",35,num,"assets/smallorangerect.jpg")
+				);
+			}
+			
+			private function addNewValue():void {
+				var item:String = newValue.text;
+				if (item == "") item = "New Value";
+				var num:Number = Number((Math.random()*100).toFixed());
+				var product:Product = new Product("abc123", item, 30, num, "assets/smallorangerect.jpg");
+				(applicationModel as ProductsModel).productList.addItem(product);
+				newValue.text = "";
+			}
+			
+			private function deleteRow():void {
+				var rowNumber:Number = rowToDelete.value;
+				if (rowNumber < (applicationModel as ProductsModel).productList.length) {
+					(applicationModel as ProductsModel).productList.removeItemAt(rowNumber);
+				}
+			}
+			
+			[Bindable]
+			private var nameList:Array = ["Bob", "Joe", "Frank", "Sally", "Mike", "Amy", "Karen",
"Will", "Grace", "Jack"];
 		
 		]]>
     </fx:Script>
@@ -58,20 +81,32 @@ limitations under the License.
 	<fx:Style>
 		@namespace js "library://ns.apache.org/royale/basic";
 		
-		/* These border lines currently show only on HTML */
-		.opt_org-apache.royale-html-DataGrid_ListArea .middle {
-			border-left: solid 1px #333333;
-			border-right: solid 1px #333333;
+		.DataGridColumnList .StringItemRenderer {
+			border-style: solid;
+			border-color: #CCCCCC;
+			border-width: 1px;
+			background-color: white;
+			line-height: 40px;
+			padding: 2px;
+		}
+		
+		.DataGridColumnList .DataItemRenderer {
+			border-style: solid;
+			border-color: #CCCCCC;
+			border-width: 1px;
+			background-color: white;
+			line-height: 40px;
+			padding: 2px;
+		}
+		
+		.DataGridDrawingLayer {
+			background-color: transparent;
 		}
 
 	</fx:Style>
 	
-	<js:Label id="output" x="450" y="30"/>
 	
-	<js:TextButton text="Set Provider" click="setProvider()"/>
-	<js:TextButton text="Add to Provider" click="addToProvider()" x="120"/>
-
-	<js:DataGrid id="dataGrid" x="20" y="30" width="400" height="200" dragEnabled="true"
dropEnabled="true"
+	<js:DataGrid id="dataGrid" x="20" y="30" width="400" height="350" dragEnabled="true"
dropEnabled="true"
 	 change="dataGridChange(dataGrid)" rowHeight="40">
 		<js:beads>
 			<js:ConstantBinding
@@ -81,17 +116,44 @@ limitations under the License.
 		</js:beads>
 		<js:columns>
 			<js:DataGridColumn label="Image" dataField="image" columnWidth="50" itemRenderer="products.ProductItemRenderer"
/>
-			<js:DataGridColumn label="Title" dataField="title" columnWidth="250" />
+			<js:DataGridColumn label="Name" dataField="title" columnWidth="250" />
 			<js:DataGridColumn label="Sales" dataField="sales" columnWidth="100" />
 		</js:columns>
 	</js:DataGrid>
 	
-	<js:DataGrid id="dataGrid2" x="20" y="250" width="400" height="200"
-		dataProvider="{provider}"
+	<js:VContainer x="20" y="400">
+		<js:Label text="Drag rows to re-arrange them or drag to other DataGrid" />
+		<js:Spacer height="20" />
+		
+		<js:HContainer >
+			<js:Label text="New Value:" />
+			<js:TextInput id="newValue" text="" width="70" />
+			<js:Spacer width="3" />
+			<js:TextButton text="Add Row" click="addNewValue()" />
+		</js:HContainer>
+		<js:Spacer height="10" />
+		<js:HContainer>
+			<js:Label text="Row Number:" />
+			<js:NumericStepper minimum="0" maximum="10" id="rowToDelete" width="50" />
+			<js:Spacer width="3" />
+			<js:TextButton text="Delete Row" click="deleteRow()" />
+		</js:HContainer>
+		
+		<js:Spacer height="20" />
+		<js:Label id="output" x="450" y="30"/>
+	</js:VContainer>
+		
+	<js:DataGrid id="dataGrid2" x="450" y="30" width="400" height="350" dropEnabled="true"
 		change="dataGridChange(dataGrid2)" rowHeight="40">
+		<js:beads>
+			<js:ConstantBinding
+				sourceID="applicationModel"
+				sourcePropertyName="fruits"
+				destinationPropertyName="dataProvider" />
+		</js:beads>
 		<js:columns>
 			<js:DataGridColumn label="Image" dataField="image" columnWidth="50" itemRenderer="products.ProductItemRenderer"
/>
-			<js:DataGridColumn label="Title" dataField="title" columnWidth="250" />
+			<js:DataGridColumn label="Name" dataField="title" columnWidth="250" />
 			<js:DataGridColumn label="Sales" dataField="sales" columnWidth="100" />
 		</js:columns>
 	</js:DataGrid>
diff --git a/examples/express/DataGridExample/src/main/royale/models/ProductsModel.as b/examples/express/DataGridExample/src/main/royale/models/ProductsModel.as
index b4b1712..02256d8 100644
--- a/examples/express/DataGridExample/src/main/royale/models/ProductsModel.as
+++ b/examples/express/DataGridExample/src/main/royale/models/ProductsModel.as
@@ -36,17 +36,17 @@ package models
 			return _productList;
 		}
 
-		private var _productList2:ArrayList = new ArrayList([
-            new Product("ps100","Widgets",44,200,"assets/smallbluerect.jpg"),
-            new Product("tx200","Thingys",5,285,"assets/smallgreenrect.jpg"),
-            new Product("rz300","Sprockets",80,105,"assets/smallyellowrect.jpg"),
-            new Product("dh440","Doohickies",10,340,"assets/smallredrect.jpg"),
-            new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")
+		private var _fruits:ArrayList = new ArrayList([
+            new Product("bb100","Blueberries",44,200,"assets/smallbluerect.jpg"),
+            new Product("ap100","Apples",5,285,"assets/smallgreenrect.jpg"),
+            new Product("bn200","Bananas",80,105,"assets/smallyellowrect.jpg"),
+            new Product("sb300","Strawberries",10,340,"assets/smallredrect.jpg"),
+            new Product("or100","Oranges",35,190,"assets/smallorangerect.jpg")
 		]);
 
-		public function get productList2():ArrayList
+		public function get fruits():ArrayList
 		{
-			return _productList2;
+			return _fruits;
 		}
 	}
 }
diff --git a/frameworks/projects/Express/src/main/resources/defaults.css b/frameworks/projects/Express/src/main/resources/defaults.css
index 0d83d4d..434c104 100644
--- a/frameworks/projects/Express/src/main/resources/defaults.css
+++ b/frameworks/projects/Express/src/main/resources/defaults.css
@@ -43,13 +43,15 @@ Application
 	padding: 0px;
 	margin: 0px;
 }
+
 DataGrid
 {
+	IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator");
 	IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel");
-	IDataProviderNotifier: ClassReference("org.apache.royale.html.beads.EasyDataProviderChangeNotifier");
-	IBeadView: ClassReference("org.apache.royale.html.beads.DataGridColumnReorderView");
-	IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel");
+	IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView");
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
 	IBeadLayout: ClassReference("org.apache.royale.html.beads.DataGridWithDrawingLayerLayout");
+	ColumnClassName: "DataGridColumnList";
 	
 	background-color: #FFFFFF;
 	border-style: solid;
@@ -57,10 +59,25 @@ DataGrid
 	border-width: 1px;
 }
 
+.DataGridColumnList
+{
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
+	IBeadView:  ClassReference("org.apache.royale.html.beads.ListView");			
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController");
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout");
+	IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
+	IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+	IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer");
+	IViewport: ClassReference("org.apache.royale.html.supportClasses.Viewport");
+	IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+	border-style: none;
+	background-color: #FFFFFF;
+}
 
-DataGridButtonBar {
+
+/*DataGridButtonBar {
 	IBeadView: ClassReference("org.apache.royale.html.beads.DataGridButtonBarViewForMovableColumns");
-}
+}*/
 
 Container
 {	
@@ -117,5 +134,9 @@ View
 		IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
 		IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
 	}
+	StringItemRenderer {
+		IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+		IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
+	}
 
 }
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
pent@apache.org.

Mime
View raw message