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.
Copyright & Disclaimer
@Copyright 2018 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@tutorialspoint.com
i Vaadin
Table of Contents About the Tutorial ..................................................................................................................................... i
Audience .................................................................................................................................................... i
Prerequisites .............................................................................................................................................. i
Copyright & Disclaimer .............................................................................................................................. i
Table of Contents ...................................................................................................................................... ii
Link ......................................................................................................................................................... 16
Text Field ................................................................................................................................................ 17
Text Area ................................................................................................................................................ 19
Date and Time......................................................................................................................................... 20
Data Binding ........................................................................................................................................... 26
Tree ........................................................................................................................................................ 30
Menu Bar ................................................................................................................................................ 32
ii Vaadin
6. VAADIN – CORE ELEMENTS ................................................................................................ 35
Context Menu ......................................................................................................................................... 38
Date Picker ............................................................................................................................................. 38
Data Grid ................................................................................................................................................ 41
Form Layout ............................................................................................................................................ 54
Sub Window ........................................................................................................................................... 59
Built In Theme......................................................................................................................................... 67
Custom theme – Creating and Using Themes .......................................................................................... 67
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.
1 Vaadin
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.
2 2. Vaadin – Environment Setup Vaadin
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.
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.
3 Vaadin
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.
4 3. Vaadin – Creating First Application Vaadin
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.
5 Vaadin
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.
6 Vaadin
Step 3: You can see a window with four options as shown below. Select the first option and proceed to the next step.
7 Vaadin
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.
8 Vaadin
Step 5: Now, you can find the directory structure of the automated Vaadin project as shown below:
Step 6: Your first Vaadin application is ready. Run the project in any application server. Once it is ready you can find your screen as shown below:
9 Vaadin
Step 7: Enter any text in the text box and click on the Click Me button. You can observe the output as shown:
Congratulations! You have successfully created your first Vaadin application.
10 Vaadin
End of ebook preview
If you liked what you saw…
Buy it from our store @ https://store.tutorialspoint.com
