Hey all, just getting started with TornadoFX and I...

# tornadofx

[Tobias]

Hey all, just getting started with TornadoFX and I found the documentation a little sparse on how to use an ObservableMap to populate a TreeView and dynamically re-render when the underlying data changes. Any advice?

[Carlton Whitehead]

Not familiar with treeview specifically, but most other View DSLs functions take an observable as an argument for binding. on the entry point. Could you do treeview(files) { instead of treeview {?

[Bogdan]

Data driven TreeView
If the child list you return from populate is an ObservableList, any changes to that list will automatically be reflected in the TreeView. The populate function will be called for any new children that appears, and
removed items will result in removed TreeItems as well.

[Bogdan]

https://edvin.gitbooks.io/tornadofx-guide/part1/5.%20Data%20Controls.html

[Tobias]

@Bogdan I read this already. It refers to Lists, not Maps, and it doesn't actually seem to update with a list anyway.

[Bogdan]

why do you need map?

[Bogdan]

you need to write the list processing logic you need in populate

[Tobias]

Because I need to have multiple subgroups of items abd be able to group the items in arbitrary ways

[Tobias]

Anyway it should be supported. The bindChildren() function has a form that accepts an ObservableMap and a converter of type (Map) -> Node

[Tobias]

That's the part I'm not really getting though. There are no examples

[Bogdan]

bindChildren(observableMap) { file -> TreeItem(file) } ?

[Tobias]

That's the form I want to use, yes. But my folders object is an ObjectBinding<Map<File, <List<File!>>!> not an ObservableMap<File, <List<File>>. I though I should be able to use folders.value to access the map, but I can't

[Tobias]

Also, the linter complains that TreeItem(file) is not a Node??

[Bogdan]

bindChildren - defined on EventTarget, and knows nothing about treeview

[Tobias]

OK

[Bogdan]

I'll try to make an example now

[Tobias]

Thanks! I'm just not getting how to both bind the data from my ObjectBinding and populate it with my conditions (e.g., if (file.isDirectory) ... else ...)

[Bogdan]

class Test : View("My View") {
    val rootFile = File("/home/funtik")
    val files = observableListOf(rootFile)

    override val root = vbox {

        treeview(TreeItem(rootFile)) {

            cellFormat { text = it.name }

            populate {
                when  {
                     it.value.isFile -> null
                     it.value.isDirectory -> it.value.listFiles()?.toList()
                     else -> null
                }
            }
        }
    }
}

[Tobias]

So I really should only be using this with a List and not a Map, then?

[Tobias]

I'll give this a try. I think the key is to create a wrapper class around java.io.File that I can store my grouping data in. I want to be able to synthetically group Files into "different directories" than the ones they exist in on the Filesystem.

[Tobias]

Tagging, if you will

[Bogdan]

in general - yes, but in this case I do not know if you need to view or some other manipulation

[Tobias]

Cool. Thanks for your help

[Bogdan]

then perhaps you need to create additional structures to provide information about the filter if there is no data in the FIle itself

[Bogdan]

I may still work on the code, I will write if something works out

[Tobias]

Appreciate it!

[Tobias]

One other thing...

[Tobias]

I don't really want to use the observableList as my root TreeItem. The user is able to drag/drop multiple directories into the app, and I want them to appear as siblings in the TreeView, even if they aren't siblings on the actual FS. That's why I went with the Map to begin with.

[Tobias]

I was basically creating an empty root TreeItem, adding each of my Map keys (the directories) as its children, and each of THOSE would show their files as children

[Tobias]

Per the image I attached on the main channel

[Bogdan]

and how do you want to group?

[Bogdan]

all child File have one parent

[Bogdan]

class Test2 : View("My View") {
    val rootFile = File("/home/funtik")
    val files = observableListOf(rootFile)
    val directories = observableMapOf<File, ObservableList<File>>()

    init {
        files += File("/home/funtik/Data")
        files += File("/home/funtik/Downloads")
    }
    
    fun grouping() {
        files
            .groupBy { File(it.parent) }
            .forEach { (k, v) ->
                println(v)
                val list = directories.getOrPut(k) { observableListOf() }
                list.clear()
                list += v
            }
    }

    override val root = vbox(10) {
        val treeview = treeview(TreeItem(rootFile)) {
            isShowRoot = false
            cellFormat { text = it.name }

            populate {
                when {
                    it.value == rootFile -> it.value.listFiles()?.toList()
                    it.value.isFile -> null
                    it.value.isDirectory -> directories.getOrPut(it.value) { observableListOf() }
                    else -> null
                }
            }
        }
    }
}

[Bogdan]

class Test3 : View("My View") {
    val rootFile = File("/home/funtik")
    val files = rootFile.listFiles()?.toList()?.toObservable() ?: observableListOf()
    val directories = observableMapOf<File, ObservableList<File>>()

    init {
//        files += File("/home/funtik/Data")
//        files += File("/home/funtik/Downloads")
    }

    override val root = vbox(10) {
        val treeview = treeview(TreeItem(rootFile)) {
            isShowRoot = false
            cellFormat { text = it.name }

            populate {
                when {
                    it.value == rootFile -> files
                    it.value.isFile -> null
                    it.value.isDirectory -> directories.getOrPut(it.value) { observableListOf() }
                    else -> null
                }
            }
        }

        buttonbar {
            button("g").action {
                val file = treeview.selectedValue?.takeIf { it.isDirectory } ?: return@action
                val files = file.listFiles() ?: return@action
                directories.getOrPut(file) { observableListOf() }.let {
                    it.clear()
                    it += files
                }
            }
        }
    }
}

[Bogdan]

This is not the best code, but it shows how you can use it.

In the code below, it is not necessary to use getOrPut, since at the populate stage, all values from files were inserted

directories.getOrPut(file) { observableListOf() }.let {
    it.clear()
    it += files
                
}

[Bogdan]

Also, to better understand, I advise you to take a look at the populateTree method.

from the docks: Add children to the given item by invoking the supplied childFactory function, which converts a TreeItem<T> to a List<T>?.
If the childFactory returns a non-empty list, each entry in the list is converted to a TreeItem<T> via the supplied itemProcessor function. The default itemProcessor from TreeTableView.populate and TreeTable.populate simply wraps the given T in a TreeItem, but you can override it to add icons etc. Lastly, the populateTree function is called for each of the generated child items.