Example of creating a web application using the Vaadin libraries
In 2016, many of us have promised new achievements to ourselves, for example, to read a deferred book, to master a new sport or a programming language, etc. The study of new technologies in something akin to the above actions. So, for such enthusiasts there is a small overview of convenient “tools” for developing web applications in the Java language.
A new series of articles will be devoted to Vaadin and Liquibase .
In the first article I want to tell you about several stages to start exploring this FrameWork (Vaadin) . We will talk about the "loading" of the template and the initial addition of elements to the "layout". Let's talk a little about Liquibase. In future articles, we plan to add processing of xml files.
Vaadin .
For me, this is the "interpreter" of Java code in the user interface. In fact, I reduce the development to the level of control over the java-layer. Thanks to the server-oriented architecture based on JavaEE, you can lay a layer of complex logic without losing the settings of individual parts. And already prepared browser optimization (I'm talking about cross-browser compatibility) will keep this part of the work to a minimum.
The server-oriented model allows you to quickly (hereafter, you will see this) and create applications with high quality, reducing the risk of “getting stuck” at a certain stage. You develop in Java, and on the client you will see JavaScript.
Additionally, it must be said that the use of AJAX promises an increase in the exchange rate in the interface.
In this direction, many software products are being developed. Some of them are described in the following first and fourth articles.
If we talk about use, then for medium and large companies - this is an excellent choice (IMHO).
Necessary information about Vaadin.
Vaadin official website
Further some links to video . I strongly advise you to look.
In Russian . It contains a story about the visual creation of a small application.
In a foreign language . Best practice - a very good story about how to properly create parts of the interface.
Articles on FrameWork .
Link to the first article . A small article about the differences Vaadin from "fellow".
Link to the second article . Overview of FrameWork features.
Link to the third article . Useful "features".
Link to the fourth article . Here about GWT and Vaadin. Overview.
To create your first template, you can do the following.
The first is to install and configure several parts for correct development. If, for example, you are using IntelliJ IDEA , then when creating a new project, select Vaadin in the section “Additional Libraries and FrameWorks”. After that, you will be asked to specify “Vaadin Distribution” and additionally you can put down “Create sample application”, before these actions specify the path to the Project SDK and Application Server (all these settings are made in one window).
By the way, there are templates for other IDE.
Links to templates .
Vaadin Plug-in for Eclipse .
Vaadin Plug-in for NetBeans .
In the project, after launching TomCat you can see just such an inscription “Hello World”. At this link you can see the process again.
What is Liquibase and why do we need it?
Link to the site Liquibase .
A good article about the features of the work.
Another well-written material.
What is Liquibase ? For me, this is a convenient mechanism for creating identical types of objects on different databases (Oracle, PostgreSQL and others). Very good choice for companies developing software.
If you try to describe very briefly, then you describe in xml tables, sequences and other objects. Then the same file can be used for installation on various types of databases (with certain restrictions).
In this article, we will begin to make a user interface for, for example, creating Liquibase files (we restrict ourselves to the xml option).
Thanks to the support of many databases, we will try to explore and apply this opportunity.
')
Forgot to mention Apache Tomcat. Link to Tomcat site .
In my proposed version of the tests, you can use the built-in ability to run directly from the development environment.
Let's start with the user interface in Vaadin.
By the way, on the site itself, you can find an example of building an “Address Book” .
We will try to go our own way and start up a similar, but still “own” application.
Let's start.
If you managed to load the template, it looks like this:
In the code you can see the line.
In fact, this is a “mock-up” to which we will add elements (now, in addition to the main elements on the site, you can find a huge amount of additional).
We offer the future user two options, the first is to go to the creation of elements, the second is to follow the link to habrahabr.ru . Here you are free to use any resource, in a real application - this could be a technical support site.
To do this, add a few elements. Here they are:
When you start (I run using Tomcat version - 7.0.65) you will have the following.
There are two options for the future user, the first is to go to the creation of objects, the second is going to habrahabr.ru.
So, then the user clicks on the button “The option to create”. We offer a choice. To do this, we add addClickListener to the action. Like this:
Since it is more convenient to use Lambda expressions; we will write all the following handlers using them. ->
Next, we will add the processing to the button (buttonClick) Listener and, when we click it, we will output another ComboBox element.
After restarting TomCat we get the result:
The layout of the buttons (“The option to create” and “Go habrahabr.ru”) immediately catches the eye. They are very close in my opinion.
It is easy to fix.
Remove the addition of elements and add a new horizontal layer (“layout”), add buttons to it, and a new layer on the original layout.
This is what we get after restarting the application server (TomCat).
For “Create table” we will add the following part.
Make small changes. For example, after selecting the item will be read only. Add fields to enter the name of the table and the author of the future file:
We will get the result, which shows that after selecting, the opportunity has appeared to enter the name of the table and the author of the changes. The length and other parameters of the input values ​​can be limited or changed.
Here we stop in the reasoning and writing code for summing up the subtotal. We have dealt with the original Vaadin layout a little bit and tried to create several elements, and also added their processing.
From this moment we will dig a little in Liquibase . To get started is to look at the links with examples.
Creating a table - “Change: 'createTable'”
An example of creation.
To create a file, we need to add / write data to (id, author, tableName, name, type) and then assemble individual “pieces” into a single file, since in a real situation, we can have a lot of different fields.
How are we going to do this? There are several options. We will try to disassemble them in the next article.
to be continued ...
A new series of articles will be devoted to Vaadin and Liquibase .
In the first article I want to tell you about several stages to start exploring this FrameWork (Vaadin) . We will talk about the "loading" of the template and the initial addition of elements to the "layout". Let's talk a little about Liquibase. In future articles, we plan to add processing of xml files.
Vaadin .
For me, this is the "interpreter" of Java code in the user interface. In fact, I reduce the development to the level of control over the java-layer. Thanks to the server-oriented architecture based on JavaEE, you can lay a layer of complex logic without losing the settings of individual parts. And already prepared browser optimization (I'm talking about cross-browser compatibility) will keep this part of the work to a minimum.
The server-oriented model allows you to quickly (hereafter, you will see this) and create applications with high quality, reducing the risk of “getting stuck” at a certain stage. You develop in Java, and on the client you will see JavaScript.
Additionally, it must be said that the use of AJAX promises an increase in the exchange rate in the interface.
In this direction, many software products are being developed. Some of them are described in the following first and fourth articles.
If we talk about use, then for medium and large companies - this is an excellent choice (IMHO).
Necessary information about Vaadin.
Vaadin official website
Further some links to video . I strongly advise you to look.
In Russian . It contains a story about the visual creation of a small application.
In a foreign language . Best practice - a very good story about how to properly create parts of the interface.
Articles on FrameWork .
Link to the first article . A small article about the differences Vaadin from "fellow".
Link to the second article . Overview of FrameWork features.
Link to the third article . Useful "features".
Link to the fourth article . Here about GWT and Vaadin. Overview.
To create your first template, you can do the following.
The first is to install and configure several parts for correct development. If, for example, you are using IntelliJ IDEA , then when creating a new project, select Vaadin in the section “Additional Libraries and FrameWorks”. After that, you will be asked to specify “Vaadin Distribution” and additionally you can put down “Create sample application”, before these actions specify the path to the Project SDK and Application Server (all these settings are made in one window).
By the way, there are templates for other IDE.
Links to templates .
Vaadin Plug-in for Eclipse .
Vaadin Plug-in for NetBeans .
In the project, after launching TomCat you can see just such an inscription “Hello World”. At this link you can see the process again.
What is Liquibase and why do we need it?
Link to the site Liquibase .
A good article about the features of the work.
Another well-written material.
What is Liquibase ? For me, this is a convenient mechanism for creating identical types of objects on different databases (Oracle, PostgreSQL and others). Very good choice for companies developing software.
If you try to describe very briefly, then you describe in xml tables, sequences and other objects. Then the same file can be used for installation on various types of databases (with certain restrictions).
In this article, we will begin to make a user interface for, for example, creating Liquibase files (we restrict ourselves to the xml option).
Thanks to the support of many databases, we will try to explore and apply this opportunity.
')
Forgot to mention Apache Tomcat. Link to Tomcat site .
In my proposed version of the tests, you can use the built-in ability to run directly from the development environment.
Let's start with the user interface in Vaadin.
By the way, on the site itself, you can find an example of building an “Address Book” .
We will try to go our own way and start up a similar, but still “own” application.
Let's start.
If you managed to load the template, it looks like this:
package com; import com.vaadin.server.VaadinRequest; import com.vaadin.ui.*; /** * Created by Terran on 20.01.2016. */ public class MyVaadinApplication extends UI { @Override public void init(VaadinRequest request) { VerticalLayout layout = new VerticalLayout(); setContent(layout); layout.addComponent(new Label("Hello, world!")); } } In the code you can see the line.
final VerticalLayout layout = new VerticalLayout(); In fact, this is a “mock-up” to which we will add elements (now, in addition to the main elements on the site, you can find a huge amount of additional).
We offer the future user two options, the first is to go to the creation of elements, the second is to follow the link to habrahabr.ru . Here you are free to use any resource, in a real application - this could be a technical support site.
To do this, add a few elements. Here they are:
final Label startVariant = new Label(); startVariant.setValue("Choose button"); layout.addComponent(startVariant); Button buttonClick = new Button("The option to create"); buttonClick.setStyleName(ValoTheme.BUTTON_TINY); layout.addComponent(buttonClick); Button buttonHabrahabr = new Button("Go habrahabr.ru"); buttonHabrahabr.setStyleName(ValoTheme.BUTTON_DANGER); layout.addComponent(buttonHabrahabr); When you start (I run using Tomcat version - 7.0.65) you will have the following.
There are two options for the future user, the first is to go to the creation of objects, the second is going to habrahabr.ru.
So, then the user clicks on the button “The option to create”. We offer a choice. To do this, we add addClickListener to the action. Like this:
buttonHabrahabr.addClickListener(new Button.ClickListener() { @Override public void buttonClick(Button.ClickEvent clickEvent) { } }); Since it is more convenient to use Lambda expressions; we will write all the following handlers using them. ->
buttonHabrahabr.addClickListener((Button.ClickListener) clickEvent -> { }); Next, we will add the processing to the button (buttonClick) Listener and, when we click it, we will output another ComboBox element.
buttonClick.addClickListener((Button.ClickListener) clickEvent -> { final ComboBox boxChange; layout.addComponent(boxChange = new ComboBox("Choose creation variant ")); boxChange.addItems("Create Table", "Create PrimaryKey"); After restarting TomCat we get the result:
The layout of the buttons (“The option to create” and “Go habrahabr.ru”) immediately catches the eye. They are very close in my opinion.
It is easy to fix.
Remove the addition of elements and add a new horizontal layer (“layout”), add buttons to it, and a new layer on the original layout.
layout.addComponent(buttonClick); layout.addComponent(buttonHabrahabr); final HorizontalLayout horizontalLayoutForButton = new HorizontalLayout(); horizontalLayoutForButton.addComponents(buttonClick,buttonHabrahabr); horizontalLayoutForButton.setSpacing(true); layout.addComponent(horizontalLayoutForButton); This is what we get after restarting the application server (TomCat).
For “Create table” we will add the following part.
boxChange.addValueChangeListener((Property.ValueChangeListener) valueChangeEvent -> { if (Objects.equals(boxChange.getValue(), "Create Table")) { } else if (Objects.equals(boxChange.getValue(), "Create PrimaryKey")) { } } Make small changes. For example, after selecting the item will be read only. Add fields to enter the name of the table and the author of the future file:
boxChange.addValueChangeListener((Property.ValueChangeListener) valueChangeEvent -> { if (Objects.equals(boxChange.getValue(), "Create Table")) { boxChange.setReadOnly(true); final TextField tableName = new TextField("Enter table name"); tableName.setWidth("300px"); tableName.setRequired(true); tableName.addValueChangeListener(event -> { String value = (String) event.getProperty().getValue(); Notification.show("Value is: " + value); }); tableName.setImmediate(true); final TextField authorName = new TextField("Enter author name"); authorName.setWidth("300px"); authorName.setRequired(true); authorName.addValueChangeListener(event -> { String authorNameValue = (String) event.getProperty().getValue(); Notification.show("Value is: " + authorNameValue); }); authorName.setImmediate(true); layout.addComponent(tableName); layout.addComponent(authorName); We will get the result, which shows that after selecting, the opportunity has appeared to enter the name of the table and the author of the changes. The length and other parameters of the input values ​​can be limited or changed.
Here we stop in the reasoning and writing code for summing up the subtotal. We have dealt with the original Vaadin layout a little bit and tried to create several elements, and also added their processing.
From this moment we will dig a little in Liquibase . To get started is to look at the links with examples.
Creating a table - “Change: 'createTable'”
An example of creation.
<?xml version="1.0" encoding="UTF-8"?> <databaseChangeLog xmlns="http://www.liquibase.org/xml/ns/dbchangelog" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd"> <changeSet id="1" author="bob"> <createTable tableName="department"> <column name="id" type="int"> <constraints primaryKey="true" nullable="false"/> </column> <column name="name" type="varchar(50)"> <constraints nullable="false"/> </column> <column name="active" type="boolean" defaultValueBoolean="true"/> </createTable> </changeSet> </databaseChangeLog> To create a file, we need to add / write data to (id, author, tableName, name, type) and then assemble individual “pieces” into a single file, since in a real situation, we can have a lot of different fields.
How are we going to do this? There are several options. We will try to disassemble them in the next article.
to be continued ...
Source: https://habr.com/ru/post/275795/
All Articles