TextMetrics

Label

TextVisualizer

BasicTabbedPanelBehavior

basicTabbedPanelBehavior

Theme

ThemeManager

BasicTabbedPanelBehavior

TabbedPanelView

size = Size(500, 300)

children += panel

layout = constrain(panel, fill)

invoke

textVisualizer(mapping[item] ?: "Unknown")

StyledText

install basicTabbedPanelBehavior as a module

application

View

ScrollPanelVisualizer

ScrollPanel

Thanks for all the help.

I do want to use the TabbedPanel as my app menu, with its "main" TabView declaring a nested "content"
container holding a LeftView, CenterView, RightView, and a FooterView.

The tabbed panel is working pretty well, and resizing itself as I resize the browser window.

The main tab view's nested container views (left, center, right, footer) also render properly (size-wise) when I refresh
the browser, but the nested views do not re-render as I resize the browser window.

Is this problem a limitation of "BasicTabbedPanelBehavior"?  Is it possible to get the nested views to re-size themselves?

ScrollPanelVisualizer

ScrollPanel

this

this

edges

display.width

parent

display

org.gradle.parallel         = true

gradle.properties

SNAPSHOT

master

master

PopupMenu

PopupManager

PopupMenu

simpleTextButtonRenderer(textMetrics) { button, canvas ->
    when {
        button.model.pointerOver -> canvas.rect(bounds.atOrigin, color = Color.Cyan)
        else -> {
            !!!! Draw a filled rect instead of a line here !!!!
            canvas.line(Point(0.0, 0.5), Point(width, 0.5), stroke = Stroke(Color.Lightgray))
        }
    }
    canvas.text(button.text, at = textPosition(button, button.text), fill = Color.Black.paint, font = font)
}

acceptsThemes

false

Photos

appScope.launch {

listOf("tetons.jpg", "earth.jpg").forEachIndexed { index, file ->

images.load(file)?.let { FixedAspectPhoto(it) }?.let {

import(it, display.center + Point(y = index * 50.0))

}

}

}

FixedAspectPhoto

fun loadImageInMainScope() = mainScope.launch {

image = images.load(imageSource)

println("Image: ${image.toString()}")

fixedAspectPhotoView = image?.let { FixedAspectPhoto(it) }

println("FixedAspectPhoto: ${fixedAspectPhotoView.toString()}")

photo = image?.let {

Photo(it).apply {

size = Size(100, 200)

}

}

println("photo: ${photo.toString()}")

}

photo

layout = contstrain(photo, fill)

photo

class LazyPhoto(pendingImage: Deferred<Image>): View() {
    lateinit var image: Image

    init {
        pendingImage.callOnCompleted {
            image = it
            rerender()
        }
    }

    override fun render(canvas: Canvas) {
        if (!::image.isInitialized) return // or render a place holder

        canvas.image(image)
    }
}

val lazyImage = LazyImage(mainScope.async { images.load("foo.jpg")!! })

@OptIn(ExperimentalCoroutinesApi::class)
fun Deferred<Image>.callOnCompleted(block: (Image) -> Unit) {
    job.invokeOnCompletion {
        if (it == null) {
            block(this.getCompleted())
        }
    }
}

invokeOnCompletion

LazyPhotoView

launch {
    listOf(
        "United Kingdom" to "images/197374.svg",
        "United States"  to "images/197484.svg",
        "France"         to "images/197560.svg",
        "Germany"        to "images/197571.svg",
        "Spain"          to "images/197593.svg",
        // ...
        ).
    sortedBy { it.first }.map { (name, path) ->
        imageLoader.load(path)?.let { image ->
            model.add(Country(name, image))
        }
    }
}

class RingView(ring: Ring): View() {
    fun update(ring: Ring, index: Int, selected: Boolean) {}
}

class RingVisualizer(): ItemVisualizer<Ring, IndexedItem> {
    override fun invoke(item: Ring, previous: View?, context: IndexedItem): View = when (previous) {
        is RingView -> previous.apply { update(ring = item, index = context.index, selected = context.selected) }
        else           -> RingView(ring = item, index = context.index, selected = context.selected)
    }
}

SmallRingView

SmallRingView

previous

List

SmallRingView

previous

SmallRingView

update

list[index]

pendingImage

DynamicList<SmallRing>

LazyPhotoView

LazyPhotoView

renderNow()

setSelection

viewport

media queries

list.selected

DynamicList().apply {

...

println("pre  selection -> $selection")

setSelection(setOf(0))

println("post selection ->$selection")

}

apply { setSelection(setOf(0))

selectionChanged += }

import io.nacular.doodle.docs.utils.DEFAULT_FONT_FAMILIES
import io.nacular.doodle.docs.utils.DEFAULT_FONT_SIZE
import io.nacular.doodle.docs.utils.blueClick
import io.nacular.doodle.docs.utils.clickView

nacular.doodle.docs.utils

init {
            val menu = view {  }
            val new  = view {  }

            // on event
            updateView(new)

            // Only constrain menu since you need to add/remove constraint
            // for the other view dynamically
            layout = constrain(menu) { menuBounds ->
                <http://menuBounds.top|menuBounds.top>    eq 10
                menuBounds.right  eq parent.right - 10
                menuBounds.left   eq parent.right - 100
                menuBounds.height eq 100
            }
        }

        private fun updateView(new: View) {
            val oldView = children.firstOrNull()

            when (oldView) {
                null -> children    += new
                else -> children[0]  = new
            }

            // Only do this if you want to continue using constraint layout
            (layout as ConstraintLayout).let { layout ->
                oldView?.let {
                    layout.unconstrain(it, fill)
                }

                layout.constrain(new, fill)
            }
        }

when

unconstrain

constrain

layout = simpleLayout { container ->
                val pageBonds  = container.children[0]
                val menuBounds = container.children[1]

                pageBonds.bounds = Rectangle(size = container.size)

                menuBounds.bounds = Rectangle(
                    x      = container.width - 100,
                    y      = 10.0,
                    width  = 90.0,
                    height = 100.0
                )
            }

// Only constrain menu since you need to add/remove constraint for the other view dynamically.
children += listOf(menu)
layout = constrain(menu) { menuBounds ->
    <http://menuBounds.top|menuBounds.top> eq 10
    menuBounds.right eq parent.right - 10
    menuBounds.left eq parent.right - 100
    menuBounds.height eq 100
}
// When I try this, neither the home page nor menu are displayed, even after
// calling updateView(currentPage) on the line above  children += listOf(menu)

Hyperlink

Font

font

columnSpan

override fun render(canvas: Canvas) {
    image?.let { canvas.image(image = it, destination = Rectangle(0, 0, 30, 30)) }
}

GridPanel

MutableSharedFlow

kotlin.js.compiler=ir

gradle.properties

doodleVersion=0.9.1-DEBUG

doodleVersion=0.9.1

selectionChanged

MutableSharedFlow<BaseProductSelectEvent>

Container()

AbstractProductContainer: IProductContainer:  Container() {    }

CompleteProductContainer

AbstractProductContainer

CompleteProductContainer

val product:  IProduct

val accessory: IProductAccessory

Container()

MainScope

transform

camera

cameraChanged

transformChanged

LazyPhoto

transform

camera

val form = Form { this(
    +field0,
    +field1,
    10 to field2,
    +field3,
    …
    +fieldN
    onInvalid = { … },
) { (a,b,c,…,n) -> // destructure given list
   
} }.apply {
   …
}

vararg

String

val subForm = form { this(
        initial.map { it.name } to labeled("Name") { textField() },
        initial.map { it.age  } to labeled("Age" ) { textField(encoder = ToStringIntEncoder) },
        onInvalid = {}
    ) { name, age ->
        Person(name, age) // construct person when valid
    } }

Form { this(
    + labeled("Text"  ) { textField()                             },
    + labeled("Number") { textField(encoder = ToStringIntEncoder) },
    Person("Jack", 55) to subForm,
    // ...
    onInvalid = {}
) { text: String, number: Int, person: Person ->
    // called each time all fields are updated with valid data
} }

val subForm = form { this( ...

var subForm = form<PasswordConfirmation> {
    form {
        this(
            initial.map { it.password } to labeled("Password") { textField() },
            initial.map { it.confirmPassword } to labeled("ConfirmPassword") { textField() },
            onInvalid = {
                // ??
            }
        ) { password, confirmPassword ->
            PasswordConfirmation(password, confirmPassword)
        }
    }
}

field

initial

state

initial.ifValid { … } // set initial value to your text-field after validating

state = Valid(“validated password”) // set the field to valid if both text fields match

state = Invalid() // if password invalid or they don’t match

val form = Form { this(
    true to switchField("Wasn't that "..boldFont("easy").."?"),
    onInvalid = {}
) { bool: Boolean ->
    println("Form valid: $bool")
} }

LabelConfig

help

validateCpf

TextFieldConfig

textField

textField

fun <T> LabeledConfig.textFieldConfig(placeHolder: String = "", errorText: StyledText? = null): TextFieldConfig<T>.() -> Unit = {
    val initialHelperText = help.styledText
    help.font             = smallFont
    textField.placeHolder = placeHolder
    onValid               = { help.styledText = initialHelperText }
    onInvalid             = {
        if (!textField.hasFocus) {
            help.styledText = errorText ?: it.message?.let { Red(it) } ?: help.styledText
        }
}

+labeled("Name", help = "3+ letters") {
    textField(Regex(".{3,}"), config = textFieldConfig("Enter your name")) // pass adapter that sets help text when field state changes
}

TextFieldConfig

LabelConfig

help

> RE: You won’t need to refer to TextFieldConfig in your case of course. You should just take a LabeledConfig into your custom field directly.

fun <T> LabeledConfig.cpfFieldConfig

LabeledConfig

TextFieldConfig

this

this

LabeledConfig

labelConfig.helper.styledText = …

state

commonMain

mockk

jvmTest

jvmTest

commonMain

jvmMain

jvmTest

commonMain

jvmMain

real-rest-service

jvmTest

commonMain

jvmMain

jvmTest

val fontLoader: FontLoader = _FontModule_.???

FieldInfo

stateChanged

TextField

TextField

fieldInfo.state

@Test fun `form field`() {
    var state         = Valid("Foo")
    val stateListener = slot<ChangeObserver<Field<String>>>()
    val fieldInfo = mockk<FieldInfo<String>>().apply {
        every { this@apply.state        } answers { state }
        every { this@apply.stateChanged } returns mockk<ChangeObservers<Field<String>>>().apply {
            every { this@apply += capture(stateListener) } answers {}
        }
    }

    val config     = mockk<LabeledConfig>()
    val emailField = emailField(config)

    val view = emailField(fieldInfo) as TextField
    
    // validate view
    
    verify { fieldInfo.state = any() } // validate state is set properly
    
    // update state and notify your field
    state = Valid("Foo")
    stateListener.captured(mockk<Field<String>>().apply {
        every { state } returns state
    })
    
    // validate that it does the right stuff etc.
    expect("foo") { view.text }
}

// validate view

stateChanged

if (stateListener.isCaptured) {
    // ...
}

every

every { this@apply.stateChanged } returns mockk<ChangeObservers<Field<String>>>().apply {
    every { this@apply += capture(stateListener) } answers {}
}

FieldInfo.stateChanged +=

stateChanged

this += TextField()._apply_ *{*

initial._ifValid_ *{*

text = *it*

}

// Notifies of changes to the Field's state.

stateChanged += *{*

if (*it*.state is Form.Valid<String>) {

labelConfig.help.styledText = defaultHelpMessage()

} else {

_println_("no op")

}

}

...

textChanged += *{* _, _, new *-> ... }*

focusChanged += *{* _, _, hasFocus *-> ... }*

...

}

FieldInfo.stateChanged

FieldInfo.stateChanged +=

stateChanged

Form

FieldInfo

stateChanged += *{*

_println_("EmailControl.stateChanged was called")

if (*it*.state is Form.Valid<String>) {

labelConfig.help.styledText = defaultHelpMessage()

} else {

_println_("no op")

}

}

// You'd have to call it yourself in the test (if it's captured).

// This event lets your field know when the underlying state changes.

if (stateListener.isCaptured) {

_println_("YES: stateListener.isCaptured")

fieldInfo.stateChanged = ?    // How do I call fieldInfo.stateChanged?  What value to I set it to?

} else {

_println_("NO: stateListener.isCaptured")

}

stateListener.captured

ChangeObserver<Form.Field<String>>

stateListener.captured(field)

mockk<Field<String>>

var state = Valid("Foo")
val field = mockk<Field<String>>().apply {
    every { this@apply.state } answers { state }
}
val stateListener = slot<ChangeObserver<Field<String>>>()
val fieldInfo = mockk<FieldInfo<String>>().apply {
    every { this@apply.field        } returns field
    every { this@apply.state        } answers { field.state }
    every { this@apply.initial      } returns Valid("Start")
    every { this@apply.stateChanged } returns mockk<ChangeObservers<Field<String>>>().apply {
        every { this@apply += capture(stateListener) } answers {}
    }
}

val config = mockk<LabeledConfig>()
val emailField = emailField(config)

val textField = (emailField(fieldInfo) as Container).first() as TextField

// validate textField

expect("Start") { textField.text }

// update state and notify your field
state = Valid("Foo")

if (stateListener.isCaptured) {
    stateListener.captured(field) // <========== call listener w/ underlying field

    verify { fieldInfo.state = any() } // validate state is set properly
}

// validate that it does the right stuff etc.
expect("Foo") { textField.text }

_verify_(exactly = 1) *{* onValid(blank) *}*

initial

_verify_(exactly = 1) *{* onValid(blank) *}*

_verify_(exactly = 0) *{* onValid(blank) *}*

verify(exactly=0){ onValid(any()) }

FieldVisualizer

UserPasswordControl

TextField.purpose

FieldVisualizer

FieldVisualizer<String>

EmailControl

internal

String

fun passwordField(): FieldVisualizer<String> = labeled("Password", "") {
    var password  = ""
    var secondary = ""
    val checkMatch = {
        if (secondary.isNotBlank() && password != secondary) {
            help.styledText = Red.invoke("Password does not match")
        }
    }

    field {
        Form { this(
            + textField(Regex(".+")) {
                textField.placeHolder = "Enter password"
                onValid   = { password = it; if (!textField.hasFocus) checkMatch() }
                onInvalid = { if (!textField.hasFocus) help.styledText = Color.Red("Invalid Password") }
            },
            + textField(Regex(".+")) {
                textField.placeHolder = "Re-enter password"
                onValid = { secondary = it; if (!textField.hasFocus) checkMatch() }
            },
            onInvalid = {}
        ) { password, verified ->
            state = when (password) {
                verified -> Valid(password).also { this@labeled.help.text = "" }
                else     -> Invalid()
            }
        } }.apply {
            layout = verticalLayout(this, spacing = 12.0, itemHeight = 32.0)
        }
    }
}

focusable = false

.apply { focusable = false }

container

layout

textField

NamedConfig

NamedConfig

labeled

NamedConfig

LabeledConfig

this

textField.placeHolder = "Confirme sua senha"

textField.mask = '*'

textField.text = textField.displayText

textField.purpose = TextField.Purpose.Password