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…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s