Available components are demoed in the sampler. They are listed here for ease of use.
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
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)
}