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 67b81a3 Updated DataGridExample and TreeExample to reflect style
improvements as well as showing standard (Array) DataGrid and DataGrid with
dynamic beads.
67b81a3 is described below
commit 67b81a342738453afd4fcf448822b98da868b63d
Author: Peter Ent <[email protected]>
AuthorDate: Thu Jan 18 16:32:45 2018 -0500
Updated DataGridExample and TreeExample to reflect style improvements as
well as showing standard (Array) DataGrid and DataGrid with dynamic beads.
---
.../src/main/royale/MyInitialView.mxml | 57 ++++++++++++----------
.../src/main/royale/models/ProductsModel.as | 8 +++
.../TreeExample/src/main/royale/MyInitialView.mxml | 17 +++++--
3 files changed, 53 insertions(+), 29 deletions(-)
diff --git a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
index 086cae9..456cb48 100644
--- a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
+++ b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
@@ -35,18 +35,20 @@ limitations under the License.
private function refreshGrid():void
{
dataGrid.dataProvider = null;
- dataGrid.dataProvider = (applicationModel as
ProductsModel).productList;
+ dataGrid.dataProvider = (applicationModel as
ProductsModel).productArray;
}
private function addValue():void
{
var product:Product = new Product("xx100","New
Item",44,10,"assets/smallbluerect.jpg");
(applicationModel as
ProductsModel).productList.addItemAt(product, 2);
+ (applicationModel as
ProductsModel).productArray.splice(2,0,product);
}
private function removeValue():void
{
(applicationModel as
ProductsModel).productList.removeItemAt(2);
+ (applicationModel as
ProductsModel).productArray.splice(2,1);
}
]]>
</fx:Script>
@@ -54,29 +56,26 @@ 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;
+ /* Puts a box around each cell of the DataGrids.
+ */
+ js|DataGrid .DataItemRenderer {
+ border: solid 0.5px #ACACAC;
+ line-height: 40px;
}
-
- .DataGridStyle
- {
- IBeadView:
ClassReference("org.apache.royale.html.beads.DataGridPercentageView");
- }
-
- .DynamicGrid {
- IBeadModel:
ClassReference("org.apache.royale.html.beads.models.DataGridModel");
+ js|DataGrid .StringItemRenderer {
+ border: solid 0.5px #ACACAC;
+ line-height: 40px;
}
- .DynamicGridColumn {
- IDataProviderItemRendererMapper:
ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
+ /* 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 {
+ IBeadView:
ClassReference("org.apache.royale.html.beads.DataGridPercentageView");
}
</fx:Style>
-
- <js:Label x="20" y="10" text="Both DataGrids share the same
dataProvider. The second DataGrid is dynamic." />
-
+
<!-- controls for first grid -->
<js:Label id="output1" x="30" y="430"/>
<js:TextButton text="Refresh Grid" x="20" y="460" click="refreshGrid()"
/>
@@ -88,22 +87,29 @@ limitations under the License.
<js:TextButton x="520" y="490" text="Remove Value"
click="removeValue()" />
+ <!-- The default configuration of the DataGrid, using only Array as the
dataProvider. A style class
+ has been added to add the DataGridPercentageView bead that lets
the columns' widths be
+ specified by percentages.
+ -->
<js:DataGrid id="dataGrid" x="20" y="50" width="400" height="350"
change="dataGridChange(dataGrid, output1)"
- rowHeight="40" className="DataGridStyle">
+ rowHeight="40"
className="PercentageColumnWidths DataGrid">
<js:beads>
<js:ConstantBinding
sourceID="applicationModel"
- sourcePropertyName="productList"
+ sourcePropertyName="productArray"
destinationPropertyName="dataProvider" />
</js:beads>
<js:columns>
- <js:DataGridColumn label="Image" dataField="image"
columnWidth="15" itemRenderer="products.ProductItemRenderer" />
+ <js:DataGridColumn label="Image" dataField="image"
columnWidth="15" itemRenderer="products.ProductItemRenderer"/>
<js:DataGridColumn label="Title" dataField="title"
columnWidth="60" />
<js:DataGridColumn label="Sales" dataField="sales"
columnWidth="25" />
</js:columns>
</js:DataGrid>
- <js:DataGrid id="dataGrid2" x="520" y="50" width="400" height="350"
change="dataGridChange(dataGrid2, output2)" rowHeight="40"
className="DynamicGrid">
+ <!-- A dynamic DataGrid, responding to additions and deletions, using
the .DynamicDataGrid style class
+ -->
+ <js:DataGrid id="dataGrid2" x="520" y="50" width="400" height="350"
change="dataGridChange(dataGrid2, output2)"
+ rowHeight="40" className="DynamicDataGrid
DataGrid">
<js:beads>
<js:ConstantBinding
sourceID="applicationModel"
@@ -111,10 +117,9 @@ limitations under the License.
destinationPropertyName="dataProvider" />
</js:beads>
<js:columns>
- <js:DataGridColumn label="Image" dataField="image"
columnWidth="100" itemRenderer="products.ProductItemRenderer"
-
className="DynamicGridColumn" />
- <js:DataGridColumn label="Title" dataField="title"
columnWidth="200" className="DynamicGridColumn" />
- <js:DataGridColumn label="Sales" dataField="sales"
columnWidth="100" className="DynamicGridColumn" />
+ <js:DataGridColumn label="Image" dataField="image"
columnWidth="100" itemRenderer="products.ProductItemRenderer"/>
+ <js:DataGridColumn label="Title" dataField="title"
columnWidth="200" />
+ <js:DataGridColumn label="Sales" dataField="sales"
columnWidth="100" />
</js:columns>
</js:DataGrid>
diff --git
a/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as
b/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as
index 65a9524..efb2844 100644
--- a/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as
+++ b/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as
@@ -35,5 +35,13 @@ package models
{
return _productList;
}
+
+ public 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")
+ ];
}
}
diff --git a/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml
b/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml
index 61bdbc0..8b70a52 100644
--- a/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml
+++ b/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml
@@ -23,7 +23,18 @@ limitations under the License.
<fx:Style>
@namespace js "library://ns.apache.org/royale/basic";
-
+ /* Vertically center the cells of the Tree and TreeGrid and give
+ * them a thin border.
+ */
+ .Tree .StringItemRenderer {
+ border: solid 0.5px #ACACAC;
+ line-height: 40px;
+ }
+
+ .TreeGrid .StringItemRenderer {
+ border: solid 0.5px #ACACAC;
+ line-height: 40px;
+ }
</fx:Style>
<fx:Script>
@@ -36,7 +47,7 @@ limitations under the License.
</js:beads>
<js:Tree id="tree" x="30" y="30" width="400" height="500"
- labelField="title">
+ labelField="title" rowHeight="40">
<js:beads>
<js:ConstantBinding
sourceID="applicationModel"
@@ -53,7 +64,7 @@ limitations under the License.
destinationPropertyName="dataProvider" />
</js:beads>
<js:columns>
- <js:TreeGridColumn label="Title" dataField="title"
columnWidth="250" />
+ <js:TreeGridColumn label="Title" dataField="title"
columnWidth="250" />
<js:DataGridColumn label="Artist" dataField="artist"
columnWidth="150" />
<js:DataGridColumn label="Length" dataField="length"
columnWidth="100" />
</js:columns>
--
To stop receiving notification emails like this one, please contact
['"[email protected]" <[email protected]>'].
