An app's root container
The Display holds an app's View hierarchy within a window, and behaves like a basic container. It is not a View however, so many of the capabilities of Views are not available for the Display.
The Display is available for injection by default.
package display
import io.nacular.doodle.application.Application
import io.nacular.doodle.application.application
import io.nacular.doodle.core.Display
import org.kodein.di.instance
//sampleStart
class MyApp(display: Display): Application {
init {
// ...
}
override fun shutdown() {}
}
fun main() {
application {
MyApp(display = instance())
}
}
//sampleEnd
Layouts can be applied to the Display as well.
Adding Views to the Display
An app can have any number of top-level Views that are the ancestors of all other Views. These are added (and removed) to the Display directly using the its children property. These top-level have no parent, since they Display is not a View itself.
package display
import io.nacular.doodle.application.Application
import io.nacular.doodle.core.Display
import io.nacular.doodle.core.view
//sampleStart
class SampleApp(display: Display): Application {
init {
val view1 = view {}
val view2 = view {}
// add top-level views
display += view1
display += view2
// remove top-level views
display += view1
display += view2
}
override fun shutdown() { /*...*/ }
}
//sampleEnd
Different Displays for Web
A Stand-Alone Web app that uses the entire page will have its Display tied to the page body. While one hosted in an element will have a Display that is tied to that element. This difference is transparent to the app.
The Display for a Nested app sits within the View hosting it. This means changes to that View's size will change the Display size.
package display
import io.nacular.doodle.application.application
import org.kodein.di.DI
import org.kodein.di.instance
import org.w3c.dom.HTMLElement
fun topLevelLaunch(element: HTMLElement, moduleA: DI.Module, moduleB: DI.Module) {
//sampleStart
// Launch top-level app (in body for Web)
application(modules = listOf(moduleA, moduleB)) {
MyApp(display = instance())
}
// Launch app within element
application(element, modules = listOf(moduleA, moduleB)) {
MyApp(display = instance())
}
//sampleEnd
}
Multiple Displays on Desktop
Single-window apps work the same on Desktop as they do for the Browser. But Desktop apps can also take advantage of multiple windows to display content. Doing this results in the creation of multiple Displays (one for each window).
Displays work just like they do for single-window apps: they contain the View hierarchy, and behave like containers. The difference is they perform those duties only for the Window they are attached to. And Views in a Display are shown in the Window for that Display.
package display
import io.nacular.doodle.application.Application
import io.nacular.doodle.application.application
import io.nacular.doodle.core.WindowGroup
import io.nacular.doodle.core.view
import org.kodein.di.instance
//sampleStart
class MyApp(windows: WindowGroup): Application {
init {
windows.main.display += view {}
windows {
title = "New Window"
display += view {}
}
}
override fun shutdown() {}
}
fun main() {
application {
MyApp(instance())
}
}
//sampleEnd
Each Window (including main) provides a reference to its Display.