Category: vaadin

Discuss Vaadin ”; Previous Next Vaadin is an open source technology to create rich internet web content. It is based on Java and supports Java Script and Ajax. This can be extended with Google Web Tool to support extra features in the client browser. Vaadin framework provides features that lets you to develop web content without using HTML, XML etc. Thus, using Vaadin you can create your front end as well as back end using JAVA as a programming language. This tutorial gives you a basic coverage of concepts of Vaadin and makes you comfortable to use it in your software development projects. Print Page Previous Next Advertisements ”;

Vaadin – Core Elements ”; Previous Next Till now you have learnt about different components of Vaadin. In this chapter, you will learn about different core components that Vaadin provides as a part of its library. Vaadin core components are user friendly, easily understandable and compatible with any modern browsers. Combo BOX Combo box is a selection component that helps user to select from the drop down menu and it also helps the developer to create the drop down for a particular field. The example shown below explains how to create a combo box. Here we will be populating Planet history using Vaadin combo box. package com.example.myapplication; public class Planet { private int id; private String name; public Planet(){} public Planet(int i, String name){ this.id = i; this.name = name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; 6. Vaadin – Core Elements } } Observe the piece of code shown below and update MyUI.java class accordingly. package com.example.myapplication; import java.util.ArrayList; import java.util.Arrays; import java.util.List; 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.ComboBox; 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(); // List of planets List<Planet> planets = new ArrayList(); planets.add(new Planet(1, “Mercury”)); planets.add(new Planet(2, “Venus”)); planets.add(new Planet(3, “Earth”)); ComboBox<Planet> select = new ComboBox<>(“Select or Add a Planet”); select.setItems(planets); // Use the name property for item captions select.setItemCaptionGenerator(Planet::getName); //layout.addComponent(select); setContent(select); } @WebServlet(urlPatterns = “/*”, name = “MyUIServlet”, asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet {} } The code given above will yield the following output in the browser. Context Menu Context menu is the feature that helps the developer to represent the depended list in the browser. However, this feature has been deprecated in the recent version of Vaadin 8. Note that you can do the same using the Menu bar option. If you want to use the same in your application, you can use the code as shown below. Note that you need to install the polymer using npm directory and use the same in your html code. <vaadin-context-menu> <template> <vaadin-list-box> <vaadin-item>First menu item</vaadin-item> <vaadin-item>Second menu item</vaadin-item> </vaadin-list-box> </template> <p>This paragraph has the context menu provided in the above template.</p> <p>Another paragraph with the context menu that can be opened with <b>right click</b> or with <b>long touch.</b></p> </vaadin-context-menu> Since this is a Java based tutorial, we would recommend you to use Menu bar option in order to learn Vaadin Context menu. Date Picker Date picker is another component that Vaadin supports, which helps the developer to create a website in an easy manner. The following code shows how to create a date picker in the Vaadin UI. Note that this has been deprecated in the recent version of Vaadin 8 and hence we need to use Java date object in order to populate the date field. But if you are using Vaadin web project, you can still use it. package com.TutorialsMy.myApp; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import java.time.LocalDate; import java.util.Arrays; import java.util.List; import java.util.Locale; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.TreeData; import com.vaadin.icons.VaadinIcons; import com.vaadin.server.UserError; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.shared.ui.ContentMode; import com.vaadin.ui.AbsoluteLayout; import com.vaadin.ui.Alignment; import com.vaadin.ui.Button; import com.vaadin.ui.CustomLayout; import com.vaadin.ui.DateField; import com.vaadin.ui.FormLayout; import com.vaadin.ui.Grid; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.HorizontalSplitPanel; import com.vaadin.ui.Label; import com.vaadin.ui.Notification; import com.vaadin.ui.Panel; import com.vaadin.ui.TabSheet; import com.vaadin.ui.TextField; import com.vaadin.ui.Tree; import com.vaadin.ui.UI; import com.vaadin.ui.Upload; import com.vaadin.ui.Upload.Receiver; import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.VerticalSplitPanel; import com.vaadin.ui.Window; @Theme(“mytheme”) public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { final VerticalLayout hLayout = new VerticalLayout(); Label l1 = new Label(“Enter today”s Daten”,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 {} } When you run the code given above, you can find the following output as shown below − You can also use Vaadin date picker class from Java directly as shown below which will also yield the same result in the browser. DatePicker datePicker = new DatePicker(); Note that in order to use DatePicker class, you need to use Vaadin V 3.0 but we are using Vaadin 8. Data Grid Data grid means passing a list of data. It acts similar to a tree in the browser. The following example shows how a grid works. Create a class as shown below and name it MyCharArray.java. package com.TutorialsMy.myApp; public class MyCharArray { private String c; public String getC() { return c; } public void setC(String c) { this.c = c; } public MyCharArray(){} public MyCharArray(String ch){ this.c = ch; } } Next, modify the MyUI.java class as shown below − package com.TutorialsMy.myApp; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import java.util.Arrays; import java.util.List; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.TreeData; import com.vaadin.icons.VaadinIcons; import com.vaadin.server.UserError; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.shared.ui.ContentMode; import com.vaadin.ui.AbsoluteLayout; import com.vaadin.ui.Button; import com.vaadin.ui.CustomLayout; import com.vaadin.ui.FormLayout; import com.vaadin.ui.Grid; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.HorizontalSplitPanel; import com.vaadin.ui.Label; import com.vaadin.ui.Notification; import com.vaadin.ui.Panel; import com.vaadin.ui.TabSheet; import com.vaadin.ui.TextField; import com.vaadin.ui.Tree; import com.vaadin.ui.UI; import com.vaadin.ui.Upload; import com.vaadin.ui.Upload.Receiver; import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.VerticalSplitPanel; import com.vaadin.ui.Window; @Theme(“mytheme”) public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { VerticalLayout layout = new VerticalLayout(); List<MyCharArray> values = Arrays.asList( new MyCharArray(“First Value”), new MyCharArray(“Second Value”), new MyCharArray(“thired Value”)); final Grid<MyCharArray> grid = new Grid<>(“My Table”); grid.setItems(values); grid.addColumn(MyCharArray::getC).setCaption(“Value”); layout.addComponent(grid); setContent(layout); } @WebServlet(urlPatterns = “/*”, name = “MyUIServlet”, asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet {} } Now, run the above piece of code and you can see the following output in the browser. Split Layout Vaadin provides many tools to design a web page according to the choice of the developer. Using split layout, we can customize the entire screen

Vaadin – Quick Guide ”; Previous Next Vaadin – Overview This chapter will provide an overview of Vaadin. You will also be able to list out the merits and demerits of working with Vaadin, once you are done with this chapter. What is Vaadin? Vaadin is an open source web development framework. It comes with an inbuilt support for Java scripts and AJAX. You can also include external features into it using Google Web toolkit. Vaadin is a time-saver for the developers as it renders a rich content in the browser without the help of any markup files. All mark ups and supporting files will be generated at runtime with the help of Vaadin framework. Vaadin uses Java as a programming language and it supports both server side and client side development. Advantages and Disadvantages This section explains about advantages and disadvantages of using Vaadin in your web application. Advantages Vaadin offers the following advantages to its developers − Server side programming Vaadin is built using Java. Besides, there is no need for the developer to use markup languages to develop the web page. Vaadin also provides all kind of support using Google Web toolkit. Offers multiple options Vaadin provides many components, layouts, and different listeners compared to any conventional web technologies; hence it is much preferable to use Vaadin. Entirely object oriented Since Vaadin is Java based, it is fully Object oriented. A Java developer can easily develop a website, simply by having idea of Vaadin classes and its uses. Easy to learn and integrate Vaadin provides plug-in supports and it is very easy to learn and integrate with other web frameworks. Disadvantages Vaadin offers the following disadvantages to its developers − Difficult to find skilled personnel Vaadin is a recent technology, hence properly skilled personnel are always on demand and they can be costly. Hence, finding resources that can solve complex problem with Vaadin may be difficult. Size of Java Script file Depending on the context, the size of dynamic java script files may increase, thus demanding a bigger server to maintain its accessibility over the internet. No fancy User Interface Vaadin focused on business. You cannot create any fancy website using Vaadin. Scalability Some experts feel that Vaadin cannot compete with the other thin client based technologies such as Angular.js. Hence Vaadin is less scalable than other available technologies. Vaadin – Environment setup In this chapter we will learn how to set up the local environment to develop a Vaadin application. Steps in Vaadin Installation You will have to follow the steps given below to install and use Vaadin in application. Step 1 – Java 8 installation Vaadin uses JVM. Hence it is necessary to use JDK 8 for your local development environment. Please refer to official website of Oracle to download and install JDK 8 or above version. You might have to set environment variable for JAVA such that it can work properly. To verify your installation in Windows operating system, hit java –version in the command prompt and as an output it will show you the java version installed in your system. Step 2 – IDE installation You can use any IDE available online. The following table gives you the download link of different IDEs. IDE Name Installation Link Netbean https://netbeans.org/downloads/ Eclipse https://www.eclipse.org/downloads/ Intellij https://www.jetbrains.com/idea/download/#section=windows Whichever IDE you use, make sure that you use the latest version. Please note that we are using Eclipse IDE in this tutorial. Step 3 – Server Requirements In this tutorial, we will be using Tomcat as the application server. In this chapter we will configure our Tomcat server in our system. If you are installing the latest version of Netbean, then you can directly install Apache Tomcat along with Netbean IDE. Else, please download the latest version of TOMCAT from its official website. Save the extracted Tomcat files in your C drive or program files as we will be using these files in the next steps. Step 4 – Client Requirements RichFaces is an UI component. The internet browser will be act as a client for our application. You can use any modern internet browser such as IE, Safari, Chrome etc Step 5 – Configuring Eclipse Go to Eclipse Market Place and type Vaadin in the search bar. You will find the screen as shown below. Click the Install button and install it. This step might take some time as Eclipse needs to download all related files and install the same and configure it with the recent IDE. After successful installation, Eclipse will prompt you for a quick restart as the new change will reflect only after you restart the same. Once you restart, your local system is ready for using Vaadin application. Vaadin – Creating First Application In the previous chapter, you have seen the installation of Vaadin on your local system. In this chapter let us start by creating our first application using Vaadin. Recall that we are using Eclipse IDE in this tutorial. To start creating your first application in Vaadin, open Eclipse IDE in your local system and follow the steps given below − Step 1 − On the File menu, Click New and then click Other. Refer to the following screenshot for better understanding. Step 2 − Now, type Vaadin in the search box and you can see options as shown in the following screenshot. Now, select Vaadin 8 from the options and click Next. Step 3 − You can see a window with four options as shown below. Select the first option and proceed to the next step. Step 4 − Next, you can see a screen as shown in the screenshot below. Provide the Group Id and Artifact Id and select Finish. This completes the project and Eclipse will create Vaadin for you. Please note that this step might take some time as it requires the configuration settings. The artefact id is the name of the current project. We have named it as MyFirstApp. Step 5 − Now,

Vaadin – Useful Resources ”; Previous Next The following resources contain additional information on Vaadin. Please use them to get more in-depth knowledge on this topic. Useful Links on Vaadin Vaadin Wiki − Wikipedia Reference for Vaadin. Vaadin Official Website − Official Website of Vaadin. To enlist your site on this page, please drop an email to [email protected] Print Page Previous Next Advertisements ”;

Vaadin – Overview ”; Previous Next This chapter will provide an overview of Vaadin. You will also be able to list out the merits and demerits of working with Vaadin, once you are done with this chapter. What is Vaadin? Vaadin is an open source web development framework. It comes with an inbuilt support for Java scripts and AJAX. You can also include external features into it using Google Web toolkit. Vaadin is a time-saver for the developers as it renders a rich content in the browser without the help of any markup files. All mark ups and supporting files will be generated at runtime with the help of Vaadin framework. Vaadin uses Java as a programming language and it supports both server side and client side development. Advantages and Disadvantages This section explains about advantages and disadvantages of using Vaadin in your web application. Advantages Vaadin offers the following advantages to its developers − Server side programming Vaadin is built using Java. Besides, there is no need for the developer to use markup languages to develop the web page. Vaadin also provides all kind of support using Google Web toolkit. Offers multiple options Vaadin provides many components, layouts, and different listeners compared to any conventional web technologies; hence it is much preferable to use Vaadin. Entirely object oriented Since Vaadin is Java based, it is fully Object oriented. A Java developer can easily develop a website, simply by having idea of Vaadin classes and its uses. Easy to learn and integrate Vaadin provides plug-in supports and it is very easy to learn and integrate with other web frameworks. Disadvantages Vaadin offers the following disadvantages to its developers − Difficult to find skilled personnel Vaadin is a recent technology, hence properly skilled personnel are always on demand and they can be costly. Hence, finding resources that can solve complex problem with Vaadin may be difficult. Size of Java Script file Depending on the context, the size of dynamic java script files may increase, thus demanding a bigger server to maintain its accessibility over the internet. No fancy User Interface Vaadin focused on business. You cannot create any fancy website using Vaadin. Scalability Some experts feel that Vaadin cannot compete with the other thin client based technologies such as Angular.js. Hence Vaadin is less scalable than other available technologies. Print Page Previous Next Advertisements ”;

Vaadin – Themes ”; Previous Next This chapter discusses in detail about another feature of Vaadin, known as Theme. In general, theme means a framework which is customizable at runtime. The content will be dynamic depending on the response received at the server end. Vaadin provides a cool interface to use a theme with in a second with the help of its own Java based SAAS compiler. Theme feature is given to Vaadin in order to provide customizable style and look to the application. Theme is a pre-made template and developers need to customize it in order to build their own application which saves their time. You can find all the themes in Vaadin under the theme folder and each of the sub folders are self-descript able. Hence, it is also very easy to change the code and customize the same. Any theme can have two types of CSS files in it − .saas type and .css type. Although Vaadin does not have any restriction on folder name, it is always recommended to use the folder name as you can notice from the image given above. There are two kind of themes available − Inbuilt and Custom. This section discusses them in detail. Built In Theme Vaadin built in theme is provided by annotating it with a theme name as shown below. @Theme(“mytheme”) public class MyUI extends UI { All the grey color back ground while running a Vaadin application comes from the inbuilt css files. We can make change those files in order to make them as a custom theme which is another kind of theme. There is nothing we can learn about the Vaadin built in themes. All the above mentioned components are part of Vaadin Theme. Custom theme – Creating and Using Themes Custom themes are placed in the VAADIN/themes folder of the web application, in an Eclipse project under the WebContent folder or src/main/webapp in Maven projects. These locations are fixed and recommended not to change for any type of requirement. To define a SAAS theme with the name mytheme , you must place the file in the mytheme folder under theme folder then rebuild your project. Vaadin will automatically create its own .css file on the fly whenever requested by the browser. You can change the style content in the css file as per your requirement. However, remember to build the project once again and it will start reflecting in progress. Responsive Theme Vaadin supports responsive theme too. Responsive web page can automatically set the font size according to the screen size. In the Vaadin application, we need to add a single line of code in order to make the entire application responsive. Let us consider the following example to learn further about Vaadin. Make changes in the MyUI.java class as shown below. package com.TutorialsMy.myApp; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import java.time.LocalDate; import java.util.Arrays; import java.util.List; import java.util.Locale; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.TreeData; import com.vaadin.icons.VaadinIcons; import com.vaadin.server.Responsive; import com.vaadin.server.UserError; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.shared.ui.ContentMode; import com.vaadin.ui.AbsoluteLayout; import com.vaadin.ui.Alignment; import com.vaadin.ui.Button; import com.vaadin.ui.CustomLayout; import com.vaadin.ui.DateField; import com.vaadin.ui.FormLayout; import com.vaadin.ui.Grid; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.HorizontalSplitPanel; import com.vaadin.ui.Label; import com.vaadin.ui.Notification; import com.vaadin.ui.Panel; import com.vaadin.ui.TabSheet; import com.vaadin.ui.TextField; import com.vaadin.ui.Tree; import com.vaadin.ui.UI; import com.vaadin.ui.Upload; import com.vaadin.ui.Upload.Receiver; import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.VerticalSplitPanel; import com.vaadin.ui.Window; @Theme(“mytheme”) public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { final VerticalLayout hLayout = new VerticalLayout(); Label l1 = new Label(“Enter today”s Daten”,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); Responsive.makeResponsive(hLayout); setContent(hLayout); } @WebServlet(urlPatterns = “/*”, name = “MyUIServlet”, asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet {} } When you run the code given above, you can observe the following output in the browser. To test the responsiveness of the layout, reduce the browser and you can observe that the panel and layout component will change their size and shape accordingly. Print Page Previous Next Advertisements ”;

Vaadin – Layout Component ”; Previous Next Layout components works as a place holder to hold and represent the data in the front end. In this chapter, we will learn about different types of layout component of the VAADIN. Vertical and Horizontal Layout Vertical and horizontal layouts are the ordered layouts that help the users to render the data in a vertical or horizontal manner. We have used this concept in many previous examples that we have seen till now. The following example will show you how to use the same in a Vaadin application. package com.TutorialsMy.myApp; 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.Button; import com.vaadin.ui.HorizontalLayout; 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) { Label l1 = new Label(“Your Name-n”,ContentMode.PREFORMATTED); Label l2 = new Label(“Your Address-n”,ContentMode.PREFORMATTED); Label l3 = new Label(“Your Postal code-n”,ContentMode.PREFORMATTED); final VerticalLayout vLayout = new VerticalLayout(); final HorizontalLayout hLayout = new HorizontalLayout(); vLayout.setDescription(“This is a example of vertical layout”); vLayout.addComponents(l1,l2,l3);; //hLayout.setDescription(“This is example of Horizontal layout”); // hLayout.addComponents(l1,l2,l3); setContent(vLayout); //setContent(hLayout); } @WebServlet(urlPatterns = “/*”, name = “MyUIServlet”, asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet {} } This code will yield below output in the browser. When we use horizontal layout instead of vertical, then the same piece of code will yield below output in the browser. Grid Grid is another component of Vaadin using which users can represent the tabular data in the browser. In this section, we will learn about Grid and its usage. First create a class named as “Person”. package com.TutorialsMy.myApp; public class Person { private String name; private int number; public Person(){} public Person(String string, int i) { // TODO Auto-generated constructor stub this.name = string; this.number =i; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getNumber() { return number; } public void setNumber(int number) { this.number = number; } } Now, add the following piece of code in the MyUI.java class − package com.TutorialsMy.myApp; import java.util.Arrays; import java.util.List; 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.Button; import com.vaadin.ui.Grid; import com.vaadin.ui.HorizontalLayout; 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) { HorizontalLayout hLayout = new HorizontalLayout(); // Have some data List<Person> people = Arrays.asList( new Person(“First Boy”, 98), new Person(“Second Boy”, 99), new Person(“Thired Boy”, 57)); // Create a grid bound to the list Grid<Person> grid = new Grid<>(); grid.setItems(people); grid.addColumn(Person::getName).setCaption(“Name”); grid.addColumn(Person::getNumber).setCaption(“Number in Examination”); hLayout.addComponent(grid); setContent(hLayout); } @WebServlet(urlPatterns = “/*”, name = “MyUIServlet”, asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet {} } Once both the steps are done, compile and run them. You can observe the following output in the browser − Form Layout Form layout is another component of the Vaadin which helps us to represent the data in two different column format. It will look just like a form. In this section, you will learn more about this layout. Edit your MyUI.java file as shown below − package com.TutorialsMy.myApp; import java.util.Arrays; import java.util.List; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.icons.VaadinIcons; import com.vaadin.server.UserError; 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.FormLayout; import com.vaadin.ui.Grid; import com.vaadin.ui.HorizontalLayout; 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) { FormLayout form = new FormLayout(); TextField tf1 = new TextField(“Name”); tf1.setIcon(VaadinIcons.USER); tf1.setRequiredIndicatorVisible(true); form.addComponent(tf1); TextField tf2 = new TextField(“Street address”); tf2.setIcon(VaadinIcons.ROAD); form.addComponent(tf2); TextField tf3 = new TextField(“Postal code”); tf3.setIcon(VaadinIcons.ENVELOPE); form.addComponent(tf3); // normally comes from validation by Binder tf3.setComponentError(new UserError(“Doh!”)); setContent(form); } @WebServlet(urlPatterns = “/*”, name = “MyUIServlet”, asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet {} } When you compile and run the above code, it will render the following output in the browser − Panel Panel is a single component container with a frame outlining it. It gives more features to the form layout. In the following example, we will understand how to use panel in the Vaadin. package com.TutorialsMy.myApp; import java.util.Arrays; import java.util.List; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.icons.VaadinIcons; import com.vaadin.server.UserError; 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.FormLayout; import com.vaadin.ui.Grid; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; import com.vaadin.ui.Panel; 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) { HorizontalLayout layout = new HorizontalLayout(); Panel panel = new Panel(“Panel Example “); panel.addStyleName(“mypanelexample”); panel.setSizeUndefined(); // Shrink to fit content layout.addComponent(panel); // Create the content FormLayout content = new FormLayout(); content.addStyleName(“mypanelcontent”); content.addComponent(new TextField(“Name”)); content.addComponent(new TextField(“Password”)); content.setSizeUndefined(); // Shrink to fit content.setMargin(true); panel.setContent(content); setContent(panel); } @WebServlet(urlPatterns = “/*”, name = “MyUIServlet”, asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet {} } When you run the above piece of code, it will yield the following output in the browser Sub Window Sub window is a floating panel inside an active browser. This allows the user to segregate the content in to a different window. Like other Layout components, it is also controlled by runtime Vaadin Html codes. In the following example, we will see how sub window panel works. Change your MYUI code as shown below. package com.TutorialsMy.myApp; import java.util.Arrays; import java.util.List; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.icons.VaadinIcons; import com.vaadin.server.UserError; 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.FormLayout; import com.vaadin.ui.Grid; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; import com.vaadin.ui.Panel; import com.vaadin.ui.TextField; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.Window; @Theme(“mytheme”) public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { setContent(new Label(“Sub Window”)); // Create a sub-window and set the content Window subWindow = new Window(“~~~~~~~~Sub-window Example~~~~~~~”); VerticalLayout subContent = new VerticalLayout(); subWindow.setContent(subContent); // Put some components in it subContent.addComponent(new Label(“This is a new label inside the window”)); subContent.addComponent(new Button(“Click Me :)”)); // Center it in the browser window subWindow.center(); // Open

Vaadin Tutorial PDF Version Quick Guide Resources Job Search Discussion Vaadin is an open source technology to create rich internet web content. It is based on Java and supports Java Script and Ajax. This can be extended with Google Web Tool to support extra features in the client browser. Vaadin framework provides features that lets you to develop web content without using HTML, XML etc. Thus, using Vaadin you can create your front end as well as back end using JAVA as a programming language. This tutorial gives you a basic coverage of concepts of Vaadin and makes you comfortable to use it in your software development projects. Audience This tutorial will help beginners to understand Vaadin from scratch. After completing this tutorial, you will gain a moderate level of expertise in Vaadin, which helps you to move to further levels. Prerequisites Before you start with this tutorial, we assume that you have a basic understanding of Java programming language. Besides, knowledge on any programming environment and basic concepts such as variables, commands, syntax, etc. will be beneficial. We strongly recommend that you refer to JAVA programming language tutorials before proceed further with Vaadin. Print Page Previous Next Advertisements ”;