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: DataGrid (and TreeGrid) is better at understanding percentage sizes. Gave DataGrid a default size. Updated DataGridExample.
Date Mon, 22 Jan 2018 15:12:35 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 a96126f  DataGrid (and TreeGrid) is better at understanding percentage sizes. Gave
DataGrid a default size. Updated DataGridExample.
a96126f is described below

commit a96126f2bd88a5421814e3cadb9a931bd6752d37
Author: Peter Ent <pent@apache.org>
AuthorDate: Mon Jan 22 10:14:41 2018 -0500

    DataGrid (and TreeGrid) is better at understanding percentage sizes. Gave DataGrid a default
size. Updated DataGridExample.
---
 .../src/main/royale/MyInitialView.mxml             | 43 ++++++++++++++--------
 .../main/royale/org/apache/royale/html/DataGrid.as |  4 ++
 .../royale/html/beads/layouts/DataGridLayout.as    | 14 ++++++-
 .../royale/html/beads/layouts/TreeGridLayout.as    | 14 ++++++-
 4 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
index 92dbece..6a1e827 100644
--- a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
+++ b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
@@ -74,6 +74,14 @@ limitations under the License.
 			IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridPercentageLayout");
 			border: 1px solid #ACACAC;
 		}
+		
+		.OuterGroup {
+			background-color: orange;
+			padding: 10px;
+		}
+		.OuterGroup .DataGrid {
+			position: relative;
+		}
 
 	</fx:Style>
 		
@@ -89,23 +97,28 @@ limitations under the License.
 	
 		
 	<!-- The default configuration of the DataGrid, using only Array as the dataProvider.
A style class
-	     has been added to add the DataGridPercentageView bead that lets the columns' widths
be
+	     has been added to add the DataGridPercentageLayout bead that lets the columns' widths
be
 	     specified by percentages.
 	-->
-	<js:DataGrid id="dataGrid" x="20" y="50" width="400" height="350" change="dataGridChange(dataGrid,
output1)" 
-				 rowHeight="40" className="PercentageColumnWidths DataGrid">
-		<js:beads>
-			<js:ConstantBinding
-				sourceID="applicationModel"
-				sourcePropertyName="productArray"
-				destinationPropertyName="dataProvider" />
-		</js:beads>
-		<js:columns>
-			<js:DataGridColumn label="Image" dataField="image" columnWidth="15" itemRenderer="products.ProductItemRenderer"/>
-			<js:DataGridColumn label="Title" dataField="title" columnWidth="60" />
-			<js:DataGridColumn label="Sales" dataField="sales" columnWidth="25" />
-		</js:columns>
-	</js:DataGrid>
+	<js:HContainer x="20" y="50" width="400" height="350" className="OuterGroup">
+		
+	    <!-- demonstrates how to place a DataGrid into a Container that has padding. -->
+		<js:DataGrid id="dataGrid" width="100%" height="100%" change="dataGridChange(dataGrid,
output1)" 
+					 rowHeight="40" className="PercentageColumnWidths DataGrid">
+			<js:beads>
+				<js:ConstantBinding
+					sourceID="applicationModel"
+					sourcePropertyName="productArray"
+					destinationPropertyName="dataProvider" />
+			</js:beads>
+			<js:columns>
+				<js:DataGridColumn label="Image" dataField="image" columnWidth="15" itemRenderer="products.ProductItemRenderer"/>
+				<js:DataGridColumn label="Title" dataField="title" columnWidth="60" />
+				<js:DataGridColumn label="Sales" dataField="sales" columnWidth="25" />
+			</js:columns>
+		</js:DataGrid>
+		
+	</js:HContainer>
 		
 	<!-- A dynamic DataGrid, responding to additions and deletions, using the .DynamicDataGrid
style class
 	-->
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataGrid.as
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataGrid.as
index 1557691..0557c7b 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataGrid.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataGrid.as
@@ -60,6 +60,10 @@ package org.apache.royale.html
 			super();
 			
 			className = "DataGrid";
+			
+			// set a reasonable default size
+			width = 200;
+			height = 200;
 		}
 		
 		/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/DataGridLayout.as
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/DataGridLayout.as
index a420bcd..ca2640f 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/DataGridLayout.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/DataGridLayout.as
@@ -140,12 +140,22 @@ package org.apache.royale.html.beads.layouts
 			
 			header.x = borderMetrics.left;
 			header.y = borderMetrics.top;
-			header.width = useWidth;
+			COMPILE::SWF {
+				header.width = useWidth;
+			}
+			COMPILE::JS {
+				(header as UIBase).percentWidth = 100;
+			}
 			// header's height is set in CSS
 			
 			listArea.x = borderMetrics.left;
 			listArea.y = header.height + header.y;
-			listArea.width = useWidth;
+			COMPILE::SWF {
+				listArea.width = useWidth;
+			}
+			COMPILE::JS {
+				(listArea as UIBase).percentWidth = 100;
+			}
 			listArea.height = useHeight - header.height;
 			
 			header.dispatchEvent(new Event("layoutNeeded"));
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as
index 5a56813..4070739 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as
@@ -120,7 +120,12 @@ package org.apache.royale.html.beads.layouts
 			// size and position the header
 			header.x = borderMetrics.left;
 			header.y = borderMetrics.top;
-			header.width = useWidth;
+			COMPILE::SWF {
+				header.width = useWidth;
+			}
+			COMPILE::JS {
+				(header as UIBase).percentWidth = 100;
+			}
 			// header's height is set in CSS
 			
 			// size and position the elements that make up the content
@@ -158,7 +163,12 @@ package org.apache.royale.html.beads.layouts
 			// size and position the contentArea
 			contentArea.x = borderMetrics.left;
 			contentArea.y = header.height + header.y; 
-			contentArea.width = useWidth;
+			COMPILE::SWF {
+				contentArea.width = useWidth;
+			}
+			COMPILE::JS {
+				(contentArea as UIBase).percentWidth = 100;
+			}
 			contentArea.height = useHeight - header.height;
 			
 			return true;

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

Mime
View raw message