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 2020/03/08 22:04:21 UTC

[royale-asjs] branch develop updated: tour-de-tour-de-jewel: more datagrid updates to examples

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

carlosrovira 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 74fc9e2  tour-de-tour-de-jewel: more datagrid updates to examples
74fc9e2 is described below

commit 74fc9e22777772b2b3ab269f563b3d175e9f7cfe
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 8 23:04:11 2020 +0100

    tour-de-tour-de-jewel: more datagrid updates to examples
---
 .../src/main/royale/DataGridPlayGround.mxml         | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
index b71c942..25eb00c 100644
--- a/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/DataGridPlayGround.mxml
@@ -161,7 +161,7 @@ limitations under the License.
 
 		<c:ExampleHeader title="Jewel DataGrid">
 			<c:description>
-				<![CDATA[<b>Jewel DataGrid</b> examples.]]>
+				<![CDATA[<b>Jewel DataGrid</b> displays a collection of data using <i>columns</i> and <i>rows</i>. Each <i>column</i> represents a specific <i>field</i> in the data set; each row represents a specific objevt data.]]>
 			</c:description>
 		</c:ExampleHeader>
 
@@ -172,10 +172,12 @@ limitations under the License.
 				</j:CardHeader>
 				<j:CardPrimaryContent>
 					<j:Label multiline="true">
-						<j:html><![CDATA[<p>No configuration, default <i>width</i>, <i>height</i>, no <i>columnWidth</i> or <i>rowHeight</i>, and no default <i>dataProvider</i>.</p>]]></j:html>
+						<j:html><![CDATA[<p>No configuration, no <i>width</i> or <i>height</i>, no <i>columnWidth</i> or <i>rowHeight</i>. Since no height is specified, is equal to the rows of data. Removing <i>dataProvider</i> makes height shrink to header's height.</p>]]></j:html>
 					</j:Label>
 					
-					<j:DataGrid localId="dg1" change="lb1.html = describeItem(event.target.selectedItem)">
+					<j:DataGrid localId="dg1" 
+						change="lb1.html = describeItem(event.target.selectedItem)"
+						initComplete="loadDataProvider(dg1)">
 						<j:columns>
 							<j:DataGridColumn label="Title" dataField="title"/>
 							<j:DataGridColumn label="Sales" dataField="sales"/>
@@ -206,13 +208,18 @@ limitations under the License.
 		</j:GridCell>
 		
 		<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
-			<j:Card height="400">
-				<j:CardHeader>
-					<html:H3 text="Percentage Width and Height" className="primary-normal"/>
+			<j:Card localId="card2" height="400">
+				<j:CardHeader itemsVerticalAlign="itemsCentered">
+					<j:BarSection>
+						<html:H3 text="Percentage Width and Height" className="primary-normal"/>
+					</j:BarSection>
+					<j:BarSection itemsHorizontalAlign="itemsRight">
+						<j:HSlider minimum="200" maximum="600" value="400" valueChange="card2.height = event.target.value"/>
+					</j:BarSection>
 				</j:CardHeader>
 				<j:CardPrimaryContent>
 					<j:Label multiline="true">
-						<j:html><![CDATA[<p><i>width</i> and <i>height</i> set to 100%, no <i>columnWidth</i> or <i>rowHeight</i>, and default <i>dataProvider</i>.<br>Note: this card need to set <i>height</i> so datagrid 100% could work)</p>]]></j:html>
+						<j:html><![CDATA[<p><i>width</i> and <i>height</i> set to 100%, no <i>columnWidth</i> or <i>rowHeight</i>, and default <i>dataProvider</i>.<br>Note: this card need to set <i>height</i> so datagrid 100% could work.</p>]]></j:html>
 					</j:Label>
 					
 					<j:DataGrid localId="dg2" width="100%" height="100%"