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