Skip to main content

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
tip

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
caution

A View's parent property does not indicate whether it is displayed or not. Use the displayed property instead.

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 (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
tip

Each Window (including main) provides a reference to its Display.