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/11/26 19:25:15 UTC

[royale-asjs] branch feature/jewel-datagrid created (now 80de5bf)

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a change to branch feature/jewel-datagrid
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.


      at 80de5bf  jewel-datagrid: a bit of style in list columns

This branch includes the following new commits:

     new bcc665c  jewel-datagrid: starting point creating placeholder and some support classes. Created SASS file to start the styling. Added DataGridColumn to manifest and removed from JewelClasses
     new f227eea  jewel-datagrid: starting example for Jewel DataGrid in Tour De Jewel
     new 8fbed67  jewel-datagrid: new DataGrid classes for Jewel
     new f4af0b1  jewel-datagrid: bead configuration for DataGrid
     new 9471492  jewel-datagrid: upgrade DataGrid example
     new 80de5bf  jewel-datagrid: a bit of style in list columns

The 6 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



[royale-asjs] 01/06: jewel-datagrid: starting point creating placeholder and some support classes. Created SASS file to start the styling. Added DataGridColumn to manifest and removed from JewelClasses

Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-datagrid
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit bcc665c26dbbc97e27c35eed41770d30a470b93d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Nov 25 13:05:33 2019 +0100

    jewel-datagrid: starting point creating placeholder and some support classes. Created SASS file to start the styling. Added DataGridColumn to manifest and removed from JewelClasses
---
 .../projects/Jewel/src/main/resources/defaults.css |  12 ++
 .../Jewel/src/main/resources/jewel-manifest.xml    |   3 +
 .../projects/Jewel/src/main/royale/JewelClasses.as |   1 -
 .../royale/org/apache/royale/jewel/DataGrid.as     | 196 +++++++++++++++++++++
 .../Jewel/src/main/sass/components/_datagrid.sass  |  99 +++++++++++
 .../projects/Jewel/src/main/sass/defaults.sass     |   1 +
 6 files changed, 311 insertions(+), 1 deletion(-)

diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 597a581..60f2a67 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -457,6 +457,18 @@ j|ComboBoxPopUp {
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxPopUpView");
 }
 
+j|DataGrid {
+  IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator");
+  IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel");
+  IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView");
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel");
+  IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout");
+  columnClass: ClassReference("org.apache.royale.html.supportClasses.DataGridColumnList");
+  columnContainerClass: ClassReference("org.apache.royale.html.DataGridButtonBar");
+  columnLayoutClass: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout");
+  listAreaClass: ClassReference("org.apache.royale.html.beads.DataGridListArea");
+}
+
 .jewel.datechooser .jewel.table {
   min-width: 324px;
   min-height: 364px;
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index ecb6a12..b38ee40 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -43,6 +43,9 @@
     <component id="TableHeaderCell" class="org.apache.royale.jewel.supportClasses.table.TableHeaderCell"/>
     <component id="TableColumn" class="org.apache.royale.jewel.supportClasses.table.TableColumn"/>
 
+    <component id="DataGrid" class="org.apache.royale.jewel.DataGrid"/>
+    <component id="DataGridColumn" class="org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn"/>
+
     <component id="SimpleButton" class="org.apache.royale.jewel.supportClasses.button.SimpleButton"/>
     <component id="Button" class="org.apache.royale.jewel.Button"/>
     <component id="IconButton" class="org.apache.royale.jewel.IconButton"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index f180b51..7eb7101 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -103,7 +103,6 @@ package
         import org.apache.royale.jewel.supportClasses.Viewport; Viewport;
         import org.apache.royale.jewel.supportClasses.NoViewport; NoViewport;
         import org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport; ScrollingViewport;
-        import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn; DataGridColumn;
         import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable; DateChooserTable;
         import org.apache.royale.jewel.supportClasses.table.TBodyContentArea; TBodyContentArea;
         import org.apache.royale.jewel.supportClasses.combobox.ComboBoxPopUp; ComboBoxPopUp;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
new file mode 100644
index 0000000..cd76f93
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
@@ -0,0 +1,196 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+	import org.apache.royale.core.GroupBase;
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IChangePropagator;
+	import org.apache.royale.core.IDataGrid;
+	import org.apache.royale.core.IDataGridModel;
+	import org.apache.royale.core.IDataGridPresentationModel;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.utils.loadBeadFromValuesManager;
+	
+	[Event(name="change", type="org.apache.royale.events.Event")]
+	
+	/**
+	 *  The DataGrid class displays a collection of data using columns and rows. Each
+	 *  column represents a specific field in the data set; each row represents a specific
+	 *  datum. The DataGrid is a composite component built with a org.apache.royale.html.ButtonBar 
+	 *  for the column headers and a org.apache.royale.html.List for each column. The DataGrid's 
+	 *  view bead (usually org.apache.royale.html.beads.DataGridView) constructs these parts while 
+	 *  itemRenderer factories contruct the elements to display the data in each cell.
+	 *  
+     *  @toplevel
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.7
+	 */
+	public class DataGrid extends GroupBase implements IDataGrid
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.7
+		 */
+		public function DataGrid()
+		{
+			super();
+			
+			typeNames = "jewel datagrid";
+			
+			// set a reasonable default size
+			width = 200;
+			height = 200;
+		}
+		
+		/**
+		 *  The array of org.apache.royale.html.supportClasses.DataGridColumns used to 
+		 *  describe each column.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 */
+		public function get columns():Array
+		{
+			return IDataGridModel(model).columns;
+		}
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 */
+		public function set columns(value:Array):void
+		{
+			IDataGridModel(model).columns = value;
+		}
+		
+		/**
+		 *  The object used to provide data to the org.apache.royale.html.DataGrid.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 */
+		public function get dataProvider():Object
+		{
+			return IDataGridModel(model).dataProvider;
+		}
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 */
+		public function set dataProvider(value:Object):void
+		{
+			IDataGridModel(model).dataProvider = value;
+		}
+		
+		/**
+		 *  The currently selected row.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 */
+		[Bindable("change")]
+		public function get selectedIndex():int
+		{
+			return IDataGridModel(model).selectedIndex;
+		}
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 */
+		public function set selectedIndex(value:int):void
+		{
+			IDataGridModel(model).selectedIndex = value;
+		}
+		
+		/**
+		 * @private
+		 */
+		private var _presentationModel:IDataGridPresentationModel;
+		
+		/**
+		 *  The DataGrid's presentation model
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
+		 *  @royaleignorecoercion org.apache.royale.core.IBead
+		 */
+		public function get presentationModel():IBead
+		{
+			if (_presentationModel == null) {
+				var c:Class = ValuesManager.valuesImpl.getValue(this, "iDataGridPresentationModel");
+				if (c) {
+					_presentationModel = new c() as IDataGridPresentationModel;
+					addBead(_presentationModel as IBead);
+				}
+			}
+			
+			return _presentationModel;
+		}
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
+		 */
+		public function set presentationModel(value:IBead):void
+		{
+			_presentationModel = value as IDataGridPresentationModel;
+		}
+				
+		/**
+		 *  The default height of each cell in every column
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
+		 */
+		public function get rowHeight():Number
+		{
+			return (presentationModel as IDataGridPresentationModel).rowHeight;
+		}
+        /**
+         * @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
+         */
+		public function set rowHeight(value:Number):void
+		{
+			(presentationModel as IDataGridPresentationModel).rowHeight = value;
+		}
+		
+		override public function addedToParent():void
+		{
+			loadBeadFromValuesManager(IChangePropagator, "iChangePropagator", this);
+			super.addedToParent();
+			dispatchEvent(new Event("initComplete"));
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
new file mode 100644
index 0000000..827b040
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
@@ -0,0 +1,99 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel DataGrid
+
+// DataGrid variables
+
+.jewel.datagrid
+
+j|DataGrid
+    IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator")
+    IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel")
+    IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView")
+    IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel")
+    IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout")
+    columnClass: ClassReference("org.apache.royale.html.supportClasses.DataGridColumnList")
+    columnContainerClass: ClassReference("org.apache.royale.html.DataGridButtonBar")
+    columnLayoutClass: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout")
+    listAreaClass: ClassReference("org.apache.royale.html.beads.DataGridListArea")
+
+// DataGridButtonBar
+// {
+// IBeadModel: ClassReference("org.apache.royale.html.beads.models.ButtonBarModel")
+// IBeadView:  ClassReference("org.apache.royale.html.beads.ButtonBarView")			
+// IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController")
+// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout")
+// IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.TextItemRendererFactoryForArrayData")
+// IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+// IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.TextButtonItemRenderer")
+
+// border-style: none
+// height: 40px
+// min-height: 40px
+// flex-grow: 0
+// }
+
+// DataGridColumnList {
+// IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel")
+// 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.DataItemRendererFactoryForArrayData")
+// 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
+// }
+
+// DataGridListArea {
+// background-color: #FFFFFF
+// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalLayout")
+// IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
+// IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+// flex-grow: 1
+// }
+
+// DynamicDataGrid {
+// IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator")
+// IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel")
+// IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView")
+// IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel")
+// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout")
+// ColumnClass: ClassReference("org.apache.royale.html.supportClasses.DynamicDataGridColumnList")
+
+// background-color: #FFFFFF
+// border: 1px solid #222222
+// }
+
+// DynamicDataGridColumnList {
+// 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
+// }
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index d17b721..f848b27 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -30,6 +30,7 @@
 @import "components/checkbox"
 @import "components/controlbar"
 @import "components/combobox"
+@import "components/datagrid"
 @import "components/datechooser"
 @import "components/datefield"
 @import "components/divider"


[royale-asjs] 06/06: jewel-datagrid: a bit of style in list columns

Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-datagrid
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 80de5bf85c82aa98dfd408c556a5f77f4f7ff2c7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Nov 26 20:25:01 2019 +0100

    jewel-datagrid: a bit of style in list columns
---
 frameworks/projects/Jewel/src/main/resources/defaults.css      | 10 ++++++++++
 .../royale/org/apache/royale/jewel/beads/views/DataGridView.as |  2 +-
 .../royale/jewel/supportClasses/datagrid/DataGridColumnList.as |  2 +-
 .../projects/Jewel/src/main/sass/components/_datagrid.sass     |  7 +++++++
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 8f064f4..bd18583 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -462,6 +462,16 @@ j|ComboBoxPopUp {
   height: 290px;
 }
 
+.jewel.list.column {
+  border-radius: 0px;
+}
+.jewel.list.column.first {
+  border-right: 0px;
+}
+.jewel.list.column.last {
+  border-left: 0px;
+}
+
 j|DataGrid {
   IChangePropagator: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator");
   IDataGridPresentationModel: ClassReference("org.apache.royale.jewel.beads.models.DataGridPresentationModel");
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
index 5f4677a..815e803 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
@@ -36,9 +36,9 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.html.beads.GroupView;
 	import org.apache.royale.html.beads.IDataGridView;
 	import org.apache.royale.html.beads.layouts.ButtonBarLayout;
-	import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn;
 	import org.apache.royale.html.supportClasses.IDataGridColumnList;
 	import org.apache.royale.jewel.supportClasses.Viewport;
+	import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn;
 
     /**
      *  The DataGridView class is the visual bead for the org.apache.royale.jewel.DataGrid.
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as
index b8a451c..310c406 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as
@@ -57,7 +57,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		public function DataGridColumnList()
 		{
 			super();
-			//typeNames = "jewel dataGridColumnList";
+			typeNames = "jewel list column";
 		}
 		
         /**
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
index 50c3853..86d3185 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
@@ -25,6 +25,13 @@
     width: 200px
     height: 290px
 
+.jewel.list.column
+    border-radius: 0px
+    &.first
+        border-right: 0px
+    &.last
+        border-left: 0px
+
 j|DataGrid
     IChangePropagator: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator")
     IDataGridPresentationModel: ClassReference("org.apache.royale.jewel.beads.models.DataGridPresentationModel")


[royale-asjs] 04/06: jewel-datagrid: bead configuration for DataGrid

Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-datagrid
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit f4af0b14f73d7addb860d66d7b87670803ca4817
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Nov 26 18:16:18 2019 +0100

    jewel-datagrid: bead configuration for DataGrid
---
 examples/royale/DataGridExample/pom.xml            |  2 +
 .../projects/Jewel/src/main/resources/defaults.css | 26 +++++---
 .../Jewel/src/main/resources/jewel-manifest.xml    |  1 +
 .../Jewel/src/main/sass/components/_datagrid.sass  | 72 ++++++++++++++--------
 4 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/examples/royale/DataGridExample/pom.xml b/examples/royale/DataGridExample/pom.xml
index e0f3cc5..25ebff8 100644
--- a/examples/royale/DataGridExample/pom.xml
+++ b/examples/royale/DataGridExample/pom.xml
@@ -45,6 +45,8 @@
         <configuration>
           <mainClass>DataGridExample.mxml</mainClass>
           <targets>${royale.targets}</targets>
+          <debug>false</debug>
+          <additionalCompilerOptions>-source-map=true;</additionalCompilerOptions>
         </configuration>
       </plugin>
     </plugins>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 60f2a67..8f064f4 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -457,16 +457,28 @@ j|ComboBoxPopUp {
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxPopUpView");
 }
 
+.jewel.datagrid {
+  width: 200px;
+  height: 290px;
+}
+
 j|DataGrid {
-  IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator");
-  IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel");
-  IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView");
-  IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel");
-  IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout");
-  columnClass: ClassReference("org.apache.royale.html.supportClasses.DataGridColumnList");
+  IChangePropagator: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator");
+  IDataGridPresentationModel: ClassReference("org.apache.royale.jewel.beads.models.DataGridPresentationModel");
+  IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DataGridView");
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.DataGridLayout");
+  columnClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnList");
   columnContainerClass: ClassReference("org.apache.royale.html.DataGridButtonBar");
   columnLayoutClass: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout");
-  listAreaClass: ClassReference("org.apache.royale.html.beads.DataGridListArea");
+  listAreaClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridListArea");
+}
+
+j|DataGridListArea {
+  IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
+  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
+  IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
 }
 
 .jewel.datechooser .jewel.table {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b38ee40..4ccb8df 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -45,6 +45,7 @@
 
     <component id="DataGrid" class="org.apache.royale.jewel.DataGrid"/>
     <component id="DataGridColumn" class="org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn"/>
+    <component id="DataGridListArea" class="org.apache.royale.jewel.supportClasses.datagrid.DataGridListArea"/>
 
     <component id="SimpleButton" class="org.apache.royale.jewel.supportClasses.button.SimpleButton"/>
     <component id="Button" class="org.apache.royale.jewel.Button"/>
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
index 827b040..50c3853 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datagrid.sass
@@ -22,17 +22,57 @@
 // DataGrid variables
 
 .jewel.datagrid
+    width: 200px
+    height: 290px
 
 j|DataGrid
-    IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator")
-    IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel")
-    IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView")
-    IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel")
-    IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout")
-    columnClass: ClassReference("org.apache.royale.html.supportClasses.DataGridColumnList")
+    IChangePropagator: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator")
+    IDataGridPresentationModel: ClassReference("org.apache.royale.jewel.beads.models.DataGridPresentationModel")
+    IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DataGridView")
+    IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel")
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.DataGridLayout")
+    columnClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnList")
     columnContainerClass: ClassReference("org.apache.royale.html.DataGridButtonBar")
     columnLayoutClass: ClassReference("org.apache.royale.html.beads.layouts.ButtonBarLayout")
-    listAreaClass: ClassReference("org.apache.royale.html.beads.DataGridListArea")
+    listAreaClass: ClassReference("org.apache.royale.jewel.supportClasses.datagrid.DataGridListArea")
+
+j|DataGridListArea
+    IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+    IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+    IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+//align-items: flex-start
+// DataGridListArea {
+// background-color: #FFFFFF
+// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalLayout")
+// IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
+// IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+// flex-grow: 1
+// }
+
+// j|DataGridColumnList
+//     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")
+//     IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+//     IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer")
+//     IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel")
+//     IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
+//     IViewport: ClassReference("org.apache.royale.html.supportClasses.Viewport")
+//     IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+
+
+// DynamicDataGrid {
+// IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator")
+// IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel")
+// IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView")
+// IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel")
+// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout")
+// ColumnClass: ClassReference("org.apache.royale.html.supportClasses.DynamicDataGridColumnList")
+
+// background-color: #FFFFFF
+// border: 1px solid #222222
+// }
 
 // DataGridButtonBar
 // {
@@ -64,25 +104,7 @@ j|DataGrid
 // background-color: #FFFFFF
 // }
 
-// DataGridListArea {
-// background-color: #FFFFFF
-// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalLayout")
-// IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
-// IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
-// flex-grow: 1
-// }
-
-// DynamicDataGrid {
-// IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator")
-// IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel")
-// IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView")
-// IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel")
-// IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout")
-// ColumnClass: ClassReference("org.apache.royale.html.supportClasses.DynamicDataGridColumnList")
 
-// background-color: #FFFFFF
-// border: 1px solid #222222
-// }
 
 // DynamicDataGridColumnList {
 // IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel")


[royale-asjs] 02/06: jewel-datagrid: starting example for Jewel DataGrid in Tour De Jewel

Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-datagrid
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit f227eea390a15b1e2273002af3cba75635d6d540
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Nov 25 13:06:34 2019 +0100

    jewel-datagrid: starting example for Jewel DataGrid in Tour De Jewel
---
 .../src/main/royale/DataGridPlayGround.mxml        | 119 +++++++++++++++++++++
 .../TourDeJewel/src/main/royale/MainContent.mxml   |   1 +
 .../royale/itemRenderers/ProductItemRenderer.as    |  66 ++++++++++++
 .../src/main/royale/models/MainNavigationModel.as  |   1 +
 .../src/main/royale/models/ProductModel.as         |  52 +++++++++
 .../TourDeJewel/src/main/royale/vos/Product.as     |  67 ++++++++++++
 6 files changed, 306 insertions(+)

diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
new file mode 100644
index 0000000..6bce9cb
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -0,0 +1,119 @@
+<?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.
+
+-->
+<c:ExampleAndSourceCodeTabbedSectionContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
+	xmlns:j="library://ns.apache.org/royale/jewel" 
+	xmlns:html="library://ns.apache.org/royale/html" 
+	xmlns:js="library://ns.apache.org/royale/basic"
+	xmlns:models="models.*" 
+	xmlns:c="components.*" sourceCodeUrl="DataGridPlayGround.mxml">
+	
+	<fx:Script>
+		<![CDATA[      
+        import org.apache.royale.jewel.Label;
+        import models.ProductModel;
+
+        private function dataGridChange(grid:DataGrid, output:Label) : void
+		{
+			output.text = "Clicked on row "+grid.selectedIndex;
+		}
+
+		private function refreshGrid():void
+		{
+			dataGrid.dataProvider = null;
+			dataGrid.dataProvider = (productModel as ProductModel).productArray;
+		}
+		]]>
+	</fx:Script>
+
+	<js:model>
+		<models:ProductModel localId="productModel"/>
+	</js:model>
+	
+	<j:beads>
+		<js:ContainerDataBinding/>
+	</j:beads>
+
+	<j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<html:H3 text="Jewel DataGrid"/>
+
+				<j:DataGrid localId="dataGrid" width="100%" height="100%" change="dataGridChange(dataGrid, output1)" 
+					rowHeight="40" className="PercentageColumnWidths DataGrid">
+					<j:beads>
+						<js:ConstantBinding
+							sourceID="productModel"
+							sourcePropertyName="productArray"
+							destinationPropertyName="dataProvider" />
+					</j:beads>
+					<j:columns>
+						<j:DataGridColumn label="Image" dataField="image" columnWidth="15" itemRenderer="itemRenderers.ProductItemRenderer"/>
+						<j:DataGridColumn label="Title" dataField="title" columnWidth="60" />
+						<j:DataGridColumn label="Sales" dataField="sales" columnWidth="25" />
+					</j:columns>
+				</j:DataGrid>
+
+				<!-- controls for first grid -->
+				<j:Label id="output1" x="30" y="430"/>
+				<j:Button text="Refresh Grid" x="20" y="460" click="refreshGrid()" />
+				<j:Label text="Refresh this grid after add or removing values" x="30" y="490" />
+	
+			</j:Card>
+		</j:GridCell>
+		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+			<j:Card>
+				<html:H4 text="DataGrid"/>
+			</j:Card>
+		</j:GridCell>
+	</j:Grid>
+
+	<fx:Style>
+		@namespace j "library://ns.apache.org/royale/jewel";
+		
+		/* Puts a box around each cell of the DataGrids.
+		 */
+		j|DataGrid .DataItemRenderer {
+			border: 1px solid #ACACAC;
+			line-height: 40px;
+		}
+		j|DataGrid .StringItemRenderer {
+			border: 1px solid #ACACAC;
+			line-height: 40px;
+		}
+		
+		/* Allows the DataGrid to be specified with percentage widths for the columns (rather
+		 * than pixel widths) and does not respond to changes to its dataProvider.
+		 */
+		.PercentageColumnWidths {
+			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>
+	
+</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index b5f02af..7e7574c 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -248,6 +248,7 @@ limitations under the License.
         <local:TextInputPlayGround name="textinput_panel"/>
         <local:GridPlayGround name="grid_panel"/>
         <local:CardPlayGround name="card_panel"/>
+        <local:DataGridPlayGround name="datagrid_panel"/>
         <local:TablePlayGround name="tables_panel"/>
         <local:FormsValidationPlayGround name="form_validation_panel"/>
         <local:DropDownListPlayGround name="dropdownlist_panel"/>
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as
new file mode 100644
index 0000000..347c370
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as
@@ -0,0 +1,66 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package itemRenderers
+{
+	import org.apache.royale.html.Image;
+	import org.apache.royale.html.supportClasses.DataItemRenderer;
+
+	public class ProductItemRenderer extends DataItemRenderer
+	{
+		public function ProductItemRenderer()
+		{
+			super();
+		}
+
+		private var image:Image;
+
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+
+			// add an image and two labels
+			image = new Image();
+			addElement(image);
+		}
+
+		override public function get data():Object
+		{
+			return super.data;
+		}
+
+		override public function set data(value:Object):void
+		{
+			super.data = value;
+
+			image.src = value.image;
+		}
+
+		override public function adjustSize():void
+		{
+			var cy:Number = this.height/2;
+
+			image.x = 4;
+			image.y = cy - 16;
+			image.width = 32;
+			image.height = 32;
+
+			updateRenderer();
+		}
+	}
+}
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
index 19254f7..0e1bd4b 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
@@ -56,6 +56,7 @@ package models
             new NavigationLinkVO("Card", "card_panel", MaterialIconType.WEB_ASSET),
             new NavigationLinkVO("Layouts", "layouts_panel", MaterialIconType.VIEW_QUILT),
             new NavigationLinkVO("Grid", "grid_panel", MaterialIconType.GRID_ON),
+            new NavigationLinkVO("DataGrid", "datagrid_panel", MaterialIconType.VIEW_LIST),
             new NavigationLinkVO("Tables", "tables_panel", MaterialIconType.VIEW_LIST),
             new NavigationLinkVO("TabBar", "tabbar_panel", MaterialIconType.TAB),
             new NavigationLinkVO("View States", "viewstates_panel", MaterialIconType.CHORME_READER_MODE),
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as b/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as
new file mode 100644
index 0000000..edbb6fe
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package models
+{
+	import org.apache.royale.collections.ArrayList;
+	import vos.Product;
+
+	public class ProductModel
+	{
+		private var _productList: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")
+		]);
+
+		public function get productList():ArrayList
+		{
+			return _productList;
+		}
+		
+		private var _productArray:Array = [
+			new Product("ps100","Blueberries",44,200,"assets/smallbluerect.jpg"),
+			new Product("tx200","Kiwis",5,285,"assets/smallgreenrect.jpg"),
+			new Product("rz300","Bananas",80,105,"assets/smallyellowrect.jpg"),
+			new Product("dh440","Strawberries",10,340,"assets/smallredrect.jpg"),
+			new Product("ps220","Oranges",35,190,"assets/smallorangerect.jpg")
+		];
+		
+		public function get productArray():Array
+		{
+			return _productArray;
+		}
+	}
+}
diff --git a/examples/royale/TourDeJewel/src/main/royale/vos/Product.as b/examples/royale/TourDeJewel/src/main/royale/vos/Product.as
new file mode 100644
index 0000000..106c86c
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/vos/Product.as
@@ -0,0 +1,67 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package vos {
+	public class Product
+	{
+		private var _id:String;
+		private var _title:String;
+		private var _detail:Number;
+		private var _image:String;
+		private var _sales:Number;
+		
+		public function Product(id:String,title:String,detail:Number,sales:Number,image:String)
+		{
+			this._id = id;
+			this._title = title;
+			this._detail = detail;
+			this._sales = sales;
+			this._image = image;
+		}
+		
+		public function get id():String
+		{
+			return _id;
+		}
+		
+		public function get title():String
+		{
+			return _title;
+		}
+		
+		public function get detail():Number
+		{
+			return _detail;
+		}
+		
+		public function get image():String
+		{
+			return _image;
+		}
+		
+		public function get sales():Number
+		{
+			return _sales;
+		}
+		
+		public function toString():String
+		{
+			return title;
+		}
+	}
+}


[royale-asjs] 05/06: jewel-datagrid: upgrade DataGrid example

Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-datagrid
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 94714920ace78589740082c9a6de8771294ef97f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Nov 26 18:17:14 2019 +0100

    jewel-datagrid: upgrade DataGrid example
---
 .../src/main/royale/MyInitialView.mxml             |   5 ++--
 .../src/main/resources/assets/smallbluerect.jpg    | Bin 0 -> 13500 bytes
 .../src/main/resources/assets/smallgreenrect.jpg   | Bin 0 -> 13542 bytes
 .../src/main/resources/assets/smallorangerect.gif  | Bin 0 -> 821 bytes
 .../src/main/resources/assets/smallorangerect.jpg  | Bin 0 -> 13571 bytes
 .../src/main/resources/assets/smallpurplerect.jpg  | Bin 0 -> 13517 bytes
 .../src/main/resources/assets/smallredrect.jpg     | Bin 0 -> 13477 bytes
 .../src/main/resources/assets/smallyellowrect.jpg  | Bin 0 -> 13598 bytes
 .../src/main/royale/DataGridPlayGround.mxml        |  33 +++++++--------------
 .../royale/itemRenderers/ProductItemRenderer.as    |  10 ++-----
 .../src/main/royale/models/MainNavigationModel.as  |   2 +-
 .../src/main/royale/models/ProductModel.as         |  14 +--------
 12 files changed, 19 insertions(+), 45 deletions(-)

diff --git a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
index 8f74f55..ad73654 100644
--- a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
+++ b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
@@ -103,8 +103,9 @@ limitations under the License.
 	<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:DataGrid id="dataGrid" width="100%" height="100%" 
+			change="dataGridChange(dataGrid, output1)" 
+			rowHeight="40" className="PercentageColumnWidths">
 			<js:beads>
 				<js:ConstantBinding
 					sourceID="applicationModel"
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/smallbluerect.jpg b/examples/royale/TourDeJewel/src/main/resources/assets/smallbluerect.jpg
new file mode 100644
index 0000000..80ed275
Binary files /dev/null and b/examples/royale/TourDeJewel/src/main/resources/assets/smallbluerect.jpg differ
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/smallgreenrect.jpg b/examples/royale/TourDeJewel/src/main/resources/assets/smallgreenrect.jpg
new file mode 100644
index 0000000..c5f9ce6
Binary files /dev/null and b/examples/royale/TourDeJewel/src/main/resources/assets/smallgreenrect.jpg differ
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/smallorangerect.gif b/examples/royale/TourDeJewel/src/main/resources/assets/smallorangerect.gif
new file mode 100644
index 0000000..603f810
Binary files /dev/null and b/examples/royale/TourDeJewel/src/main/resources/assets/smallorangerect.gif differ
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/smallorangerect.jpg b/examples/royale/TourDeJewel/src/main/resources/assets/smallorangerect.jpg
new file mode 100644
index 0000000..4982d87
Binary files /dev/null and b/examples/royale/TourDeJewel/src/main/resources/assets/smallorangerect.jpg differ
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/smallpurplerect.jpg b/examples/royale/TourDeJewel/src/main/resources/assets/smallpurplerect.jpg
new file mode 100644
index 0000000..201f625
Binary files /dev/null and b/examples/royale/TourDeJewel/src/main/resources/assets/smallpurplerect.jpg differ
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/smallredrect.jpg b/examples/royale/TourDeJewel/src/main/resources/assets/smallredrect.jpg
new file mode 100644
index 0000000..d2cfa31
Binary files /dev/null and b/examples/royale/TourDeJewel/src/main/resources/assets/smallredrect.jpg differ
diff --git a/examples/royale/TourDeJewel/src/main/resources/assets/smallyellowrect.jpg b/examples/royale/TourDeJewel/src/main/resources/assets/smallyellowrect.jpg
new file mode 100644
index 0000000..b17b62d
Binary files /dev/null and b/examples/royale/TourDeJewel/src/main/resources/assets/smallyellowrect.jpg differ
diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index 6bce9cb..6ed39eb 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -25,8 +25,7 @@ limitations under the License.
 	xmlns:c="components.*" sourceCodeUrl="DataGridPlayGround.mxml">
 	
 	<fx:Script>
-		<![CDATA[      
-        import org.apache.royale.jewel.Label;
+		<![CDATA[
         import models.ProductModel;
 
         private function dataGridChange(grid:DataGrid, output:Label) : void
@@ -37,7 +36,7 @@ limitations under the License.
 		private function refreshGrid():void
 		{
 			dataGrid.dataProvider = null;
-			dataGrid.dataProvider = (productModel as ProductModel).productArray;
+			dataGrid.dataProvider = (productModel as ProductModel).productList;
 		}
 		]]>
 	</fx:Script>
@@ -55,12 +54,13 @@ limitations under the License.
 			<j:Card>
 				<html:H3 text="Jewel DataGrid"/>
 
-				<j:DataGrid localId="dataGrid" width="100%" height="100%" change="dataGridChange(dataGrid, output1)" 
-					rowHeight="40" className="PercentageColumnWidths DataGrid">
+				<j:DataGrid localId="dataGrid" width="100%" height="100%" 
+					change="dataGridChange(dataGrid, output1)" 
+					rowHeight="40" className="PercentageColumnWidths">
 					<j:beads>
 						<js:ConstantBinding
 							sourceID="productModel"
-							sourcePropertyName="productArray"
+							sourcePropertyName="productList"
 							destinationPropertyName="dataProvider" />
 					</j:beads>
 					<j:columns>
@@ -70,11 +70,9 @@ limitations under the License.
 					</j:columns>
 				</j:DataGrid>
 
-				<!-- controls for first grid -->
-				<j:Label id="output1" x="30" y="430"/>
-				<j:Button text="Refresh Grid" x="20" y="460" click="refreshGrid()" />
-				<j:Label text="Refresh this grid after add or removing values" x="30" y="490" />
-	
+				<j:Label id="output1" text="output1"/>
+				<j:Button text="Refresh Grid" click="refreshGrid()"/>
+				<j:Label text="Refresh this grid after add or removing values"/>
 			</j:Card>
 		</j:GridCell>
 		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
@@ -101,19 +99,10 @@ limitations under the License.
 		/* Allows the DataGrid to be specified with percentage widths for the columns (rather
 		 * than pixel widths) and does not respond to changes to its dataProvider.
 		 */
-		.PercentageColumnWidths {
+		/* .PercentageColumnWidths {
 			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>
 	
 </c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as
index 347c370..60deb8a 100644
--- a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as
+++ b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/ProductItemRenderer.as
@@ -18,9 +18,9 @@
 ////////////////////////////////////////////////////////////////////////////////
 package itemRenderers
 {
-	import org.apache.royale.html.Image;
 	import org.apache.royale.html.supportClasses.DataItemRenderer;
-
+	import org.apache.royale.jewel.Image;
+	
 	public class ProductItemRenderer extends DataItemRenderer
 	{
 		public function ProductItemRenderer()
@@ -28,14 +28,11 @@ package itemRenderers
 			super();
 		}
 
-		private var image:Image;
+		private var image:Image = new Image();
 
 		override public function addedToParent():void
 		{
 			super.addedToParent();
-
-			// add an image and two labels
-			image = new Image();
 			addElement(image);
 		}
 
@@ -43,7 +40,6 @@ package itemRenderers
 		{
 			return super.data;
 		}
-
 		override public function set data(value:Object):void
 		{
 			super.data = value;
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
index 0e1bd4b..17a681f 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
@@ -57,7 +57,7 @@ package models
             new NavigationLinkVO("Layouts", "layouts_panel", MaterialIconType.VIEW_QUILT),
             new NavigationLinkVO("Grid", "grid_panel", MaterialIconType.GRID_ON),
             new NavigationLinkVO("DataGrid", "datagrid_panel", MaterialIconType.VIEW_LIST),
-            new NavigationLinkVO("Tables", "tables_panel", MaterialIconType.VIEW_LIST),
+            new NavigationLinkVO("Tables", "tables_panel", MaterialIconType.VIEW_COMFY),
             new NavigationLinkVO("TabBar", "tabbar_panel", MaterialIconType.TAB),
             new NavigationLinkVO("View States", "viewstates_panel", MaterialIconType.CHORME_READER_MODE),
             new NavigationLinkVO("Wizard", "wizards_panel", MaterialIconType.MOVIE_FILTER)
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as b/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as
index edbb6fe..eb89ebe 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/ProductModel.as
@@ -21,6 +21,7 @@ package models
 	import org.apache.royale.collections.ArrayList;
 	import vos.Product;
 
+	[Bindable]
 	public class ProductModel
 	{
 		private var _productList:ArrayList = new ArrayList([
@@ -35,18 +36,5 @@ package models
 		{
 			return _productList;
 		}
-		
-		private var _productArray:Array = [
-			new Product("ps100","Blueberries",44,200,"assets/smallbluerect.jpg"),
-			new Product("tx200","Kiwis",5,285,"assets/smallgreenrect.jpg"),
-			new Product("rz300","Bananas",80,105,"assets/smallyellowrect.jpg"),
-			new Product("dh440","Strawberries",10,340,"assets/smallredrect.jpg"),
-			new Product("ps220","Oranges",35,190,"assets/smallorangerect.jpg")
-		];
-		
-		public function get productArray():Array
-		{
-			return _productArray;
-		}
 	}
 }


[royale-asjs] 03/06: jewel-datagrid: new DataGrid classes for Jewel

Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-datagrid
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 8fbed6786cf6de03e6c15ee04e745c23cefc9f34
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Nov 26 18:15:25 2019 +0100

    jewel-datagrid: new DataGrid classes for Jewel
---
 .../projects/Jewel/src/main/royale/JewelClasses.as |   7 +
 .../royale/org/apache/royale/jewel/DataGrid.as     |   4 -
 .../royale/jewel/beads/layouts/DataGridLayout.as   | 180 +++++++++++++
 .../beads/models/DataGridPresentationModel.as      |  88 +++++++
 .../royale/jewel/beads/views/DataGridView.as       | 279 +++++++++++++++++++++
 .../supportClasses/datagrid/DataGridColumn.as      |  16 +-
 .../datagrid/DataGridColumnChangePropagator.as     |  87 +++++++
 .../supportClasses/datagrid/DataGridColumnList.as  |  77 ++++++
 .../supportClasses/datagrid/DataGridListArea.as    |  35 +++
 9 files changed, 761 insertions(+), 12 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 7eb7101..e27ee9b 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -42,6 +42,8 @@ package
         import org.apache.royale.jewel.beads.models.WizardModel; WizardModel;
         import org.apache.royale.jewel.beads.models.WizardStep; WizardStep;
         import org.apache.royale.jewel.beads.models.PopUpModel; PopUpModel;
+        import org.apache.royale.jewel.beads.models.ListPresentationModel; ListPresentationModel;
+        import org.apache.royale.jewel.beads.models.DataGridPresentationModel; DataGridPresentationModel;
 
         import org.apache.royale.jewel.beads.controllers.PopUpMouseController; PopUpMouseController;
         import org.apache.royale.jewel.beads.controllers.SpinnerMouseController; SpinnerMouseController;
@@ -110,6 +112,11 @@ package
         import org.apache.royale.jewel.supportClasses.formitem.FormItemLayoutProxy; FormItemLayoutProxy;
         import org.apache.royale.jewel.supportClasses.wizard.WizardLayoutProxy; WizardLayoutProxy;
         import org.apache.royale.jewel.supportClasses.button.SelectableButtonBase; SelectableButtonBase;
+        
+        import org.apache.royale.jewel.beads.views.DataGridView; DataGridView;
+        import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnList; DataGridColumnList;
+        import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumnChangePropagator; DataGridColumnChangePropagator;
+        import org.apache.royale.jewel.beads.layouts.DataGridLayout; DataGridLayout;
 
         import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect; positionInsideBoundingClientRect;
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
index cd76f93..37f8f75 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataGrid.as
@@ -59,10 +59,6 @@ package org.apache.royale.jewel
 			super();
 			
 			typeNames = "jewel datagrid";
-			
-			// set a reasonable default size
-			width = 200;
-			height = 200;
 		}
 		
 		/**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as
new file mode 100644
index 0000000..669ee9b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/DataGridLayout.as
@@ -0,0 +1,180 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{	
+    import org.apache.royale.core.IBeadLayout;
+    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+    import org.apache.royale.core.IDataGridModel;
+    import org.apache.royale.core.IStrand;
+    import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.UIBase;
+    import org.apache.royale.core.ValuesManager;
+    import org.apache.royale.core.layout.EdgeData;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.html.beads.IDataGridView;
+    import org.apache.royale.html.beads.models.ButtonBarModel;
+    import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn;
+	
+	/**
+	 * DataGridLayout is a class that handles the size and positioning of the
+	 * elements of a DataGrid. This includes the ButtonBar used for the column
+	 * headers and the Lists that are the columns.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9
+	 */
+	public class DataGridLayout implements IBeadLayout
+	{
+		/**
+		 *  constructor
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		public function DataGridLayout()
+		{
+		}
+		
+		protected var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			(_strand as IEventDispatcher).addEventListener("widthChanged", handleSizeChanges);
+			(_strand as IEventDispatcher).addEventListener("heightChanged", handleSizeChanges);
+			(_strand as IEventDispatcher).addEventListener("sizeChanged", handleSizeChanges);
+			(_strand as IEventDispatcher).addEventListener("layoutNeeded", handleLayoutNeeded);
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.UIBase
+		 */
+		protected function get uiHost():UIBase
+		{
+			return _strand as UIBase;
+		}
+		
+		private function handleSizeChanges(event:Event):void
+		{
+			layout();
+		}
+		
+		private function handleLayoutNeeded(event:Event):void
+		{
+			layout();
+		}
+		
+		/**
+		 * @copy org.apache.royale.core.IBeadLayout#layout
+         * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.core.IUIBase
+		 * @royaleignorecoercion org.apache.royale.core.UIBase
+		 * @royaleignorecoercion org.apache.royale.html.beads.IDataGridView
+		 * @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+		 * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumn
+		 */
+		public function layout():Boolean
+		{
+		// 	var header:IUIBase = (uiHost.view as IDataGridView).header;
+        //     // fancier DG's will filter invisible columns and only put visible columns
+        //     // in the bbmodel, so do all layout based on the bbmodel, not the set
+        //     // of columns that may contain invisible columns
+        //     var bbmodel:ButtonBarModel = header.getBeadByType(ButtonBarModel) as ButtonBarModel;
+		// 	var listArea:IUIBase = (uiHost.view as IDataGridView).listArea;
+			
+		// 	var displayedColumns:Array = (uiHost.view as IDataGridView).columnLists;
+		// 	var model:IDataGridModel = uiHost.model as IDataGridModel;
+			
+		// 	var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(_strand as IUIBase);			
+		// 	var useWidth:Number = uiHost.width - (borderMetrics.left + borderMetrics.right);
+		// 	var useHeight:Number = uiHost.height - (borderMetrics.top + borderMetrics.bottom);
+			
+		// 	var xpos:Number = 0;
+		// 	var defaultColumnWidth:Number = (useWidth) / bbmodel.dataProvider.length;
+		// 	var columnWidths:Array = [];
+			
+		// 	for(var i:int=0; i < bbmodel.dataProvider.length; i++) {
+		// 		var columnDef:IDataGridColumn = bbmodel.dataProvider[i] as IDataGridColumn;
+		// 		var columnList:UIBase = displayedColumns[i] as UIBase;
+				
+		// 		// probably do not need to set (x,y), but if the Container's layout requires it, they will be set.
+		// 		columnList.x = xpos;
+		// 		columnList.y = 0;
+				
+		// 		var columnWidth:Number = defaultColumnWidth;
+		// 		if (!isNaN(columnDef.columnWidth)) {
+		// 			columnWidth = columnDef.columnWidth;
+		// 		}
+				
+		// 		columnList.width = columnWidth;
+		// 		columnWidths.push(columnWidth);
+				
+		// 		xpos += columnList.width;
+		// 	}
+			
+		// 	bbmodel.buttonWidths = columnWidths;
+			
+		// 	COMPILE::SWF {
+        //         header.y = borderMetrics.top;
+        //         header.x = borderMetrics.left;
+		// 		header.width = useWidth;
+		// 	}
+		// 	COMPILE::JS {
+		// 		(header as UIBase).percentWidth = 100;
+		// 		listArea.element.style.position = "absolute";
+        //         if (!(uiHost.element.style.position == 'absolute' ||
+        //               uiHost.element.style.position == 'relative' ||
+        //               uiHost.element.style.position == 'fixed'))
+        //             uiHost.element.style.position = 'relative';
+		// 	}
+		// 	// header's height is set in CSS
+			
+        //     listArea.y = header.height + header.y;
+		// 	COMPILE::SWF {
+        //         listArea.x = borderMetrics.left;
+		// 		listArea.width = useWidth;
+		// 	}
+		// 	COMPILE::JS {
+		// 		(listArea as UIBase).percentWidth = 100;
+		// 	}
+		// 	listArea.height = useHeight - header.height;
+			
+		// 	header.dispatchEvent(new Event("layoutNeeded"));
+		// 	listArea.dispatchEvent(new Event("layoutNeeded"));
+			
+			return true;
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataGridPresentationModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataGridPresentationModel.as
new file mode 100644
index 0000000..b1df6fd
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataGridPresentationModel.as
@@ -0,0 +1,88 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.models
+{
+	import org.apache.royale.core.IDataGridPresentationModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	
+	/**
+	 *  The DataGridPresentationModel class contains the data to label the columns
+	 *  of the org.apache.royale.html.DataGrid along with the height of the rows. 
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class DataGridPresentationModel extends ListPresentationModel implements IDataGridPresentationModel
+	{
+		/**
+		 *  constructor.
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function DataGridPresentationModel()
+		{
+			super();
+			
+			separatorThickness = 1;
+		}
+		
+		private var _columnLabels:Array;
+		
+		/**
+		 *  The labels for each column.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get columnLabels():Array
+		{
+			return _columnLabels;
+		}
+		public function set columnLabels(value:Array):void
+		{
+			if (value != _columnLabels) {
+				_columnLabels = value;
+				dispatchEvent(new Event("columnsChanged"));
+			}
+		}
+		
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			_strand = value;
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
new file mode 100644
index 0000000..5f4677a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DataGridView.as
@@ -0,0 +1,279 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.views
+{
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IBeadModel;
+	import org.apache.royale.core.IBeadView;
+	import org.apache.royale.core.IChild;
+	import org.apache.royale.core.IDataGrid;
+	import org.apache.royale.core.IDataGridModel;
+	import org.apache.royale.core.IDataGridPresentationModel;
+	import org.apache.royale.core.ILayoutChild;
+	import org.apache.royale.core.IParent;
+	import org.apache.royale.core.IUIBase;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.debugging.assert;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.html.DataGridButtonBar;
+	import org.apache.royale.html.beads.GroupView;
+	import org.apache.royale.html.beads.IDataGridView;
+	import org.apache.royale.html.beads.layouts.ButtonBarLayout;
+	import org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn;
+	import org.apache.royale.html.supportClasses.IDataGridColumnList;
+	import org.apache.royale.jewel.supportClasses.Viewport;
+
+    /**
+     *  The DataGridView class is the visual bead for the org.apache.royale.jewel.DataGrid.
+     *  This class constructs the items that make the DataGrid: Lists for each column and a
+     *  org.apache.royale.jewel.ButtonBar for the column headers.
+     *
+     *  @viewbead
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.7
+     */
+    public class DataGridView extends GroupView implements IBeadView, IDataGridView
+    {
+        /**
+         *  constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.7
+         */
+        public function DataGridView()
+        {
+            super();
+        }
+
+        private var _header:DataGridButtonBar;
+        private var _listArea:IUIBase;
+
+        private var _lists:Array;
+
+        /**
+         * An array of List objects the comprise the columns of the DataGrid.
+         */
+        public function get columnLists():Array
+        {
+            return _lists;
+        }
+
+        /**
+         * The area used to hold the columns
+         *
+         */
+        public function get listArea():IUIBase
+        {
+            return _listArea;
+        }
+
+        /**
+         * Returns the component used as the header for the DataGrid.
+         */
+        public function get header():IUIBase
+        {
+            return _header;
+        }
+
+        public function refreshContent():void
+        {
+            handleInitComplete(null);
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+         * @royaleignorecoercion org.apache.royale.core.IBead
+         * @royaleignorecoercion org.apache.royale.core.IBeadModel
+         * @royaleignorecoercion org.apache.royale.core.IChild
+         * @royaleignorecoercion org.apache.royale.core.ILayoutChild
+         * @royaleignorecoercion org.apache.royale.core.IUIBase
+         * @royaleignorecoercion org.apache.royale.html.DataGrid
+         */
+        override protected function handleInitComplete(event:Event):void
+        {
+            var host:IDataGrid = _strand as IDataGrid;
+
+            // see if there is a presentation model already in place. if not, add one.
+            var sharedModel:IDataGridModel = host.model as IDataGridModel;
+            IEventDispatcher(sharedModel).addEventListener("dataProviderChanged", handleDataProviderChanged);
+            IEventDispatcher(sharedModel).addEventListener("selectedIndexChanged", handleSelectedIndexChanged);
+
+            var columnContainerClass:Class = ValuesManager.valuesImpl.getValue(host, "columnContainerClass") as Class;
+            assert(columnContainerClass != null,"columnContainerClass for DataGrid must be set!")
+            _header = new columnContainerClass() as DataGridButtonBar;
+            // header's height is set in CSS
+            _header.percentWidth = 100;
+            _header.dataProvider = sharedModel.columns;
+            _header.labelField = "label";
+            sharedModel.headerModel = _header.model as IBeadModel;
+
+            var listAreaClass:Class = ValuesManager.valuesImpl.getValue(host, "listAreaClass") as Class;
+            trace("listAreaClass: " + listAreaClass);
+            assert(listAreaClass != null,"listAreaClass for DataGrid must be set!")
+            _listArea = new listAreaClass() as IUIBase;
+            (_listArea as ILayoutChild).percentWidth = 100;
+
+            if (sharedModel.columns)
+                createLists();
+
+            var columnLayoutClass:Class = ValuesManager.valuesImpl.getValue(host, "columnLayoutClass") as Class;
+            assert(columnLayoutClass != null,"columnLayoutClass for DataGrid must be set!")
+            var bblayout:ButtonBarLayout = new columnLayoutClass() as ButtonBarLayout;
+            _header.addBead(bblayout as IBead);
+            _header.addBead(new Viewport() as IBead);
+            host.strandChildren.addElement(_header as IChild);
+
+            host.strandChildren.addElement(_listArea as IChild);
+
+            handleDataProviderChanged(event);
+
+            host.addEventListener("widthChanged", handleSizeChanges);
+            host.addEventListener("heightChanged", handleSizeChanges);
+
+            host.dispatchEvent(new Event("dataGridViewCreated"));
+        }
+
+        /**
+         * @private
+         */
+        private function handleSizeChanges(event:Event):void
+        {
+            _header.dispatchEvent(new Event("layoutChanged"));
+            _listArea.dispatchEvent(new Event("layoutChanged"));
+        }
+
+        /**
+         * @private
+         */
+        protected function handleDataProviderChanged(event:Event):void
+        {
+            var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+            for (var i:int=0; i < _lists.length; i++)
+            {
+                var list:IDataGridColumnList = _lists[i] as IDataGridColumnList;
+                list.dataProvider = sharedModel.dataProvider;
+            }
+            host.dispatchEvent(new Event("layoutNeeded"));
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumnList
+         */
+        private function handleSelectedIndexChanged(event:Event):void
+        {
+            var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+            var newIndex:int = sharedModel.selectedIndex;
+
+            for (var i:int=0; i < _lists.length; i++)
+            {
+                var list:IDataGridColumnList = _lists[i] as IDataGridColumnList;
+                list.selectedIndex = newIndex;
+            }
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumnList
+         */
+        private function handleColumnListChange(event:Event):void
+        {
+            var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+            var list:IDataGridColumnList = event.target as IDataGridColumnList;
+            sharedModel.selectedIndex = list.selectedIndex;
+
+            for(var i:int=0; i < _lists.length; i++) {
+                if (list != _lists[i]) {
+                    var otherList:IDataGridColumnList = _lists[i] as IDataGridColumnList;
+                    otherList.selectedIndex = list.selectedIndex;
+                }
+            }
+
+            host.dispatchEvent(new Event('change'));
+        }
+
+        /**
+         * @private
+         * @royaleignorecoercion String
+         * @royaleignorecoercion Class
+         * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+         * @royaleignorecoercion org.apache.royale.core.IBead
+         * @royaleignorecoercion org.apache.royale.core.IChild
+         * @royaleignorecoercion org.apache.royale.core.IParent
+         * @royaleignorecoercion org.apache.royale.core.IDataGrid
+         * @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
+         * @royaleignorecoercion org.apache.royale.jewel.supportClasses.datagrid.IDataGridColumn
+         */
+        protected function createLists():void
+        {
+            var host:IDataGrid = _strand as IDataGrid;
+            
+            // get the name of the class to use for the columns
+            var columnClass:Class = ValuesManager.valuesImpl.getValue(host, "columnClass") as Class;
+            assert(columnClass != null,"ColumnClass for DataGrid must be set!")
+
+            var sharedModel:IDataGridModel = host.model as IDataGridModel;
+            var presentationModel:IDataGridPresentationModel = host.presentationModel as IDataGridPresentationModel;
+
+            _lists = [];
+
+            for (var i:int=0; i < sharedModel.columns.length; i++)
+            {
+                var dataGridColumn:IDataGridColumn = sharedModel.columns[i] as IDataGridColumn;
+
+                var list:IDataGridColumnList = new columnClass();
+                
+                if (i == 0)
+                {
+                    list.className = "first";
+                }
+                else if (i == sharedModel.columns.length-1)
+                {
+                    list.className = "last";
+                }
+                else
+                {
+                    list.className = "middle";
+                }
+                
+                list.id = "dataGridColumn" + i;
+                list.dataProvider = sharedModel.dataProvider;
+                list.itemRenderer = dataGridColumn.itemRenderer;
+                list.labelField = dataGridColumn.dataField;
+                list.addEventListener('change', handleColumnListChange);
+                list.addBead(presentationModel as IBead);
+
+                (_listArea as IParent).addElement(list as IChild);
+                _lists.push(list);
+            }
+
+            host.dispatchEvent(new Event("layoutNeeded"));
+        }
+    }
+}
+
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
index ead1b9c..0ef05e3 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
@@ -32,7 +32,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 	 *  @langversion 3.0
 	 *  @playerversion Flash 10.2
 	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.9.4
+	 *  @productversion Royale 0.9.7
 	 */
 	public class DataGridColumn implements IDataGridColumn
 	{
@@ -42,7 +42,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function DataGridColumn()
 		{
@@ -55,7 +55,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function createColumn():IUIBase
 		{
@@ -71,7 +71,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get itemRenderer():IFactory
 		{
@@ -90,7 +90,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get columnWidth():Number
 		{
@@ -109,7 +109,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get label():String
 		{
@@ -129,7 +129,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get dataField():String
 		{
@@ -149,7 +149,7 @@ package org.apache.royale.jewel.supportClasses.datagrid
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
+		 *  @productversion Royale 0.9.7
 		 */
 		public function get className():String
 		{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnChangePropagator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnChangePropagator.as
new file mode 100644
index 0000000..4ef0ac1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnChangePropagator.as
@@ -0,0 +1,87 @@
+
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+	import org.apache.royale.core.IBeadModel;
+	import org.apache.royale.core.IChangePropagator;
+	import org.apache.royale.core.IDataGridModel;
+	import org.apache.royale.core.ISelectionModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.html.beads.IDataGridView;
+
+	/**
+	 *  The DataGridColumnChangePropagator picks up the dataProviderChanged event
+	 *  and lets the data grid columns know about it.
+	 *
+	 *  @viewbead
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9
+	 */
+	public class DataGridColumnChangePropagator implements IChangePropagator
+	{
+		public function DataGridColumnChangePropagator()
+		{
+		}
+		
+		private var _strand:IStrand;
+		/**
+		 * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			IEventDispatcher(_strand).addEventListener("beadsAdded", finishSetup);
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 */
+		protected function finishSetup(e:Event):void
+		{
+			var model:IEventDispatcher = _strand.getBeadByType(IBeadModel) as IEventDispatcher;
+			model.addEventListener('dataProviderChanged', handleDataProviderChanged);
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+		 * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 * @royaleignorecoercion org.apache.royale.html.beads.IDataGridView
+		 * @royaleignorecoercion org.apache.royale.html.supportClasses.DataGridColumnList
+		 */
+		protected function handleDataProviderChanged(e:Event):void
+		{
+			var dataGridView:IDataGridView = _strand.getBeadByType(IDataGridView) as IDataGridView;
+			var lists:Array = dataGridView.columnLists;
+			if (lists == null) return;
+			
+			var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
+			for (var i:int=0; i < lists.length; i++)
+			{
+				var list:DataGridColumnList = lists[i] as DataGridColumnList;
+				var listModel:ISelectionModel = list.getBeadByType(IBeadModel) as ISelectionModel;
+				listModel.dataProvider = sharedModel.dataProvider;
+			}
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as
new file mode 100644
index 0000000..b8a451c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumnList.as
@@ -0,0 +1,77 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+    import org.apache.royale.jewel.List;
+    import org.apache.royale.html.supportClasses.IDataGridColumnList;
+    
+    //--------------------------------------
+    //  Events
+    //--------------------------------------
+    
+    /**
+     *  @copy org.apache.royale.core.ISelectionModel#change
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.7
+     */
+    [Event(name="change", type="org.apache.royale.events.Event")]
+    
+    /**
+     *  The DataGridColumnList class is the List class used internally
+     *  by DataGrid for each column.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.7
+     */
+	public class DataGridColumnList extends List implements IDataGridColumnList
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.7
+         */
+		public function DataGridColumnList()
+		{
+			super();
+			//typeNames = "jewel dataGridColumnList";
+		}
+		
+        /**
+         *  The DataGridColumn for this list
+         *  
+         *
+         *  @toplevel
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9
+         * 
+         *  @royalesuppresspublicvarwarning
+         */
+		public var columnInfo: DataGridColumn;
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridListArea.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridListArea.as
new file mode 100644
index 0000000..38bd6d8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridListArea.as
@@ -0,0 +1,35 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 "Licens"); 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.datagrid
+{
+    import org.apache.royale.jewel.Container;
+
+    public class DataGridListArea extends Container
+    {
+        public function DataGridListArea()
+        {
+            super();
+
+            // COMPILE::JS
+			// {
+			// 	typeNames = 'jewel dataGridListArea';
+			// }
+        }
+    }
+}
\ No newline at end of file