Vaadin - คอมโพเนนต์ส่วนติดต่อผู้ใช้

Vaadin ใช้เพื่อสร้างคอมโพเนนต์ส่วนติดต่อผู้ใช้ที่หลากหลายในเว็บเพจ ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับคอมโพเนนต์อินเทอร์เฟซผู้ใช้ต่างๆที่ Vaadin แนะนำเพื่อรักษาหน้าเว็บที่มีคุณภาพดี ส่วนแรกของบทจะกล่าวถึงส่วนประกอบพื้นฐานของเว็บและการใช้งานในขณะที่ส่วนที่สองพูดถึงการผูกส่วนประกอบในแบ็กเอนด์

ส่วนประกอบของฟิลด์

ฟิลด์เป็นส่วนประกอบของเว็บที่ผู้ใช้สามารถจัดการผ่านการดำเนินการของ IO Vaadin ขึ้นอยู่กับ JAVA ดังนั้นใน Vaadin ส่วนประกอบของเว็บทั้งหมดจึงมีคลาสที่ใช้งานพร้อมกับฟังก์ชันห้องสมุด Vaadin ภาพที่แสดงด้านล่างแสดงให้เห็นว่าส่วนประกอบของฟิลด์ต่างๆได้รับการสืบทอดมาจากคลาสฐานที่ชื่ออย่างไรAbstractField<T>.

โปรดทราบว่าโมดูลทั้งหมดเหล่านี้คล้ายกับโมดูลในการพัฒนา UI ใน Vaadin เรามีคลาสแยกกันเพื่อใช้งานแต่ละคลาส คุณจะได้เรียนรู้โดยละเอียดเกี่ยวกับสิ่งเหล่านี้ในบทต่อ ๆ ไป

ฉลาก

ป้ายกำกับใช้เพื่อกล่าวถึงข้อความที่ไม่สามารถแก้ไขได้ในหน้าเว็บ ตัวอย่างด้านล่างแสดงวิธีใช้ฉลากในแอปพลิเคชันของเรา โปรดทราบว่าในตัวอย่างที่กำหนดเราได้สร้างคลาส JAVA และตั้งชื่อเป็นLabelExam.javanterface และเราจะแทนที่มัน init() วิธีการเรียกใช้

package com.MyTutorials.MyFirstApp;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

//extending UI
public class LabelExam extends UI {
   @Override
   protected void init(VaadinRequest request) {
      final HorizontalLayout hLayout = new HorizontalLayout(); //creating a Layout
      Label l1 = new Label(" Welcome to the World of Vaadin Tutorials.");
      Label l2 = new Label("\n Happy Learning .." ,ContentMode.PREFORMATTED); // Content Mode tells JVM to interpret the String mentioned in the label. Hence label2 will be printed in next line because of “\n”.
      hLayout.addComponents(l1,l2); // adding labels to layout
      setContent(hLayout); // setting the layout as a content of the web page.
   }
   // Code to control URL
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   
   @VaadinServletConfiguration(ui = LabelExam.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

ในตัวอย่างข้างต้นเราได้สร้างป้ายกำกับสองป้ายและในตอนท้ายเราได้เพิ่มป้ายกำกับนั้นในเค้าโครงของเรา คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเค้าโครงในบทต่อ ๆ ไป VaadinServletได้รับการดำเนินการเพื่อควบคุม URL อย่างไรก็ตามในโครงการในชีวิตจริงคุณไม่จำเป็นต้องกำหนด servlet ในทุกแอปพลิเคชัน java เนื่องจากจะเชื่อมโยงกัน เลือกไฟล์และคลิกRun on Server และรหัสที่ระบุด้านบนจะให้ผลลัพธ์ดังที่แสดงด้านล่าง

ลิงค์

ลิงก์มีประโยชน์ในการนำลิงก์ภายนอกไปยังเว็บไซต์อื่น คลาสนี้ทำงานคล้ายกับแท็กไฮเปอร์ลิงก์ของ HTML ทุกประการ ในตัวอย่างด้านล่างนี้เราจะใช้ลิงก์เพื่อเปลี่ยนเส้นทางผู้ใช้ของเราไปยังเว็บไซต์อื่นโดยขึ้นอยู่กับเหตุการณ์ที่เรียกClick here. ตอนนี้แก้ไขไฟล์MyUI.java คลาสดังที่แสดงด้านล่าง

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      
      final HorizontalLayout hLayout = new HorizontalLayout();
      
      Link link = new Link("Click Me",new ExternalResource("https://www.tutorialspoint.com/"));
      hLayout.addComponent(link);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

ในตัวอย่างข้างต้นเราได้สร้างไฮเปอร์ลิงก์ภายนอกไปยังเว็บไซต์อื่น มันจะให้ผลลัพธ์ต่อไปนี้แก่เราในเบราว์เซอร์

เมื่อผู้ใช้คลิกลิงก์จะถูกเปลี่ยนเส้นทางไปที่www.tutorialspoint.com

ช่องข้อความ

ส่วนนี้พูดถึงวิธีสร้างฟิลด์ข้อความโดยใช้ Vaadin build ในคลาส สำหรับสิ่งนี้ให้อัปเดตคลาส MyUI.java ของคุณตามที่แสดงด้านล่าง

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;

import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      Label l1 = new Label("Example of TextField--\n ",ContentMode.PREFORMATTED);
      TextField text = new TextField();
      text.setValue("----");
      layout.addComponents(l1,text);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

ตอนนี้รีเฟรชโครงการของคุณและสร้างมันให้สะอาด คุณสามารถสังเกตผลลัพธ์ที่แสดงด้านล่างในเบราว์เซอร์ของคุณ อย่าลืมรีสตาร์ทเบราว์เซอร์ของคุณเพื่อรับการเปลี่ยนแปลงล่าสุด

พื้นที่ข้อความ

ส่วนนี้จะอธิบายวิธีสร้างพื้นที่ข้อความในเบราว์เซอร์โดยใช้คลาสที่กำหนดไว้ล่วงหน้าของ Vaadin สังเกตโค้ดที่ระบุด้านล่างเช่น

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;

import com.vaadin.ui.Alignment;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      TextArea text = new TextArea();
      text.setValue(" I am the example of Text Area in Vaadin");
      hLayout.addComponent(text);
      hLayout.setComponentAlignment(text,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

โค้ดด้านบนจะให้ผลลัพธ์ด้านล่างในเบราว์เซอร์ -

วันและเวลา

คุณสามารถใช้เครื่องมือเลือกวันที่เพื่อเติมข้อมูลวันที่และเวลาในเบราว์เซอร์ สังเกตโค้ดตัวอย่างที่ระบุด้านล่าง ที่นี่เราได้ใช้คลาสวันที่ที่กำหนดไว้ล่วงหน้าของ Vaadin เพื่อเติมข้อมูลวันที่และเวลาในเบราว์เซอร์

package com.example.myapplication;

import java.time.LocalDate;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;

import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.DateField;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {
}

ในตัวอย่างข้างต้นเราได้ใช้ฟังก์ชันวันที่ที่กำหนดไว้ล่วงหน้าของ Vaadin เพื่อเติมข้อมูลองค์ประกอบวันที่ในหน้าเว็บ รหัสนี้จะให้ผลลัพธ์ตามที่แสดงในภาพหน้าจอด้านล่าง -

ปุ่ม

รหัสด้านล่างนี้จะอธิบายวิธีการใช้ปุ่มในหน้าเว็บ ที่นี่เราได้ใช้ปุ่มชื่อClick Me.

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;

import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.TextArea;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      TextArea text = new TextArea();
      text.setValue("Please enter some Value");
      Button b = new Button("Click Me");
      hLayout.addComponent(text);
      hLayout.addComponent(b);
      hLayout.setComponentAlignment(text,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(b,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

โค้ดด้านบนจะให้ผลลัพธ์ตามที่แสดงด้านล่าง

กล่องกาเครื่องหมาย

Vaadin ยังมีคลาส inbuilt เพื่อสร้างช่องทำเครื่องหมายในหน้าเว็บ ในตัวอย่างด้านล่างเราจะสร้างช่องทำเครื่องหมายโดยใช้ Vaadin rich web component

package com.example.myapplication;

import java.time.LocalDate;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;

import com.vaadin.ui.CheckBox;
import com.vaadin.ui.DateField;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout layout = new VerticalLayout();
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Example of Check Box\n",ContentMode.PREFORMATTED);
      CheckBox chk1 = new CheckBox("Option1");
      CheckBox chk2 = new CheckBox("Option2");
      CheckBox chk3 = new CheckBox("Option3");
      hLayout.addComponents(l1,chk1,chk2,chk3);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk2,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(chk3,Alignment.BOTTOM_CENTER);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

รหัสที่ระบุข้างต้นจะให้ผลลัพธ์ในเบราว์เซอร์ดังที่แสดงด้านล่าง คุณยังสามารถสร้างกล่องกาเครื่องหมายจำนวนเท่าใดก็ได้สำหรับผู้ใช้ ในบทต่อ ๆ ไปคุณจะได้เรียนรู้เกี่ยวกับวิธีต่างๆในการเติมช่องทำเครื่องหมายในหน้าเว็บ

การผูกข้อมูล

ส่วนนี้อธิบายวิธีการผูกข้อมูลจากส่วนหน้าไปยังส่วนหลังโดยใช้ Vaadin เป็นกรอบงาน โปรดทราบว่ารหัสที่แสดงด้านล่างรับข้อมูลจากส่วนหน้าพร้อมช่องข้อมูล ให้เราสร้างคลาส bean เพื่อผูกฟิลด์ข้อมูล สร้างคลาส java และตั้งชื่อเป็นEmployee.java.

package com.example.myapplication;

public class EmployeeBean {
   
   private String name = "";
   private String Email = " ";
   public EmployeeBean() {
      super();
      // TODO Auto-generated constructor stub
   }
   public EmployeeBean(String name, String email) {
      super();
      this.name = name;
      Email = email;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      System.out.println("asdassd");
      this.name = name;
   }
   public String getEmail() {
      return Email;
   }
   public void setEmail(String email) {
      Email = email; 
   }
}

เราต้องปรับเปลี่ยน MyUI.javaคลาสเพื่อผูกฟิลด์ข้อมูลของคลาสพนักงาน สังเกตโค้ดต่อไปนี้สำหรับคลาสที่แก้ไข

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.PropertyId;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Binder;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Alignment;

import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      EmployeeBean bean = new EmployeeBean("TutorialsPoint","[email protected]");
      Binder<EmployeeBean> binder = new Binder  <EmployeeBean>();
      final FormLayout form = new FormLayout();
      Label l1 = new Label("Please fill Below Form");
      Label labelName = new Label("Name--");
      TextField name = new TextField();
      binder.bind(name,EmployeeBean::getName,EmployeeBean::setName);
      Label labelEmail = new Label("Email---");
      TextField email = new TextField();
      binder.bind(email,EmployeeBean::getEmail,EmployeeBean::setEmail);
      Button button = new Button("Process..");
      form.addComponents(l1,labelName,name,labelEmail,email,button);
      setContent(form);
      binder.setBean(bean); //auto binding using in built method
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {
   }
}

รหัสที่ระบุข้างต้นจะให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

ตาราง

ตารางเป็นหนึ่งในคุณสมบัติที่ใช้งานได้มากที่สุดของ Vaadin เซลล์ตารางสามารถรวมข้อมูลประเภทใดก็ได้ องค์ประกอบของตารางได้รับการพัฒนาเพื่อแสดงข้อมูลทั้งหมดในรูปแบบตารางที่จัดเป็นโครงสร้างแถวและคอลัมน์ อย่างไรก็ตามเนื่องจากคุณลักษณะตารางการเผยแพร่ Vaadin 8 เป็นแบบสัมบูรณ์และคุณลักษณะเดียวกันนี้ได้รับการแก้ไขด้วยองค์ประกอบ Grid หากคุณยังคงใช้ Vaadin เวอร์ชันเก่าคุณมีอิสระที่จะใช้ตารางดังที่แสดงในรูปแบบที่ระบุด้านล่าง

/* Create the table with a caption. */
Table table = new Table("This is my Table");
/* Define the names and data types of columns.
* The "default value" parameter is meaningless here. */

table.addContainerProperty("First Name", String.class, null);
table.addContainerProperty("Last Name", String.class, null);
table.addContainerProperty("Year", Integer.class, null);

/* Add a few items in the table. */
table.addItem(new Object[] {"Nicolaus","Copernicus",new Integer(1473)}, new Integer(1));
table.addItem(new Object[] {"Tycho", "Brahe", new Integer(1546)}, new Integer(2));
table.addItem(new Object[] {"Giordano","Bruno", new Integer(1548)}, new Integer(3));
table.addItem(new Object[] {"Galileo", "Galilei", new Integer(1564)}, new Integer(4));
table.addItem(new Object[] {"Johannes","Kepler", new Integer(1571)}, new Integer(5));
table.addItem(new Object[] {"Isaac", "Newton", new Integer(1643)}, new Integer(6));

ในบทที่กำลังจะมาถึง GRIDคุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการสร้างตารางและการเติมข้อมูลโดยใช้สิ่งเดียวกัน

ต้นไม้

Tree Component ใช้เพื่อเติมข้อมูลโครงสร้างไดเร็กทอรีในเว็บไซต์ ในส่วนนี้คุณจะได้เรียนรู้วิธีการเติมข้อมูลต้นไม้ในเว็บเพจโดยใช้เฟรมเวิร์ก Vaadin อัปเดตที่จำเป็นMyUI คลาสดังที่แสดงด้านล่าง

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Component;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      VerticalLayout layout = new VerticalLayout();
      Tree<String> tree = new Tree<>();
      TreeData<String> treeData =tree.getTreeData();

      // Couple of childless root items
      treeData.addItem(null, "Option1");
      treeData.addItem("Option1", "Child1");
      treeData.addItem(null, "Option2");
      treeData.addItem("Option2", "Child2");

      // Items with hierarchy
      treeData.addItem(null, "Option3");
      treeData.addItem("Option3", "Child3");
      layout.addComponent(tree);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้ในเบราว์เซอร์

แถบเมนู

ส่วนประกอบ Menu Bar ช่วยให้เราสร้างเมนูในเว็บไซต์ สามารถเป็นแบบไดนามิกและซ้อนกันได้ ค้นหาตัวอย่างด้านล่างที่เราได้สร้างแถบเมนูที่ซ้อนกันโดยใช้ส่วนประกอบ Vaadin Menu Bar ปรับเปลี่ยนชั้นเรียนของเราได้ตามด้านล่าง

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;

import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.MenuBar;
import com.vaadin.ui.MenuBar.MenuItem;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      VerticalLayout layout = new VerticalLayout();
      MenuBar barmenu = new MenuBar();
      layout.addComponent(barmenu);

      // A feedback component
      final Label selection = new Label("-");
      layout.addComponent(selection);

      // Define a common menu command for all the menu items.
      MenuBar.Command mycommand = new MenuBar.Command() {
         public void menuSelected(MenuItem selectedItem) {
            selection.setValue("Ordered a " +
            selectedItem.getText() +
            " from menu.");
         }
      };
      
      // Put some items in the menu hierarchically
      MenuBar.MenuItem beverages =
      barmenu.addItem("Beverages", null, null);
      MenuBar.MenuItem hot_beverages =
      beverages.addItem("Hot", null, null);
      hot_beverages.addItem("Tea", null, mycommand);
      hot_beverages.addItem("Coffee", null, mycommand);
      MenuBar.MenuItem cold_beverages =
      beverages.addItem("Cold", null, null);
      cold_beverages.addItem("Milk", null, mycommand);
      cold_beverages.addItem("Weissbier", null, mycommand);
      
      // Another top-level item
      MenuBar.MenuItem snacks =
      barmenu.addItem("Snacks", null, null);
      snacks.addItem("Weisswurst", null, mycommand);
      snacks.addItem("Bratwurst", null, mycommand);
      snacks.addItem("Currywurst", null, mycommand);
      
      // Yet another top-level item
      MenuBar.MenuItem services =
      barmenu.addItem("Services", null, null);
      services.addItem("Car Service", null, mycommand);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

ในตัวอย่างที่กล่าวถึงข้างต้นเราได้สร้างแถบเมนูที่ซ้อนกัน เรียกใช้โค้ดด้านบนและคุณสามารถสังเกตผลลัพธ์ในเบราว์เซอร์ของคุณดังที่แสดงด้านล่าง -