I’m trying to get just a bare minimum doodle app r...

# doodle

[snowe]

I’m trying to get just a bare minimum doodle app running, but the tutorials are all incredibly complex. For someone that hasn’t touched component based dev like this in over a decade, it’s all impossible to understand. Are there any tutorials that just explain setting up something like a split view with text boxes? I mean, like bare bones, no element styling, nothing. Even just for the JVM so I can understand what in the world is going on. Even looking at the tutorials on the website vs the tutorial code it’s different and so I can’t understand what the docs are trying to say because when I go to run the actual code it’s different.

I have a partially running app, but all it does is create two views next to each other and color them differently. Trying to add a textField to the views does nothing. No logs about errors, it just doesn’t work. And trying to use the constrain function also doesn’t seem to work. I have to set up the layout manually with rectangles.

[snowe]

here’s the code if you want to look at it, but honestly I’d rather have a simple (extremely simple to learn literally the basics) tutorial to learn from than to need to ask for help here.

doodleTest.zip

[snowe]

the current tutorials are just difficult enough that I cannot make any headway with them.

[Nick]

hey Tyler. thanks for sharing the feedback on the tutorials not being as helpful. i'll work on getting some more basic ones in place. in the mean time. let me see how i can help.

have you taken a look at the Troubleshoot section of the docs? it talks about some of the common issues you might face when views don't show up. many components (i.e. TextField ) actually delegate all rendering to a Behavior. this is by design so that you can fully customize them. this applies to other common controls like buttons as well. you can fix this by either applying a theme that supports your control or using a behavior directly on your view. if you go the theme route (which should be simpler for a basic app), you'll need to install the nativeTextFieldBehavior module when launching your app, and install the theme that provides as follows.

class MyApp(display: Display, theme: Theme, themeManager: ThemeManager): Application {
    init {
        themeManager.selected = theme
        
        val textField = TextField("test")
        
        display += view {
            size = Size(100, 50)
            
            + textField
            
            layout = constrain(textField) {
                it.width eq parent.width - 4
                it.height eq 20
                it.center eq parent.center
            }
        }
    }
    
    override fun shutdown() {
        // no-op
    }
}

fun main() {
    // register native text field behavior
    // this automatically makes a theme/theme manager available for injection
    // all TextFields in your app will default to having the native behavior installed,
    // which is required for them to render
    application (modules = listOf(nativeTextFieldBehavior())) {
        MyApp(
            display      = instance(),
            theme        = instance(), // inject theme 
            themeManager = instance()  // inject theme manager
        )
    }
}

[Nick]

by the way, the theme/module stuff works the way it does to ensure smaller app sizes for web. that is, themes and many modules are optional to avoid including code that your app might not need.

[snowe]

I do not know how I missed the troubleshoot section. I’m very sorry. And I will also try to contribute simpler tutorials after I learn :D

looking at this troubleshoot section it literally describes my exact issue haha. I even drew a circle like it demonstrates 😂

Thank you very much for the help. And very sorry if my post came across as ungrateful or upset. I was just in a rush to head out somewhere and now reading it back it sounds super bitchy. sorry about that.

[Nick]

no worries. glad the docs helped. and i would welcome any contributions you have to make the tutorials or docs better.

[snowe]

success!. thank you very much. I’ll learn a bit more and then see what I can contribute. 🙏🏽

[snowe]

@Nick, so I don’t spend too much time on this and get nowhere, am I correct when I say that there is no equivalent to AWT’s TextArea or HTML’s <textarea> in doodle? I searched and couldn’t find it, and then thought maybe I could implement it myself but that is looking like it might not be easily possible.

[snowe]

or alternatively a JTextPane or JEditorPane.

[snowe]

managed to get a swing jtextarea ‘working’ by modifying the doodle source code, but it’s throwing a bunch of ClassCastExceptions 😬

Exception in thread "AWT-EventQueue-0" java.lang.ClassCastException: class org.jetbrains.skiko.SkiaLayer$1 cannot be cast to class javax.swing.JComponent (org.jetbrains.skiko.SkiaLayer$1 is in unnamed module of loader 'app'; javax.swing.JComponent is in module java.desktop of loader 'bootstrap')
	at java.desktop/javax.swing.ToolTipManager.initiateToolTip(ToolTipManager.java:460)
	at java.desktop/javax.swing.ToolTipManager$MoveBeforeEnterListener.mouseMoved(ToolTipManager.java:762)
	at java.desktop/java.awt.AWTEventMulticaster.mouseMoved(AWTEventMulticaster.java:338)
	at java.desktop/java.awt.Component.processMouseMotionEvent(Component.java:6666)
	at

[snowe]

oh. those errors were coming from the PointerModule… 🤔

[snowe]

fixed it by disabling all toolTipText = "" in the doodle code.

[Nick]

hmm. you mean at https://github.com/nacular/doodle/blob/8f233877212a1f078796e3d77ef8feb60bf54481/Desktop/src/jvmMain/kotlin/io/nacular/doodle/system/impl/PointerInputServiceImpl.kt#L145? strange that this causes that exception.

[Nick]

as you said, there’s no rich text entry component right now. that’s b/c i’d like to have parity on platforms for something like that, but i haven’t tackled that yet.

one possibility is to have a way of embedding AWT/Swing components into Views. this sort of thing exists for web already: https://nacular.github.io/doodle/docs/platform_specific/web.

[snowe]

no, the changes were in PointerInputManager that I made. I can’t send a patch in here because apparently the file endings are all CR so any change I make looks like I changed the entire file. The changes are like this, but more.

[snowe]

and hm. what parity do you need for TextArea? maybe like autocorrect?

[Nick]

hmm, maybe not much if the big difference is multi-line support. i assumed you were thinking about rich text and other things like embedded images.

[snowe]

the only two things I want are multi-line support and coloring of text, but the coloring of text would be from TextPane, not TextArea, so while I’m still working through everything, just the multiline support is really necessary.