How to add javascript in vaadin (Simple Example)?

How to add javascript in vaadin? – 13/9/2016 – My study notes:

  1. Simple example with Javascript on Vaadin .


  1. First create the class that will call javascript:
import com.vaadin.annotations.JavaScript;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.server.Page;
import com.vaadin.ui.Button;

@JavaScript({ "vaadin://js/test.js" })
public class LayoutForFormView extends LayoutForForm implements View {
private Button button;
    public void enter(ViewChangeEvent event) {
        // TODO Auto-generated method stub

    public LayoutForFormView() {
        // TODO Auto-generated constructor stub

         String test = "Test Only";
         button = new Button("Show Me!");
            button.addClickListener(new Button.ClickListener() {
                public void buttonClick(ClickEvent event) {
               .execute("showmessage('" + "test" + "')");

  • vaadin://js/test.js

-. To make sure the location of javascript can be called, make sure to add vaadin , it will automatically referring from this path:


Javascript : test.js

function showmessage(message)
    alert("you should see this : "+message);


How to set the default value into combobox – Vaadin

How to set default value into combobox :

Here is my source codes, i would like make the values that passing from method getGender():

// generate Genders into combobox value
Collection<GenderTable> gendertable= getRecordGenders();
Container container= new ListContainer<RefGenders>(GenderTable.class, genderTable);

noid_textfield.addValueChangeListener(new ValueChangeListener() {
public void valueChange(ValueChangeEvent event) {
String gender = getGenders(); // returning gender code , F - Female or M - Male
String genderName = "";

genderName ="Female";
genderName ="Male";

GenderTable genderTable = new RefGenders(gender, genderName);
PropertysetItem item = new ProppertysetItme();
FieldGroup binder = new FieldGroup(item);
binder(combobox_gender , "GenderTable");

The result at display page , the Combobox Gender – “combobox_gender” are gray. and its not bind property. any solution that can fix this.


Solution 1 :

1.using gender_combo.setValue(gender_combo.getItemIds().iterator().next()); – to make a default value for ComboBox .


Solution 2 :

2. using below code by iterate the combobox value.

public void valueChange(ValueChangeEvent event) {
 Iterator<GenderTable> iterator = (Iterator<GenderTable>) 
              while(iterator.hasNext()) {
                     GenderTable obj =;
// getGender - get return value , F - Female , M - Male


How to create combobox with hardcode data – vaadin?

Good Day!

How to create combobox with hardcode data – vaadin?


  • At your java class , add the component for the combobox, the java class called –

import com.fndong.vaadin.domain.RefCountry;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.ComboBox;
import java.util.List;
import java.util.ArrayList;

public class CountryForm extends GridLayout implements View {

private ComboBox selectCounty;

private List<RefCountry> refcountries = new ArrayList<RefCountry>();

// init content
public void initContent() {

selectCounty = createCountrySelect();

// method Create Country select
private ComboBox createCountrySelect() {
refcountries = getRefcountries();
BeanItemContainer<RefCountry> objects = new BeanItemContainer<>(RefCountry.class, refcountries);

ComboBox s = new ComboBox(“Country“, objects);

return s;

// data from countryname using entity RefCountry, hardcode the country name
private List<RefCountry> getRefcountries() {
// List<RefCountry> refcountries = new ArrayList<RefCountry>();
refcountries.add(new RefCountry(new Integer(“1“),”Malaysia“));
refcountries.add(new RefCountry(new Integer(“2“),”Indonesia“));
refcountries.add(new RefCountry(new Integer(“3“),”Singapore“));
refcountries.add(new RefCountry(new Integer(“4“),”Thailand“));
return refcountries;


  • Entity class –

public final class RefCountry {
private Integer countryid;
private String countryname;

public RefCountry(Integer countryid,String countryname) {
this.countryid = countryid;
this.countryname = countryname;

// Getter and setter

 Aba Maya , cuba taye (Bidayuh) – Don’t be shy, try it first ( english) 


How to add words in paragraph with color (Label Component)- vaadin Designer?

Good Day!

How to add words in paragraph with color (Label Component)- vaadin Designer?

-> Add below paragraph ** with red color. Example:

* Field is mandatory to be entered

** One of the fields is mandatory to be entered

-> I used Vaadin designer for .HTML file, I used Label Component

-> The solutions is by using vaadin property value.


How to create Scrollbar in vaadin layout – Vaadin Designer?

Good Day!

How to create Scrollbar in vaadin layout?


  • For creating a scrollbar for vaadin layout , layout such vertical, horizontal and csslayout  will not work.
  • For applying scrollbar on vertical, horizontal and csslayout you need to add Panel Component.
  • You can add the scrollbar by using Valo Theme style. Choose valo scroll-divider.



  • or , If really want to add scrollbar on layout vertical, horizontal and csslayout, we need to add style on css.

.vLayoutScroll > div{
overflow: auto !important;

How to add Valo theme for my HTML file – style valo – Vaadin Designer.

Good Day!

How to add Valo theme for my HTML file – style valo – Vaadin Designer.


  • To add Valo theme for textfield html – vaadin designer and add the style from valo theme by click button … (StyleName property) .
  • Then Choose the style for textfield.


  • Add ->
  • Click OK button.
  • Results.


How to make Textbox inline with its caption for Horizontal layout or vertical layout – vaadin Designer ?

Good Day!

Vaadin Designer – How to make Textbox inline with its caption for Horizontal layout or vertical layout – vaadin Designer ?

  • I have created form for registration form, and i using form layout , i have difficult to change the caption to inline, First Image To the second image.





  • The solutions by using two ways:
  1. Using FormLayout inside HorizontalLayout or VerticalLayout. – inside HTML.

<vaadin-horizontal-layout style-name=”viewheader” spacing responsive width-full _id=”horizontalMainLayout”>
<vaadin-form-layout size-auto>
<vaadin-text-field caption=”Title : ” style-name=”fields inline-icon” responsive _id=”txtTitle”></vaadin-text-field>

2. Second solutions is by added the style in css.

  • html

<vaadin-text-field caption=”Title : ” style-name=”fields inline-icon inline-label” responsive _id=”txtTitle”>

  • css

display: inline-block;