ArrayColection fuzzy search

chatmurai74

Hi ! Maybe it's more an Haxe /OpenFL related question, but I didn't find anything in the docs or in the forums, so I'm posting this here.
I'd like to implement a fuzzy search function triggered by an InputText component to filter the ArrayCollection feeding the dataProvider property of a ListView.
I found Fuzzaldrin (haha) lib for Haxe that seems to do the job but I can't figure out how to use it.

Fuzzaldrin.filter(cast(model.ridersListDP, Array<Dynamic>), 'Test', { key: RiderVO.FIRST_NAME }); is raising a TypeError: Error #1034 because of the cast function I presume, but Fuzzaldrin takes an Array, not an ArrayColectionin parameters and I need to keep the typed RiderVOobjects inside the ArrayColection.

I think there are alternatives to this, maybe with ArrayCollection find() method, but my brain refuses to find the solution (>_<)

Thanks for your help !

joshtynjala

ArrayCollection provides a filterFunction property that you can use to filter its items. You might implement it like this (assuming that the items in the collection are of type RiderVO):

var collection = new ArrayCollection<RiderVO>();
collection.filterFunction = function(item:RiderVO):Bool {
    return fuzzyMatch(item.firstName, textInput.text);
};

The filterFunction is called separately for each item in the collection. It returns true to display an item, and false to hide an item.

Note: fuzzyMatch() in the example above is not a real function provided by Haxe, OpenFL, or Feathers UI. Consider that pseudo-code, and you need to drop in your own function that does fuzzy matching. That could be your Fuzzaldrin library, or something else entirely.

chatmurai74

Hi Josh, thanks for your answer and happy new year !
I tried to adapt your code example in my project, but I believe there's something I don't quite understand regarding ArrayCollection.filterFunction. Here's what I did in my AppModelLocator class:

public function filterRiderListDP(pTestValue:String) {
		ridersListDP.filterFunction = function(rider:RiderVO):Bool {	
			var result:Bool = StringTools.contains(rider.firstName, pTestValue);
			trace(result);
			return result;
		};
	}

The function is triggered but the RiderListDP ArrayCollection is not modified and I can't debug this because the trace() method won't work inside the filterFcuntion.

joshtynjala

chatmurai74 Try calling ridersListDP.refresh() after setting the filterFunction. It would normally refresh automatically the next time that you try to access some of the properties, but if you're not doing that yet, you can manually refresh.

chatmurai74

I tried ridersListDP.refresh() but it didn't work, then I remembered I maybe had to dispatch an event like dispatchEvent(new Event(AppModelLocator.RIDERS_LIST_DP_CHANGE))after setting the filter function to inform the view the RiderList is in that the content had changed and it worked.

Btw, I'm starting to wonder if my Cairngorm + events approach is the right one for my application. I find it quite tedious to use Cairngorm events and commands for insignificant things, and it complicates the project structure a lot.

In the spirit of trying another approach, I found your Bindable library, but I ran into a type issue, so I turned to Bindx2, which is good as well.

In general, what do you use on a daily basis? Do you prefer events/Cairngorm or data binding? Or both?

Thank you!

joshtynjala

chatmurai74 Do you prefer events/Cairngorm or data binding? Or both?

Personally, I would probably choose a different framework over Cairngorm. I ported it over to Haxe from AS3 due to its heavy usage back in the day as one of first popular frameworks for Flex. Newer frameworks over the years were designed with better developer experiences, and I'd be more likely to go with one of those.

I personally liked Robotlegs when I was using AS3/Flex. There is a Haxe version, but I haven't played with it much. Mainly because I was using Robotlegs 1, and the port is based on Robotlegs 2. I always thought that Robotlegs 1 seemed heavily inspired by PureMVC. There's a Haxe version of PureMVC too. There's a good chance I'd choose either PureMVC or Robotlegs, if I were building a large enough app to require a framework.

To be honest, I've tended not to use binding at all in recent years. If I were to include it in an app, I'd aim to keep bindings contained entirely within individual visual components. No bindings created between components or classes.

chatmurai74

At the time, I wasn't a big fan of frameworks. I remember trying a few (SwiftSuspenders anyone?) like Robotlegs, Cairngorm, and even PureMVC, but there was always a moment when I regretted it because of the added layer of complexity.

I eventually developed a lot of mobile applications with AIR using only the dependency injection of Robotlegs, if I remember correctly.

But what I miss the most is definitely the data binding and the meta of Flex components. I've looked at your fantastic MXHX project, and I must say that if you ever add data binding, it will be even more fantastic, but I also recognize the amount of work that represents.

joshtynjala

chatmurai74 MXHX supports data binding if you use the https://ns.mxhx.dev/2024/mxhx namespace instead of the https://ns.mxhx.dev/2024/basic namespace.

https://mxhx.dev/learn/data-binding/

It actually uses my bindable library that you mentioned in your previous post.

chatmurai74

That's nice! So I gave it a try but there is something I don't understand with the namespaces. Considering the following component:

<?xml version="1.0" encoding="utf-8"?>
<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/mxhx" xmlns:f="https://ns.feathersui.com/mxhx">
  <f:Button id="b1" text="Say hello" width="150" height="40" variant="{LPTCTheme.BUTTON_VARIANT_ORANGE}" click="{trace('Hi!');}"/>
</f:LayoutGroup>

How can the variant property of the b1 element access the LPTCTheme.BUTTON_VARIANT_ORANGE class property that is in the ui package?
I looked at the doc and I tried adding xmlns:ui="ui.*" into the LayoutGroup root tag but it throws an error Type not found : LPTCTheme

Second question: since Scripttag is unsupported at the moment, is there a way to call a method in a other class from this component like click="{myCustomClass.myMethod();}"?

joshtynjala

chatmurai74 How can the variant property of the b1 element access the LPTCTheme.BUTTON_VARIANT_ORANGE class property that is in the ui package?

In Flex, you would have imported the class in a Script tag. However, the Script tag is not supported in MXHX, as you mentioned (and it probably won't be because it would require a custom Haxe code parser). However, you can include the full package name, like this:

variant="{ui.LPTCTheme.BUTTON_VARIANT_ORANGE}"

Alternatively, if you are including the .mxhx file using a build macro in a .hx file, you might be able to import the class in the .hx file. I don't recall off the top of my head if this works or not.

chatmurai74 Second question: since Scripttag is unsupported at the moment, is there a way to call a method in a other class from this component like click="{myCustomClass.myMethod();}"?

You could define a property myCustomClass in a .hx file that the .mxhx file can access. You could also dispatch an event that another class could listen for and call that method in the listener.

chatmurai74

Thanks, I decided to go for the build macro, since it offers more flexibility.