You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by pe...@apache.org on 2018/01/18 21:30:49 UTC
[royale-asjs] branch develop updated: Updated DataGridExample and
TreeExample to reflect style improvements as well as showing standard
(Array) DataGrid and DataGrid with dynamic beads.
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 <pe...@apache.org>
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
['"commits@royale.apache.org" <co...@royale.apache.org>'].