Forms example?

[bodiam]

Hi, just wondering, but would you have an example with a form + layout? I'm looking for something like this, and I'm not sure if there's a formlayout or tablelayout which I could use for this?

[bodiam]

At the moment, I'm actually struggling to even add a button or a label to a view. I see a lot of examples with the render method, but how do I do something like:

        display += view {
            size   = display.size

           val label = Label("my text")
           val button = Button("my buttton") 

           // how to add these to the view?

[pusolito]

So the View class hides the fact that it has children from everyone other than classes that extend it. This is by design to improve encapsulation. The view builder retains this property. So there are two choices for the code you have here. Use the container builder, which gives you a Container to work with, and therefore, access to its children (and Layout etc.). Or, create an object literal that extends View.

// or, object: View() { ... }, etc.
display += container {
    size      = display.size
    children += Label("my text")
    children += Button("my buttton")
}

[pusolito]

Hi, just wondering, but would you have an example with a form + layout? I'm looking for something like this, and I'm not sure if there's a formlayout or tablelayout which I could use for this?

This is achievable using a ConstraintLayout. This can be used as follows:

val someContainer: Container // or a View that exposes Layout, or the Display

container.layout = constrain(child1, ... childN) { child1, ... childN ->
    child1.left = parent.left + 10
    ...
}

This gives fine grained control over relative positions for items that all share the same parent.

https://nacular.github.io/doodle/#/positioning

You can also use a GridPanel. See it used in the calculator tutorial https://nacular.github.io/doodle-tutorials/#/calculator.

[bodiam]

Hi @pusolito ,thanks for the examples, but neither one works for me. I'm perfectly sure the issue on my end, but If I try the example using the container builder, the code doesn't compile:

When I try a new instance of a View (I created a subclass) the code compiles, but doesn't show anything:

class HelloWorld(display: Display): Application {
    init {
        display += FormView()
    }

    override fun shutdown() {}
}

class FormView() : View() {
    init {
        children += Label("Some Text")
        children += PushButton("My Button")
    }
}

fun main() {
    application {
        HelloWorld(display = instance())
    }
}

What am I missing here?

[bodiam]

I've attempted another one, based on the Calculator example, but also this one renders an empty screen:

https://gist.github.com/bodiam/053e81f93b36e5b69e7e6200c7988503

[pusolito]

The issue with += for display is an IDE one. It doesn't auto import that method from the Display file for some reason. Just import plusAssign yourself. Then, things aren't showing because both Label and PushButton need a Behavior installed to render. These views delegate render and some other things to this pluggable strategy.

You can use a Theme that includes items for each: https://nacular.github.io/doodle/#/themes. The BasicTheme has modules for both. Or you can install them directly to each via the behavior property.

The Todo tutorial also uses themes: https://github.com/nacular/doodle-tutorials/tree/master/Todo/src/jsMain/kotlin/io.nacular.doodle.examples/FullScreen.kt.

Calculator uses Behaviors directly : https://github.com/nacular/doodle-tutorials/blob/647ba646dea65d9637f534aa0a2abea7859255a9/Calculator/src/commonMain/kotlin/io/nacular/doodle/examples/Calculator.kt#L248.

[pusolito]

Be sure to set a bounds (or place it in a parent with a Layout that does) for the button. Label has a fitText property that defaults to fitting the contents width and height. But PushButton (and most Views) need an explicit bounds or they default toRectangle.Empty, which means they won't render.

[bodiam]

Thanks! I'll try it out later today. Thanks for your support!

[bodiam]

The issue with += for display is an IDE one. It doesn't auto import that method from the Display file for some reason. Just import plusAssign yourself. Then, things aren't showing because both Label and PushButton need a Behavior installed to render. These views delegate render and some other things to this pluggable strategy.

Are you sure about that one? The container returns a Container type. Display.plusAssign only takes a View object or an Iterable<View>

If I do the following, it compiles:

    init {
        val container: Iterable<View> = container {   // note the explicit mention of Iterable<View>, even tough container returns a Container type.
            size = display.size
            children += Label("my text")
            children += PushButton("my buttton")
        }
        display += container
    }

If I inline it, it doesn't (probably because container returns a Container type?):

What am I missing here?

[pusolito]

Container is a View though: https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/core/Container.kt. Will have to investigate this more when at my computer later during the week.

At any rate, you can use display.children directly as well.

[bodiam]

Hmm, good point. I'll do some more investigation myself, I'll let you know how I go.

Btw, I'm sorry for the amount of questions I have, but I appreciate your support!

[pusolito]

Ah, I think I've seen this a few times and it's an ambiguous resolution issue. Display is also an Iterable. So the compiler gets confused. The work-around I've used is typing out the full call at the site. Then replacing it with the operator: display.plusAssign(container {}) then change back.

This is a total hack, and should actually be filed as a bug with Jetbrains if it is the case.

[pusolito]

Hmm, good point. I'll do some more investigation myself, I'll let you know how I go.

Btw, I'm sorry for the amount of questions I have, but I appreciate your support!

Not at all. This kind of feedback is very helpful. It helps me see gaps that I overlooked, and things needed to support real projects.

[bodiam]

@pusolito I've tried the hack, but IntelliJ doesn't seem to like it.

I mean, with Container being both a View as well as an Iterable<View>, I'd get confused too I think :-). But I don't think the issue is Display, the issue here is Container, and I think the error message makes sense?

This will probably go against your design, but wouldn't it be an option to have Container not be both a View as well as an Iterable<View>?

[pusolito]

Interesting. Let me follow up on this to see what makes sense.

[bodiam]

I've tried again to get my HelloWorld working, but again I'm running into issues. This time I'm getting:

Exception in thread "AWT-EventQueue-0" org.kodein.di.DI$NotFoundException: No binding found for bind<ThemeManager> { ? { ? } }

This is my code:

class HelloWorld(
    display: Display,
    manager: ThemeManager,
    theme: BasicTheme
) : Application {
    init {
        manager.selected = theme

        val container: Iterable<View> = container {
            size = display.size
            children += Label("x")
            children += PushButton("x")
        }

        display += container
    }

    override fun shutdown() {}
}

fun main() {
    application {
        HelloWorld(display = instance(), manager = instance(), theme = instance())
    }
}

[bodiam]

I've tried using one of your examples from here: https://nacular.github.io/doodle/#/themes

This one:

class MyApp(display: Display,
            manager: ThemeManager,
            theme  : NativeTheme): Application {

    init {
        manager.selected = theme
    }
}

fun main() {
    application(modules = listOf(NativeTheme)) {
        MyApp(instance(), instance(), instance())
    }
}

But besides missing the shutdown method, the listOf(NativeTheme) also doesn't work. Not sure how to fix.

[bodiam]

In short, so far still not able to display a Label and a Button on the screen.

[pusolito]

I've tried again to get my HelloWorld working, but again I'm running into issues. This time I'm getting:

Exception in thread "AWT-EventQueue-0" org.kodein.di.DI$NotFoundException: No binding found for bind<ThemeManager> { ? { ? } }

This is my code:

class HelloWorld(

    display: Display,

    manager: ThemeManager,

    theme: BasicTheme

) : Application {

    init {

        manager.selected = theme



        val container: Iterable<View> = container {

            size = display.size

            children += Label("x")

            children += PushButton("x")

        }



        display += container

    }



    override fun shutdown() {}

}



fun main() {

    application {

        HelloWorld(display = instance(), manager = instance(), theme = instance())

    }

}

Ok, the docs need more love to be updated. The example doesn't show the NativeTheme import statement (

doodle/Browser/src/jsMain/kotlin/io/nacular/doodle/theme/native/NativeTheme.kt

Line 52 in b476634

public val NativeTheme: Module = Module(name = "NativeTheme") {

for browser). You can use the Todo tutorial for a working examples. The full screen launcher shows how it applies a behavior module for the Label: https://github.com/nacular/doodle-tutorials/blob/master/Todo/src/jsMain/kotlin/io.nacular.doodle.examples/FullScreen.kt. That module imports the DynamicTheme and ThemeManager via basicLabelBehavior(). This function loads the BasicLabelBehavior via a module.

[bodiam]

The example doesn't show the NativeTheme import statement.

What do you mean with that? I've got the import for NativeTheme (see for an example here: https://gist.github.com/bodiam/1cfadca819a16f352ca5588c3008ade1), it just doesn't like the import.

re: TodoApp

I had a look at the TodoApp before (I had a look at all the examples), but that example injects the behaviour of every component separately, and I have a bit of a hard time understanding why I'd want to do that if injecting a Theme is also an option.

[bodiam]

doodle/Browser/src/jsMain/kotlin/io/nacular/doodle/theme/native/NativeTheme.kt

That's example the import I've used in my example here: https://gist.github.com/bodiam/1cfadca819a16f352ca5588c3008ade1, which is the one causing the issue.

[pusolito]

Code size (JS) was the reason I moved towards individually selecting the behaviors this way. You'll see the NativeTheme has a function that installs everything:

doodle/Browser/src/jsMain/kotlin/io/nacular/doodle/theme/native/NativeTheme.kt

Line 142 in b476634

public val nativeThemeBehaviors: List<Module> = listOf(

. Unfortunately it is missing a preconfigured one for Label. But BasicTheme has one:

doodle/Themes/src/commonMain/kotlin/io/nacular/doodle/theme/basic/BasicTheme.kt

Line 608 in b476634

public val basicThemeBehaviors: kotlin.collections.List<Module> = listOf(

.

[bodiam]

@pusolito Thanks, but I'm getting a bit lost now.

I've tried another variation, which also doesn't work, now with the nativeThemeBehaviors:

import io.nacular.doodle.application.Application
import io.nacular.doodle.application.application
import io.nacular.doodle.controls.buttons.PushButton
import io.nacular.doodle.controls.text.Label
import io.nacular.doodle.core.Display

import io.nacular.doodle.core.View
import io.nacular.doodle.core.container
import io.nacular.doodle.core.plusAssign
import io.nacular.doodle.theme.ThemeManager
import io.nacular.doodle.theme.basic.BasicTheme
import io.nacular.doodle.theme.native.NativeTheme
import org.kodein.di.instance

class HelloWorld(
    display: Display,
    manager: ThemeManager,
    theme: NativeTheme
) : Application {
    init {
        manager.selected = theme

        val container: Iterable<View> = container {
            size = display.size
            children += Label("x")
            children += PushButton("x")
        }

        display += container
    }

    override fun shutdown() {}
}

fun main() {
    application(modules = BasicTheme.basicThemeBehaviors) {
        HelloWorld(display = instance(), manager = instance(), theme = instance())
    }
}

It would really help me if there was an example which would display a label and a button.

It seems beyond my skill at this moment to accomplish this, and I'm feeling that this conversation is bringing me further away from a solution than closer.

[pusolito]

I'll write an example when back from holiday on Wed morning.

Here's an example from a private repo:

import Demo.Companion.demoAppModules
import io.nacular.doodle.application.Application
import io.nacular.doodle.application.Modules.Companion.FontModule
import io.nacular.doodle.application.application
import io.nacular.doodle.controls.buttons.CheckBox
import io.nacular.doodle.controls.text.Label
import io.nacular.doodle.controls.text.TextFit
import io.nacular.doodle.drawing.Color
import io.nacular.doodle.drawing.FontLoader
import io.nacular.doodle.geometry.Size
import io.nacular.doodle.theme.ThemeManager
import io.nacular.doodle.theme.adhoc.DynamicTheme
import io.nacular.doodle.theme.basic.BasicTheme.Companion.basicCheckBoxBehavior
import io.nacular.doodle.theme.basic.BasicTheme.Companion.basicLabelBehavior
import io.nacular.doodle.utils.Resizer
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import org.kodein.di.instance
import org.w3c.dom.HTMLElement

class LabelDemo(fonts: FontLoader, themeManager: ThemeManager, theme: DynamicTheme, demo: Demo): Application {
    init {
        GlobalScope.launch {
            val font = fonts {
                family = DEFAULT_FONT_FAMILY
                size   = DEFAULT_FONT_SIZE
            }

            themeManager.selected = theme

            val label = Label("Some Text").apply {
                this.font = font
                size = Size(200, 40)

                Resizer(this).apply { movable = false }
            }

            demo(label, ControlDrawer().apply {
                val background = CheckBox("Background").apply {
                    size = Size(16)
                    selectedChanged += { _,_,selected ->
                        label.backgroundColor = when {
                            selected -> Color.Lightgray
                            else     -> null
                        }
                    }
                }

                val fitText = CheckBox("Fit Text").apply {
                    selected = label.fitText.isNotEmpty()
                    size     = Size(16)
                    selectedChanged += { _,_,selected ->
                        label.fitText = when {
                            selected -> setOf(TextFit.Width, TextFit.Height)
                            else     -> emptySet()
                        }
                    }
                }

                children += listOf(background, fitText)
            })
        }
    }

    override fun shutdown() {}

    companion object {
        private val appModules = demoAppModules + listOf(basicLabelBehavior(), basicCheckBoxBehavior(), FontModule)

        operator fun invoke(root: HTMLElement) = application(root, modules = appModules) {
            LabelDemo(instance(), instance(), instance(), instance())
        }
    }
}

This file imports some other stuff, but you can ignore that and see how it pulls in just the behaviors it needs at the end with the invoke method it exposes. This code is from the Label demo in the docs. It is used as part of an external class that creates this app using LabelDemo.invoke(...).

[bodiam]

I'm sorry, I had no idea you were on a holiday. This isn't that urgent at all, but thank you for providing this example, I will try it out! Appreciate it!

[bodiam]

Now we're getting somewhere:

import io.nacular.doodle.application.Application
import io.nacular.doodle.application.Modules.Companion.FontModule
import io.nacular.doodle.application.application
import io.nacular.doodle.controls.buttons.PushButton
import io.nacular.doodle.controls.panels.GridPanel
import io.nacular.doodle.controls.text.Label
import io.nacular.doodle.core.*
import io.nacular.doodle.drawing.FontLoader
import io.nacular.doodle.geometry.Size
import io.nacular.doodle.layout.constrain
import io.nacular.doodle.theme.ThemeManager
import io.nacular.doodle.theme.adhoc.DynamicTheme
import io.nacular.doodle.theme.basic.BasicTheme.Companion.basicButtonBehavior
import io.nacular.doodle.theme.basic.BasicTheme.Companion.basicLabelBehavior
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import org.kodein.di.instance

class GridPanelLabelDemo(
    display: Display,
    fonts: FontLoader,
    themeManager: ThemeManager,
    theme: DynamicTheme
) : Application {
    init {
        GlobalScope.launch {
            val font = fonts {
                family = "Arial"
                size = 20
            }

            themeManager.selected = theme

            val label = Label("Some Text").apply {
                this.font = font
                size = Size(300, 40)
            }

            val button = PushButton("Some Button").apply {
                this.font = font
                size = Size(200, 40)

                fired += {
                    println("Hey! That Hurt!")
                }
            }

            val views: Iterable<View> = listOf(label, button)

            val buttonSpacing =  10.0
            val outputHeight  = 100.0

            val gridPanel = GridPanel().apply {
                add(label, 0, 0);
                add(button, 1, 0);

                verticalSpacing   = { buttonSpacing }
                horizontalSpacing = { buttonSpacing }
            }

            display += listOf(gridPanel)

            // Place output outside grid so the height can be more easily controlled
            val constraints = constrain(gridPanel) { grid ->
                grid.top      = parent.bottom + buttonSpacing
                grid.left     = parent.left
                grid.right    = parent.right
                grid.bottom   = parent.bottom
            }
            
            display += views

            display.layout = object: Layout by constraints {
                // Set total height to grid panel's ideal width and height, plus output and spacing
                override fun idealSize(container: PositionableContainer, default: Size?) = gridPanel.idealSize?.let {
                    Size(it.width, it.height + outputHeight + buttonSpacing)
                }
            }
        }
    }

    override fun shutdown() {}
}


fun main() {
    val appModules = listOf(basicLabelBehavior(), basicButtonBehavior(), FontModule)

    application(modules = appModules) {
        GridPanelLabelDemo(instance(), instance(), instance(), instance())
    }
}

Current issues however:

• I can't get clicking of the button to work. I can't click on it, even though I have a fired property on it.

Any tips?

[pusolito]

You need to add the PointerModule to the list of modules (same goes for keyboard). But you don't need to consume it in the app; it'll be activated once it is included in your modules list. This again helps reduce JS bundle size for the rare case where an app doesn't need the pointer.

Your code also has some issues:

• It tries to add the label and button to the Display after adding them to the grid
• It sets the grid's top to the Display's bottom plus an offset

Here're some changes that make it do what you want:

import io.nacular.doodle.application.application
import io.nacular.doodle.application.Application
import io.nacular.doodle.application.Modules.Companion.FontModule
import io.nacular.doodle.application.Modules.Companion.PointerModule
import io.nacular.doodle.controls.buttons.PushButton
import io.nacular.doodle.controls.panels.GridPanel
import io.nacular.doodle.controls.text.Label
import io.nacular.doodle.core.Display
import io.nacular.doodle.core.plusAssign
import io.nacular.doodle.coroutines.Dispatchers
import io.nacular.doodle.drawing.FontLoader
import io.nacular.doodle.geometry.Size
import io.nacular.doodle.layout.constrain
import io.nacular.doodle.layout.fill
import io.nacular.doodle.theme.ThemeManager
import io.nacular.doodle.theme.adhoc.DynamicTheme
import io.nacular.doodle.theme.basic.BasicTheme.Companion.basicButtonBehavior
import io.nacular.doodle.theme.basic.BasicTheme.Companion.basicLabelBehavior
import kotlinx.coroutines.CoroutineDispatcher
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.SupervisorJob
import kotlinx.coroutines.launch
import org.kodein.di.instance

class GridPanelLabelDemo(
        display     : Display,
        uiDispatcher: CoroutineDispatcher, 
        fonts       : FontLoader,
        themeManager: ThemeManager,
        theme       : DynamicTheme
) : Application {
    init {
        // Avoid using GlobalScope
        val appScope = CoroutineScope(SupervisorJob() + Dispatchers.Default)

        // Ensure display work happens on UI thread
        appScope.launch(uiDispatcher) {
            val arial = fonts {
                family = "Arial"
                size   = 20
            }

            themeManager.selected = theme

            val label  = Label("Some Text") // Label will fit text by default
            val button = PushButton("Some Button").apply {
                size = Size(200, 40)

                fired += {
                    println("Hey! That Hurt!")
                }
            }

            val gridPanel = GridPanel().apply {
                add(label,  0, 0);
                add(button, 1, 0);

                val spacing       = 10.0
                font              = arial // Will apply to all descendants that do not specify a Font
                verticalSpacing   = { spacing }
                horizontalSpacing = { spacing }
            }

            display += gridPanel

            display.layout = constrain(gridPanel) { grid ->
                fill(grid) // makes the grid fill its parent, equivalent to the following

//                grid.top    = parent.top
//                grid.left   = parent.left
//                grid.right  = parent.right
//                grid.bottom = parent.bottom
            }
        }
    }

    override fun shutdown() {}
}


fun main() {
    val appModules = listOf(basicLabelBehavior(), basicButtonBehavior(), FontModule, PointerModule)

    application(modules = appModules) {
        GridPanelLabelDemo(instance(), Dispatchers.UI, instance(), instance(), instance())
    }
}

[pusolito]

The latest release brings proper support for forms. This should cover your use case.