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 79ce407 Fix dropdownlist that was broken and refactor table example
for better layout
79ce407 is described below
commit 79ce407e06c7d5a98a54ddd2da732adcad4c7c4e
Author: Carlos Rovira <[email protected]>
AuthorDate: Fri Aug 24 17:13:50 2018 +0200
Fix dropdownlist that was broken and refactor table example for better
layout
---
.../src/main/royale/DropDownListPlayGround.mxml | 8 +-
.../src/main/royale/TablePlayGround.mxml | 343 +++++++++++----------
2 files changed, 182 insertions(+), 169 deletions(-)
diff --git
a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
index 551ea59..4dbdeac 100644
--- a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
@@ -39,11 +39,11 @@ limitations under the License.
]]>
</fx:Script>
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
<j:Card width="350">
- <j:beads>
- <j:HorizontalLayout gap="3"/>
- <js:ViewDataBinding />
- </j:beads>
<html:H3 text="Jewel DropDownList"/>
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
index 9fe2dec..a2d5bf5 100644
--- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -29,175 +29,188 @@ limitations under the License.
<j:beads>
<js:ContainerDataBinding/>
- <j:HorizontalCenteredLayout gap="3"/>
</j:beads>
- <j:Card >
- <html:H3 text="Jewel SimpleTable"/>
-
- <j:SimpleTable width="500">
- <j:THead>
- <j:TableRow>
- <j:TableHeaderCell width="48">
- <j:Label text="Icons" />
- </j:TableHeaderCell>
- <j:TableHeaderCell width="140">
- <j:Label text="Text Column" />
- </j:TableHeaderCell>
- <j:TableHeaderCell width="140">
- <j:Label text="Centered Text
Column" />
- </j:TableHeaderCell>
- <j:TableHeaderCell>
- <j:Label text="Number Column">
- <j:beads>
- <j:TextAlign
align="right"/>
- </j:beads>
- </j:Label>
- </j:TableHeaderCell>
- </j:TableRow>
- </j:THead>
- <j:TBody>
- <j:TableRow>
- <j:TableCell>
- <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
- </j:TableCell>
- <j:TableCell expandRows="2">
- <j:Label text="Some text in two
rows" multiline="true"/>
- </j:TableCell>
- <j:TableCell>
- <j:Label text="Some centered
text">
- <j:beads>
- <j:TextAlign
align="center"/>
- </j:beads>
- </j:Label>
- </j:TableCell>
- <j:TableCell>
- <j:Label text="71">
- <j:beads>
- <j:TextAlign
align="right"/>
- </j:beads>
- </j:Label>
- </j:TableCell>
- </j:TableRow>
- <j:TableRow>
- <j:TableCell>
- <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
- </j:TableCell>
-
- <j:TableCell>
- <j:Label text="More centered
text">
- <j:beads>
- <j:TextAlign
align="center"/>
- </j:beads>
- </j:Label>
- </j:TableCell>
- <j:TableCell>
- <j:Label text="56">
- <j:beads>
- <j:TextAlign
align="right"/>
- </j:beads>
- </j:Label>
- </j:TableCell>
- </j:TableRow>
- <j:TableRow>
- <j:TableCell>
- <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
- </j:TableCell>
- <j:TableCell>
- <j:Label text="More text 2" />
- </j:TableCell>
- <j:TableCell>
- <j:Label text="More centered
text 2" >
- <j:beads>
- <j:TextAlign
align="center"/>
- </j:beads>
- </j:Label>
- </j:TableCell>
- <j:TableCell>
- <j:Label text="346">
- <j:beads>
- <j:TextAlign
align="right"/>
- </j:beads>
- </j:Label>
- </j:TableCell>
- </j:TableRow>
- <j:TableRow>
- <j:TableCell>
- <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
- </j:TableCell>
- <j:TableCell>
- <!-- By using a Group within a
cell you have better control of the
- layout.
- -->
- <j:VGroup>
- <j:Label text="Labels"
/>
- <j:Label text="with" />
- <j:Label
text="Vertical" />
- <j:Label text="Layout"
/>
- </j:VGroup>
- </j:TableCell>
- <j:TableCell>
- <j:Label text="More centered
text 3" >
- <j:beads>
- <j:TextAlign
align="center"/>
- </j:beads>
- </j:Label>
- </j:TableCell>
- <j:TableCell>
- <j:Label text="240">
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1"
tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel SimpleTable"/>
+
+ <j:SimpleTable width="500">
+ <j:THead>
+ <j:TableRow>
+ <j:TableHeaderCell
width="48">
+ <j:Label
text="Icons" />
+ </j:TableHeaderCell>
+ <j:TableHeaderCell
width="140">
+ <j:Label
text="Text Column" />
+ </j:TableHeaderCell>
+ <j:TableHeaderCell
width="140">
+ <j:Label
text="Centered Text Column" />
+ </j:TableHeaderCell>
+ <j:TableHeaderCell>
+ <j:Label
text="Number Column">
+
<j:beads>
+
<j:TextAlign align="right"/>
+
</j:beads>
+ </j:Label>
+ </j:TableHeaderCell>
+ </j:TableRow>
+ </j:THead>
+ <j:TBody>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell
expandRows="2">
+ <j:Label
text="Some text in two rows" multiline="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="Some centered text">
+
<j:beads>
+
<j:TextAlign align="center"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="71">
+
<j:beads>
+
<j:TextAlign align="right"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+
+ <j:TableCell>
+ <j:Label
text="More centered text">
+
<j:beads>
+
<j:TextAlign align="center"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="56">
+
<j:beads>
+
<j:TextAlign align="right"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="More text 2" />
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="More centered text 2" >
+
<j:beads>
+
<j:TextAlign align="center"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="346">
+
<j:beads>
+
<j:TextAlign align="right"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon
text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <!-- By using a
Group within a cell you have better control of the
+ layout.
+ -->
+ <j:VGroup>
+
<j:Label text="Labels" />
+
<j:Label text="with" />
+
<j:Label text="Vertical" />
+
<j:Label text="Layout" />
+ </j:VGroup>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="More centered text 3" >
+
<j:beads>
+
<j:TextAlign align="center"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label
text="240">
+
<j:beads>
+
<j:TextAlign align="right"/>
+
</j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ </j:TBody>
+ <j:TFoot>
+ <j:TableRow>
+ <j:TableCell
expandColumns="4">
+ <j:HGroup
gap="3" itemsHorizontalAlign="itemsRight">
+
<j:IconTextInput rightPosition="true">
+
<j:beads>
+
<j:TextPrompt prompt="Search..."/>
+
</j:beads>
+
<j:icon>
+
<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+
</j:icon>
+
</j:IconTextInput>
+
<j:Button text="SEARCH" emphasis="{Button.PRIMARY}"/>
+ </j:HGroup>
+ </j:TableCell>
+ </j:TableRow>
+ </j:TFoot>
+ </j:SimpleTable>
+ </j:Card>
+
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1"
tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+
+ <j:Card>
+ <html:H3 text="Jewel Table"/>
+ <j:HGroup gap="3">
+ <j:VGroup gap="3">
+ <j:Table id="table" width="440"
change="onChange(event)" dataProvider="{tablesModel.guitarrists}">
+ <j:TableColumn
dataField="icon" label="" align="center"
itemRenderer="itemRenderers.TableCellCloseIconItemRenderer"/>
+ <j:TableColumn
dataField="guitarrist" label="Guitarrist"/>
+ <j:TableColumn
dataField="album" label="Album" align="center" columnLabelAlign="center"/>
+ <j:TableColumn
dataField="year" label="Release Year" align="right" columnLabelAlign="right"/>
<j:beads>
- <j:TextAlign
align="right"/>
+
<j:AddTableItemRendererForArrayListData/>
+
<j:DynamicRemoveItemRendererForArrayListData/>
+
<j:DynamicUpdateItemRendererForArrayListData/>
+
<j:RemoveAllItemRendererForArrayListData/>
</j:beads>
- </j:Label>
- </j:TableCell>
- </j:TableRow>
- </j:TBody>
- <j:TFoot>
- <j:TableRow>
- <j:TableCell expandColumns="4">
- <j:HGroup gap="3"
itemsHorizontalAlign="itemsRight">
- <j:IconTextInput
rightPosition="true">
- <j:beads>
-
<j:TextPrompt prompt="Search..."/>
- </j:beads>
- <j:icon>
-
<js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
- </j:icon>
- </j:IconTextInput>
- <j:Button text="SEARCH"
emphasis="{Button.PRIMARY}"/>
- </j:HGroup>
- </j:TableCell>
- </j:TableRow>
- </j:TFoot>
- </j:SimpleTable>
- </j:Card>
-
- <j:Card >
- <html:H3 text="Jewel Table"/>
-
- <j:Table id="table" width="440" change="onChange(event)"
dataProvider="{tablesModel.guitarrists}">
- <j:TableColumn dataField="icon" label="" align="center"
itemRenderer="itemRenderers.TableCellCloseIconItemRenderer"/>
- <j:TableColumn dataField="guitarrist"
label="Guitarrist"/>
- <j:TableColumn dataField="album" label="Album"
align="center" columnLabelAlign="center"/>
- <j:TableColumn dataField="year" label="Release Year"
align="right" columnLabelAlign="right"/>
- <j:beads>
- <j:AddTableItemRendererForArrayListData/>
- <j:DynamicRemoveItemRendererForArrayListData/>
- <j:DynamicUpdateItemRendererForArrayListData/>
- <j:RemoveAllItemRendererForArrayListData/>
- </j:beads>
- </j:Table>
-
- <j:Label id="selected"/>
- <j:ControlBar>
- <j:Button click="changeTableData()" text="Change Data"
emphasis="primary"/>
- <j:Button text="Add item" click="addItem()"/>
- <j:Button text="Remove first item"
click="removeItemAt()"/>
- <j:Button text="Update first item"
click="updateFirstItem()"/>
- <j:Button text="Remove all data"
click="removeAllData()"/>
- </j:ControlBar>
-
- </j:Card>
+ </j:Table>
+ <j:Label id="selected"/>
+ </j:VGroup>
+ <j:VGroup gap="3">
+ <j:Button
click="changeTableData()" text="Change Data" emphasis="primary"/>
+ <j:Button text="Add item"
click="addItem()"/>
+ <j:Button text="Remove first
item" click="removeItemAt()"/>
+ <j:Button text="Update first
item" click="updateFirstItem()"/>
+ <j:Button text="Remove all
data" click="removeAllData()"/>
+ </j:VGroup>
+ </j:HGroup>
+ </j:Card>
+
+ </j:GridCell>
+ </j:Grid>
<fx:Script>
<