From 42349d4eee40ad8b2e34f279d5745f5334f6722d Mon Sep 17 00:00:00 2001 From: Piotr Zarzycki Date: Sun, 9 Jun 2024 12:34:23 +0200 Subject: [PATCH] TileView: Improve how tile look like - Implement selected index on Tile (reference #56) --- .../DocumentationFormViews/DocumentationForm.mxml | 4 ++-- .../views/renderers/CardTileRenderer.mxml | 4 ++-- .../views/renderers/DocumentationTileRenderer.mxml | 6 +++--- .../com/devexpress/js/tileView/beads/TileViewView.as | 10 ++++++++-- .../js/tileView/beads/models/TileViewModel.as | 7 +++---- .../com/devexpress/js/tileView/events/TileViewEvent.as | 10 +++++++++- .../js/tileView/interfaces/ITileViewModel.as | 3 ++- Super.Human.Portal_Royale/src/resources/app-styles.css | 4 ++++ 8 files changed, 33 insertions(+), 15 deletions(-) diff --git a/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml b/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml index 96fe41d..09dd678 100644 --- a/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml +++ b/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/modules/DocumentationForm/DocumentationFormViews/DocumentationForm.mxml @@ -254,8 +254,8 @@ {caption: 'DocumentationUNID', dataField: 'DocumentationUNID', dataType: 'number', alignment: 'left', sortOrder: 'asc', allowFiltering: false, visible: this.proxy.showUnid}]}" dataProvider="{this.proxy.items}" filterRow="{ {visible: true, applyFilter: 'auto'} }" localId="dg" includeIn="dataGridState" className="dxDataGrid scrollHeightDocFormGridJS" percentWidth="100" doubleClick="onGridDoubleClick(event)"/>--> + percentWidth="100" baseItemHeight="350" itemMargin="10" itemRenderer="Super.Human.Portal_Royale.views.renderers.CardTileRenderer"/> \ No newline at end of file diff --git a/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/CardTileRenderer.mxml b/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/CardTileRenderer.mxml index 86bfa58..ea8f9c1 100644 --- a/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/CardTileRenderer.mxml +++ b/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/CardTileRenderer.mxml @@ -27,7 +27,7 @@ } ]]> - + @@ -37,7 +37,7 @@ - + diff --git a/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/DocumentationTileRenderer.mxml b/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/DocumentationTileRenderer.mxml index 5aa534c..4a9e52f 100644 --- a/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/DocumentationTileRenderer.mxml +++ b/Super.Human.Portal_Royale/src/generated/Super.Human.Portal_Royale/views/renderers/DocumentationTileRenderer.mxml @@ -2,7 +2,7 @@ + xmlns:itemRenderers="classes.com.devexpress.js.tileView.itemRenderers.*" percentHeight="100"> @@ -27,7 +27,7 @@ } ]]> - + @@ -37,7 +37,7 @@ - + diff --git a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as index 66c489a..45a514c 100644 --- a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as +++ b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/TileViewView.as @@ -28,7 +28,10 @@ package classes.com.devexpress.js.tileView.beads window["$"](host.element).dxTileView({ onItemClick: function onItemClick(event:Object):void { - host.dispatchEvent(new TileViewEvent(TileViewEvent.CLICK_ITEM, event.itemData)) + host["selectedIndex"] = event.itemIndex; + host["selectedItem"] = event.itemData; + + host.dispatchEvent(new TileViewEvent(TileViewEvent.CLICK_ITEM, event.itemData, event.itemIndex)); }}); this._model.addEventListener("dataProviderChanged", handleDataProviderChanged); this._model.addEventListener("itemRendererChanged", handleItemRendererChanged); @@ -81,8 +84,11 @@ package classes.com.devexpress.js.tileView.beads window["$"](host.element).dxTileView({ itemTemplate: function itemTemplate(itemData:Object, itemIndex:int, itemElement:Object):void { var renderer:Object = _model.itemRenderer.newInstance(); + renderer.index = itemIndex; + var div:View = new View(); - + div.percentHeight = 100; + renderer.data = itemData; div.addElement(renderer as IChild); itemElement.append(div.element); diff --git a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as index dc4936d..512ee6c 100644 --- a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as +++ b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/beads/models/TileViewModel.as @@ -2,11 +2,10 @@ package classes.com.devexpress.js.tileView.beads.models { import classes.com.devexpress.js.tileView.interfaces.ITileViewModel; - import org.apache.royale.jewel.beads.models.DataProviderModel; import org.apache.royale.core.IFactory; - import org.apache.royale.core.ISelectionModel; + import org.apache.royale.jewel.beads.models.DataProviderModel; - public class TileViewModel extends DataProviderModel implements ITileViewModel, ISelectionModel + public class TileViewModel extends DataProviderModel implements ITileViewModel { public function TileViewModel() { @@ -116,7 +115,7 @@ package classes.com.devexpress.js.tileView.beads.models } } - private var _selectedIndex:int; + private var _selectedIndex:int = -1; public function get selectedIndex():int { diff --git a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/events/TileViewEvent.as b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/events/TileViewEvent.as index 91b454f..b79529e 100644 --- a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/events/TileViewEvent.as +++ b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/events/TileViewEvent.as @@ -6,11 +6,12 @@ package classes.com.devexpress.js.tileView.events { public static const CLICK_ITEM:String = "clickItemTileView"; - public function TileViewEvent(type:String, item:Object = null) + public function TileViewEvent(type:String, item:Object = null, index:int = -1) { super(type); _item = item; + _index = index; } private var _item:Object; @@ -19,5 +20,12 @@ package classes.com.devexpress.js.tileView.events { return _item; } + + private var _index:int; + + public function get index():int + { + return _index; + } } } \ No newline at end of file diff --git a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/interfaces/ITileViewModel.as b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/interfaces/ITileViewModel.as index fbeb81a..f668e72 100644 --- a/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/interfaces/ITileViewModel.as +++ b/Super.Human.Portal_Royale/src/net/apacheRoyaleTemplatedApp/classes/com/devexpress/js/tileView/interfaces/ITileViewModel.as @@ -3,8 +3,9 @@ package classes.com.devexpress.js.tileView.interfaces import org.apache.royale.core.IHasDataProvider; import org.apache.royale.events.IEventDispatcher; import org.apache.royale.core.IFactory; + import org.apache.royale.core.ISelectionModel; - public interface ITileViewModel extends IHasDataProvider, IEventDispatcher + public interface ITileViewModel extends IHasDataProvider, IEventDispatcher, ISelectionModel { function get dataSource():Object; function set dataSource(value:Object):void; diff --git a/Super.Human.Portal_Royale/src/resources/app-styles.css b/Super.Human.Portal_Royale/src/resources/app-styles.css index 19e0902..0f24c78 100644 --- a/Super.Human.Portal_Royale/src/resources/app-styles.css +++ b/Super.Human.Portal_Royale/src/resources/app-styles.css @@ -77,6 +77,10 @@ a:hover { border: none !important; } +.card-actions.cardTileActions { + borderTop: none !important; +} + .jewel.item.gridJSRendererClean { border: none; box-shadow: none;