Skip to main content

Form controls

Doodle has many built-in controls that cover a range of data types for forms. These controls come as functions that return FieldVisualizers. They are all found within the io.nacular.doodle.controls.form package.

info

Usage of these controls still require explicit installation of Behaviors. Those shown below use behaviors from the BasicTheme orNativeTheme (Web, Desktop).

Boolean

check

info

Type Boolean, View: CheckBox

Check-box that represents a true/false value.

switch

info

Type Boolean, View: Switch

Switch that represents a true/false value.

T (interpolatable)

slider

info

Type T, View: Slider<T>

Slider that represents a bounded value.

circularSlider

info

Type T, View: CircularSlider<T>

Slider that represents a bounded value.

ClosedRange<T> (interpolatable)

rangeSlider

info

Type ClosedRange<T>, View: RangeSlider<T>

Slider that represents a bounded range.

circularRangeSlider

info

Type ClosedRange<T>, View: CircularRangeSlider<T>

Slider that represents a bounded range.

T

textField

info

Type T, View: TextField

Text field that can generate a value of types T.

radioList

info

Type T, View: container of RadioButton`s

List of buttons that requires selection of a single item.

singleChoiceList

info

Type T, View: List<T>

List that requires selection of a single item.

spinButton

info

Type T, View: SpinButton

SpinButton that that requires selection of a single item.

selectBox

info

Type T, View: SelectBox

SelectBox that that requires selection of a single item.

form

info

Type T, View: Form

Sub-form that allows entering of arbitrary fields that will be mapped to a single, strongly typed result T.

T?

optionalRadioList

info

Type T?, View: container of RadioButton`s

List of buttons that allows selection of zero or one item.

optionalSingleChoiceList

info

Type T?, View: List<T>

List that allows selection of zero or one item.

optionalSelectBox

info

Type T?, View: SelectBox

SelectBox that that allows selection of zero or one item.

List<T>

list

info

Type List<T>, View: List<T>

List that allows selection of zero or more items.

checkList

info

Type List<T>, View: container of CheckBoxes

List of check-boxes that allows selection of zero or more items.

switchList

info

Type List<T>, View: Container of Switches

List of switches that allows selection of zero or more items.

LocalFile

file

info

Type LocalFile, View: FileSelector

FileSelector that represents a local file.

List<LocalFile>

files

info

Type List<LocalFile>, View: FileSelector

FileSelector that represents a list of local files.

Structure

labeled

info

Type T, View: Container

Wrapper around a control that adds name and other labeling.

scrolling

info

Type T, View: ScrollPanel

ScrollPanel wrapper for a control that allows scrolling.

framed

info

Type T, View: Container

Container wrapper for a control that can be styled and laid out.

Custom Controls

Doodle makes it easy to create custom form controls. You simply implement FieldVisualizer or use the field DSL. Each control is a simple binding between a Field, its initial value and a View.

Here is an example of how you might add a boolean field with some text.

package forms import io.nacular.doodle.controls.buttons.Switch import io.nacular.doodle.controls.form.Form.Valid import io.nacular.doodle.controls.form.field import io.nacular.doodle.controls.form.ifValid import io.nacular.doodle.controls.text.Label import io.nacular.doodle.core.container import io.nacular.doodle.geometry.Size import io.nacular.doodle.layout.constraints.constrain import io.nacular.doodle.text.StyledText import io.nacular.doodle.utils.Dimension.Height import io.nacular.doodle.utils.TextAlignment.Start //sampleStart fun switchField(text: StyledText) = field { container { focusable = false // ensure wrapping container isn't focusable this += Label(text).apply { fitText = setOf(Height) textAlignment = Start } this += Switch().apply { initial.ifValid { selected = it } // adopt initial value if present selectedChanged += { _,_,_ -> state = Valid(selected) // update field as switch changes } size = Size(40, 25) state = Valid(selected) // ensure field is valid at beginning } layout = constrain(children[0], children[1]) { label, switch -> switch.left eq parent.right - 10 - switch.width.readOnly switch.centerY eq parent.centerY label.left eq 10 label.right eq switch.left - 10 label.centerY eq switch.centerY } } } //sampleEnd

Here's an example of a simple color strip.