kotlinlang #tornadofx

Hello there. I would like to start a new project, so I'm looking for the best options. I got few questions: 1. I already have an API for my entities, is there real benefits to have duplicate objects for the use of properties ? Or, is TornadoFX providing binding without such properties. 2. TornadoFX supports FXML, but do you suggest to use a full DSL declaration instead ? 3. Which pattern TornadoFX support the most ? Or which one of MV-X makes more sense to use with TornadoFX ? Thanks in advance for your answers.

carlw

11/01/2017, 6:43 PM

@romainbsl I recommend using the Type Safe Builders rather than FXML in your TornadoFX projects. The FXML support in TornadoFX is missing some of the nesting that I think is important for larger projects (fx:include, for example). Also, the Builders are the main focus of TornadoFX, making it more than just JavaFX + Kotlin. For smaller programs, the JavaFX Properties versus Model is duplication. However, for larger programs, you're more likely to encounter a divergence between the Model and the View. This makes the ViewModel and ItemViewModel more valuable. Check out the commit() and rollback() features of this architecture. Even though the Model may have a similar set of properties to a JavaFX Property-based class, the Model represents Record State while the JavaFX class represents Screen State. That is, there is a commit() lifecycle in TornadoFX that keeps a ViewModel 100% in sync with the UI which isn't desired in the Model until the user takes a deliberate action like a Save.

carlw

11/01/2017, 6:43 PM

There are some wrapper classes that can make the duplication a little less painful.

👍 3

romainbsl

11/01/2017, 6:49 PM

Thanks a lot for your help. I'll be looking into those suggestions. I can't wait to use TornadoFX and Kotlin for this project 🙂

👍 2

carlw

11/01/2017, 6:52 PM

let us know how it goes

Greg Stepniewski

11/01/2017, 6:58 PM

I have a borderpane with a stackpane in the center. On the stackpane I have an imageview (plus a few other things that are not important). I'm trying to get the imageview to scale to the window size so that it always fits within its pane. StackOverflow suggested binding fitWidth and fitHeight to the scene's width and height and it sort of works, but it cuts of the bottom of the image (I assume because of som stuff on top of the borderpane). I tried to bind the properties to the stackpane's width and height instead, but it does not do anything. I tried using onChange() instead of bind() and manually assigning, but the imageview just ignores it. What's even weirder is if I set the fitWidth/Height from within the scene's Width/Height onChange it works! What the hell am I missing?

carlw

11/01/2017, 7:01 PM

can you try replacing the stackpane with a vbox or are you using the z-index?

Greg Stepniewski

11/01/2017, 7:02 PM

I'm using the z-index to overlay stuff on top of the image

Greg Stepniewski

11/01/2017, 7:03 PM

are you saying this is some weird stackpane behaviour? would it help if I put the stackpane inside a box ?

carlw

11/01/2017, 7:04 PM

that's a good general strategy...if you have a layout problem: wrap. if you're code starts to look confusing (or introduces another problem): unwrap

carlw

11/01/2017, 7:04 PM

do you have ScenicView?

carlw

11/01/2017, 7:05 PM

that can sometimes show you the problem. if i had to guess, I'd say that the stackpane wasn't growing. it's sized to the contents rather than stretched to fill up the available space

Greg Stepniewski

11/01/2017, 7:08 PM

wrapping it in vbox did not help 😞 here's roughly what I'm doing:

Copy code

override val root = borderpane {
        top {
            hbox {
// stuff
            }
        }
        center {
            vbox {
                stackpane {
                    imageview(controller.image) {
                        isPreserveRatio = true
                        fitHeightProperty().bind((parent.parent as Pane).heightProperty())
                        fitWidthProperty().bind((parent.parent as Pane).widthProperty())
                    }
                }
            }
        }
    }

Greg Stepniewski

11/01/2017, 7:09 PM

I think the stackpane is in fact growing, by the way. I looked up the width/height of both the pane and scene as I resized the window and they all changed properly

carlw

11/01/2017, 7:13 PM

can you temporarily remove the stackpane() and the fit* calls?

Greg Stepniewski

11/01/2017, 7:15 PM

like this?

Copy code

center {
            vbox {
                    imageview(controller.image) {
                        isPreserveRatio = true
                    }
            }
        }

now the image is not center, not scaled to fit the window and does not react to resizing, as expected I think ?

carlw

11/01/2017, 7:34 PM

@Greg Stepniewski Does this work for you?

AnchorPane_to_resize_imageview.kt

Greg Stepniewski

11/01/2017, 7:41 PM

no, it's the same as with the vbox without stackpane 😞

ron

11/01/2017, 7:43 PM

@Greg Stepniewski dont know if this helps but here is the code I use for a popup window

ron

11/01/2017, 7:43 PM

Copy code

private fun showImagePopup(photo: Photo) {
        runAsync {
            ImageView(Image(photo.toURL().toExternalForm()))
        } ui {

            var height: Double
            var width: Double

            val visualBounds = Screen.getPrimary().visualBounds
            val screenRatio = visualBounds.width / visualBounds.height
            if (it.image.ratio() <= screenRatio) {
                // The scaled size is based on the height
                height = Math.min(visualBounds.height, it.image.height)
                width = height * it.image.ratio()
            } else {
                // The scaled size is based on the width
                width = Math.min(visualBounds.width, it.image.width)
                height = width / it.image.ratio()
            }

            builderWindow {
                stackpane {
                    prefWidth = width
                    prefHeight = height
                    it.apply {
                        fitHeightProperty().bind(this@stackpane.heightProperty())
                        fitWidthProperty().bind(this@stackpane.widthProperty())
                    }
                    add(it)
                }
            }
        }
    }

👍 1

ron

11/01/2017, 7:44 PM

you can find this code at https://github.com/ronsmits/KPhoto

Greg Stepniewski

11/01/2017, 7:55 PM

@ron thanks! it did give me an idea and I eventually got it working properly using this:

Copy code

center {
            stackpane {
                imageview(controller.image) {
                    isPreserveRatio = true
                    this@center.heightProperty().onChange { fitHeight = it - this@borderpane.top.layoutBounds.height }
                    this@center.widthProperty().onChange { fitWidth = it }
                }
            }
        }

It's incredibly ugly and I have no idea why center would give me the full height of the borderpane, but it seem to work for now...

ron

11/01/2017, 7:56 PM

that code I posted, just the

bind

is enough

ron

11/01/2017, 7:57 PM

onChange

needed

ron

11/01/2017, 7:57 PM

but then I see you use the tornadoFX imageview and I was using the javaFX ImageView

ron

11/01/2017, 8:10 PM

ROFL one example in the guide does not even compile anymore 🙂