{"id":255857,"date":"2015-04-23T12:30:02","date_gmt":"2015-04-23T08:30:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=255857"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=255857","title":{"rendered":"\u0412\u0435\u0431 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u0439 Java. \u0418\u0437\u0443\u0447\u0430\u0435\u043c Vaadin \u2014 \u043a\u0440\u0443\u0442\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439"},"content":{"rendered":"<p>     \t<img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/de1\/8aa\/bba\/de18aabba87840d9b9289e39b54f508e.jpg\"\/><\/p>\n<p>  \u0412 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043c\u0435\u0441\u0442\u043e Java \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u043e\u0439 \u0444\u0440\u043e\u043d\u0442-\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0430 JavaScript. Java \u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043a\u043e\u0433\u0434\u0430 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u0442\u044b \u0432\u0438\u0434\u0435\u043b Java-\u0430\u043f\u043f\u043b\u0435\u0442..?) \u043d\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043d\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>  \u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u0441\u0435 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043f\u0438\u0441\u0430\u043b\u043e\u0441\u044c \u043d\u0430 Java, \u043d\u043e \u0435\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u0431\u044b \u00ab\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439\u00bb \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u0431\u044b \u0441\u0430\u043c\u044b\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c \u043e \u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438?<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/e91\/e5e\/119\/e91e5e11922f4fbfa640148ca9ebb5c2.gif\"\/><br \/>  \u0420\u0438\u0441. 1. \u041b\u043e\u0433\u043e\u0442\u0438\u043f Vaadin<\/p>\n<p>  Vaadin (\u043a\u0441\u0442\u0430\u0442\u0438, \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u0441 \u0444\u0438\u043d\u0441\u043a\u043e\u0433\u043e \u044d\u0442\u043e \u0441\u043b\u043e\u0432\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u043e\u043b\u0435\u043d\u0438\u0445\u0430\u00bb) \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u0432, \u0442\u0430\u043a \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432. \u0412\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u043d\u0430 Java, \u043d\u043e Java-\u043a\u043e\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u044b\u0439 JavaScript.<\/p>\n<p>  \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e Vaadin \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e API, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e API, \u043d\u0430\u0431\u043e\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441 \u043e\u0431\u0435\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d, \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0442\u0435\u043c \u0434\u043b\u044f \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 (\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430). <\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/11a\/90a\/bdb\/11a90abdb9084d8cb28b9a55264777b7.gif\"\/><br \/>  \u0420\u0438\u0441. 2. \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 Vaadin<\/p>\n<p>  \u041d\u0430 \u0440\u0438\u0441. 2 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u044b \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Vaadin.<\/p>\n<h2>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h2>\n<p>  <\/p>\n<h4>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h4>\n<p>  \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u043b\u044f Vaadin \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f AJAX-\u0434\u0432\u0438\u0436\u043e\u043a Vaadin Client-Side Engine, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0432\u0435\u0431, \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u043a \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u0443\u044e Java-\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0441 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c Vaadin \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u0438 \u043e \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438 \u043e\u0431 AJAX-\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0414\u0432\u0438\u0436\u043e\u043a Vaadin \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0432\u0441\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u043e\u0431\u043c\u0435\u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. <\/p>\n<p>  \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Vaadin \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u043b\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 Java. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0447\u0438\u0441\u0442\u0443\u044e Java \u0432 JAR-\u0444\u0430\u0439\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c\u0443 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0441\u0435\u0440\u0432\u043b\u0435\u0442\u043e\u0432 \u0438\u043b\u0438 \u043f\u043e\u0440\u0442\u043b\u0435\u0442\u043e\u0432 \u043e\u0442 Tomcat \u0434\u043e Oracle WebLogic. \u0421\u0435\u0440\u0432\u043b\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u043a\u0430\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438. \u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c (event listeners), \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0415\u0441\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u043d\u043e\u0441\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0441\u0435\u0440\u0432\u043b\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0438\u0445 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0432\u0435\u0442. \u0414\u0432\u0438\u0436\u043e\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u0438 \u043d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u043e\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. <\/p>\n<h2>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h2>\n<p>  <\/p>\n<h4>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f<\/h4>\n<p>  \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 Java, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0442\u0435\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 JavaScript \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 Vaadin Compiler, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 Google Web Toolkit (GWT). \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e JavaScript. \u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 DOM \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c.<\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0441\u0440\u0435\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h2>\n<p>  \u041d\u0438\u0436\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Vaadin \u0432 \u0441\u0440\u0435\u0434\u0435 NetBeans 8.0.2 (\u0432\u0435\u0440\u0441\u0438\u044f Vaadin Plug-in for NetBeans \u2014 1.1.3); \u0432\u043e \u0432\u0440\u0435\u0437\u043a\u0435 \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0438\u0435 \u0432\u0438\u0434\u0435\u043e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 IntelliJ IDEA \u0438 Eclipse (\u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f Eclipse \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430). <\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u0432 NetBeans IDE \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 (Tools -&gt; Plugins -&gt; Available Plugins, \u0432\u0432\u0435\u0441\u0442\u0438 vaadin \u0432 \u043f\u043e\u043b\u0435 Search, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0443 &#8216;Vaadin Plug-in for NetBeans&#8217; \u0438 \u043d\u0430\u0436\u0430\u0442\u044c Install, \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0432\u0448\u0438\u0441\u044c \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u0430\u043c\u0438). <\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (File -&gt; New Project) \u0441\u0442\u0430\u043b\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043d\u043e\u0432\u0430\u044f \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f Vaadin. \u0412\u044b\u0431\u0435\u0440\u0435\u043c Vaadin Web Application Project, \u043d\u0430\u0436\u043c\u0435\u043c Next \u0438 \u0443\u043a\u0430\u0436\u0435\u043c \u0438\u043c\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 myvaadin. <\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/cc5\/a4a\/0ca\/cc5a4a0cad0945128de0b4ad213f3b5b.gif\"\/><br \/>  \u0420\u0438\u0441. 3. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f Finish \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Vaadin \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Vaadin \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 myvaadin-ui, \u0444\u0430\u0439\u043b \/Source Packages\/com.mycompany.myvaadin\/MyUI.java; \u0435\u0433\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a (\u043e\u043f\u0443\u0449\u0435\u043d\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 package \u0438 import):<\/p>\n<pre><code class=\"java\">@Theme(&quot;mytheme&quot;) @Widgetset(&quot;com.mycompany.myvaadin.MyAppWidgetset&quot;) public class MyUI extends UI {      @Override     protected void init(VaadinRequest vaadinRequest) {         final VerticalLayout layout = new VerticalLayout();         layout.setMargin(true);         setContent(layout);          Button button = new Button(&quot;Click Me&quot;);         button.addClickListener(new Button.ClickListener() {             @Override             public void buttonClick(ClickEvent event) {                 layout.addComponent(new Label(&quot;Thank you for clicking&quot;));             }         });         layout.addComponent(button);      }      @WebServlet(urlPatterns = &quot;\/*&quot;, name = &quot;MyUIServlet&quot;, asyncSupported = true)     @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)     public static class MyUIServlet extends VaadinServlet {     } } <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 MyUI, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430 UI. \u0412 \u043d\u0435\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 init(). \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430 VerticalLayout, \u0443 \u043d\u0435\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f (margin), \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0438\u043f\u0430 Label \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u0417\u0430\u0442\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0435 \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430 addComponent(). \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430  <a href=\"http:\/\/habrahabr.ru\/users\/theme\/\" class=\"user_link\">Theme<\/a>(\u00abmytheme\u00bb) \u0437\u0430\u0434\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u0442\u0435\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f (\u043e \u043d\u0438\u0445 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435).<\/p>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0432\u044b\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b (\u043f\u0440\u0430\u0432\u044b\u0439 \u043a\u043b\u0438\u043a \u043d\u0430 &#8216;myvaadin \u2014 myvaadin-parent&#8217; -&gt; Build)<\/p>\n<p>  \u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d Jetty \u0438\u043b\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 NetBeans \u0441\u0435\u0440\u0432\u0435\u0440 GlassFish Server<br \/>  \u0429\u0435\u043b\u043a\u043d\u0435\u043c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 -&gt; Debug \u2013&gt; \u0432 \u043e\u043a\u043d\u0435 Select Deployment Server \u0438\u0437 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0432\u044b\u0431\u0435\u0440\u0435\u043c GlassFish Server.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u043b\u0435\u0442 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/f7a\/0c1\/052\/f7a0c1052fc744bcba2ad3132a04b163.gif\"\/><br \/>  \u0420\u0438\u0441. 4. \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Vaadin<\/p>\n<h2>\u0422\u0435\u043c\u044b \u0438 \u0441\u0442\u0438\u043b\u0438<\/h2>\n<p>  \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440\u0435 \u0438\u043b\u0438 \u0432 Firebug, \u0447\u0442\u043e \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u0435 (\u0440\u0438\u0441. 5).<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/756\/3ee\/762\/7563ee7622d84178ae931971ae533d97.gif\"\/><br \/>  \u0420\u0438\u0441. 5. \u041a\u043d\u043e\u043f\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/p>\n<pre><code class=\"html\">&lt;div tabindex=&quot;0&quot; role=&quot;button&quot; class=&quot;v-button v-widget&quot;&gt;   &lt;span class=&quot;v-button-wrap&quot;&gt;   &lt;span class=&quot;v-button-caption&quot;&gt;Click Me&lt;\/span&gt;   &lt;\/span&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/234\/bbb\/965\/234bbb965a2a41aaaec19b5e0b08df4a.gif\"\/><br \/>  \u0420\u0438\u0441. 6. \u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 HTML \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 Firebug<\/p>\n<p>  \u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 styles.css. \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \/Web Pages\/VAADIN\/themes\/mytheme\/ \u043f\u0440\u043e\u0435\u043a\u0442\u0430 myvaadin-ui \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 SASS-\u0444\u0430\u0439\u043b\u043e\u0432 styles.scss, mytheme.scss \u0438 addons.scss, \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u043d\u044b\u0445 \u0432 \u0442\u043e\u043c \u0436\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435. \u0412 \u043d\u0438\u0445 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c, \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f Valo (\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c Reindeer \u0438 \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438). \u041f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e Valo \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/vaadin.com\/book\/-\/page\/themes.valo.html\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u0430 <a href=\"http:\/\/demo.vaadin.com\/valo-theme\">\u0437\u0434\u0435\u0441\u044c<\/a> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0442\u0435\u043c\u044b \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u043c\u0435\u043d\u044b \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0447\u0438\u0442\u0430\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0446\u0432\u0435\u0442 \u0448\u0440\u0438\u0444\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430. \u0421\u0430\u043c \u0436\u0435 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 $v-background-color. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0430\u0439\u043b\u0430 mytheme.scss \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<pre><code class=\"html\">$v-background-color: #000; <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u0449\u0435\u043b\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u044b\u0448\u043a\u0438 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 myvaadin-ui \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c Vaadin -&gt; Compile Widgetset and Theme \u0438\u043b\u0438 Compile Theme, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. <br \/>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u0447\u0435\u0440\u043d\u044b\u0439, \u0446\u0432\u0435\u0442 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u043a\u0430\u0436\u0435\u043c, \u043f\u043e\u0434 \u043f\u043b\u043e\u0441\u043a\u0438\u0439 \u0441\u0442\u0438\u043b\u044c Metro, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0432\u0443\u0445 \u0434\u0435\u0441\u044f\u0442\u043a\u043e\u0432 \u0441\u0442\u0440\u043e\u043a, \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0442\u0438\u043b\u0435\u0439. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"http:\/\/demo.vaadin.com\/valo-theme\/\">\u0437\u0434\u0435\u0441\u044c<\/a> (\u0432\u044b\u0431\u0440\u0430\u0432 \u0442\u0435\u043c\u0443 Metro \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443), \u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u2014 <a href=\"https:\/\/github.com\/vaadin\/valo-demo\/blob\/master\/src\/main\/webapp\/VAADIN\/themes\/tests-valo-metro\/_variables.scss\">\u0437\u0434\u0435\u0441\u044c<\/a>:<\/p>\n<p>  \u041c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u043d\u0430\u0434\u043f\u0438\u0441\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435 \u043c\u043e\u0436\u043d\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u0444\u0430\u0439\u043b mytheme.scss \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 (\u043d\u0438\u0436\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u00ab\/\/ Insert your own theme rules here\u00bb):<\/p>\n<pre><code class=\"html\">$textcolor: red;  .v-button-caption {   color: $textcolor; } <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043c\u044b \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0442\u0435\u043c\u0443, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0433\u043e\u0442\u043e\u0432\u044b\u0445, \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043c\u044b \u0441 mytheme \u043d\u0430 \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445: valo, runo, reindeer, chameleon, liferay.<\/p>\n<p>  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u0435\u043c\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/vaadin.com\/book\/-\/page\/themes.html\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430<\/h2>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u043e\u0433\u043e Vaadin, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0444\u0430\u0439\u043b-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430. <\/p>\n<h4>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u2014 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 TreeTable \u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438<\/h4>\n<p>  Container \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Vaadin, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0431\u043e\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u0438\u043b\u0438 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/vaadin.com\/book\/-\/page\/datamodel.container.html\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 SQL \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <a href=\"https:\/\/vaadin.com\/book\/-\/page\/sqlcontainer.html\">SQLContainer<\/a>. \u0414\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 FilesystemContainer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>  \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0438\u043f\u0430 Table (\u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435), Tree \u0438 TreeTable (\u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445) \u0438 \u0434\u0440\u0443\u0433\u0438\u0445.<\/p>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c fileman. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u0443 MyUI \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 TreeTable, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 (\u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0440\u0430\u0441\u043d\u044b\u043c, \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 import; \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c &lt;Alt + Enter&gt; \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u00abAdd import for&#8230;\u00bb. \u041d\u0443\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0438\u0436\u0435 \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430 File \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438\u0437 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0438\u043c\u0435\u043d\u043d\u043e java.io.File):<\/p>\n<pre><code class=\"java\">public class MyUI extends UI { . . .     private TreeTable treetable;      private void initFileTree(ComponentContainer parentLayout) {         \/\/ \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442 TreeTable \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u043e\u043c \u0432\u0438\u0434\u0435         treetable = new TreeTable(&quot;File System&quot;);         treetable.setSelectable(true);         treetable.setColumnCollapsingAllowed(true);         treetable.setColumnReorderingAllowed(true);         treetable.setSizeFull();         parentLayout.addComponent(treetable);     } . . . }     <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 TreeTable \u0438\u0437 FilesystemContainer<\/p>\n<pre><code class=\"java\">private void updateFileTree(File sourcePath) {     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b     FilesystemContainer currentFileSystem = new FilesystemContainer(sourcePath);     currentFileSystem.setRecursive(false); \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e\u0435 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432      \/\/ \u0421\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c TreeTable, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443     treetable.setContainerDataSource(currentFileSystem);     treetable.setItemIconPropertyId(&quot;Icon&quot;);     treetable.setVisibleColumns(new Object[]{&quot;Name&quot;, &quot;Size&quot;, &quot;Last Modified&quot;}); \/\/ \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0438\u043a\u043e\u043d\u043a\u0438, \u0443\u043a\u0430\u0436\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<pre><code class=\"java\">private File currentPath;  \/\/ \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \/\/ ~\/NetBeansProjects\/fileman\/target\/fileman-1.0-SNAPSHOT\/ private void getDefaultDirectory() {     UI ui = MyVaadinUI.getCurrent();     VaadinSession session = ui.getSession();     VaadinService service = session.getService();     currentPath = service.getBaseDirectory(); }  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 initAll, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 \u043d\u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432:  \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 private void initAll(VerticalLayout layout) {     initFileTree(layout);     getDefaultDirectory();     updateFileTree(currentPath); } <\/code><\/pre>\n<p>  \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 init() \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0441\u0435, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 button, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0446\u0435 \u0432\u044b\u0437\u043e\u0432 \u043d\u043e\u0432\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 initAll() \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b init() \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"java\">@Override protected void init(VaadinRequest request) {     final VerticalLayout layout = new VerticalLayout();     layout.setMargin(true);     setContent(layout);     initAll(layout); } <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043f\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f <\/p>\n<pre><code class=\"java\">\/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 private void updateAll() {     updateFileTree(currentPath);     updateInfo(); }  \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0444\u0430\u0439\u043b\u0435\/\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 (\u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u0430\/\u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430) private void updateInfo() { } <\/code><\/pre>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0444\u0430\u0439\u043b \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f (deploy) \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<h4>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 TreeTable<\/h4>\n<p>  \u0412 \u043a\u043e\u043d\u0446\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 initFileTree \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043e\u0434\u0438\u043d\u0430\u0440\u043d\u043e\u0433\u043e \u0438 \u0434\u0432\u043e\u0439\u043d\u043e\u0433\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b\u0448\u0438:<\/p>\n<pre><code class=\"java\">\/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f treetable.addItemClickListener(new ItemClickEvent.ItemClickListener() {     @Override     public void itemClick(ItemClickEvent itemClickEvent) {         String clickedFilename = itemClickEvent.getItemId().toString(); \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u044b\u043b\u0430 \u043d\u0430\u0436\u0430\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043c\u044b\u0448\u0438         System.out.println(&quot;ItemClick: pathname:&quot; + clickedFilename);          \/\/ \u0415\u0441\u043b\u0438 \u0434\u0432\u043e\u0439\u043d\u043e\u0439 \u043a\u043b\u0438\u043a         if (itemClickEvent.isDoubleClick()) {             doChangeDir(clickedFilename);         } else {             doSelectFile(clickedFilename);         }     } }); <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0443 MyUI \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/p>\n<pre><code class=\"java\">private String selectedFilename;  \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u2014 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 private void doRefresh() {     updateAll(); }  \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 private void doChangeDir(String path) {     currentPath = new File(path);     if (currentPath.isDirectory()) {         selectedFilename = null;         updateAll();     } }  \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435 private void doUpLevel() {     currentPath = currentPath.getParentFile();     selectedFilename = null;     updateAll(); }  \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u2014 \u0432\u044b\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u0430 private void doSelectFile(String filename) {     selectedFilename = filename;     updateInfo(); } <\/code><\/pre>\n<p>  \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u043e \u0434\u0432\u043e\u0439\u043d\u043e\u043c\u0443 \u043a\u043b\u0438\u043a\u0443 \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u043d\u0438\u0436\u0435.<\/p>\n<h4>\u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 MenuBar<\/h4>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0441 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 Refresh \u0438 Up Level \u0432 \u043f\u043e\u0434\u043c\u0435\u043d\u044e File, \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u043d\u044e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439:<\/p>\n<pre><code class=\"java\">private void initMenuBar(Layout parentLayout) {     \/\/ \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 MenuBar     \/\/ https:\/\/vaadin.com\/book\/-\/page\/components.menubar.html      \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e     MenuBar menuBar = new MenuBar();    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442     menuBar.setWidth(&quot;100%&quot;);           \/\/ \u0420\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u043d\u0430 100% \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b     parentLayout.addComponent(menuBar); \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 layout          \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043f\u043e\u0434\u043c\u0435\u043d\u044e File     final MenuItem fileMenuItem = menuBar.addItem(&quot;File&quot;, null, null);      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043c\u0435\u043d\u044e File \u044d\u043b\u0435\u043c\u0435\u043d\u0442 Refresh \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u0438 \u0435\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0435     fileMenuItem.addItem(&quot;Refresh&quot;, FontAwesome.REFRESH, new MenuBar.Command() {         @Override         public void menuSelected(MenuItem selectedItem) {             doRefresh();         }     });      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043c\u0435\u043d\u044e File \u044d\u043b\u0435\u043c\u0435\u043d\u0442 Up Level \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u0438 \u0435\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0435     fileMenuItem.addItem(&quot;Up Level&quot;, FontAwesome.ARROW_UP, new MenuBar.Command() {         @Override         public void menuSelected(MenuItem selectedItem) {             doUpLevel();         }     }); }  private void updateMenuBar() {     \/\/ \u041f\u043e\u043a\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c } <\/code><\/pre>\n<p>  \u0418 \u0432\u044b\u0437\u043e\u0432 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434 InitAll() \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 (\u0438\u043d\u0430\u0447\u0435 \u043c\u0435\u043d\u044e \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0438\u0436\u0435 \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432):<\/p>\n<pre><code class=\"java\">initMenuBar(layout); <\/code><\/pre>\n<p>  \u0438 \u0432 updateInfo():<\/p>\n<pre><code class=\"java\">updateMenuBar(); <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0412\u0435\u0440\u0445\u043d\u044f\u044f \u0438 \u043d\u0438\u0436\u043d\u044f\u044f \u043f\u0430\u043d\u0435\u043b\u0438<\/h4>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u0432\u0435\u0440\u0445\u0443, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u0443\u0442\u0438 \/ \u0438\u043c\u0435\u043d\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u043d\u0438\u0437\u0443 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0444\u0430\u0439\u043b\u0435. \u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 MyUI \u0434\u043e\u0431\u0430\u0432\u0438\u043c:<\/p>\n<pre><code class=\"java\">private Label labelFileName;  \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0443\u0442\u044c \/ \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b private void initTopPanel(Layout parentLayout) {     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432     HorizontalLayout topPanelLayout = new HorizontalLayout();     \/\/ \u0420\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u043d\u0430 100% \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b     topPanelLayout.setWidth(&quot;100%&quot;);     \/\/ \u041c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e     topPanelLayout.setSpacing(true);     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0435     parentLayout.addComponent(topPanelLayout);       \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 Refresh     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442     Button button = new Button(&quot;Refresh&quot;);     \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 \u0438\u0437 FontAwesome     button.setIcon(FontAwesome.REFRESH);     \/\/ \u0415\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432     \/\/ button.addStyleName(ValoTheme.BUTTON_SMALL);     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443     topPanelLayout.addComponent(button);                      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f     button.addClickListener(new Button.ClickListener() {          @Override         public void buttonClick(Button.ClickEvent event) {             doRefresh();         }     });      \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 Up Level     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442     button = new Button(&quot;Up Level&quot;);     \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 \u0438\u0437 FontAwesome     button.setIcon(FontAwesome.ARROW_UP);     \/\/ \u0415\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432     \/\/ button.addStyleName(ValoTheme.BUTTON_SMALL);     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443     topPanelLayout.addComponent(button);     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f     button.addClickListener(new Button.ClickListener() {         @Override         public void buttonClick(Button.ClickEvent event) {             doUpLevel();         }     });      \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442     labelFileName = new Label();     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443     topPanelLayout.addComponent(labelFileName);     topPanelLayout.setComponentAlignment(labelFileName, Alignment.MIDDLE_CENTER);     \/\/ \u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e     topPanelLayout.setExpandRatio(labelFileName, 1); }  \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 private void updateTopPanel(File currentPath, String selectedFilename) {     if (selectedFilename != null) {         labelFileName.setValue(selectedFilename);     } else {         labelFileName.setValue(currentPath.toString());     } } <\/code><\/pre>\n<p>  \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0438\u0436\u043d\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435<\/p>\n<pre><code class=\"java\">  Label[] bottomLabels;   private void initBottomPanel(Layout parentLayout) {     final String[] captions = new String[]{         &quot;File Size (Bytes)&quot;, &quot;File Date&quot;, &quot;Usable Space (Bytes)&quot;, &quot;Total Space (Bytes)&quot;, &quot;Free Space (Bytes)&quot;     };      HorizontalLayout bottomPanelLayout = new HorizontalLayout();     \/\/ \u0420\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u043d\u0430 100% \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b     bottomPanelLayout.setWidth(&quot;100%&quot;);      parentLayout.addComponent(bottomPanelLayout);      \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u044b Label \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0444\u0430\u0439\u043b\u0435     bottomLabels = new Label[captions.length];     for (int i = 0; i &lt; captions.length; i++) {         bottomLabels[i] = new Label();         bottomLabels[i].setCaption(captions[i]);         bottomLabels[i].setValue(&quot;NA&quot;);         bottomPanelLayout.addComponent(bottomLabels[i]);     } }  \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0438\u0436\u043d\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 private void updateBottomPanel(String pathname) {     try {         File file = new File(pathname);         \/\/ \u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c Label \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0444\u0430\u0439\u043b\u0435         bottomLabels[0].setValue(Long.toString(file.length()));         bottomLabels[1].setValue((new Date(file.lastModified())).toString());         \/\/ \u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0434\u0438\u0441\u043a\u0435         bottomLabels[2].setValue(Long.toString(file.getUsableSpace()));         bottomLabels[3].setValue(Long.toString(file.getTotalSpace()));         bottomLabels[4].setValue(Long.toString(file.getFreeSpace()));     } catch (Exception e) {          \/\/ \u0421\u043a\u0440\u043e\u0435\u043c \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e         for (Label bottomLabel : bottomLabels) {             bottomLabel.setValue(&quot;NA&quot;);         }     } } <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434 InitAll(), \u043f\u0440\u0438\u0432\u0435\u0434\u044f \u0435\u0433\u043e \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n<pre><code class=\"java\">private void initAll(VerticalLayout layout) {     initMenuBar(layout);     initTopPanel(layout);      initFileTree(layout);     getDefaultDirectory();     updateFileTree(currentPath);                  initBottomPanel(layout); }  <\/code><\/pre>\n<p>  \u0438 \u0432 updateInfo(), \u043f\u0440\u0438\u0432\u0435\u0434\u044f \u0435\u0433\u043e \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n<pre><code class=\"java\">private void updateInfo() {     updateMenuBar();     updateTopPanel(currentPath, selectedFilename);     updateBottomPanel(selectedFilename); } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0444\u0430\u0439\u043b-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043c\u0435\u043d\u044e, \u043f\u0430\u043d\u0435\u043b\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430.<\/p>\n<h4>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0438 \u0441\u043f\u043b\u0438\u0442\u0442\u0435\u0440 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b HorizontalSplitPanel, Embedded<\/h4>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0448\u0435\u043c\u0443 \u0444\u0430\u0439\u043b-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0443 \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 TextArea.<\/p>\n<pre><code class=\"java\">private HorizontalLayout previewLayout; private Embedded previewEmbedded;  \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0444\u0430\u0439\u043b\u0430 private void initMainPanels(VerticalLayout parentLayout) {     HorizontalSplitPanel mainPanels = new HorizontalSplitPanel();     mainPanels.setSizeFull();     parentLayout.addComponent(mainPanels);     parentLayout.setExpandRatio(mainPanels, 1);      initFileTree(mainPanels);     initPreview(mainPanels); }  \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0430\u043d\u0435\u043b\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0444\u0430\u0439\u043b\u0430 private void initPreview(ComponentContainer parentLayout) {     previewLayout = new HorizontalLayout();     previewLayout.setSizeFull();     parentLayout.addComponent(previewLayout);          \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 Embedded     previewEmbedded = new Embedded(&quot;Preview area&quot;, null);      \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c     previewEmbedded.setVisible(true);         \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443     previewLayout.addComponent(previewEmbedded);      \/\/ \u0420\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443     previewLayout.setComponentAlignment(previewEmbedded, Alignment.MIDDLE_CENTER);  }  \/\/ \u0421\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0444\u0430\u0439\u043b\u0430 private void clearPreview() {     previewEmbedded.setSource(null);     previewEmbedded.setVisible(true); }  \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0444\u0430\u0439\u043b\u0430 private void updatePreview(String pathname) {     if (pathname == null || pathname.length() == 0) {         clearPreview();         return;     }     \/\/ \u0412\u044b\u0434\u0435\u043b\u0438\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430     File file = new File(pathname);     int lastIndexOf = pathname.lastIndexOf(&quot;.&quot;);     String extension = (lastIndexOf == -1) ? &quot;&quot; : pathname.substring(lastIndexOf);     \/\/ \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u2014 \u0434\u043e 128 \u041a\u0431     final int PREVIEW_FILE_LIMIT = 128 * 1024;     \/\/ \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Embedded (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, Flash \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435)     final String[] imageExtensions = new String[]{         &quot;.gif&quot;, &quot;.jpeg&quot;, &quot;.jpg&quot;, &quot;.png&quot;, &quot;.bmp&quot;, &quot;.ico&quot;, &quot;.cur&quot;, &quot;swf&quot;, &quot;svg&quot;     };     \/\/ \u0421\u043a\u0440\u043e\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430     previewEmbedded.setVisible(false);     \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u043d\u0435 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 \u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u0440\u043e\u0433\u043e\u0432\u044b\u0439     if (file.length() &gt; PREVIEW_FILE_LIMIT) {         clearPreview();         return;     }     \/\/ \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u2014 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439     if (Arrays.asList(imageExtensions).contains(extension)) {         Resource resource = new FileResource(file); \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441         previewEmbedded.setSource(resource);        \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Embedded         previewEmbedded.setVisible(true);           \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442         previewLayout.setExpandRatio(previewEmbedded, 1.0f); \/\/ \u0411\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e      } } <\/code><\/pre>\n<p>  \u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434 initMainPanels() \u0432 \u043c\u0435\u0442\u043e\u0434 InitAll(), \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 initFileTree(), \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 initMainPanels:<\/p>\n<pre><code class=\"java\">private void initAll(VerticalLayout layout) {     initMenuBar(layout);     initTopPanel(layout);     \/\/ initFileTree(layout);     initMainPanels(layout);     getDefaultDirectory();     updateFileTree(currentPath);                     initBottomPanel(layout); } <\/code><\/pre>\n<p>  \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 updateInfo() \u0441\u0442\u0440\u043e\u043a\u0443<\/p>\n<pre><code class=\"java\">updatePreview(selectedFilename);       <\/code><\/pre>\n<p>  \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (&lt;\u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 NetBeans (NetBeansProjects)&gt;\/fileman\/fileman-ui\/target\/fileman-ui-1.0-SNAPSHOT<br \/>  ).<\/p>\n<p>  \u041d\u0443 \u0432\u043e\u0442 \u0438 \u0432\u0441\u0435, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u0444\u0430\u0439\u043b-\u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438 \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. <\/p>\n<p>  \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u043d\u0438 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043d\u0430 JavaScript, \u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0442\u0438\u0432 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e AJAX-\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u0430\u0432\u0448\u0438\u0441\u044c \u043e \u0432\u0441\u0435\u0445 \u043d\u044e\u0430\u043d\u0441\u0430\u0445 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/ff5\/d61\/742\/ff5d61742ee548b4b920be08652c2dd5.gif\"\/><br \/>  \u0420\u0438\u0441. 6. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0412 \u0446\u0435\u043b\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c\u044e, \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u043a\u043e\u0434\u0430\u043c\u0438 \u043d\u0430 GitHub. \u0416\u0443\u0440\u043d\u0430\u043b \u00ab\u0425\u0430\u043a\u0435\u0440\u00bb (\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434 \u044d\u0442\u0438\u043c \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u0440, \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0438 \u0433\u043b\u0430\u0432\u0440\u0435\u0434) \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0442\u0435\u0431\u0435 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u0432 \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430\u0445!<\/p>\n<blockquote>\n<h4>Google Web Toolkit (GWT) <\/h4>\n<p>  Google Web Toolkit (GWT) \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u043a\u043e\u0434\u043e\u043c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u043d\u0430\u0431\u043e\u0440 Java API \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c AJAX-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Java \u0438 \u0437\u0430\u0442\u0435\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u044b \u0432 \u0432\u044b\u0441\u043e\u043a\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 JavaScript, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0434\u043b\u044f Android \u0438 iPhone. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u2014 <a href=\"http:\/\/www.gwtproject.org\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<blockquote>\n<h4>VIDEO<\/h4>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=P9YupaOpsMk\">\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442 \u0434\u043b\u044f NetBeans<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=yWrkinZkKjI\">Eclipse<\/a><\/li>\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=lENcSllrJfM\">\u0412\u0435\u0431\u0438\u043d\u0430\u0440 \u0434\u043b\u044f \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a\u043e\u0432 IntelliJ IDEA<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p>  <\/p>\n<blockquote>\n<h4>WWW<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Getting Started with Vaadin \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 <a href=\"https:\/\/vaadin.com\/book\">Book of Vaadin<\/a>. <\/li>\n<li>\u041e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043a\u043d\u0438\u0433\u0435 \u0441\u043b\u0443\u0436\u0438\u0442 <a href=\"http:\/\/demo.vaadin.com\/book-examples-vaadin7\/book\/\">Book of Vaadin Examples<\/a>, \u0441 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u043a\u043d\u0438\u0433\u0438 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Vaadin.<\/li>\n<li>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0443\u0447\u0435\u0431\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/vaadin.com\/tutorial\">\u0437\u0434\u0435\u0441\u044c<\/a>. <\/li>\n<li>\u0411\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 <a href=\"https:\/\/vaadin.com\/demo\">\u0434\u0435\u043c\u043e\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a>.<\/li>\n<li>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e API \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 <a href=\"https:\/\/vaadin.com\/api\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/li>\n<\/ul>\n<\/blockquote>\n<p>  <\/p>\n<blockquote>\n<h4>Vaadin TouchKit<\/h4>\n<p>  <a href=\"https:\/\/vaadin.com\/book\/-\/page\/mobile.html\">Vaadin TouchKit<\/a> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u0412 \u043d\u0435\u0433\u043e \u0432\u0445\u043e\u0434\u044f\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u041a\u0440\u043e\u043c\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, TouchKit \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0444\u043b\u0430\u0439\u043d-\u0440\u0435\u0436\u0438\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u0435\u0448\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0442\u0438.<\/p><\/blockquote>\n<p>  <\/p>\n<blockquote>\n<h4>Vaadin TestBench<\/h4>\n<p>  \u0411\u0430\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <a href=\"http:\/\/www.seleniumhq.org\">Selenium<\/a>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 Java.<br \/>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vaadin TestBench \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0443\u0440\u043e\u0432\u043d\u044f\u0445 \u0438 \u0444\u0430\u0437\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/vaadin.com\/book\/-\/page\/testbench.html\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p><\/blockquote>\n<p>  <\/p>\n<blockquote>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f Vaadin<\/h4>\n<p>  \u0412 <a href=\"https:\/\/vaadin.com\/directory\">Vaadin Directory<\/a> \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0447\u0442\u0438 500 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0439, \u0441\u0440\u0435\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Vaadin Charts, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432 \u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c. <\/p>\n<p>  \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u043c \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u043f\u0443\u043d\u043a\u0442 Open Add-Ons Browser.<\/p><\/blockquote>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/7a8\/146\/7e0\/7a81467e0c7a59782054603aeec3c678.jpg\" alt=\"image\"\/><\/p>\n<p>  <i>\u0412\u043f\u0435\u0440\u0432\u044b\u0435 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043e \u0432 \u0436\u0443\u0440\u043d\u0430\u043b\u0435 \u00ab\u0425\u0430\u043a\u0435\u0440\u00bb \u043e\u0442 02\/2015.<br \/>  \u0410\u0432\u0442\u043e\u0440: \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440 \u041b\u044b\u043a\u043e\u0448\u0438\u043d, alykoshin@gmail.com<\/i><\/p>\n<p>  \u041f\u043e\u0434\u043f\u0438\u0448\u0438\u0441\u044c \u043d\u0430 \u00ab\u0425\u0430\u043a\u0435\u0440\u00bb  <\/p>\n<ul>\n<li><a href=\"http:\/\/bit.ly\/habr_subscribe_paper\">\u0411\u0443\u043c\u0430\u0436\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/a><\/li>\n<li><a href=\"http:\/\/bit.ly\/xakep_on_ipad\">\u00ab\u0425\u0430\u043a\u0435\u0440\u00bb \u043d\u0430 iOS\/iPad<\/a><\/li>\n<li><a href=\"http:\/\/bit.ly\/habr_android\">\u00ab\u0425\u0430\u043a\u0435\u0440\u00bb \u043d\u0430 Android<\/a><\/li>\n<\/ul>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/244477\/\"> http:\/\/habrahabr.ru\/post\/244477\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>     \t<img decoding=\"async\" src=\"\/\/habrastorage.org\/files\/de1\/8aa\/bba\/de18aabba87840d9b9289e39b54f508e.jpg\"\/><\/p>\n<p>  \u0412 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043c\u0435\u0441\u0442\u043e Java \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u043e\u0439 \u0444\u0440\u043e\u043d\u0442-\u0435\u043d\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0430 JavaScript. Java \u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 (\u043a\u043e\u0433\u0434\u0430 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u0442\u044b \u0432\u0438\u0434\u0435\u043b Java-\u0430\u043f\u043f\u043b\u0435\u0442..?) \u043d\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u043d\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>  \u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u0441\u0435 \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043f\u0438\u0441\u0430\u043b\u043e\u0441\u044c \u043d\u0430 Java, \u043d\u043e \u0435\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u0431\u044b \u00ab\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439\u00bb \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0430 \u0431\u044b \u0441\u0430\u043c\u044b\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u043c \u043e \u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438?  <\/p>\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-255857","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/255857","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=255857"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/255857\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=255857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=255857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=255857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}