Interactions

Button

button()
button("Label")
button("Label", HAND_O_RIGHT)
button("Click me", onClick = { show("Clicked") })
button("Click me", HAND_O_RIGHT, { show("Clicked") })

Native Button

nativeButton()
nativeButton("Label")
nativeButton("Click me", { show("Clicked") })
link("Label")
link("Click me", ExternalResource("http://vaadin.com"))
link("Click me - blank", ExternalResource("http://vaadin.com"), "_blank", 640, 480)

Progress Bar

progressBar(0.5F)
progressBar(ObjectProperty<Float>(0.5F))

Menu Bar

menuBar {
    isAutoOpen = true
    menuItem("Icon and click listener", FOLDER, onClick = { show("Clicked $it") }) {
        menuItem("Disabled", enabled = false)
        menuItem("Checkable", checkable = true, checked = true)
        separator()
        menuItem("Simple")
        menuItem("Icon", FOLDER)
        separator()
        menuItem("Simple")
    }
    menuItem("Checkable", checkable = true)
    menuItem("Disabled", enabled = false)
}

Notification

button("Humanized", onClick = { show("Humanized message") })
button("Warn", onClick = { warn("Warning message") })
button("Error", onClick = { error("Error message") })
button("Tray", onClick = { tray("Tray message at ${System.currentTimeMillis()}") })

Text Data Input

Text Field

val stringProp = ObjectProperty<String>("From property")
textField()
textField(dataSource = stringProp)
textField("No value")
textField("From property", stringProp)
textField("From value", "From value")

Text Area

val stringProp = ObjectProperty<String>("From property")
textArea()
textArea(dataSource = stringProp)
textArea("No value")
textArea("From property", stringProp)
textArea("From value", "From value")

Rich Text Area

val stringProp = ObjectProperty<String>("From property")
richTextArea()
richTextArea(dataSource = stringProp)
richTextArea("No value")
richTextArea("From property", stringProp)
richTextArea("From value", "From value")

Password Field

val stringProp = ObjectProperty<String>("From property")
passwordField()
passwordField(dataSource = stringProp)
passwordField("No value")
passwordField("From property", stringProp)
passwordField("From value", "From value")

Date Data Input

Date Field

val dateProp = ObjectProperty<Date>(Date())
dateField()
dateField(dataSource = dateProp)
dateField("No value")
dateField("From property", dateProp)
dateField("From value", Date())

Inline Date Field

val dateProp = ObjectProperty<Date>(Date())
inlineDateField()
inlineDateField(dataSource = dateProp)
inlineDateField("No value")
inlineDateField("From property", dateProp)
inlineDateField("From value", Date())

Calendar

val dateProp = ObjectProperty<Date>(Date())
calendar()
calendar(eventProvider = BasicEventProvider())
calendar("No event provider")
calendar("With provider provided", BasicEventProvider().apply {
    addEvent(BasicEvent("Event name", "Event description", Date()))
})

Multiple Data Input

Combo-box

val list = listOf("First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh")
val dataSource = IndexedContainer(list)
comboBox()
comboBox(dataSource = dataSource)
comboBox("No value")
comboBox("From collection", list)
comboBox("From property", dataSource)

Native Select

val list = listOf("First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh")
val dataSource = IndexedContainer(list)
nativeSelect()
nativeSelect(dataSource = dataSource)
nativeSelect("No value")
nativeSelect("From collection", list)
nativeSelect("From property", dataSource)

List Select

val list = listOf("First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh")
val dataSource = IndexedContainer(list)
listSelect()
listSelect(dataSource = dataSource)
listSelect("No value")
listSelect("From collection", list)
listSelect("From property", dataSource)

Twin Columns Select

val list = listOf("First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh")
val dataSource = IndexedContainer(list)
twinColSelect()
twinColSelect(dataSource = dataSource)
twinColSelect("No value")
twinColSelect("From collection", list)
twinColSelect("From property", dataSource)

Options Group

val list = listOf("First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh")
val dataSource = IndexedContainer(list)
optionGroup()
optionGroup(dataSource = dataSource)
optionGroup("No value")
optionGroup("From collection", list)
optionGroup("From property", dataSource)

Other Data Input

Checkbox

checkBox()
checkBox("No value")
checkBox("From value", true)
checkBox("From property", ObjectProperty<Boolean>(true))

Slider

slider(min = 1, max = 10, resolution = 2)
slider("From integers", 1, 10, 2)
slider(min = 1.00, max = 10.00)
slider("From doubles", 1.00, 10.00)

Upload

val receiver = Upload.Receiver { name, type ->
    ByteArrayOutputStream().apply {
        show("File $name received", "MIME type is $type")
    }
}
upload(receiver)
upload("Caption", receiver)

Color Picker

colorPicker()
colorPicker("Default initial color")
colorPicker(initialColor = RED)
colorPicker("Initial color set", RED)

Color Picker Area

colorPickerArea()
colorPickerArea("Default initial color")
colorPickerArea(initialColor = RED)
colorPickerArea("Initial color set", RED)

Data Presentation

Label

val stringProp = ObjectProperty<String>("<strong>From</strong> <em>property")
label("<strong>From</strong> <em>value")
label("<strong>From</strong> <em>value", HTML)
label(stringProp)
label(stringProp, HTML)
html("<strong>From</strong> <em>value")
html(stringProp)

Image

image()
image("No image")
classpathImage(source = "/vaadin-logo.png")
classpathImage("Vaadin logo", "/vaadin-logo.png")

Browser Frame

frame()
frame("No resource")
classpathFrame(source = "/vaadin-logo.png")
classpathFrame("Vaadin logo", "/vaadin-logo.png")

Structure and Hierarchy

Panel

panel {
    horizontalLayout(margin = true) { label("Inside a panel") }
}

Split Panel

horizontalSplitPanel {
    height(200F, PIXELS)
    verticalSplitPanel {
        label("1")
        label("2")
    }
    verticalSplitPanel {
        label("3")
        label("4")
    }
}

Tab Sheet

tabSheet {
    tab("Button", HAND_O_RIGHT) {
        button("Click me")
    }
    tab("Native button", HAND_O_RIGHT) {
        nativeButton("Click me")
    }
    tab("Link", LINK) {
        link("Click me")
    }
}

Accordion

accordion {
    tab("Button", HAND_O_RIGHT) {
        button("Click me")
    }
    tab("Native button", HAND_O_RIGHT) {
        nativeButton("Click me")
    }
    tab("Link", LINK) {
        link("Click me")
    }
}

Popup View

horizontalLayout(true, true) {
    popupView("Component defined inside the body") {
        verticalLayout {
            textField("Component defined inside the body")
        }
    }
    val content = object: PopupView.Content {
        override fun getPopupComponent() = VerticalLayout(
                TextField("Component defined outside the body")
        )
        override fun getMinimizedValueAsHTML() = "Component defined outside the body"
    }
    popupView(content)
}