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/04/04 15:08:54 UTC
[royale-asjs] branch develop updated: tour-de-jewel: improve jewel
page layout
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 e545cfb tour-de-jewel: improve jewel page layout
e545cfb is described below
commit e545cfbd49c964c8787f580ad0b4a48046134340
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Apr 4 17:08:49 2020 +0200
tour-de-jewel: improve jewel page layout
---
.../src/main/royale/ListPlayGround.mxml | 299 ++++++++++++++-------
1 file changed, 199 insertions(+), 100 deletions(-)
diff --git a/examples/jewel/TourDeJewel/src/main/royale/ListPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/ListPlayGround.mxml
index fb01c88..4e339a9 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/ListPlayGround.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/ListPlayGround.mxml
@@ -32,7 +32,7 @@ limitations under the License.
import vos.IconListVO;
private function onChange(event:Event):void {
- selected.text = "Selected: " + list.selectedItem;
+ selected.text = "Selected: " + list1.selectedItem;
}
private var _simple:ArrayList = new ArrayList(["Blueberries", "Bananas", "Lemons", "Oranges", "This is a long item render to try long texts", "This should let you try filtering", "Watermelons", "Apples", "Cherries", "Coconuts", "Figs", "Grapes", "Kiwis", "Mangos"]);
@@ -48,14 +48,19 @@ limitations under the License.
_simple = value;
}
- public function assignNewData():void
+ public function assignNewData(list:List):void
{
list.dataProvider = new ArrayList(["blue", "red", "yellow", "green"]);
}
- private function changeListData():void
+ private function clearDataProvider(list:List):void
{
- iconList.dataProvider = new ArrayList([
+ list.dataProvider = null;
+ }
+
+ private function changeListData(list:List):void
+ {
+ list.dataProvider = new ArrayList([
new IconListVO("CheckBox", "check_box"),
new IconListVO("Label", "label"),
new IconListVO("RadioButton", "radio_button_checked"),
@@ -64,32 +69,30 @@ limitations under the License.
]);
}
- private function addItem():void
- {
+ private function addItem(list:List):void {
var iconListVO:IconListVO = new IconListVO("New Item", MaterialIconType.CLOSE);
- (iconList.dataProvider as ArrayList).addItem(iconListVO);
+ (list.dataProvider as ArrayList).addItemAt(iconListVO, 4);
// listModel.iconListData.addItem(iconListVO); // to test things are adding to right place
}
- public function removeItemAt():void
- {
- (iconList.dataProvider as ArrayList).removeItemAt(0);
+ public function removeItemAt(list:List):void {
+ (list.dataProvider as ArrayList).removeItemAt(0);
// listModel.iconListData.removeItemAt(0);
}
- public function updateFirstItem():void
+ public function updateFirstItem(list:List):void
{
- var item:IconListVO = (iconList.dataProvider as ArrayList).getItemAt(0) as IconListVO;
+ var item:IconListVO = (list.dataProvider as ArrayList).getItemAt(0) as IconListVO;
item.label = "What??";
item.icon = MaterialIconType.ACCESSIBILITY;
- (iconList.dataProvider as ArrayList).itemUpdated(item);
+ (list.dataProvider as ArrayList).itemUpdated(item);
// listModel.iconListData.itemUpdated(item);
}
- public function removeAllData():void
+ public function removeAllData(list:List):void
{
- (iconList.dataProvider as ArrayList).removeAll();
+ (list.dataProvider as ArrayList).removeAll();
// listModel.iconListData.removeAll();
}
@@ -149,115 +152,211 @@ limitations under the License.
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel List"/>
- <j:List localId="list" width="200" height="300" dataProvider="{simple}" change="onChange(event)"/>
- <j:TextInput width="200">
- <j:beads>
- <j:TextPrompt prompt="filter list..."/>
- <j:SearchFilterForList list="{list}"/>
- </j:beads>
- </j:TextInput>
- <j:Label localId="selected" html="{describeItem(list.selectedItem)}"/>
- <j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
- <j:Label text="Select list by index: "/>
- <j:NumericStepper valueChange="list.selectedIndex = event.target.value" minimum="0" maximum="11"/>
- </j:HGroup>
- <j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
- <j:Label text="Select list by item: "/>
- <j:NumericStepper valueChange="list.selectedItem = list.dataProvider.getItemAt(event.target.value)" minimum="0" maximum="11"/>
- </j:HGroup>
- <j:Button text="Assign new data" click="assignNewData()"/>
- <j:Button text="Deselect" click="list.selectedIndex = -1"/>
+ <j:CardHeader>
+ <html:H3 text="Default" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:List localId="list1" width="200" height="300"
+ dataProvider="{simple}" change="onChange(event)"/>
+
+ <j:TextInput width="200">
+ <j:beads>
+ <j:TextPrompt prompt="Filter list..."/>
+ <j:SearchFilterForList list="{list1}"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Label localId="selected" html="{describeItem(list1.selectedItem)}"/>
+
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
+ <j:Label text="Select list by index: "/>
+ <j:NumericStepper valueChange="list1.selectedIndex = event.target.value" minimum="0" maximum="{(list1.dataProvider as ArrayList).length - 1}"/>
+ </j:HGroup>
+
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
+ <j:Label text="Select list by item: "/>
+ <j:NumericStepper valueChange="list1.selectedItem = list1.dataProvider.getItemAt(event.target.value)" minimum="0" maximum="{(list1.dataProvider as ArrayList).length - 1}"/>
+ </j:HGroup>
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight">
+ <j:IconButton click="list1.selectedIndex = -1" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Deselect"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.CLEAR}" />
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton click="clearDataProvider(list1)" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Clear Data"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.CLEAR_ALL}" />
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton click="assignNewData(list1)" emphasis="primary" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Load Data"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.VIEW_HEADLINE}" />
+ </j:icon>
+ </j:IconButton>
+ </j:CardActions>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel List With ItemRenderer and rowHeight=52"/>
- <j:HGroup gap="3">
- <j:VGroup gap="3">
- <j:List localId="iconList" width="200" height="300"
- className="iconListItemRenderer" labelField="label"
- emphasis="secondary" rowHeight="52">
- <j:beads>
- <js:ConstantBinding sourceID="listModel" sourcePropertyName="iconListData" destinationPropertyName="dataProvider"/>
- <j:RemoveAllItemRendererForArrayListData/>
- </j:beads>
- </j:List>
- <j:Label text="Click on render's icon will remove that renderer" multiline="true" width="200"/>
- </j:VGroup>
- <j:VGroup gap="3">
- <j:Button text="change data" emphasis="{StyledUIBase.PRIMARY}" click="changeListData()"/>
- <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:Label html="{'Selected Index: ' + iconList.selectedIndex}"/>
- <j:Label html="Selected Item description:"/>
- <j:Label html="{describeIconItem(iconList.selectedItem)}"/>
- <j:Label html="{'list filtered length: ' + filter.length}"/>
- <j:TextInput>
- <j:beads>
- <j:TextPrompt prompt="filter list..."/>
- <j:SearchFilterForList localId="filter" list="{iconList}"/>
- </j:beads>
- </j:TextInput>
- <!-- <j:Button text="Trace Collection Labels" click="traceCollectionLabels()"/> -->
-
- <!-- example below for dataProvider binding -->
- <!--<j:List labelField="label" dataProvider="{iconList.dataProvider}" selectedIndex="3" width="120" height="200" />-->
- </j:VGroup>
- </j:HGroup>
+ <j:CardHeader>
+ <html:H3 text="ItemRenderer and rowHeight=52" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Label text="Click on render's icon will remove that renderer" multiline="true"/>
+
+ <j:List localId="list2" width="200" height="300"
+ className="iconListItemRenderer" labelField="label"
+ emphasis="secondary" rowHeight="52">
+ <j:beads>
+ <js:ConstantBinding sourceID="listModel" sourcePropertyName="iconListData" destinationPropertyName="dataProvider"/>
+ <j:RemoveAllItemRendererForArrayListData/>
+ </j:beads>
+ </j:List>
+
+ <j:TextInput width="200">
+ <j:beads>
+ <j:TextPrompt prompt="Filter list..."/>
+ <j:SearchFilterForList localId="filter" list="{list2}"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Label html="{'Selected Index: ' + list2.selectedIndex}"/>
+ <j:Label html="Selected Item description:"/>
+ <j:Label html="{describeIconItem(list2.selectedItem)}"/>
+ <j:Label html="{'list filtered length: ' + filter.length}"/>
+ <!-- <j:Button text="Trace Collection Labels" click="traceCollectionLabels()"/> -->
+
+ <!-- example below for dataProvider binding -->
+ <!--<j:List labelField="label" dataProvider="{iconList.dataProvider}" selectedIndex="3" width="120" height="200" />-->
+ </j:CardPrimaryContent>
+ <j:CardActions itemsHorizontalAlign="itemsRight">
+ <j:IconButton click="addItem(list2)" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Add Item"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.ADD}" />
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton click="removeItemAt(list2)" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Remove First Item"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.REMOVE}" />
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton click="updateFirstItem(list2)" emphasis="primary" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Update First Item"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.UPDATE}" />
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton click="removeAllData(list2)" emphasis="primary" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Remove All Items"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.DELETE_FOREVER}" />
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton click="changeListData(list2)" emphasis="primary" outlined="true">
+ <j:beads>
+ <j:ToolTip toolTip="Change Data"/>
+ </j:beads>
+ <j:icon>
+ <js:MaterialIcon text="{MaterialIconType.VIEW_HEADLINE}" />
+ </j:icon>
+ </j:IconButton>
+ </j:CardActions>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel DataContainer (with Flow Layout)"/>
- <j:DataContainer>
- <j:beads>
- <j:HorizontalFlowLayout gap="3"/>
- <js:ConstantBinding sourcePropertyName="simple" destinationPropertyName="dataProvider" />
- </j:beads>
- </j:DataContainer>
+ <j:CardHeader>
+ <html:H3 text="Jewel DataContainer with Flow Layout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:DataContainer>
+ <j:beads>
+ <j:HorizontalFlowLayout gap="3"/>
+ <js:ConstantBinding sourcePropertyName="simple" destinationPropertyName="dataProvider" />
+ </j:beads>
+ </j:DataContainer>
+
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel List (Horizontal)"/>
- <j:List localId="alist" percentWidth="100" height="100">
- <j:beads>
- <j:HorizontalLayout itemsExpand="true" />
- </j:beads>
- <j:dataProvider>
- <js:ArrayList localId="avengersCharacters" source="[Iron Man, Hulk, Thor, Captain America, Hawkeye]" />
- </j:dataProvider>
- </j:List>
+ <j:CardHeader>
+ <html:H3 text="Horizontal Layout" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:List localId="alist" width="100%" height="100">
+ <j:beads>
+ <j:HorizontalLayout itemsExpand="true" />
+ </j:beads>
+ <j:dataProvider>
+ <js:ArrayList localId="avengersCharacters" source="[Iron Man, Hulk, Thor, Captain America, Hawkeye]" />
+ </j:dataProvider>
+ </j:List>
+
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel List with Horizontal Scroll"/>
- <j:List width="450" height="300" className="tableStyle"
- labelField="label" selectedIndex="1"
- dataProvider="{listModel.iconListData}">
- <j:beads>
- <j:HorizontalListScroll/>
- </j:beads>
- </j:List>
+ <j:CardHeader>
+ <html:H3 text="Horizontal Scroll" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:List width="100%" height="300" className="tableStyle"
+ labelField="label" selectedIndex="1"
+ dataProvider="{listModel.iconListData}">
+ <j:beads>
+ <j:HorizontalListScroll/>
+ </j:beads>
+ </j:List>
+
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel List Disabled"/>
- <j:List width="200" height="300" className="iconListItemRenderer" labelField="label" selectedIndex="1">
- <j:beads>
- <js:ConstantBinding sourceID="listModel" sourcePropertyName="iconListData" destinationPropertyName="dataProvider" />
- <j:Disabled/>
- </j:beads>
- </j:List>
+ <j:CardHeader>
+ <html:H3 text="Disabled" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:List width="200" height="300" className="iconListItemRenderer" labelField="label" selectedIndex="1">
+ <j:beads>
+ <js:ConstantBinding sourceID="listModel" sourcePropertyName="iconListData" destinationPropertyName="dataProvider" />
+ <j:Disabled/>
+ </j:beads>
+ </j:List>
+
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
</j:Grid>