{"id":295945,"date":"2019-12-17T21:00:05","date_gmt":"2019-12-17T21:00:05","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=295945"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=295945","title":{"rendered":"\u0411\u044b\u0441\u0442\u0440\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 Web \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Vaadin \u0438 Spring Boot"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/480852\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gx\/-o\/lw\/gx-olwos1pluf9izwqqd5j2r1uk.png\" alt=\"\u041a\u041f\u0414\u0412\"\/><\/p>\n<p>  <\/p>\n<p>\u0426\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Vaadin 14 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Spring Boot.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/435144\/\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Spring Boot<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/435114\/\">Spring Data JPA<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/438870\/\">Lombok \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0435\u043b\u0438\u0447\u0438\u0435 Java<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/company\/haulmont\/blog\/416893\/\">Vaadin Flow \u2014 \u0434\u0438\u043a\u043e\u0432\u0438\u043d\u043d\u044b\u0439 \u043e\u043b\u0435\u043d\u044c<\/a><a name=\"habracut\"><\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h4 id=\"vpechatleniya\">\u0412\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f<\/h4>\n<p>  <\/p>\n<p>Vaadin 14 \u2014 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0434\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u0441 \u043d\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 JavaFX, Android, \u0438 \u0434\u0430\u0436\u0435 J2ME, \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u043b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c frontend \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (\u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f HTML, CSS, JS \u0438\u043c\u0435\u044e\u0442\u0441\u044f) \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u043b \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u043c\u043e\u0435.<\/p>\n<p>  <\/p>\n<p><strong>Disclaimer<\/strong><\/p>\n<p>  <\/p>\n<p>\u0422\u0435 \u043a\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0435\u0449\u0435 \u0441 Spring Boot \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Spring Initializr, \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u043e\u043c\u0443 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0443, \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0430\u0442\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u043d\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0438\u043d\u0430\u0447\u0435 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439.<\/p>\n<p>  <\/p>\n<h4 id=\"bystryy-start\">\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442<\/h4>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/start.spring.io\/\">Spring Initializr<\/a>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>Spring Data JPA (\u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445)<\/li>\n<li>Vaadin (\u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f)<\/li>\n<li>Lombok (\u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f boiler-plate \u043a\u043e\u0434\u0430)<\/li>\n<li>MySQL Driver (\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e mariadb, \u0432 spring initializr&#8217;e \u0435\u0433\u043e \u043d\u0435\u0442)<\/li>\n<\/ul>\n<p>  <\/p>\n<h4 id=\"nastroyka-applicationproperties-i-bazy-dannyh\">\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 application.properties \u0438 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445<\/h4>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 Spring Initializr \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u043e\u0442\u043e\u0432 \u043a \u0437\u0430\u043f\u0443\u0441\u043a\u0443, \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c application.properties \u0443\u043a\u0430\u0437\u0430\u0432 \u043f\u0443\u0442\u044c \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">spring.datasource.url = jdbc:mariadb:\/\/127.0.0.1:3306\/test spring.datasource.username=user spring.datasource.password=password spring.jpa.hibernate.ddl-auto=update<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435: ddl-auto<\/b><\/p>\n<div class=\"spoiler_text\">\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 ddl-auto \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c update \u043d\u0430 \u0436\u0438\u0432\u043e\u0439 \u0431\u0430\u0437\u0435 \u0438\u043b\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u0445\u0435\u043c\u0443 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445.<br \/>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f ddl-auto:<br \/>  create \u2014 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0432 \u0441\u0442\u0430\u0440\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u044b (\u043f\u043e\u0442\u0435\u0440\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0445\u0435\u043c\u044b)<br \/>  validate \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0442\u043e hibernate \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<br \/>  update \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0431\u0435\u0437 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u043e\u043b\u0435\u0439 \u0438\u0437 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438<br \/>  create-drop \u2014 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0435\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c \u0443\u0434\u0430\u043b\u044f\u0435\u0442, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0421 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c ddl-auto:update \u2014 hibernate \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0430\u0448\u0435\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u0442.\u043a. \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u043a\u043d\u0438\u0433\u0443 \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">Contact.class<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"java\">@Entity(name = &quot;Contacts&quot;) @Getter @Setter public class Contact {     @Id     @GeneratedValue(strategy = GenerationType.AUTO)     private int id;     private String firstName;     private String secondName;     private String fatherName;     private String numberPhone;     private String email; }<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 List \u0442.\u043a. Spring Data JPA \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 Iterable \u0432\u043c\u0435\u0441\u0442\u043e List.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">ContactRepository.class<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"java\">public interface ContactRepository extends CrudRepository&lt;Contact, Integer&gt; {     List&lt;Contact&gt; findAll();     }<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0430 Vaadin \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0444\u043e\u0440\u043c \u0432\u0432\u043e\u0434\u0430, \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <a href=\"https:\/\/vaadin.com\/components\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 framework&#8217;\u0430<\/a><\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 ContactList. \u0412\u0441\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043e\u0442 <a href=\"https:\/\/vaadin.com\/components\/vaadin-app-layout\">AppLayout<\/a> \u2014 \u044d\u0442\u043e \u0442\u0438\u043f\u043e\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437:<\/p>\n<p>  <\/p>\n<ul>\n<li>Navbar (\u0448\u0430\u043f\u043a\u0430)<\/li>\n<li>Drawer (\u0431\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c)<\/li>\n<li>Content (\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435)<br \/>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 Navbar \u0438 Drawer \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 \u0432 Content \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 VerticalLayout \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 ManageContact, \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432 \u043d\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 HasUrlParameter \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 id \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430, \u043f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<br \/>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 URL \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f Route:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">@Route(&quot;contacts&quot;) public class ContactList extends AppLayout {}  @Route(&quot;manageContact&quot;) public class ManageContact extends AppLayout implements HasUrlParameter&lt;Integer&gt; {}<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"sozdanie-spiska-kontaktov\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432<\/h4>\n<p>  <\/p>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 ContactList, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0432 \u0438\u0445 \u043f\u043e\u043b\u044f\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0432 \u043f\u043e\u043b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. <\/p>\n<p>  <\/p>\n<pre><code class=\"java\">@Route(&quot;contacts&quot;) public class ContactList extends AppLayout {     VerticalLayout layout;     Grid&lt;Contact&gt; grid;     RouterLink linkCreate;      @Autowired     ContactRepository contactRepository;      public ContactList(){         layout = new VerticalLayout();         grid = new Grid&lt;&gt;();         linkCreate = new RouterLink(&quot;\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0430\u043a\u0442&quot;,ManageContact.class,0);         layout.add(linkCreate);         layout.add(grid);         addToNavbar(new H3(&quot;\u0421\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432&quot;));         setContent(layout);     } }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041e\u0431 Autowired<\/b><\/p>\n<div class=\"spoiler_text\">\n<p>\u041d\u0435 \u043f\u044b\u0442\u0430\u0439\u0442\u0435\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a contactRepository \u0438\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u044d\u0442\u043e \u043d\u0435\u043f\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u0442 NullPointerException, \u043f\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 PostConstruct, \u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441 ContactList \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 VerticalLayout \u0434\u043b\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c, \u0432 \u043d\u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c <a href=\"https:\/\/vaadin.com\/api\/platform\/14.1.2\/com\/vaadin\/flow\/router\/RouterLink.html\">RouterLink<\/a> (\u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430) \u0438 <a href=\"https:\/\/vaadin.com\/components\/vaadin-grid\">Grid<\/a> \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b. Grid \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c Contact \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u043d\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u043e\u043c \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 setItems();<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">Grid&lt;Contact&gt; grid; public ContactList(){         grid = new Grid&lt;&gt;(); \/\/ \u0421\u043e\u0437\u0434\u0430\u0441\u0442 \u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0431\u0435\u0437 \u043a\u043e\u043b\u043e\u043d\u043e\u043a         grid = new Grid&lt;&gt;(Contact.class); \/\/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043f\u043e\u043b\u044f\u043c\u0438 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0434\u0430\u0432 \u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u043e\u043b\u044f     }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043d\u0430\u043c \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0442.\u043a. \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0442\u0430\u0442\u044c\u0438 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432. <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 contactRepository, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 PostConstruct<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e fillGrid()<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"java\">    @PostConstruct     public void fillGrid(){         List&lt;Contact&gt; contacts = contactRepository.findAll();         if (!contacts.isEmpty()){             \/\/\u0412\u044b\u0432\u0435\u0434\u0435\u043c \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435             grid.addColumn(Contact::getFirstName).setHeader(&quot;\u0418\u043c\u044f&quot;);             grid.addColumn(Contact::getSecondName).setHeader(&quot;\u0424\u0430\u043c\u0438\u043b\u0438\u044f&quot;);             grid.addColumn(Contact::getFatherName).setHeader(&quot;\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&quot;);             grid.addColumn(Contact::getNumberPhone).setHeader(&quot;\u041d\u043e\u043c\u0435\u0440&quot;);             grid.addColumn(Contact::getEmail).setHeader(&quot;E-mail&quot;);             \/\/\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f             grid.addColumn(new NativeButtonRenderer&lt;Contact&gt;(&quot;\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c&quot;, contact -&gt; {                 UI.getCurrent().navigate(ManageContact.class,contact.getId());             }));             grid.addColumn(new NativeButtonRenderer&lt;Contact&gt;(&quot;\u0423\u0434\u0430\u043b\u0438\u0442\u044c&quot;, contact -&gt; {                 Dialog dialog = new Dialog();                 Button confirm = new Button(&quot;\u0423\u0434\u0430\u043b\u0438\u0442\u044c&quot;);                 Button cancel = new Button(&quot;\u041e\u0442\u043c\u0435\u043d\u0430&quot;);                 dialog.add(&quot;\u0412\u044b \u0443\u0432\u0435\u0440\u0435\u043d\u044b \u0447\u0442\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0430\u043a\u0442?&quot;);                 dialog.add(confirm);                 dialog.add(cancel);                 confirm.addClickListener(clickEvent -&gt; {                    contactRepository.delete(contact);                    dialog.close();                    Notification notification = new Notification(&quot;\u041a\u043e\u043d\u0442\u0430\u043a\u0442 \u0443\u0434\u0430\u043b\u0435\u043d&quot;,1000);                    notification.setPosition(Notification.Position.MIDDLE);                    notification.open();                    grid.setItems(contactRepository.findAll());                 });                 cancel.addClickListener(clickEvent -&gt; {                     dialog.close();                 });                 dialog.open();             }));             grid.setItems(contacts);         }     }<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f NativeButtonRenderer, \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">grid.addColumn(new NativeButtonRenderer&lt;Contact&gt;(&quot;\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c&quot;, contact -&gt; {        \/\/DO SOMETHING })); grid.addColumn(new NativeButtonRenderer&lt;Contact&gt;(&quot;\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435&quot;, new ClickableRenderer.ItemClickListener&lt;Contact&gt;() {           @Override           public void onItemClicked(Contact contact) {              \/\/DO SOMETHING           }}));<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/b><\/p>\n<div class=\"spoiler_text\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3r\/gv\/r_\/3rgvr_xegcdji_o0azcc3e6cfb8.png\" alt=\"\u0421\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432\"\/><\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h4 id=\"sozdanie-stranicy-redaktirovaniya-kontaktov\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432<\/h4>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0432 \u0432\u0438\u0434\u0435 id \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 setParameter():<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">    @Override     public void setParameter(BeforeEvent beforeEvent, Integer contactId) {         id = contactId;         if (!id.equals(0)){             addToNavbar(new H3(&quot;\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430&quot;));         }         else {             addToNavbar(new H3(&quot;\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430&quot;));         }         fillForm(); \/\/\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b     }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e ContactList, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c VerticalLayout, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c FormLayout \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0444\u043e\u0440\u043c. \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0443\u0436\u0435 \u043d\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 PostConstruct, \u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u043c\u0435\u0440\u0430 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430 \u0438\u0437 URL, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0430: \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 -&gt; @PostConstruct -&gt; <a href=\"https:\/\/habr.com\/ru\/users\/override\/\" class=\"user_link\">Override<\/a><\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">ManageContact.class<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"java\">@Route(&quot;manageContact&quot;) public class ManageContact extends AppLayout implements HasUrlParameter&lt;Integer&gt; {      Integer id;     FormLayout contactForm;     TextField firstName;     TextField secondName;     TextField fatherName;     TextField numberPhone;     TextField email;     Button saveContact;      @Autowired     ContactRepository contactRepository;      public ManageContact(){         \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b         contactForm = new FormLayout();         firstName = new TextField(&quot;\u0418\u043c\u044f&quot;);         secondName = new TextField(&quot;\u0424\u0430\u043c\u0438\u043b\u0438\u044f&quot;);         fatherName = new TextField(&quot;\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&quot;);         numberPhone = new TextField(&quot;\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430&quot;);         email = new TextField(&quot;\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430&quot;);         saveContact = new Button(&quot;\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c&quot;);         \/\/\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0444\u043e\u0440\u043c\u0443         contactForm.add(firstName, secondName,fatherName,numberPhone,email,saveContact);         setContent(contactForm);     }      @Override     public void setParameter(BeforeEvent beforeEvent, Integer contactId) {         id = contactId;         if (!id.equals(0)){             addToNavbar(new H3(&quot;\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430&quot;));         }         else {             addToNavbar(new H3(&quot;\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430&quot;));         }         fillForm();     }      public void fillForm(){         if (!id.equals(0)){             Optional&lt;Contact&gt; contact = contactRepository.findById(id);             contact.ifPresent(x -&gt; {                 firstName.setValue(x.getFirstName());                 secondName.setValue(x.getSecondName());                 fatherName.setValue(x.getFatherName());                 numberPhone.setValue(x.getNumberPhone());                 email.setValue(x.getEmail());             });         }         saveContact.addClickListener(clickEvent-&gt;{             \/\/\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u0444\u043e\u0440\u043c\u044b             Contact contact = new Contact();             if (!id.equals(0)){                 contact.setId(id);             }             contact.setFirstName(firstName.getValue());             contact.setSecondName(secondName.getValue());             contact.setFatherName(fatherName.getValue());             contact.setEmail(email.getValue());             contact.setNumberPhone(numberPhone.getValue());             contactRepository.save(contact);              Notification notification = new Notification(id.equals(0)? &quot;\u041a\u043e\u043d\u0442\u0430\u043a\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d&quot;:&quot;\u041a\u043e\u043d\u0442\u0430\u043a\u0442 \u0431\u044b\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d&quot;,1000);             notification.setPosition(Notification.Position.MIDDLE);             notification.addDetachListener(detachEvent -&gt; {                 UI.getCurrent().navigate(ContactList.class);             });             contactForm.setEnabled(false);             notification.open();         });     } }<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/b><\/p>\n<div class=\"spoiler_text\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gy\/el\/nx\/gyelnxnr0lxp5jjyvx8mbit8ttw.png\" alt=\"\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0430\"\/><\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0418\u0442\u043e\u0433\u0438: Vaadin 14 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u0439 framework \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u044f \u0432 \u0431\u0430\u0433\u0430\u0436\u0435 \u0437\u043d\u0430\u043d\u0438\u0439 \u0442\u043e\u043b\u044c\u043a\u043e Java, \u0438 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u043e \u043a \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0436\u0435\u043b\u0438 \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c HTML5+JS. \u0414\u0430\u043d\u043d\u044b\u0439 framework \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0438\u0437\u0443\u0447\u0430\u044f front-end \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u044b\u043b\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043b\u0435\u0433\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u0445 xml \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439, \u0438 \u0442\u043e \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c web-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041f\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 Spring Boot \u0438 Spring Data JPA \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0436\u0438\u0437\u043d\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u0421\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0443\u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0432\u0448\u0438\u043c\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043d\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u043e\u0432\u0438\u0447\u043a\u0443 \u043d\u0430\u0447\u0430\u0442\u044c \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c Spring framework.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/DiProtsenko\/vaadin-test\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c<\/a><\/p>\n<p>  <\/p>\n<blockquote><p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0433\u0440\u0430\u043c\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438 \u043f\u0443\u043d\u043a\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0448\u0443 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u0432 \u043b\u0438\u0447\u043a\u0443<\/p><\/blockquote>\n<\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d() } } }t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>      <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/480852\/\"> https:\/\/habr.com\/ru\/post\/480852\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/480852\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gx\/-o\/lw\/gx-olwos1pluf9izwqqd5j2r1uk.png\" alt=\"\u041a\u041f\u0414\u0412\"\/><\/p>\n<p>  <\/p>\n<p>\u0426\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Vaadin 14 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Spring Boot.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/435144\/\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Spring Boot<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/435114\/\">Spring Data JPA<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/post\/438870\/\">Lombok \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432\u0435\u043b\u0438\u0447\u0438\u0435 Java<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/company\/haulmont\/blog\/416893\/\">Vaadin Flow \u2014 \u0434\u0438\u043a\u043e\u0432\u0438\u043d\u043d\u044b\u0439 \u043e\u043b\u0435\u043d\u044c<\/a><br \/>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-295945","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=295945"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295945\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=295945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=295945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=295945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}