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 1c4b9d8 tour-de-jewel: add virtual lists pane with VirtualList and
VirtualComboBox
1c4b9d8 is described below
commit 1c4b9d85c9db5f6f0b9b0ba2f3eadb9d83d3322b
Author: Carlos Rovira <[email protected]>
AuthorDate: Thu Feb 6 19:05:59 2020 +0100
tour-de-jewel: add virtual lists pane with VirtualList and VirtualComboBox
---
.../src/main/resources/jewel-example-styles.css | 12 ++
.../TourDeJewel/src/main/royale/MainContent.mxml | 1 +
.../src/main/royale/VirtualListsPlayGround.mxml | 153 +++++++++++++++++++++
.../itemRenderers/SimpleIconListItemRenderer.mxml | 50 +++++++
.../src/main/royale/models/ListsModel.as | 46 +++++++
.../src/main/royale/models/MainNavigationModel.as | 1 +
6 files changed, 263 insertions(+)
diff --git
a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
index b73c267..222a7ef 100644
--- a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -32,6 +32,18 @@ j|IconButtonBar
IItemRenderer: ClassReference("itemRenderers.TableStyleListItemRenderer");
}
+.simpleiIconListItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.SimpleIconListItemRenderer");
+}
+
+/* .cmbSimpleiIconListItemRenderer`
+{
+ IItemRenderer: ClassReference("itemRenderers.SimpleIconListItemRenderer");
+} */
+
+
+
.iconListItemRenderer
{
IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
diff --git a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
index a6c6e90..04e5c32 100644
--- a/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/MainContent.mxml
@@ -328,6 +328,7 @@ limitations under the License.
<local:WizardPlayGround name="wizards_panel"/>
<local:PopUpPlayGround name="popup_panel"/>
<local:AdvancedListPlayGround name="advanced_list_panel"/>
+ <local:VirtualListsPlayGround name="virtual_lists_panel"/>
</j:ApplicationMainContent>
<!-- <j:ResponsiveSizeMonitor/> -->
diff --git
a/examples/royale/TourDeJewel/src/main/royale/VirtualListsPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/VirtualListsPlayGround.mxml
new file mode 100644
index 0000000..91b833c
--- /dev/null
+++ b/examples/royale/TourDeJewel/src/main/royale/VirtualListsPlayGround.mxml
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<c:ExampleAndSourceCodeTabbedSectionContent
xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:c="components.*"
+ xmlns:models="models.*" sourceCodeUrl="VirtualListsPlayGround.mxml">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.IconListVO;
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.core.StyledUIBase;
+
+
+ private function addItemToVirtual():void
+ {
+ var iconListVO:IconListVO = new IconListVO("New Item",
MaterialIconType.CLOSE);
+
+ (virtualIconList.dataProvider as
ArrayList).addItem(iconListVO);
+ // listModel.iconListData.addItem(iconListVO); // to
test things are adding to right place
+ }
+
+ public function removeItemAtToVirtual():void
+ {
+ (virtualIconList.dataProvider as
ArrayList).removeItemAt(0);
+ // listModel.iconListData.removeItemAt(0);
+ }
+
+ public function updateFirstItemOfVirtual():void
+ {
+ var item:IconListVO = (virtualIconList.dataProvider as
ArrayList).getItemAt(0) as IconListVO;
+ item.label = "What??";
+ item.icon = MaterialIconType.ACCESSIBILITY;
+ (virtualIconList.dataProvider as
ArrayList).itemUpdated(item);
+ // listModel.iconListData.itemUpdated(item);
+ }
+
+ public function removeAllDataOfVirtual():void
+ {
+ (virtualIconList.dataProvider as ArrayList).removeAll();
+ // listModel.iconListData.removeAll();
+ }
+
+ private function describeItem(item:*):String {
+ const intro:String = "<strong>List
selectedItem:</strong> ";
+ var evaluated:String;
+ if (item is String) {
+ evaluated = "String value: '" + item + "'";
+ } else {
+ if (item === null || item === undefined) {
+ evaluated = "Nothing Selected]";
+ }
+ else {
+ if (item is IconListVO) {
+ evaluated = "Object's label
field: '" + IconListVO(item).label + "'";
+ } else {
+ evaluated = "Object : " + item;
+ }
+ }
+ }
+ return intro + evaluated;
+ }
+ ]]>
+ </fx:Script>
+
+ <c:model>
+ <models:ListsModel localId="listModel"/>
+ </c:model>
+
+ <c:beads>
+ <js:ContainerDataBinding/>
+ </c:beads>
+
+ <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 VirtualList"/>
+ <j:HGroup gap="3">
+ <j:VGroup gap="3">
+ <j:VirtualList
localId="virtualIconList" width="200" height="300"
+
className="simpleiIconListItemRenderer" labelField="label"
+
emphasis="secondary" rowHeight="52"
+
dataProvider="{listModel.bigIconListVOData}"
+
selectedIndex="4"
+
>
+
<!-- change="onChange(event)" -->
+ <j:beads>
+ <!--
<js:ConstantBinding sourceID="listModel" sourcePropertyName="bigIconListVOData"
destinationPropertyName="dataProvider" /> -->
+
<j:AddListItemRendererForArrayListData/>
+
<j:RemoveListItemRendererForArrayListData/>
+
<j:UpdateListItemRendererForArrayListData/>
+
<j:RemoveAllItemRendererForArrayListData/>
+ </j:beads>
+ </j:VirtualList>
+ <!-- <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="listModel.resetBigIconListVOData()"/>
+ <j:Button text="Add item"
click="addItemToVirtual()"/>
+ <j:Button text="Remove first
item" click="removeItemAtToVirtual()"/>
+ <j:Button text="Update first
item" click="updateFirstItemOfVirtual()"/>
+ <j:Button text="Remove all
data" click="removeAllDataOfVirtual()"/>
+ <j:Label html="{'Selected
Index: ' + virtualIconList.selectedIndex}"/>
+ <j:Label html="Selected Item
description:"/>
+ <j:Label
html="{describeItem(virtualIconList.selectedItem)}"/>
+ <j:Label html="{'list filtered
length: ' + filter.length}"/>
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt
prompt="filter list..."/>
+
<j:SearchFilterForList id="filter" list="{virtualIconList}"/>
+ </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:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel VirtualComboBox"/>
+
+ <j:VirtualComboBox localId="virtualIconCmb"
+
className="cmbSimpleiIconListItemRenderer" labelField="label"
+
dataProvider="{listModel.bigIconListVOData}"
+ />
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git
a/examples/royale/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
new file mode 100644
index 0000000..71b5afb
--- /dev/null
+++
b/examples/royale/TourDeJewel/src/main/royale/itemRenderers/SimpleIconListItemRenderer.mxml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<j:ListItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009";
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns="http://www.w3.org/1999/xhtml";>
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.jewel.List;
+ import org.apache.royale.jewel.beads.views.ListView;
+
+ import vos.IconListVO;
+
+ [Bindable("dataChange")]
+ public function get iconList():IconListVO
+ {
+ return data as IconListVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+
+ <js:FontIcon text="{iconList ? iconList.icon : ''}" material="true"
visible="{iconList ? iconList.icon != null : false}"/>
+
+ <j:Label html="{text}" multiline="true"/>
+
+</j:ListItemRenderer>
+
diff --git a/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as
b/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as
index 3e76fc3..6334bdc 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/ListsModel.as
@@ -166,5 +166,51 @@ package models
{
return _iconButtonData;
}
+
+ /**
+ * Used in the Virtual List example example.
+ */
+ public var _bigIconListVOData:Array;
+
+ public function get bigIconListVOData():ArrayList
+ {
+ var item:IconListVO;
+ if (!_bigIconListVOData)
+ {
+ _bigIconListVOData = [];
+ var icons:Array = [
+ MaterialIconType.ACCESSIBILITY,
+ MaterialIconType.BATTERY_ALERT,
+ MaterialIconType.CAKE,
+ MaterialIconType.DASHBOARD,
+ MaterialIconType.EMAIL,
+ MaterialIconType.EQUALIZER,
+ MaterialIconType.FACE,
+ MaterialIconType.GAMEPAD,
+ MaterialIconType.HEADSET_MIC,
+ MaterialIconType.KEYBOARD,
+ MaterialIconType.LAPTOP_MAC,
+ MaterialIconType.MEMORY,
+ MaterialIconType.ADD_CIRCLE_OUTLINE,
+ MaterialIconType.PAGES
+ ];
+ for (var i:int = 0; i < 1000; i++)
+ {
+ item = new IconListVO("Icon - " + i,
getRandomArrayIcon(icons)),
+ _bigIconListVOData.push(item);//"row " + i.toString());
+ }
+ }
+ return new ArrayList(_bigIconListVOData);
+ }
+
+ public function getRandomArrayIcon(array:Array):String {
+ var idx:int=Math.floor(Math.random() * array.length);
+ return array[idx];
+ }
+
+ public function resetBigIconListVOData():void
+ {
+ _bigIconListVOData = null;
+ }
}
}
diff --git
a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
index d5585f5..d6711d9 100644
--- a/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
+++ b/examples/royale/TourDeJewel/src/main/royale/models/MainNavigationModel.as
@@ -36,6 +36,7 @@ package models
new NavigationLinkVO("Images", "image_panel",
MaterialIconType.IMAGE),
new NavigationLinkVO("Label", "label_panel",
MaterialIconType.LABEL),
new NavigationLinkVO("List", "list_panel",
MaterialIconType.LIST_ALT),
+ new NavigationLinkVO("Virtual Lists", "virtual_lists_panel",
MaterialIconType.LINE_WEIGHT),
new NavigationLinkVO("NumericStepper", "numericstepper_panel",
MaterialIconType.UNFOLD_MORE),
new NavigationLinkVO("PopUp", "popup_panel",
MaterialIconType.FLIP_TO_FRONT),
new NavigationLinkVO("RadioButton", "radiobutton_panel",
MaterialIconType.RADIO_BUTTON_CHECKED),
