resize and opening new windows

[tunglbarn]

greetings, fellow decomposers.

I've exhausted my knowledge trying to find an answer / creating a solution for two scenarios.

let's use decompose-desktop-example as a canvas to illustrate them.

• scenario 01:
  how can I trigger a window resize event from a child window (like a button on the greeting screen that can resize the entire window, to temporarily show more content for example.)
  I've already tried WindowState().apply {...} and LifeCycleRegistry() .apply {...} without success.

• scenario 02:
  how could I invoke the call/creation of a second window, to invoke an About window, for example?
  I've already tried invoking an function containing another window from a button or menu, but it says that I can't invoke a @composable function.

this is the first time I post a question anywhere, so please forgive me if I forgot to provide some basic information.

even though I would be so very happy if I got any answers / ideas.

cheers!

[arkivanov]

Hello! This looks more like a Compose question. But I can share some ideas.

Scenario 01

I assume that you want to change the size of the window on an event from a component. You do something as follows:

class RootComponent constructor(
    componentContext: ComponentContext,
    private val onResizeWindow: (WindowSize) -> Unit,
) : Root, ComponentContext by componentContext {

    enum class WindowSize {
        NORMAL, LARGE
    }

    private fun makeLarge() {
        onResizeWindow(WindowSize.LARGE)
    }
}

// Main.kt
fun main() {
    val lifecycle = LifecycleRegistry()

    val windowState = WindowState()

    val root =
        RootComponent(
            componentContext = DefaultComponentContext(lifecycle = lifecycle),
            onResizeWindow = {
                windowState.size = when (it) {
                    RootComponent.WindowSize.NORMAL -> DpSize(800.dp, 600.dp)
                    RootComponent.WindowSize.LARGE -> DpSize(1000.dp, 800.dp)
                }
            }
        )

    application {
        LifecycleController(lifecycle, windowState)

        Window(
            onCloseRequest = ::exitApplication,
            state = windowState,
            title = "Decompose Sample"
        ) {
            Surface(modifier = Modifier.fillMaxSize()) {
                MaterialTheme {
                    CompositionLocalProvider(LocalScrollbarStyle provides defaultScrollbarStyle()) {
                        RootContent(root)
                    }
                }
            }
        }
    }
}

Scenario 02

For a child window or a dialog you can use either a simple state data class, or the new Child Overlay navigation model. You can prefer a simple state data class for simple dialogs, and the Child Overlay if you need to show a child component as a dialog.

Simple case

interface SomeComponent{

    val model: Value<Model> // You can also use Flow or Rx here

    fun dismissDialog()
    
    data class Model(
        val dialog: Dialog?,
    ) {
        data class Dialog(
            val text: String,
        )
    }
}

@Composable
fun SomeComponentContent(component: SomeComponent) {
    val model by component.model.subscribeAsState()
    val dialog = model.dialog

    if (dialog != null) {
        Dialog(
            onCloseRequest = component::dismissDialog,
        ) {
            Text(text = dialog.text)
        }
    }
}

Also see the Child Overlay example.

[tunglbarn]

thank you so much for taking the time for sharing your knowledge!

I really appreciate it!

for me there's still a thin line between where does the compose world ends and the decompose one starts, as I found the decompose approach much more elegant and efficient than using coroutines that I may have started to see them as one single entity.

to honor your noble attitude, I will fork the decompose-desktop-example and try to expand it a little bit by apply your suggestions, so it can help people whom may come across with this same scenarios and post it here once it's finished!

again, thank you so much!

[arkivanov]

Thanks! Please do share.

[tunglbarn]

thank you so much, @arkivanov !

I've found your approach for the window resizing very elegant.

my implementation isn't that elegant, but is forked at https://github.com/tunglbarn/decompose-desktop-example.

I couldn't use Child Overlay in this case as the example application was written on Child Stack, so I just called a Dialog window instead as you suggested.

if anyone have any doubts in the future regarding this, please feel free to reach me.

cheers!