Vaadin Accordian Component

Vaadin Accordian Component

Accordion is a multicomponent container similar to TabSheet, except that the “tabs” are arranged vertically. Clicking on a tab opens its contained component in the space between the tab and the next one. You can use an Accordion identically to a TabSheet, which it actually inherits. .. more info vaadin page

1.) Here are the Source Codes that inspired from valo-demo site:



import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.Accordion;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
import net.fndong.ui.Menu;

 * @author fndong Sep 15, 2016
public class AccordianForm extends VerticalLayout implements View {
    /* (non-Javadoc)
     * @see com.vaadin.navigator.View#enter(com.vaadin.navigator.ViewChangeListener.ViewChangeEvent)
    private HorizontalLayout hLayout;
    private VerticalLayout vLayout;
    private Label lbltitle;
    private Accordion accFaith;
    public void enter(ViewChangeEvent event) {
    // constructor()
    public AccordianForm(){
    // init for the vaadin components
    private void initComponents(){
        vLayout = new  VerticalLayout();
        vLayout.addComponent(new Menu());
        hLayout = new HorizontalLayout();
        lbltitle = new Label("Form Accordians");
        // set Accordian
        accFaith = getAccordianFaith();
// accordian set values on Tab Accordian
    Accordion getAccordianFaith(){
        TestIcon testIcon = new TestIcon(0);
        Accordion acESV = new Accordion();
        acESV.setCaption("Bible ESV Online");
        acESV.addTab(new VerticalLayout() {
                addComponent(new Label(
                        "The Genealogy of Jesus Christ : 1The book of the genealogy of Jesus Christ, the son of David, the son of Abraham. 2 Abraham was the father of Isaac, and Isaac the father of Jacob, and Jacob the father of Judah and his brothers, 3and Judah the father of Perez and Zerah by Tamar, and Perez the father of Hezron, and Hezron the father of Ram, 4and Ram the father of Amminadab, and Amminadab the father of Nahshon, and Nahshon the father of Salmon, 5 and Salmon the father of Boaz by Rahab, and Boaz the father of Obed by Ruth, and Obed the father of Jesse, 6and Jesse the father of David the king. "));
        }, "Mathew 1 ", testIcon.get());
        acESV.addTab(new VerticalLayout() {
                addComponent(new Label(
                        "The Visit of the Wise Men : 1Now after Jesus was born in Bethlehem of Judea in the days of Herod the king, behold, wise men from the east came to Jerusalem, 2saying, Where is he who has been born king of the Jews? For we saw his star when it rose and have come to worship him. 3When Herod the king heard this, he was troubled, and all Jerusalem with him; 4and assembling all the chief priests and scribes of the people, he inquired of them where the Christ was to be born. 5They told him, In Bethlehem of Judea, for so it is written by the prophet: "));
        }, "Mathew 2 ", testIcon.get());
        acESV.addTab(new VerticalLayout() {
                addComponent(new Label(
                        "John the Baptist Prepares the Way : 1In those days John the Baptist came preaching in the wilderness of Judea, 2 Repent, for the kingdom of heaven is at hand. 3For this is he who was spoken of by the prophet Isaiah when he said,The voice of one crying in the wilderness: Prepare the way of the Lord; make his paths straight."));
        }, "Mathew 3 ", testIcon.get());
        return acESV;
    // vaadin addcomponent to layout
    private void initLayout(){


 2.) ( from vaadin source code )


import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.vaadin.server.FontAwesome;
import com.vaadin.server.Resource;
import com.vaadin.server.ThemeResource;

 * @since
 * @author Vaadin Ltd
public class TestIcon {

    int iconCount = 0;

    public TestIcon(int startIndex) {
        iconCount = startIndex;

    public Resource get() {
        return get(false, 32);

    public Resource get(boolean isImage) {
        return get(isImage, 32);

    public Resource get(boolean isImage, int imageSize) {
        if (!isImage) {
            if (++iconCount >= ICONS.size()) {
                iconCount = 0;
            return ICONS.get(iconCount);
        return new ThemeResource("../runo/icons/" + imageSize + "/document.png");

    static List ICONS = Collections.unmodifiableList(Arrays



Selamat Mencuba / Give A try / Agi idup must try…

How to integrate Vaadin with javascript – add JavaScript Connector?

How to integrate Vaadin with javascript – add JavaScript Connector?


  1. ( – to viewing our components & call the javascript method from java –
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.CssLayout;

public class JSIntegrationComp  extends CssLayout implements View{
	MyComponent mycomponent = new MyComponent();
	public JSIntegrationComp() {

		// Process a value input by the user from the client-side
		mycomponent = new MyComponent();    


import com.vaadin.ui.AbstractJavaScriptComponent;

@JavaScript({"mylibrary.js", "mycomponent-connector.js"})
public class MyComponent extends AbstractJavaScriptComponent {
     protected MyComponentState getState() {
         return (MyComponentState) super.getState();


public class MyComponentState extends JavaScriptComponentState {
     private static final long serialVersionUID = 1L;

 4. mycomponent-connector.js (javascript)

window.net_fndong_js_MyComponent =
function() {
    var mycomponent = new mylibrary.Comp(this.getElement());

    this.onStateChange = function(e) {};


5. mylibrary.js (javascript)

var mylibrary = mylibrary || {};

mylibrary.Comp = function(element) {
    element.innerHTML = "hello";};




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


Vaadin – set Age into TextField from value Date – Popup PopupDateField

Vaadin – set Age value into TextField from value Date – Popup PopupDateField


1). First, create Simple vaadin project , just right click create Vaadin 7 Project (Maven).

2).  Class , declare Components PopupDateField – dateBirth , and TextField – ageField.

3). Source code

public class MyUI extends UI {
 private PopupDateField dateBirth;
 private String strAge;
 private TextField ageField;
 private FormLayout formLayout;
 private FieldGroup binder;
//Have an item
PropertysetItem item;
 protected void init(VaadinRequest vaadinRequest) {
 final VerticalLayout layout = new VerticalLayout();
 formLayout = new FormLayout();
 // date PopupField
 dateBirth = new PopupDateField("Date :");
 // age textField
 ageField = new TextField("Age :");

 @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
 @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
 public static class MyUIServlet extends VaadinServlet {
 public void listenerComponent() {
 item = new PropertysetItem();
 dateBirth.addValueChangeListener(new PopupDateField.ValueChangeListener() {
 public void valueChange(ValueChangeEvent event) {
 strAge = getPersonAge((Date)event.getProperty().getValue());
 System.out.println(" ageBirthDate : " + strAge); 
 item.addItemProperty("age", new ObjectProperty<String>(strAge));
 binder = new FieldGroup(item);
 binder.bind(ageField, "age");
 public String getPersonAge(Date birthDate) {
 // convert date to stringDateFormat MM-dd-yyyy
 SimpleDateFormat formatter = new SimpleDateFormat("MM-dd-yyyy");
 // convert simpleDateFormat to string
 String dateStr = formatter.format(birthDate);
 System.out.println("date String : " + dateStr);
 Calendar birth = new GregorianCalendar();
 Calendar today = new GregorianCalendar();
 int age = 0;
 int factor = 0; 
//calculate age
 try {

 Date birthDt = new SimpleDateFormat("MM-dd-yyyy").parse(dateStr);
 Date currentDate = new Date(); //current date
 // check if birthday has been celebrated this year
 if(today.get(Calendar.DAY_OF_YEAR) < birth.get(Calendar.DAY_OF_YEAR)) {
 factor = -1;
 //birthday not celebrated
 age = today.get(Calendar.YEAR) - birth.get(Calendar.YEAR) + factor;
 } catch (ParseException e) {

 return String.valueOf(age);


4) I Used Simple Binding to bind to Field Age TextField from value Date Component PopupDateField .

PropertysetItem item = new PropertysetItem();
// remove item property by Object id "age"
item.addItemProperty("age", new ObjectProperty<String>(strAge));
FieldGroup  binder = new FieldGroup(item);
binder.bind(ageField, "age");

Vaadin – How to Add java.util.Map key & values into ComboBox Component

Good Day!

  1. Title : Vaadin – How to Add java.util.Map key & values into ComboBox Component:


1). Method to return ComboBox values

private ComboBox setComboMonthsValue() {
        String monthname = “”;
        Map<Integer, String> mapMonths = new HashMap<Integer, String>();
        ComboBox monthsCombo = new ComboBox(“months“); // combox box months
        GregorianCalendar today = new GregorianCalendar();
        int todayMonth = today.get(java.util.Calendar.MONTH); // jan = 0, not 1
        // set default value based on month today.
        mapMonths = getMonthsName();

        if (mapMonths != null) {
                for (Entry<Integer, String> enumEntry : mapMonths.entrySet()) {
                  if (enumEntry.getValue() != null) {
         return monthsCombo;

    // return map, generate record for months
    private Map<Integer, String> getMonthsName(){
        Map<Integer, String> map = new HashMap<Integer, String>();
        String[] monthslist = new DateFormatSymbols().getMonths();
        System.out.println(” count : ” + monthslist.length);
        for (int i = 0; i < monthslist.length; i++) {
          String month = monthslist[i];
          map.put(i, month);
        return map;

2. To add Default value in Combobox, by using method .setInputPrompt(“value”):



Vaadin – How to make Alignment combobox with button.

Good Day!

Title : Vaadin – How to make Alignment combobox with button.

1.The button are not align with combobox , where button are hanging on the top if we using HorizontalLayout , so my solution is using  GridLayout.

  • added with : grid.setComponentAlignment(btnSubmit,Alignment.BOTTOM_LEFT);

2. From Image  A to Image B.

3. Image A



4. Image B


5. The source Code.

protected void init(VaadinRequest request) {

final VerticalLayout layout = new VerticalLayout();

GridLayout grid = new GridLayout(3,1);
Button btnSubmit = new Button(“Submit“);
combofirst= createFirstComboSelect(); // state combobox
combosecond = createSecondComboSelect(); // district combobox
/***java.lang.IllegalArgumentException: Component must be added to layout before using setComponentAlignment() ***/

6. Full source codes project can get from My Github.



vaadin – How to add try catch exception inside addValueChangeListener with lambda expression

Good Day !

Title : Vaadin – How to add try catch exception inside addValueChangeListener with lambda expression (java 8)

Example :

// add lambda expression – java 8
(ValueChangeEvent) -> {
           try {
objectsDistrict.addAll(findDistrictSelection((RefState)                                        ValueChangeEvent.getProperty().getValue()));
   } catch (Exception e) {
 // TODO: handle exception

                “Error on Selection Records“,

2) The Above codes are from Source code tutorial – vaadin – How to create a second Combobox which is dependent from the First Combobox.

vaadin – How to create a second Combobox which is dependent from the First Combobox.

Good Day!

Title : vaadin – How to create a second Combobox which is dependent from the First Combobox.


1) Here are the tutorial , “How To create a second Combobox which is dependent from the First Combobox . The purpose, when I selected an item in the first Combobox – State value, i want the items in the district combo (Second Combobox) are going to change their value based on the state (First Combobox).

2) create a class –

public class VaadinComboBox extends UI {
 private BeanItemContainer<RefDistrict> objectsDistrict = new BeanItemContainer<>(RefDistrict.class);
 private ComboBox combofirst; // first combobox
 private ComboBox combosecond; // Second combobox
 private List<RefState> refState = new ArrayList<RefState>();
 private List<RefDistrict> refDistrict = new ArrayList<RefDistrict>();
 public static class Servlet extends VaadinServlet {

 protected void init(VaadinRequest request) {
 final VerticalLayout layout = new VerticalLayout();
 combofirst= createFirstComboSelect(); // state combobox
 combosecond = createSecondComboSelect(); // district combobox
 private ComboBox createFirstComboSelect() { // state combobox
 refState = getRefState(); // get records state dummy
 BeanItemContainer<RefState> objects = new BeanItemContainer<>(RefState.class, refState);
 ComboBox s = new ComboBox("RefState", objects);
 s.addValueChangeListener(new ValueChangeListener() {
 public void valueChange(ValueChangeEvent event) {
 objectsDistrict.addAll( findDistrictSelection((RefState) event.getProperty().getValue()));
     return s;
 private ComboBox createSecondComboSelect() {
 ComboBox districtcombo = new ComboBox("refDistrict"); // combox box District with objects values
 // Allow adding new items
 return districtcombo;
 private List<RefDistrict> findDistrictSelection(RefState refstate) {
 refDistrict = getRefDistrict(); // get all records district
 BeanItemContainer<RefDistrict> objects = new BeanItemContainer<>(RefDistrict.class, refDistrict);
 List<RefDistrict> objDistrictList = new ArrayList<RefDistrict>();
 // how to get value same with the selection of object by filtering string refstate id
 Object[] ids = objects.getItemIds().toArray();
 System.out.println("length 1 : " + ids.length);
 for (int i = 0; i < ids.length; i++) {
          if (((RefDistrict) ids[i]).getStateid().equals(refstate.getStateid())) {
          System.out.println("scedule id : " + ((RefDistrict) ids[i]).getRefdistrictid()); // district id
          System.out.println("schedule name : " + ((RefDistrict) ids[i]).getRefdistrictname()); // district name
          objDistrictList.add((RefDistrict) ids[i]);
 return objDistrictList;
 // dummy data from state using entity refState
 private List<RefState> getRefState() {
 refState.add(new RefState(new String("01"),"Malaysia"));
 refState.add(new RefState(new String("02"),"Indonesia"));
 refState.add(new RefState(new String("03"),"Vietnam"));
 refState.add(new RefState(new String("04"),"Singapore"));
 refState.add(new RefState(new String("05"),"Thailand"));
 return refState;
 //dummy data from District using entity refDistrict
 private List<RefDistrict> getRefDistrict() {
 refDistrict.add(new RefDistrict(new String("01"),"Kuala Lumpur","01"));
 refDistrict.add(new RefDistrict(new String("02"),"Bandung","02"));
 refDistrict.add(new RefDistrict(new String("03"),"Ho chi Minch city","03"));
 refDistrict.add(new RefDistrict(new String("04"),"Jurong","04"));
 refDistrict.add(new RefDistrict(new String("05"),"Phuket","05"));
 return refDistrict;

3. For More info how its began :!/thread/13374868 , How to create a second Combobox which is dependent from the First Combobox.

4. To Download the Source code Project , please Download button below.


5. you can update the code using new java expression (lambda expression – java 8 ) for valueChangeListener : 

// add lambda expression – java 8
s.addValueChangeListener((ValueChangeListener) (ValueChangeEvent) ->
objectsDistrict.addAll(findDistrictSelection((RefState) ValueChangeEvent.getProperty().getValue())));

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)