A modern programming language that makes developers happier.

kotlinlang

image.png

I have a project in mind, and I started using tornadofx - because of kotlin.
I have 2 issues.
1.  for my App, (stage view or main window) - I am using Borderpane.  Initially, it has menubar and logo at the center view. so when I select menu item login/connect, I would like to be able to open a fragment in the center of the border pane and it to be centered.  I am not sure how to do that, because when I assign the find(AppView::class).root.center = (fragment::class).root, fragment occupies the whole screen.  The plan is that after login, I would fill the left side with table view - data retrieved from DB/Rest
2. Second issue has to do with form button is not leaving space between itself and last textfield in the form. I am attaching images for help.
Thank you in advance.

1. You probably want to look into `StackPane` got centering. It's a good idea to really familiarize yourself with JavaFX's built in layout manager.

2. Can you provide the layout code that creates the form? It's often rather difficult to diagnose layout issues from a picture alone as there could be any number of ways to create the effect. Also, if you have any styling, please provide that as well (for the same reason.

```class FileConnectView : Fragment("Connect to Site") {
    private val itemsController: FileMenuItemsController by inject()
    private val model = ViewModel()
    private val username = model.bind{ SimpleStringProperty() }
    private val password = model.bind {SimpleStringProperty()  }
    private val site = model.bind { SimpleStringProperty() }
    override val root = form {
        addClass(Styles.loginForm)
        fieldset {
            field("Username")
            textfield(username){
                required()
            }
            field("Password")
            textfield(password) {
                required()
            }
            field("Site")
            textfield(site)

            button("Connect to Site") {
                paddingTop = 30
                enableWhen(model.valid)
                isDefaultButton = true
                useMaxWidth = true
                action {itemsController.connect(username.value, password.value, site.value ) }
            }
        }
        label(itemsController.statusProperty) {
            style {
                paddingTop = 10
                textFill = Color.RED
            }
        }
    }
    init {
        reloadStylesheetsOnFocus()
    }```

It is in many ways, similar to
<https://www.youtube.com/watch?v=Jyuf4xn0oy4>