Jetpack Compose Desktop switch to new window

Question

Hey I'm pretty new to Kotlin and am trying my hand at a GUI as my first small project.
For this I am using Jetpack Compose Desktop. I have already written a first small login window ( not the one in the GIF), and would like to open a new window with the "actual" content after logging in (not an external one, but in the same window).
Here is a video that may help you to understand what I mean:

(Not mine but thanks to Agon Mustafa - uplabs)

So that one continues with the registration in the same window and does not have to open a separate window for it. Hope you can help me:)

Modify some state that triggers recomposition, where you render the revised content based upon that state (e.g., one branch of a `when()` does the one screen and another branch does another screen). Note that Jetpack Compose is still in alpha and Compose for Desktop is even younger. I would argue that neither are a great choice for somebody new to Kotlin. — CommonsWare, Feb 08 '21 at 12:07
You might need an state management library. You can check these 3: https://github.com/arkivanov/Decompose or https://github.com/adrielcafe/voyager. Each has its own way to handle state. I created my own library for this matter, you can check how I do it here: https://github.com/pablichjenkov/uistate3 — Pablo Valdes, Dec 23 '22 at 10:13

score 1 · Answer 1 · edited Jan 19 '23 at 10:13

Here is an example of how to open and close multiple windows:

fun main() = application {
    val applicationState = remember { MyApplicationState() }

    for (window in applicationState.windows) {
        key(window) {
            MyWindow(window)
        }
    }
}

@Composable
private fun ApplicationScope.MyWindow(
    state: MyWindowState
) = Window(onCloseRequest = state::close, title = state.title) {
    MenuBar {
        Menu("File") {
            Item("New window", onClick = state.openNewWindow)
            Item("Exit", onClick = state.exit)
        }
    }
}

private class MyApplicationState {
    val windows = mutableStateListOf<MyWindowState>()

    init {
        windows += MyWindowState("Initial window")
    }

    fun openNewWindow() {
        windows += MyWindowState("Window ${windows.size}")
    }

    fun exit() {
        windows.clear()
    }

    private fun MyWindowState(
        title: String
    ) = MyWindowState(
        title,
        openNewWindow = ::openNewWindow,
        exit = ::exit,
        windows::remove
    )
}

private class MyWindowState(
    val title: String,
    val openNewWindow: () -> Unit,
    val exit: () -> Unit,
    private val close: (MyWindowState) -> Unit
) {
    fun close() = close(this)
}

You can read more in the tutorials of Compose for desktop

I tried to post the answer 6 months ago but it was deleted since I didn't provide the code so I have to answer it again) but this might be helpful — Ahmed Hnewa, Jan 19 '23 at 12:32

Jetpack Compose Desktop switch to new window

1 Answers1