Vaadin Framework 8 : Java Web UI Framework with Enhanced Features

Vaadin Framework is a Java Web UI Framework for Business Applications which is productive as well as easy-to-use UI library for developing web applications in both Java & JVM language. It provides high-level UI components in order to save you from time-consuming HTML, CSS, and JavaScript programming. Vaadin framework abstracts almost all web technologies which give component based UI to build traditional desktop applications.

Vaadin framework also abstracts the communication of server & browser. It uses object oriented approach to improvise your UI small components & layouts to event listener UI. It makes & enhances both UI & backend development easy for the web developers. Vaadin framework is one of the best open-source web UI frameworks for Internet applications. It features server side architecture by running a majority of the development logic on the servers such as Javascript libraries & browser plugin solutions.

It also offers Ajax technology to run on browser side that ensures interactive user experience. On the client side, it is extended with google web toolkit which is a set of open source tools that allows the developer to maintain & create complete complex Java applications as well as java script front end apps in Java.

 

New Feature & Enhancements in Vaadin Framework 8

 

1. Bootstrapping:

 

Creating a Vaadin application by using Maven archetypes. start.spring.io offers the great option for Vaadin dependencies to spring projects. Netbeans & Eclipse IDEs also contains full support plugins to create Vaadin applications. We can access current VaadinSession, VaadinService, and VaadinServlet objects as well as reference UI object. It helps to create a simple app using the following command with same groupId and archetypeId in IDE.

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=Latest

The UI class is an entry path for vaadin applications which extends “com,vaadin.UI”. Firstly we extend UI class as well as build initial UI from Vaadin components & define the event listener for implementing the UI to the project. As an another option, we can set custom theme UI to bind all Vaadin components to the data as well as resources.

 

2. Vaadin Components

Vaadin components define both field & layout as well as other component classes with their inheritance structure. Vaadin component properties define the interface as well as the base class for all Vaadin projects.

Vaadin Component Properties

  • Visible Property: It defines the component visibility with setting default true.
  • Locale Property: It defines the current country as well as language for the components.
  • Enabled Property: It defines the component gray in the false set & doesn’t allow user interaction.
  • Caption Property: It offers label inside the component depending upon the layout
  • Description Property: It defines the description displayed on the component while hovering the mouse over it.

Vaadin Field Properties

Value It defines the actual value of the field by implementing the field and possible configuration. Its value changes by using ValueChangeListener.

  • readOnly : The user cannot change the value when it defines true.
  • tabIndex : The tab index property specifies the order focusing fields when the user presses the Tab key.

Vaadin Size Properties

  • setWidth(): It sets the component size in fixed units or as a relative percentage (%) of the available area containing layout.
  • setHeight(): It defines the component shrink to fit the content in the Vaadin components.
  • setSizeFull(): It sets both dimensions with 100% relative size.
  • setSizeUndefined(): It sets both dimensions undefined causing the component to shrink to minimum size.

 3. Layout Components

The Vaadin UI layout is built from layout components as well as component containers. It offers interacting components as the leaf nodes. We can create root layout by setting UI content with setContent(). While, adding components to addComponent(), Single-component containers, such as Panel and Window holds a single UI content component.

The sizing of layout components is very crucial for default sizes and can be changed by using sizing methods. When components having relative layout size in a particular direction then the layout may not have the undefined size in that particular direction. Hence we can also use declarative HTML format as well as Vaadin Designer inside Eclipse to enhance view layout.

Margins Layout Components

Margin layout components support margins as well as set the setMargin(true) function that enables all margins for the Vaadin layout. Using MarginInfo parameter enables each margin individually. All margin sizes can be adjusted using padding properties such as top, bottom, left, and right padding.

.mymargins.v-margin-left {padding-left: 10px;}
.mymargins.v-margin-right {padding-right: 20px;}
.mymargins.v-margin-top {padding-top: 30px;}
.mymargins.v-margin-bottom {padding-bottom: 40px;}

Spacing Layout Components

Vaadin layout components also support the setSpacing(true) function that controls spaces between the layout slots. Spacing can be adjusted using CSS which includes width or height of the elements using the v-spacing style.

.v-vertical > .v-spacing {height: 50px;}

Alignment Layout Components

When the contained component is smaller than the area provided for the layout component then the component is aligned within the cell using setComponentAlignment() method.

VerticalLayout layout = new VerticalLayout();
Button button = new Button(“My Button”);
layout.addComponent(button);
layout.setComponentAlignment(button, Alignment.MIDDLE_CENTER);

Custom Layout Components

The CustomLayout component supports HTML location tags for Vaadin components. The layout components are filled in the location elements using addComponent() method.

CustomLayout layout = new CustomLayout(
getClass().getResourceAsStream("mylayout.html"));
layout.addComponent(new Button("Hello"), "hello");

4. Vaadin Themes

Vaadin framework allows customization as well as the appearance of the UI with themes. Vaadin themes include Sass or CSS style sheets & Graphics with custom layout HTML templates. Vaadin customizable themes are placed under the /VAADIN/themes/ folder of the web application. The Vaadin web app folder specifies static resources with specific Vaadin application.

All theme in Vaadin framework has its own folder with the name of the theme containing styles.scss for plain & Sass CSS. Customizable themes inherit the Valo base theme using Sass variables. While the bootstrapping project, such themes are created automatically in Vaadin applications.

Sass Themes

Sass is a Syntactically Awesome StyleSheets language based on CSS3 having some additional features such as variables, mixins, nesting & selector inheritance. Vaadin has Sass compiler to compile stylesheets during app building process. Hence Sass themes are compiled to CSS during development.

You can enable multiple themes on the same page with all the style rules. A theme can be prefixed with selector with matches theme name. Sass themes are usually organized with a nested rule in two files: styles.scss and a mytheme.scss.

The styles.scss

@import "mytheme.scss";
@import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
@include addons;
@include mytheme;
}

 The mytheme.scss

@import "../valo/valo.scss"; 
@mixin mytheme { @include valo; // Insert your own theme rules here 
.mycomponent { color: red; } }

5. Widget Integration Vaadin

Vaadin framework offers the easiest way to create new components with effective composition using CustomComponent in order to extend layout component. We can also create the new component by creating a client-side widget in GWT or JavaScript. A server-side component and binding component shares state and RPC calls.

In Widget integration, the shared state helps in communicating with the component from the server-side to the client-side by applying on the widget. This shared state object is serialized with the Vaadin framework. It implements RPC interface to support RPC calls from the client-side to the server-side in order to communicate user interaction events. We can add widgets to the application project as well as can create a separate add-on project for customizable widgets. It adds the dependency with application projects so as to build better tests for other Vaadin projects.

6. Data Binding Support

Vaadin Framework supports data binding for Java domain classes with advanced components. It helps to avoid writing a lot of code. The data binding component shows complete data in tabular format in the grid by passing data as a list, stream or an array which is an effective way to use business application.

In data binding, Binder is a helper class which offers to bind a single Java object’s properties to display multiple Vaadin components. In the case of using form, Binder supports two-way binding which means input values will automatically get written back to the domain model. Binder also provides value conversion and validation for the data.

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(listOfPersons);
// define columns and the order as bean properties (default: show all)
grid.setColumns("firstName", "lastName", "email");

7.  Influencing Features of Vaadin Framework

Multiple Language Support:

Java is the powerful programming language mostly used for building quality applications and business purposes. With Vaadin, It offers same power of Java language with professional tooling and skills to build your web UI.

UI logic Data:

Vaadin UI code uses JVM as web servers which include data and business logic. It access & make your data and business logic simple and efficient So there is no need to expose REST services.

Easy Extensible with Java and HTML5

Vaadin framework offers component-based programming model as well as Java reusable modules. It also supports existing HTML widgets with low-level browser technologies.

Abstraction Web Development

Abstraction provides component-based programming model to build modern single-page HTML5 apps. Vaadin supports client-server communication, browser issues, markup languages, CSS and new technologies too.

8. Vaadin Framework 8.1 Improved Updates:

  • It Support context click events & set height of the Tree
  • Methods of Composite now delegate to the contained component
  • Grid ComponentRenderer cells shows style name for customization
  • Allow null components in ComponentRenderer
  • Add some modification operations to TreeData
  • OSGi whiteboard use clean-up and fixes
  • Current request and response are available from Vaadin(Servlet)Request/Response
  • Minor opening up of API, documentation fixes and improvements etc.
  • Fixed to add items on blur in ComboBox
  • Icon alignment fix for ComboBox
  • TreeGrid getHierarchyColumn fixed
  • Grid default header fixes (merging cells, components in header etc.)

 

Hope you have liked this article, please feel free to provide any suggestions, comments or query. Also, don’t forget to subscribe us on Youtube. You can also find us on Twitter and Facebook.

web design company dehradun best web hostingfree wordpress themes

Comments 2

  1. Adyuga July 24, 2017
  2. Editorial Staff July 25, 2017

Leave a Reply

Feature rich hosting with premium support starting at just $3.95/monthGrab this deal

Triple your Traffic!

Grab your free copy of "40 Timeless Ideas to Attract More Visitors to Your Website" that reveals all the practices used to attract tons of visitors.