RidersList and ToolBar sizing done

TODO : cast ListViewItemState.data into RiderVO

src/command/LoadRidersCommand.hx

@@ -2,7 +2,7 @@ package command;
 
 import t9.util.ColorTraces;
 import openfl.Vector;
-import vo.Rider;
+import vo.RiderVO;
 import feathers.data.ArrayCollection;
 import openfl.Lib;
 import haxe.DynamicAccess;
@@ -29,7 +29,7 @@ class LoadRidersCommand implements ICommand implements IResponder {
 	public function result(rpcEvent:Dynamic):Void {
 
         // populate the riders DP in the model locator with the JSON results from the service call
-        var riders:Array<Rider> = cast(rpcEvent, ResultEvent).result;
+        var riders:Array<RiderVO> = cast(rpcEvent, ResultEvent).result;
         model.ridersListDP = new ArrayCollection(riders);
 
         traceGreen("ridersListDP.length --> " + model.ridersListDP.length);

src/model/AppModelLocator.hx

@@ -1,6 +1,6 @@
 package model;
 
-import vo.Rider;
+import vo.RiderVO;
 import feathers.data.ArrayCollection;
 import openfl.errors.Error;
 import openfl.events.Event;
@@ -57,9 +57,9 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
     // contains the main riders list which is populated on startup
 	// mx:application's creationComplete event is mutated into a cairngorm event
 	// that calls the httpservice for the data
-	public var ridersListDP(default, set):ArrayCollection<Rider>;
+	public var ridersListDP(default, set):ArrayCollection<RiderVO>;
 
-    private function set_ridersListDP(value:ArrayCollection<Rider>):ArrayCollection<Rider> {
+    private function set_ridersListDP(value:ArrayCollection<RiderVO>):ArrayCollection<RiderVO> {
 		ridersListDP = value;
 		dispatchEvent(new Event(RIDERS_LIST_DP_CHANGE));
 		return ridersListDP;

src/view/MainFooter.hx

@@ -31,11 +31,6 @@ class MainFooter extends LayoutGroup {
 		var hdl:HorizontalDistributedLayout = new HorizontalDistributedLayout();
 		layout = hdl;
 
-	}
-
-	private function onCreationComplete(event:FeathersEvent):Void {
-		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
-
 		// Buttons
 		btn1 = new ToolbarToggleButton(Assets.getText("vector/rider_icon_black.svg"), 
 									   Constants.MAIN_COLOR2, 
@@ -54,4 +49,8 @@ class MainFooter extends LayoutGroup {
     	addChild(btn2);
 
 	}
+
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
 }

src/view/MainHeader.hx

@@ -51,10 +51,6 @@ class MainHeader extends LayoutGroup {
         l.paddingTop = l.paddingBottom = Std.int(headerHeight * .1);
 		l.verticalAlign = MIDDLE;
         layout = l;
-	}
-
-	private function onCreationComplete(event:FeathersEvent):Void {
-		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
 
 		// Menu button
 		var svgIconString:String = Assets.getText("vector/menu_icon_black.svg");
@@ -72,6 +68,10 @@ class MainHeader extends LayoutGroup {
 
 	}
 
+	private function onCreationComplete(event:FeathersEvent):Void {
+		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
+	}
+
 	function onMenuButtonPress(e:TriggerEvent):Void {
 		var e:CairngormEvent = new CairngormEvent(AppController.OPEN_DRAWER_EVENT);
 		CairngormEventDispatcher.getInstance().dispatchEvent(e);

src/view/MainPanel.hx

@@ -39,7 +39,7 @@ class MainPanel extends Panel {
 		footer = mf;
 
 		sn = new StackNavigator();
-		sn.autoSizeMode = STAGE;
+		//sn.autoSizeMode = STAGE;
 		sn.layoutData = AnchorLayoutData.fill();
 		sn.addItem(StackItem.withClass("ridersScreen", RidersScreen));
 		sn.rootItemID = "ridersScreen";

src/view/RidersList.hx

@@ -1,5 +1,11 @@
 package view;
 
+import vo.RiderVO;
+import uuid.Uuid;
+import feathers.controls.AssetLoader;
+import feathers.data.ListViewItemState;
+import feathers.controls.dataRenderers.ItemRenderer;
+import feathers.utils.DisplayObjectRecycler;
 import feathers.layout.AutoSizeMode;
 import feathers.controls.ListView;
 import feathers.events.FeathersEvent;
@@ -13,14 +19,44 @@ class RidersList extends ListView {
 	public function new() {
 		super();
 		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
-		
-		//width = 300;
-		//height = 400;
 	}
 
 	override private function initialize():Void {
 		super.initialize();
-		
+
+		// set common properties for all renderers in the same container here
+		var recycler = DisplayObjectRecycler.withFunction(() -> {
+			
+			var itemRenderer = new ItemRenderer();
+			itemRenderer.icon = new AssetLoader();
+			return itemRenderer;
+		});
+
+		itemRendererRecycler = recycler;
+
+		recycler.update = (itemRenderer:ItemRenderer, state:ListViewItemState) -> {
+
+			//traceRed($type(state.data));
+			//var className = Type.getClassName(Type.getClass(state));
+        	//traceRed("Current class name = " + className);
+
+			var rider:RiderVO = cast(state.data, RiderVO);
+			itemRenderer.text = rider.firstName;
+    		itemRenderer.secondaryText = rider.name;
+
+			//var item = state.data;
+			//itemRenderer.text = item.firstName;
+    		//itemRenderer.secondaryText = item.name;
+			
+			/*var loader = cast(itemRenderer.icon, AssetLoader);
+			loader.sourceScale = 0.7;
+			loader.source = "bitmaps/pp_100.jpg";*/
+			//TODO change this to real iamge path
+    		//loader.source = "https://lepetittrot.com/path/to/pp_pictures" + state.data.id + ".jpg";
+			//loader.source = "https://testingbot.com/free-online-tools/random-avatar/50?u=" + Uuid.nanoId();
+
+		};
+
 		model.addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRideListDpChange);
 
 	}
@@ -32,9 +68,9 @@ class RidersList extends ListView {
 	private function onRideListDpChange(e:Event):Void {
 		dataProvider = model.ridersListDP;
 
-		itemToText = function(item:Dynamic):String {
+		/*itemToText = function(item:Dynamic):String {
 			return item.firstName;
-		};
+		};*/
 		traceGreen(this + " --> onRideListDpChange() - w: " + width + " h: " + height );
 	}
 }

src/view/RidersScreen.hx

@@ -1,5 +1,8 @@
 package view;
 
+import model.Constants;
+import feathers.skins.RectangleSkin;
+import feathers.layout.VerticalLayoutData;
 import feathers.layout.AnchorLayoutData;
 import feathers.layout.AnchorLayout;
 import feathers.events.FeathersEvent;
@@ -20,15 +23,22 @@ class RidersScreen extends ScrollContainer {
 	override private function initialize():Void {
 		super.initialize();
 
-        layout = new AnchorLayout();
+        backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR2, 1));
+
+        var vl:VerticalLayout = new VerticalLayout();
+        vl.horizontalAlign = JUSTIFY;
+        layout = vl;
 
         tb = new ToolBar();
-        tb.layoutData = AnchorLayoutData.fillHorizontal();
+        var vld1 = new VerticalLayoutData();
+        vld1.percentHeight = 10.0;
+        tb.layoutData = vld1;
         addChild(tb);
     
         rl = new RidersList();
-        rl.layoutData = AnchorLayoutData.fillHorizontal();
-        rl.y = 80;
+        var vld2 = new VerticalLayoutData();
+        vld2.percentHeight = 90.0;
+        rl.layoutData = vld2;
         addChild(rl);
 
 	}

src/view/ToolBar.hx

@@ -56,7 +56,6 @@ class ToolBar extends LayoutGroup {
 
 	private function onCreationComplete(event:FeathersEvent):Void {
 		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
-		traceYellow(width + " / " + height);
 	}
 
 }

src/vo/RiderVO.hx

@@ -1,7 +1,7 @@
 package vo;
 
-class Rider {
-	private static var currentIndex = 1000;
+class RiderVO {
+	private static var currentIndex:Int = 0;
 
 	public var id:Int;
 	public var name:String;