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;



How to create design layout by using vaadin designer free trial? – vaadin designer

Good Day!  Anih agah babeh (How are you grandfather) – Bidayuh Greeting sentence

1.) Create Vaadin 7 Project. – Project name : responsive_vaadin

  • must have :
    • installing the plugin vaadin in eclipse mars.
    • Java version 8.
    • Maven. ( for Compiling the source code and add the dependencies)
    • Server – Wildfly 10.
    • Can get the source code still version beta from my github

2.) After created, convert it to maven project. Right click project > configure > convert to Maven Project

3.) Open your pom.xml , add some setting below – can go refer to the myGithub page to see the pom.xml:


  • 1 – src/main/java – your source java class
  • 2 – src/main/resources – your resources file – such as html or properties
  • 3 – src/test/java – your unit class folder
  • 4 – com.fndong.ui – package src for UI
  • 5 – – your UI java class.

4.) Create your layout following design below, by create new design layout by using vaadin designer free trial:responsive_2.jpg

5.) Add our First main layout.

  • Create HTML layout – mainLayoutDesign.html
  • Create the com.fndong.main in your src/main/resources.
  • Right click project > others > Vaadin Design > Next > add name “mainLayoutDesign” > Template “Vertical Layout” ( – According to “Graph Layout vaadin” which layout number 1 for the parent layout ) > Finish.


  • If you want to edit with drag drop vaadin designer also acceptable , but i’ll using manually by added code layout manually like below: (mainLayoutDesign.html)
  • set the style-name also for every components. ( style name – with pink color)

<!doctype html>
<meta charset=”UTF-8″ name=”design-properties” content=”{&quot;RULERS_VISIBLE&quot;:true,&quot;GUIDELINES_VISIBLE&quot;:false,&quot;SNAP_TO_OBJECTS&quot;:true,&quot;SNAP_TO_GRID&quot;:true,&quot;SNAPPING_DISTANCE&quot;:10,&quot;JAVA_SOURCES_ROOT&quot;:&quot;src/main/java&quot;,&quot;THEME&quot;:&quot;mytheme&quot;}”>
<meta charset=”UTF-8″ name=”package-mapping” content=”x:com.fndong.ui”>
<vaadin-vertical-layout style-name=”root-layout” responsive id=”root-layout” width=”1440px” _id=”root_layout”>
<vaadin-css-layout style-name=”top” width=”1440px” height=”80px” _id=”top_area”>
<vaadin-label width=”79px” plain-text _id=”lblheader“>
My Layout Header
<vaadin-horizontal-layout style-name=”sidebar_contain” size-full _id=”sidebar_contain” :expand>
<vaadin-css-layout style-name=”menu” width=”160px” height-full _id=”side_menu”>
<vaadin-button style-name=”v-button” plain-text _id=”btnMenu1“>
Menu 1
<vaadin-button style-name=”v-button” plain-text _id=”btnMenu2″>
Menu 2
<vaadin-button style-name=”v-button” plain-text _id=”btnMenu3″>
Menu 3
<vaadin-vertical-layout style-name=”content-area” size-full _id=”content_area” :expand>
<vaadin-label style-name=”h2” size-auto plain-text>
Lorem Ipsum
<vaadin-label plain-text _id=”lbl_paragraph”></vaadin-label>
<vaadin-form-layout style-name=”form” width=”100px” _id=”form_layout“>
<vaadin-text-field caption=”Name : ” style-name=”textfield” _id=”txtname”></vaadin-text-field>
<vaadin-text-field caption=”Last Name : ” style-name=”textfield” _id=”txtlastname”></vaadin-text-field>
<vaadin-text-field caption=”Email” style-name=”textfield” _id=”txtEmail”></vaadin-text-field>
<vaadin-button style-name=”button” plain-text _id=”btnSubmit”>

6.) Lets try Drag Drop, just search the palette , you can drag drop the components.



7.) Add new class for adding action for the components. (


-. set the spacing and margin for the variable of component layout for class

public mainLayoutView(){
lbl_paragraph.setCaption(“<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<p>“);

// HorizontalLayout sidebar_contain

// CssLayout side_menu

// verticalLayout content_area

// HorizontalLayout sidebar_contain
sidebar_contain.setExpandRatio(side_menu, 2);
sidebar_contain.setExpandRatio(content_area, 8);

  • Question : what is the reason we used method .setExpandRatio()?
  • Answer : The content_area takes up all available space in the HorizontalLayout.

8.) create the custom theme.

-. Right click on your /webapp/VAADIN/theme  > Vaadin Theme > add the name “mytheme


-. Results, automatically created 3 files scss (SASS file)


-. Add the style in mytheme.scss ( add your custom style)

@import “../valo/valo.scss”;

@mixin mytheme {
@include valo;

.root-layout {
$root-background-color: #ffffff;
$main-color: #5AAAFA;
$menu-color: #5AAAFA;
$header-label-font-size: 1.618em;
background-color: $root-background-color;

.top {
padding: 0px 15px 0 15px;
vertical-align: middle;
height: 80px;
left: 0;
right: 0;

// Insert your own theme rules here

.menu {
left: 0;
width: 20%;
bottom: 0;

.v-button {
                   cursor: pointer;

     .form {
          border: 1px solid black;


-. Result in the browser after restart server wildfly.



Selamat Mencuba …..