Hey everyone, i'm trying to create a ListFragment...

# tornadofx

[albrechtroehm]

Hey everyone,

i'm trying to create a ListFragment with some ToggleButtons in it. These Buttons should get a litte icon according to the text/id which is also display as text. I made some progress and the icons are showing up (if there is an id, disabling is not working so well ...) but the big issues is how to cache these icon and prevent loading them after every scoll action. There are videos on how to do some caching when using Listview.Cellformat but i didnt find anything on ListCellFragment. Here is some of my code. Maybe someone could give me a hint!

class MinimalExample : ListCellFragment<PrioThree>() {

	val iconService by inject<IconService>()

	private val prio = PrioThreeModel().bindTo(this)

	override val root = hbox(5) {
		togglebutton(prio.prio1) {
			val icon = imageview() {
				isPreserveRatio = true
				fitHeight = 28.0
			}
			textProperty().onChange { buttonString ->
				if (!buttonString.isNullOrEmpty())
					runAsync {
						queryIconUrl(buttonString)
					} ui {
						if (it.isNotEmpty())
							icon.image = Image(it, true)
					}
			}
			selectedProperty().bindBidirectional(prio.p1Collected)
		}

		togglebutton(prio.prio2) {
			graphic = cache {
				imageview() {
					isPreserveRatio = true
					fitHeight = 28.0
					enableWhen(iconVisible)
					textProperty().onChange { buttonString ->
						if (!buttonString.isNullOrEmpty())
							runAsync {
								queryIconUrl(buttonString)
							} ui {
								if (it.isNotEmpty())
									this.image = Image(it, true)
							}
					}
				}
			}

			selectedProperty().bindBidirectional(prio.p2Collected)
		}
		togglebutton(prio.prio3) {
			val icon = imageview() {
				isPreserveRatio = true
				fitHeight = 28.0
			}
			textProperty().onChange { buttonString ->
				if (!buttonString.isNullOrEmpty())
					runAsync {
						queryIconUrl(buttonString)
					} ui {
						if (it.isNotEmpty()){
							icon.isDisable = false
							icon.image = Image(it)

						}
						else icon.isDisable = true
					}

			}
			selectedProperty().bindBidirectional(prio.p3Collected)
		}
    }
}

[albrechtroehm]

Using a stringBinding and providing a backup icon seems to be the right way to change the images in the imagesviews, `

val iconUrl1 = prio.prio1.stringBinding() { queryUrlWhenNotEmpty(it) }

togglebutton(prio.prio1) {
			graphic = cache {
				imageview(iconUrl1) {
					isPreserveRatio = true
					fitHeight = 28.0
				}
			}
			selectedProperty().bindBidirectional(prio.p1Collected)
		}

But somehow i cant figure out how to cache it the right way

[Samkeene]

I'm not familiar too much with the caching stuff, but for the issue on controlling when an icon is enabled can be done like this:

val icon = imageview {
    isPreserveRatio = true
    fitHeight = 28.0
    enableWhen { // or visibleWhen/hiddenWhen/disableWhen
        booleanBinding(myStringProp) {
            this.value.isNullOrEmpty()
        }
    }
}

[albrechtroehm]

Thanks for your answer i came up with something similar.
I got it kind of working (sometimes icons need to load again, but much better than before) with this code using cellFormat, I'd rather seperate it into a fragment but i couldn't find a way to do something similar to line 2.

cellFormat {
			graphic = cache(itemProperty().get().playerName) {
				hbox(5) {
					paddingTop = 1.0
					paddingBottom = 1.0
					addClass(Styles.prioButton)
					label(itemProperty().get().playerName ) {
						addClass(Styles.biggerFont)
						prefWidth = 130.0
					}
					label(itemProperty().get().bonus) {
						addClass(Styles.biggerFont)
						prefWidth = 40.0
					}
					togglebutton(getNameOnly(itemProperty().get().prio1)) {
						imageview(iconService.getIconPath(itemProperty().select { it.prio1 }.value)) {
							isPreserveRatio = true
							fitHeight = 28.0
						}
						selectedProperty().bindBidirectional(itemProperty().get().p1Collected)
						prefWidth = prioButtonSize
					}
		...
}