How to create complex list?

#1

Hi all
I want to create a generic list (Web and Mobile) as the list in the picture. http://www.codeproject.com/KB/windows-phone-7/445361/iosPropertyList.jpg
What tools and libraries should I use?

#2

This is not complex at all. You have either the Array or List options which are both available in the Haxe standard library.

To render using OpenFL, just addChild to the Sprite containing this list, iterating through each item.

I would recommend extending a Sprite and create all the Bitmap and Text required to make one single item (perhaps called HousingProperty). In your base class (perhaps called Properties) you would have an array like so: Array<HousingProperty>.

Access them using each index.

#3

Thank you, but I do not like this way.
I need a ready and flexible component that supports effects (roll out), styles (themes), different layout (fluid) inside it, and so on.
Like List in Feathers components.

#4

have a look at http://www.haxeui.org/

#5

If you decide to go down the haxeui route, something like this might help you out:

http://haxeui.org/try.jsp?layoutId=65Xr8z6

As it mentions in the example (but ill say it again here) loading images via http should be totally fine for normal applications, the flash swf in the builder on that page doesnt seem to have the right crossdomain things setup, but i ran the same xml in the same app locally and it loads the images just fine.

Hope that helps somewhat.

Cheers,
Ian

PS: you might also be interested in the new “pull to refresh” functionality: https://www.facebook.com/haxeui/photos/a.702469546555613.1073741828.702404916562076/747915088677725/?type=3&theater

#6

Perhaps the question should be “What UI tools should I use?” and not “How to create complex list?” because the original question is based on achieving a behaviour for an application, which the OP then replied to me stating that he then needs components for effects, fade in, etc.

HaxeUI is one way to go, but until v2 is out, there are no native toolkits for mobile devices. If you are looking for a native toolkit for Mobile, it may be a good idea to consult Massive on their Massive AXIS (http://www.massive.co/axis) although that being said it’s more of a business solution than a consumer solution, which is ironic considering the libraries can also be used to make native applications for mobile.

Again, Quaxe is being made as we speak, and is also commercial like Axis, so if you’re not willing pay, perhaps your best option is to simply create a native application in Java/Swift instead, depending on the mobile platform you’re targeting.

#7

Hi Ian,
Thank you so much. Your example is pretty much what I need.
However, I could not see a list when I copy your XML in my project. Only the text “HTTP images wont load…” and nothing under.
It may be something I need to initiate in the main class?
And a parallel question. I store the data for the List in SQLite, how can I transfer it in the List instead of a static JSON?

#8

The fact that you can see the text indicates everything is working ok from an initialisation point of view, otherwise i wouldnt expect to see anything at all. Maybe you could post your code / example so i can see exactly whats going on? Version 1 is a little bit “picky” about sizes and percent widths, etc and usually needs a bit of fiddling to get it sizing correctly (should not that V2 has a totally new layout engine).

As for the data, you could either turn the sql record(s) into json or you could create your own data source, there is an example here: https://github.com/ianharrigan/haxeui/blob/master/haxe/ui/toolkit/data/MySQLDataSource.hx. Its commented out as i had issues with targets like android, but it should server as a decent reference.

Final note, if you are creating new data sources you will need to register them, that can either be done using ClassManager.instance.registerDataSourceClassName in code, or the quicker way would be to create a module.xml somewhere in your app, HaxeUI will auto discover it and load things from there, HaxeUI module.xml is here: https://github.com/ianharrigan/haxeui/blob/master/haxe/ui/toolkit/module.xml (notice the <dataSource package="haxe.ui.toolkit.data" />, that will auto register any classes that implement IDataSource in the package specified).

Hope that helps somewhat!

Cheers,
Ian