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 <[email protected]>
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
[email protected].
