mxhx fiddling

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "haxe.configurations": []
+}

project.xml

@@ -7,9 +7,9 @@
 	<window allow-high-dpi="true"/>
 	<window fps="60"/>
 	<window fps="0" if="html5"/>
-	<window background="#7e746e" 
+	<window background="#ffffff" 
 	width="500" 
-	height="800" 
+	height="900" 
 	orientation="portrait" />
 	
 	<source path="src"/>
@@ -22,14 +22,17 @@
 	<haxelib name="svg" />
 	<haxelib name="haxe-strings" />
 	<haxelib name="fuzzaldrin" />
+	<haxelib name="bindx2" />
+	<haxelib name="mxhx-feathersui" />
+	<haxelib name="mxhx-component" />
 
 	<icon path="assets/icons/app_icon.svg"/>
 
 	<assets path="assets">
-		<font path="fonts/Montserrat/MontserratLight300.ttf" id="MontserratLight300" embed="true"/>	
-		<font path="fonts/Montserrat/MontserratRegular400.ttf" id="MontserratRegular400" embed="true"/>	
-    	<font path="fonts/Montserrat/MontserratMedium500.ttf" id="MontserratMedium500" embed="true"/>
-		<font path="fonts/Montserrat/MontserratBold700.ttf" id="MontserratBold700" embed="true"/>
+		<font path="fonts/Montserrat/Montserrat Light.ttf" id="Montserrat Light" embed="true"/>	
+		<font path="fonts/Montserrat/Montserrat Regular.ttf" id="Montserrat Regular" embed="true"/>	
+    	<font path="fonts/Montserrat/Montserrat Medium.ttf" id="Montserrat Medium" embed="true"/>
+		<font path="fonts/Montserrat/Montserrat Bold.ttf" id="Montserrat Bold" embed="true"/>
 	</assets>
 
 	<!-- copies data/Employees.xml to output -->
@@ -43,6 +46,8 @@
 	<config:android permission="android.permission.INTERNET" />
 	<config:android permission="android.permission.ACCESS_NETWORK_STATE" />
 
+	<define name="mxhx_disable_experimental_warning"/>
+
 
 
 </project>

src/components/VSpacer.hx

@@ -5,24 +5,48 @@ import feathers.controls.LayoutGroup;
 import t9.util.ColorTraces.*;
 
 class VSpacer extends LayoutGroup {
+	public var spacerHeight(default, set):Int;
+	public var spacerColor(default, set):Int;
+	public var spacerAlpha(default, set):Float;
+	private var rs:RectangleSkin;
 
-    private var spacerHeight:Int;
-    private var spacerColor:Int;
-    private var spacerAlpha:Float;
-
-	public function new(pSpacerHeight:Int = 10, pSpacerColor:Int = 0xFFFFFF, pSpacerAlpha:Float = 0) {
+	public function new(?pSpacerHeight:Int = 10, ?pSpacerColor:Int = 0xFFFFFF, ?pSpacerAlpha:Float = 0) {
 		super();
 
-        spacerHeight = pSpacerHeight;
-        spacerColor = pSpacerColor;
-        spacerAlpha = pSpacerAlpha;
+		spacerHeight = pSpacerHeight;
+		spacerColor = pSpacerColor;
+		spacerAlpha = pSpacerAlpha;
 	}
 
 	override private function initialize():Void {
 		super.initialize();
+		draw();
+	}
 
-        var rs:RectangleSkin = new RectangleSkin(SolidColor(spacerColor, spacerAlpha));
-        rs.height = spacerHeight;
-        backgroundSkin = rs;
-    }
+	function set_spacerHeight(pSpacerHeight:Int) {
+		spacerHeight = pSpacerHeight;
+		draw();
+		return spacerHeight;
+	}
+
+	function set_spacerColor(pSpacerColor:Int) {
+		spacerColor = pSpacerColor;
+		draw();
+		return spacerColor;
+	}
+
+    function set_spacerAlpha(pSpacerAlpha:Float) {
+		spacerAlpha = pSpacerAlpha;
+		draw();
+		return spacerAlpha;
+	}
+
+	private function draw() {
+		backgroundSkin = null;
+		rs = null;
+
+		rs = new RectangleSkin(SolidColor(spacerColor, spacerAlpha));
+		rs.height = spacerHeight;
+		backgroundSkin = rs;
+	}
 }

src/model/AppModelLocator.hx

@@ -1,5 +1,6 @@
 package model;
 
+import bindx.IBindable;
 import view.RidersList;
 import vo.RiderVO;
 import feathers.data.ArrayCollection;
@@ -10,26 +11,25 @@ import openfl.events.EventDispatcher;
 import t9.util.ColorTraces.*;
 
 class AppModelLocator extends EventDispatcher implements IModelLocator {
-
-    // events constants
-    public static final VIEWING_CHANGE:String = "viewingChange";
-    public static final RIDERS_LIST_DP_CHANGE:String = "ridersListDPChange";
+	// events constants
+	public static final VIEWING_CHANGE:String = "viewingChange";
+	public static final RIDERS_LIST_DP_CHANGE:String = "ridersListDPChange";
 	public static final DRAWER_STATE_CHANGE:String = "drawerStateChange";
 	public static final RIDER_SELECT_CHANGE:String = "riderSelectChange";
 
-    // this instance stores a static reference to itself
+	// this instance stores a static reference to itself
 	private static var model:AppModelLocator;
 
-    // available values for the main viewstack defined as constants to help uncover errors at compile time instead of run time
+	// available values for the main viewstack defined as constants to help uncover errors at compile time instead of run time
 	// Navigator
 	public static final ADMIN_LOGIN = 0;
 	public static final RIDERS_LIST = 1;
 	public static final RIDER_DETAIL = 2;
 
-    // viewstack starts out on the admin login screen
+	// viewstack starts out on the admin login screen
 	public var viewing(default, set):Int = ADMIN_LOGIN;
 
-    private function set_viewing(value:Int):Int {
+	private function set_viewing(value:Int):Int {
 		viewing = value;
 		dispatchEvent(new Event(VIEWING_CHANGE));
 		return viewing;
@@ -38,7 +38,7 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 	// at startup, the drawer is closed
 	public var drawerIsOpen(default, set):Bool = false;
 
-    private function set_drawerIsOpen(pIsOpen:Bool):Bool {
+	private function set_drawerIsOpen(pIsOpen:Bool):Bool {
 		drawerIsOpen = pIsOpen;
 		dispatchEvent(new Event(AppModelLocator.DRAWER_STATE_CHANGE));
 		return drawerIsOpen;
@@ -48,7 +48,7 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 	// this gets copied into or added onto the main rider list
 	public var selectedRider(default, set):RiderVO = null;
 
-    private function set_selectedRider(pRider:RiderVO):RiderVO {
+	private function set_selectedRider(pRider:RiderVO):RiderVO {
 		selectedRider = pRider;
 		dispatchEvent(new Event(AppModelLocator.RIDER_SELECT_CHANGE));
 		return selectedRider;
@@ -57,27 +57,34 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 	// update one property of the selectedRider VO
 	public function updateSelectedRiderProp(pProperty:String, pValue:Dynamic) {
 		Reflect.setField(selectedRider, pProperty, pValue);
-		
+
 		traceYellow(Reflect.field(selectedRider, pProperty));
 	}
 
-    // contains the main riders list which is populated on startup
+	// 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<RiderVO>;
 
-    private function set_ridersListDP(value:ArrayCollection<RiderVO>):ArrayCollection<RiderVO> {
+	private function set_ridersListDP(value:ArrayCollection<RiderVO>):ArrayCollection<RiderVO> {
 		ridersListDP = value;
 		dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE));
 		return ridersListDP;
 	}
 
-    // variable to store error messages from the httpservice 
-    // nothinng currently binds to it, but an Alert or the login box could to show startup errors
+	public function filterRiderListDP(pTestValue:String) {
+		ridersListDP.filterFunction = function(rider:RiderVO):Bool {
+			return StringTools.contains(rider.firstName.toLowerCase(), pTestValue.toLowerCase());
+		};
+		//ridersListDP.refresh();
+		dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE));
+	}
+
+	// variable to store error messages from the httpservice
+	// nothinng currently binds to it, but an Alert or the login box could to show startup errors
 	public var errorStatus:String;
 
-
-    // singleton: constructor only allows one model locator
+	// singleton: constructor only allows one model locator
 	public function new() {
 		super();
 		if (AppModelLocator.model != null) {
@@ -95,5 +102,4 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
 	public function addRider(pRider:RiderVO) {
 		ridersListDP.add(pRider);
 	}
-
-}
+}

src/model/Constants.hx

@@ -29,10 +29,10 @@ class Constants {
     public static final LIST_SEPARATOR_COLOR:Int = 0xE1E3E4;
 
     // Fonts
-    public static final MONTSERRAT_LIGHT_300:String = "MontserratLight300";
-    public static final MONTSERRAT_REGULAR_400:String = "MontserratRegular400";
-    public static final MONTSERRAT_MEDIUM_500:String = "MontserratMedium500";
-    public static final MONTSERRAT_BOLD_700:String = "MontserratBold700";
+    public static final MONTSERRAT_LIGHT_300:String = "Montserrat Light";
+    public static final MONTSERRAT_REGULAR_400:String = "Montserrat Regular";
+    public static final MONTSERRAT_MEDIUM_500:String = "Montserrat Medium";
+    public static final MONTSERRAT_BOLD_700:String = "Montserrat Bold";
 
     // Fonts sizes
     public static final FONT_SIZE_10:Int = 10;

src/ui/LPTCTheme.hx

@@ -107,10 +107,10 @@ class LPTCTheme extends ClassVariantTheme {
 		downSkin.cornerRadius = Constants.GLOBAL_CORNER_RADIUS;
 		button.setSkinForState(ButtonState.DOWN, downSkin);
 
-		var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.HERO_COLOR);
+		var format = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
 		button.textFormat = format;
 
-		var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.MAIN_COLOR3);
+		var downFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_14, Constants.ACCENT_COLOR2);
 		button.setTextFormatForState(ButtonState.DOWN, downFormat);
         
         button.paddingLeft = button.paddingRight = 10;

src/view/ConfirmationPanel.hx

@@ -102,6 +102,7 @@ class ConfirmationPanel extends Panel {
         b2.setIconForState(ButtonState.DOWN, SVGIconFactory.makeIcon("vector/check_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
         b2.addEventListener(TriggerEvent.TRIGGER, (e) -> {
 			confirmFunction();
+            PopUpManager.removePopUp(this);
 		});
 
         // footer

src/view/MainDrawer.hx

@@ -17,7 +17,6 @@ class MainDrawer extends Drawer {
 
     private var openDrawerButton:Button;
     private var closeDrawerButton:Button;
-	private var coucou:Bool;
 
 	public function new() {
 		super();

src/view/MainPanel.hx

@@ -1,5 +1,6 @@
 package view;
 
+import openfl.events.Event;
 import feathers.controls.Panel;
 import feathers.controls.navigators.StackItem;
 import feathers.controls.navigators.StackNavigator;

src/view/RiderCardDrawer.hx

@@ -1,46 +1,23 @@
 package view;
 
-import openfl.utils.Function;
-import feathers.core.PopUpManager;
-import components.VSpacer;
-import feathers.controls.AssetLoader;
-import feathers.controls.Button;
-import feathers.controls.ButtonState;
-import feathers.controls.Drawer;
-import feathers.controls.HProgressBar;
-import feathers.controls.Label;
-import feathers.controls.LayoutGroup;
+import ui.LPTCTheme;
+import model.String.Strings;
+import feathers.text.TextFormat;
+import openfl.Assets;
 import feathers.controls.ScrollContainer;
-import feathers.controls.TextInput;
+import feathers.controls.Drawer;
 import feathers.events.FeathersEvent;
-import feathers.events.TriggerEvent;
-import feathers.layout.VerticalLayout;
 import feathers.skins.RectangleSkin;
 import model.AppModelLocator;
 import model.Constants;
-import model.String.Strings;
-import openfl.Assets;
-import openfl.events.Event;
-import openfl.text.TextFormat;
 import t9.util.ColorTraces.*;
-import ui.LPTCTheme;
-import ui.SVGIconFactory;
-import vo.RiderVO;
 
+@:build(mxhx.macros.MXHXComponent.build())
 class RiderCardDrawer extends Drawer {
 	public static final CLOSE:String = "close";
 	public static final OPEN:String = "open";
-
-	private var model:AppModelLocator;
-
-	// components
-	private var ppal:AssetLoader;
-	private var closeDrawerButton:Button;
-	private var firstNameLabel:Label;
-	private var nameLabel:Label;
-	private var creditLabel:Label;
-	private var creditProgressBar:HProgressBar;
-	private var removeOneCredit:Button;
+	
+	private var appModel:AppModelLocator;
 
 	public function new() {
 		super();
@@ -50,167 +27,52 @@ class RiderCardDrawer extends Drawer {
 	override private function initialize():Void {
 		super.initialize();
 
-		model = AppModelLocator.getInstance();
+		appModel = AppModelLocator.getInstance();
 
 		overlaySkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
-		swipeCloseEnabled = true;
 		swipeOpenEnabled = false;
 		autoSizeMode = STAGE;
 		pullableEdge = TOP;
 		clickOverlayToClose = false;
 
-		// main Layout
-		var mainScrollContainer:ScrollContainer = new ScrollContainer();
-		mainScrollContainer.autoSizeMode = STAGE;
-
-		var mainVerticalLayout = new VerticalLayout();
-		mainVerticalLayout.paddingLeft = mainVerticalLayout.paddingRight = Constants.GLOBAL_PADDING;
-		//mainVerticalLayout.gap = Constants.GLOBAL_PADDING;
-		mainVerticalLayout.horizontalAlign = JUSTIFY;
-		mainVerticalLayout.verticalAlign = TOP;
-		mainScrollContainer.layout = mainVerticalLayout;
-
-		// ##### SPACER
-		mainScrollContainer.addChild(new VSpacer(10));
-
-		// close button
-		closeDrawerButton = new Button();
-		closeDrawerButton.text = "Close Drawer";
-		closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
-			closeDrawer();
-		});
-		mainScrollContainer.addChild(closeDrawerButton);
-
-		// ##### SPACER
-		mainScrollContainer.addChild(new VSpacer(10));
-
-		// profile picture
-		ppal = new AssetLoader();
-		ppal.addEventListener(Event.COMPLETE, onPPLoaded);
-		mainScrollContainer.addChild(ppal);
-
-		// ##### SPACER
-		mainScrollContainer.addChild(new VSpacer(10));
-
-		// ########################################################################## FIRSTNAME & NAME LABELS
-		// layout
-		var lg1:LayoutGroup = new LayoutGroup();
-		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0));
-		var vl1:VerticalLayout = new VerticalLayout();
-		vl1.horizontalAlign = JUSTIFY;
-		lg1.layout = vl1;
-		mainScrollContainer.addChild(lg1);
-
-		// first name Label
-		firstNameLabel = new Label();
-		firstNameLabel.setPadding(0);
-		firstNameLabel.backgroundSkin = null;
-		firstNameLabel.embedFonts = true;
-		firstNameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_26, Constants.MAIN_COLOR1);
-		lg1.addChild(firstNameLabel);
-
-		// name Label
-		nameLabel = new Label();
-		nameLabel.setPadding(0);
-		nameLabel.backgroundSkin = null;
-		nameLabel.embedFonts = true;
-		nameLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_22, Constants.MAIN_COLOR2);
-		lg1.addChild(nameLabel);
-
-		// ##### SPACER
-		mainScrollContainer.addChild(new VSpacer(10));
-
-		// ########################################################################## Remaining credit label
-		creditLabel = new Label();
-		creditLabel.embedFonts = true;
-		creditLabel.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_16, Constants.MAIN_COLOR1);
-		mainScrollContainer.addChild(creditLabel);
-
-		// ##### SPACER
-		mainScrollContainer.addChild(new VSpacer(10));
-
-		// ########################################################################## credit progress bar
-		creditProgressBar = new HProgressBar(0, 0, 10);
-		mainScrollContainer.addChild(creditProgressBar);
-
-		// ##### SPACER
-		mainScrollContainer.addChild(new VSpacer(10));
-
-		// ########################################################################## Remove 1 credit button
-		removeOneCredit = new Button();
-		removeOneCredit.icon = SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.MAIN_COLOR3);
-		removeOneCredit.setIconForState(ButtonState.DOWN,
-			SVGIconFactory.makeIcon("vector/ticket_icon_black.svg", Constants.BUTTONS_ICON_SIZE, Constants.HERO_COLOR));
-		removeOneCredit.text = Strings.RCD_S2;
-		removeOneCredit.addEventListener(TriggerEvent.TRIGGER, (e) -> {
-			traceRed("removeOneCredit()");
-			// this function will be exectuted when the user will click on the ConfirmationPanel's "confirm" button
-			var f:Function = function () {
-				trace("remove 1 credit to selected rider in model");
-				// TODO remove 1 credit to selected rider in model
-			}
-			PopUpManager.addPopUp(new ConfirmationPanel(Strings.CP_S2, Strings.CP_S3, f), parent, true, true);
-		});
-		mainScrollContainer.addChild(removeOneCredit);
-
-		// ##### SPACER
-		mainScrollContainer.addChild(new VSpacer(10));
-		//mainScrollContainer.addChild(new VSpacer(2, Constants.MAIN_COLOR2, 1));
+		/*var m = MXHXComponent.withFile('MyMXHXcomp.mxhx');
+		mainScrollContainer.addChild(m);*/
 
 		drawer = mainScrollContainer;
 	}
 
+	
 	private function onCreationComplete(e:FeathersEvent):Void {
 		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
 	}
 
+
 	public function populateAndShow() {
-		var rvo:RiderVO = model.selectedRider;
 
 		// profile picture
-		ppal.source = Constants.PROFIL_PICTURES_PATH_512 + rvo.uid + ".jpg";
+		ppal.source = Constants.PROFIL_PICTURES_PATH_512 + appModel.selectedRider.uid + ".jpg";
 
-		// first name text input
-		firstNameLabel.text = rvo.firstName;
-		if (!firstNameLabel.hasEventListener(Event.CHANGE)) {
-			firstNameLabel.addEventListener(Event.CHANGE, (e) -> {
-				if (firstNameLabel.text != model.selectedRider.firstName) {
-					model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameLabel.text);
-				}
-			});
-		}
-
-		// name text input
-		nameLabel.text = rvo.name;
-		if (!nameLabel.hasEventListener(Event.CHANGE)) {
-			nameLabel.addEventListener(Event.CHANGE, (e) -> {
-				if (nameLabel.text != model.selectedRider.name) {
-					model.updateSelectedRiderProp(RiderVO.NAME, nameLabel.text);
-				}
-			});
-		}
-
-		// remaing credit text
-		creditLabel.text = Strings.RCD_S1 + Std.string(rvo.credit);
-
-		// remaining credit progress bar
-		if (rvo.credit <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM;
-		} else if (rvo.credit <= Constants.CREDIT_LOW_LIMIT) {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT;
-		} else if (rvo.credit <= Constants.CREDIT_AVERAGE_LIMIT) {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING;
-		} else {
-			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO;
-		}
-		creditProgressBar.value = rvo.credit;
+		/*firstNameLabel.text = AppModelLocator.getInstance().selectedRider.firstName;
+		nameLabel.text = AppModelLocator.getInstance().selectedRider.name;
+		creditLabel.text = Strings.RCD_S1;*/
 
 		openDrawer();
 	}
 
-	private function onPPLoaded(e:Event):Void {
-		var rvo:RiderVO = model.selectedRider;
-		var al:AssetLoader = cast(e.currentTarget, AssetLoader);
-		al.validateNow();
+	// update remaining credit label and progress bar
+	private function updateCreditUIElments(pFromValue:Dynamic, pToValue:Dynamic) {
+
+		creditLabel.text = Strings.RCD_S1 + Std.string(pToValue);
+
+		if (pToValue <= Constants.CREDIT_ULTRA_LOW_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALARM;
+		} else if (pToValue <= Constants.CREDIT_LOW_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_ALERT;
+		} else if (pToValue <= Constants.CREDIT_AVERAGE_LIMIT) {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_WARNING;
+		} else {
+			creditProgressBar.variant = LPTCTheme.H_PROGRESS_BAR_VARIANT_INFO;
+		}
+		creditProgressBar.value = pToValue;
 	}
 }

src/view/RiderCardDrawer.mxhx

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<f:Drawer xmlns:mx="https://ns.mxhx.dev/2024/mxhx" 
+          xmlns:f="https://ns.feathersui.com/mxhx" 
+          xmlns:components="components.*">
+
+  <!-- ################################ MAIN SCROLLCONTAINER ################################ -->
+  <f:ScrollContainer id="mainScrollContainer">
+    <f:layout>
+        <f:VerticalLayout horizontalAlign="JUSTIFY" 
+                          verticalAlign="TOP" 
+                          paddingLeft="{model.Constants.GLOBAL_PADDING}" 
+                          paddingTop="{model.Constants.GLOBAL_PADDING}"
+                          paddingRight="{model.Constants.GLOBAL_PADDING}"
+                          paddingBottom="{model.Constants.GLOBAL_PADDING}"
+                          gap="{model.Constants.GLOBAL_PADDING}"
+                          />
+    </f:layout>
+
+    <f:Button id="closeDrawerButton" text="Close drawer" click="{closeDrawer();}"/>
+
+    <!-- ################################ PROFILE PICTURE ASSETLOADER ################################ -->
+    <f:AssetLoader id="ppal"/>
+
+    <!-- <components:VSpacer/> -->
+
+    <!-- ################################ BASIC INFOS LAYOUTGROUP ################################ -->
+    <f:LayoutGroup id="basicInfosLayoutGroup">
+
+      <f:backgroundSkin>
+            <f:RectangleSkin>
+                <f:fill>
+                    <f:FillStyle.SolidColor color="0xdddddd" alpha="1"/>
+                </f:fill>
+            </f:RectangleSkin>
+        </f:backgroundSkin>
+
+        <f:layout>
+          <f:VerticalLayout horizontalAlign="JUSTIFY"/>
+        </f:layout>
+
+        <f:Label id="firstNameLabel" 
+                 paddingLeft="0" 
+                 paddingTop="0"
+                 paddingRight="0"
+                 paddingBottom="0"
+                 embedFonts="true"
+                 text="{appModel.selectedRider.firstName}">
+          <f:textFormat>
+              <f:TextFormat font="{model.Constants.MONTSERRAT_BOLD_700}" size="{model.Constants.FONT_SIZE_26}" color="{model.Constants.MAIN_COLOR1}"/>
+          </f:textFormat>
+        </f:Label>
+
+        <f:Label id="nameLabel" 
+                 paddingLeft="0" 
+                 paddingTop="0"
+                 paddingRight="0"
+                 paddingBottom="0"
+                 embedFonts="true">
+          <f:textFormat>
+              <f:TextFormat font="{model.Constants.MONTSERRAT_MEDIUM_500}" size="{model.Constants.FONT_SIZE_22}" color="{model.Constants.MAIN_COLOR2}"/>
+          </f:textFormat>
+        </f:Label>
+
+        <f:Label id="creditLabel"
+                 text="{model.Strings.RCD_S1}" 
+                 paddingLeft="0" 
+                 paddingTop="0"
+                 paddingRight="0"
+                 paddingBottom="0"
+                 embedFonts="true">
+          <f:textFormat>
+              <f:TextFormat font="{model.Constants.MONTSERRAT_MEDIUM_500}" size="{model.Constants.FONT_SIZE_16}" color="{model.Constants.MAIN_COLOR2}"/>
+          </f:textFormat>
+
+        </f:Label>
+
+        <f:HProgressBar id="creditProgressBar" value="0" minimum="0" maximum="10.0"/>
+
+    </f:LayoutGroup>
+
+  </f:ScrollContainer>
+</f:Drawer>

src/view/RidersList.hx

@@ -1,5 +1,6 @@
 package view;
 
+import feathers.data.ArrayCollection;
 import fuzzaldrin.Fuzzaldrin;
 import com.adobe.cairngorm.control.CairngormEventDispatcher;
 import components.RidersListRendererAccessory;
@@ -21,11 +22,12 @@ import t9.util.ColorTraces.*;
 import vo.RiderVO;
 
 class RidersList extends ListView {
-	private var model = AppModelLocator.getInstance();
 	private var rowHeight:Int;
+	private var localRidersListDP:ArrayCollection<RiderVO>;
 
 	public function new() {
 		super();
+		localRidersListDP = new ArrayCollection();
 		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
 		//addEventListener(Event.CHANGE, onRiderSelect);
 		addEventListener(ListViewEvent.ITEM_TRIGGER, onRiderSelect);
@@ -76,7 +78,7 @@ class RidersList extends ListView {
 				loader.source = null; */
 		};
 
-		model.addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRiderListDpChange);
+		AppModelLocator.getInstance().addEventListener(AppModelLocator.RIDERS_LIST_DP_CHANGE, onRiderListDpChange);
 	}
 
 	private function onCreationComplete(event:FeathersEvent):Void {
@@ -84,7 +86,11 @@ class RidersList extends ListView {
 	}
 
 	private function onRiderListDpChange(e:Event):Void {
-		dataProvider = model.ridersListDP;
+		
+		if(localRidersListDP.length > 0) localRidersListDP.removeAll();
+		localRidersListDP.addAll(AppModelLocator.getInstance().ridersListDP);
+		dataProvider = localRidersListDP;
+		//dataProvider = model.ridersListDP;
 
 		/*itemToText = function(item:Dynamic):String {
 			return item.firstName;

src/view/RidersScreen.hx

@@ -1,5 +1,6 @@
 package view;
 
+import lime.app.Event;
 import model.Constants;
 import feathers.skins.RectangleSkin;
 import feathers.layout.VerticalLayoutData;
@@ -9,6 +10,7 @@ import feathers.events.FeathersEvent;
 import feathers.layout.VerticalLayout;
 import feathers.controls.ScrollContainer;
 import t9.util.ColorTraces.*;
+import openfl.events.Event;
 
 class RidersScreen extends ScrollContainer {
 
@@ -33,6 +35,8 @@ class RidersScreen extends ScrollContainer {
         var vld1 = new VerticalLayoutData();
         vld1.percentHeight = 10.0;
         tb.layoutData = vld1;
+        // TODO implémenter le fuzzy search
+        //addEventListener("ToolbarEvent",  (e:Event) -> {traceRed(e);});
         addChild(tb);
     
         rl = new RidersList();

src/view/ToolBar.hx

@@ -1,5 +1,7 @@
 package view;
 
+import model.AppModelLocator;
+import openfl.events.Event;
 import model.String.Strings;
 import ui.SVGIconFactory;
 import ui.LPTCTheme;
@@ -51,6 +53,8 @@ class ToolBar extends LayoutGroup {
 		searchTextInput.variant = LPTCTheme.TEXT_INPUT_VARIANT_SEARCH;
 		searchTextInput.leftView = SVGIconFactory.makeIcon("vector/magnifier_icon_black.svg", Constants.FONT_SIZE_22, Constants.MAIN_COLOR3);
 		searchTextInput.prompt = Strings.TB_S1;
+		searchTextInput.addEventListener(Event.CHANGE, onTextInputChange);
+
 		addChild(searchTextInput);
 		
 		//lbl1.layoutData = ld1;
@@ -61,4 +65,9 @@ class ToolBar extends LayoutGroup {
 		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
 	}
 
+	private function onTextInputChange(e:Event) {
+		var ti:TextInput = cast(e.currentTarget, TextInput);
+		AppModelLocator.getInstance().filterRiderListDP(ti.text);
+	}
+
 }

src/vo/RiderVO.hx

@@ -1,6 +1,8 @@
 package vo;
+import bindx.IBindable;
 
-class RiderVO {
+@:bindable
+class RiderVO implements IBindable {
 
     // constants for use with Reflect api when updating SelectedRider VO
     public static final ID:String = "id";