Sample: custom-layout-group-item-renderer

.github/workflows/samples.yml

@@ -52,6 +52,13 @@ jobs:
         haxelib run openfl build html5
         haxelib run openfl build flash
         haxelib run openfl build hl
+    - name: Build samples/custom-layout-group-item-renderer
+      working-directory: samples/custom-layout-group-item-renderer
+      run: |
+        haxelib run openfl build neko
+        haxelib run openfl build html5
+        haxelib run openfl build flash
+        haxelib run openfl build hl
     - name: Build samples/custom-programmatic-skin
       working-directory: samples/custom-programmatic-skin
       run: |
@@ -275,6 +282,10 @@ jobs:
       working-directory: samples/components-explorer
       run: |
         haxelib run openfl build air
+    - name: Build samples/custom-layout-group-item-renderer
+      working-directory: samples/custom-layout-group-item-renderer
+      run: |
+        haxelib run openfl build air
     - name: Build samples/custom-programmatic-skin
       working-directory: samples/custom-programmatic-skin
       run: |

samples/custom-layout-group-item-renderer/README.md

@@ -0,0 +1,34 @@
+# Feathers UI Custom LayoutGroupItemRenderer
+
+This [Feathers UI](https://feathersui.com/) example demonstrates how to create a custom item renderer for [`ListView`](https://feathersui.com/learn/haxe-openfl/list-view/) or other [data containers](https://feathersui.com/learn/haxe-openfl/layouts-and-containers/#data-containers) using the [`LayoutGroupItemRenderer](https://feathersui.com/learn/haxe-openfl/layout-group-item-renderer) component.
+
+## Live demo
+
+A build of the [_custom-layout-group-item-renderer_ sample](https://feathersui.com/samples/haxe-openfl/custom-layout-group-item-renderer/) is hosted on the Feathers UI website, and it may be viewed in any modern web browser.
+
+## Run locally
+
+This project includes an [_project.xml_](https://lime.software/docs/project-files/xml-format/) file that configures all options for [OpenFL](https://openfl.org/). This file makes it easy to build from the command line, and many IDEs can parse this file to configure a Haxe project to use OpenFL.
+
+### Prerequisites
+
+- [Install Haxe 4.0.0 or newer](https://haxe.org/download/)
+- [Install Feathers UI from Haxelib](https://feathersui.com/learn/haxe-openfl/installation/)
+
+### Command Line
+
+Run the [**openfl**](https://www.openfl.org/learn/haxelib/docs/tools/) tool in your terminal:
+
+```sh
+haxelib run openfl test html5
+```
+
+In addition to `html5`, other supported targets include `windows`, `mac`, `linux`, `android`, and `ios`. See [Lime Command Line Tools: Basic Commands](https://lime.software/docs/command-line-tools/basic-commands/) for complete details about the available commands.
+
+### Editors and IDEs
+
+Check out the following tutorials for creating Feathers UI projects in popular development environments:
+
+- [HaxeDevelop](https://feathersui.com/learn/haxe-openfl/haxedevelop/)
+- [Moonshine IDE](https://feathersui.com/learn/haxe-openfl/moonshine-ide/)
+- [Visual Studio Code](https://feathersui.com/learn/haxe-openfl/visual-studio-code/)

samples/custom-layout-group-item-renderer/project.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project>
+	<meta title="LayoutGroup Item Renderer" package="com.feathersui.samples.CustomLayoutGroupItemRenderer" version="1.0.0" company="Bowler Hat LLC"/>
+	<meta title="Custom LayoutGroupItemRenderer with ListView — Feathers UI Samples" if="html5"/>
+	<app main="Main" file="CustomLayoutGroupItemRenderer"/>
+
+	<window allow-high-dpi="true"/>
+	<window fps="60"/>
+	<window fps="0" if="html5"/>
+	<window background="#F8F8F8"/>
+
+	<source path="src"/>
+
+	<haxelib name="openfl"/>
+	<haxelib name="actuate"/>
+	<haxelib name="feathersui"/>
+
+	<haxedef name="feathersui_theme_manage_stage_color"/>
+
+	<assets path="assets/img/haxe.png"/>
+	<assets path="assets/img/lime.png"/>
+	<assets path="assets/img/openfl.png"/>
+	<assets path="assets/img/feathersui.png"/>
+
+	<icon path="assets/icons/feathersui-icon.svg"/>
+</project>

samples/custom-layout-group-item-renderer/src/Main.hx

@@ -0,0 +1,73 @@
+import feathers.controls.Application;
+import feathers.controls.AssetLoader;
+import feathers.controls.Label;
+import feathers.controls.ListView;
+import feathers.controls.dataRenderers.LayoutGroupItemRenderer;
+import feathers.data.ArrayCollection;
+import feathers.data.ListViewItemState;
+import feathers.layout.AnchorLayout;
+import feathers.layout.AnchorLayoutData;
+import feathers.layout.TiledRowsLayout;
+import feathers.layout.VerticalLayout;
+import feathers.utils.DisplayObjectRecycler;
+
+class Main extends Application {
+	public function new() {
+		super();
+
+		this.layout = new AnchorLayout();
+
+		this.listView = new ListView();
+		this.listView.dataProvider = new ArrayCollection([
+			new ListItem("Haxe", "assets/img/haxe.png"),
+			new ListItem("Lime", "assets/img/lime.png"),
+			new ListItem("OpenFL", "assets/img/openfl.png"),
+			new ListItem("Feathers UI", "assets/img/feathersui.png"),
+		]);
+		this.listView.itemToText = (item:ListItem) -> {
+			return item.name;
+		};
+		this.listView.layout = new TiledRowsLayout();
+		this.listView.itemRendererRecycler = DisplayObjectRecycler.withFunction(() -> {
+			var itemRenderer = new LayoutGroupItemRenderer();
+			var layout = new VerticalLayout();
+			layout.gap = 5;
+			layout.setPadding(5);
+			layout.horizontalAlign = CENTER;
+			layout.verticalAlign = MIDDLE;
+			itemRenderer.layout = layout;
+
+			var iconLoader = new AssetLoader();
+			iconLoader.name = "loader";
+			iconLoader.width = 75.0;
+			iconLoader.height = 75.0;
+			itemRenderer.addChild(iconLoader);
+			var titleLabel = new Label();
+			titleLabel.name = "title";
+			itemRenderer.addChild(titleLabel);
+			return itemRenderer;
+		}, (itemRenderer:LayoutGroupItemRenderer, state:ListViewItemState) -> {
+			var iconLoader = cast(itemRenderer.getChildByName("loader"), AssetLoader);
+			var titleLabel = cast(itemRenderer.getChildByName("title"), Label);
+
+			var data = cast(state.data, ListItem);
+
+			iconLoader.source = data.icon;
+			titleLabel.text = state.text;
+		});
+		this.listView.layoutData = AnchorLayoutData.fill();
+		this.addChild(this.listView);
+	}
+
+	private var listView:ListView;
+}
+
+class ListItem {
+	public function new(name:String, icon:String) {
+		this.name = name;
+		this.icon = icon;
+	}
+
+	public var name:String;
+	public var icon:String;
+}

samples/website-samples.hxml

@@ -6,6 +6,8 @@
 --next
 -cmd haxelib run openfl build components-explorer/project.xml html5 -final -clean --haxedef=feathersui.com
 --next
+-cmd haxelib run openfl build custom-layout-group-item-renderer/project.xml html5 -final -clean --haxedef=feathersui.com
+--next
 -cmd haxelib run openfl build custom-programmatic-skin/project.xml html5 -final -clean --haxedef=feathersui.com
 --next
 -cmd haxelib run openfl build custom-programmatic-skin-with-states/project.xml html5 -final -clean --haxedef=feathersui.com