{"id":283070,"date":"2016-12-26T19:10:13","date_gmt":"2016-12-26T16:10:13","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=283070"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=283070","title":{"rendered":"\u041f\u0440\u043e\u0441\u0442\u043e\u0439 framework UI ERP c \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vaadin"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/108\/bfa\/475\/108bfa475d6a45a480d8f4115263093a.png\" alt=\"\u0425\u0430\u0431\u0440\u043a\u0430\u0442\"\/><\/p>\n<p>  <\/p>\n<h2 id=\"vvedenie\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0417\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u0437\u0430\u0442\u0435\u0432\u0430\u043b\u043e\u0441\u044c? \u0413\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430. \u0418 \u0441 \u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0430\u043b\u0441\u044f \u043d\u0430\u0448 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u043f\u0443\u0442\u044c. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0441\u0442\u0435\u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041a\u0440\u0430\u0442\u043a\u043e \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043b\u0438 \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0439 &quot;\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438&quot; \u043d\u0430\u0447\u0430\u043b\u0438 \u0432\u044b\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u0431\u0443\u0434\u0443\u0449\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f <del>\u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u0432\u043e\u0439<\/del> \u0444\u0440\u0435\u0439\u043c\u043e\u0432\u043e\u0440\u043a.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438, \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <del>\u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u043e\u0433\u043e<\/del> \u0444\u0440\u0435\u0439\u043c\u043e\u0432\u0440\u043a\u0430. \u041d\u0443 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u043f\u043b\u0430\u043d\u044b.<\/p>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"stek\">\u0421\u0442\u0435\u043a<\/h2>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0444\u0438\u043d\u0441\u043a\u0438\u0439 web-framework Vaadin 7.7. \u042d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c <em>single page application<\/em> \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 (Java). \u0422.\u0435. \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u043e\u043c \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 HTML+JS \u043a\u043e\u0434 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0431\u0435\u0440\u044f \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043e\u043d \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u0412 \u043e\u0431\u0449\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043c\u0430\u043b\u043e\u043c\u043e\u0449\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043c\u0430\u0448\u0438\u043d <del>\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b, \u0441\u0442\u0430\u0440\u044b\u0435 \u043e\u0444\u0438\u0441\u043d\u044b\u0435 \u043c\u0430\u0448\u0438\u043d\u044b<\/del> \u0438 \u043f\u0430\u0440\u043e\u0447\u043a\u0430 \u043c\u043e\u0449\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u0432.<\/p>\n<p>  <\/p>\n<h2 id=\"api\">API<\/h2>\n<p>  <\/p>\n<p>\u0426\u0435\u043b\u0438 \u043f\u0440\u0435\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435: \u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u043e\u0431\u0449\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<br \/>  \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0445 \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0443\u0436\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u043c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c. \u0422.\u0435. \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a \u043d\u0435\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0441\u0432\u044f\u0437\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/p>\n<p>  <\/p>\n<table>\n<thead>\n<tr>\n<th>\u041f\u0430\u043a\u0435\u0442<\/th>\n<th>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Data<\/td>\n<td>DataContainer<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>TreeDataContainer<\/td>\n<\/tr>\n<tr>\n<td>Elements<\/td>\n<td>BottomTabs<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>CommonLogic<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>CommonView<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>FilterPanel<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Logic<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Menu<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>MenuNavigator<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Mode<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Workspace<\/td>\n<\/tr>\n<tr>\n<td>Permission<\/td>\n<td>ModifierAccess<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>PermissionAccess<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>PermissionAccessUI<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>  <\/p>\n<h4 id=\"data\">Data<\/h4>\n<p>  <\/p>\n<p>\u0412 \u043f\u0430\u043a\u0435\u0442\u0435 <em>Data<\/em> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f (binding) \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 UI. \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f. \u0412 \u043f\u0430\u043a\u0435\u0442\u0435 \u0434\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u0430: <em>DataContainer<\/em> \u2014 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. <em>TreeDataContainer<\/em> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 <em>DataContainer<\/em> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438, \u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445.<\/p>\n<p>  <\/p>\n<h4 id=\"elements\">Elements<\/h4>\n<p>  <\/p>\n<p>\u041f\u0430\u043a\u0435\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0438\u043d\u044f\u0442\u044b\u0439 \u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e UI. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <em>Vaddin<\/em> \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <em>View<\/em> \u0438 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <em>CommonView<\/em>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0432\u0438\u0434\u0430\u043c\u0438 <em>Menu<\/em>. \u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0432\u0437\u044f\u0442\u0430 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 <em>Vaadin<\/em>, <a href=\"https:\/\/github.com\/sah4ez\/erp_vaadin_framework\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a> \u0438 \u043a\u0430\u043a \u0435\u0433\u043e <a href=\"https:\/\/vaadin.com\/blog\/-\/blogs\/vaadin-7-3-7-and-new-maven-archetypes\" title=\"\u0421\u0442\u0430\u0442\u044c\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c.\">\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0442\u044c<\/a> \u0443 \u0441\u0435\u0431\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>maven archetype<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <em>CommonView<\/em> \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <em>Logic<\/em> \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u0443\u0436\u0435 \u0438\u043c\u0435\u044e\u0449\u0443\u044e\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <em>CommonLogic<\/em>. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 <em>Mode<\/em> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438 \u0432 \u0441\u0435\u0431\u0435 \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 <em>Workspace<\/em>. \u042d\u0442\u043e \u043a\u043b\u0430\u0441\u0441 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0434\u0432\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b (\u0432<br \/>  \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0445 <em>DataContainer<\/em>), \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f (\u043c\u0435\u0442\u043e\u0434 <code>getTable()<\/code>) \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043c\u0435\u0442\u043e\u0434 <code>getTableAll()<\/code>) \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432 <em>Workspace<\/em> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <em>MenuNavigator<\/em>. \u041e\u043d \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b c <em>Workspace<\/em>, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u044f, \u041f\u0435\u0447\u0430\u0442\u0438, \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0430\u043d\u0435\u043b\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <em>FilterPanel<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 (\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 <em>getTable()<\/em>) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 <em>BottomTabs<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0441\u0435\u0431\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438: \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043f\u043e\u043b\u044f, \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0438 \u0438 \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>  <\/p>\n<h4 id=\"permission\">Permission<\/h4>\n<p>  <\/p>\n<p>\u041f\u0430\u043a\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0430\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u043e\u043b\u0435\u0439. <\/p>\n<p>  <\/p>\n<p><em>ModifierAccess<\/em> \u2014 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0445\u0441\u044f \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a UI: \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d, \u0447\u0442\u0435\u043d\u0438\u0435, \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p><em>PermissionAccess<\/em> \u2014 \u043a\u043b\u0430\u0441\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u0430\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430, \u0433\u0434\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0430. \u0422.\u0435. \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u0432 \u043e\u0434\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0435 \u043f\u0440\u0430\u0432\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0447\u0442\u0435\u043d\u0438\u0435, \u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043d\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u043e \u2014 \u043f\u0440\u0430\u0432\u043e \u043d\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p><em>PermissionAccessUI<\/em> \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u0441\u044f \u0432 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"realizaciya\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>  <\/p>\n<p>\u041a\u043b\u0430\u0441\u0441 <em>DataContainer<\/em> \u2014 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0449\u0438\u0439 <em>BeanItemContainer<\/em>.<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">abstract public class DataContainer&lt;T&gt; extends BeanItemContainer&lt;T&gt; {      private ArrayList&lt;String&gt; captions = new ArrayList&lt;&gt;();     private ArrayList&lt;Boolean&gt; visible = new ArrayList&lt;&gt;();     private final ArrayList&lt;String&gt; headers = new ArrayList&lt;&gt;();      public DataContainer(Class&lt;T&gt; type) {         super(type);         if (validCaption())             initHeaders();     }      private boolean validCaption() {         return captions.size() == visible.size() &amp;&amp;                 captions.size() == headers.size();     }      abstract protected void initHeaders();      abstract public DataContainer loadAllData();      \/\/.... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 <em>captions<\/em>,<br \/>  <em>headers<\/em>, <em>visible<\/em> \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435 <em>property<\/em> \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u043a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u043a\u0430\u043a\u0438\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0441\u0432\u0435\u0440\u043d\u0443\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0432 <em>CommonLogic<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">abstract public class CommonLogic implements Logic {      private View view;      public CommonLogic(View view){         this.view = view;     }      public View getView(){         return this.view;     }      public void setDataToTable(DataContainer container, CustomTable table) {         if (container == null || table == null) return;          table.setContainerDataSource(container);         table.setVisibleColumns(container.getCaption());         table.setColumnHeaders(container.getHeaders());         table.setColumnCollapsingAllowed(true);         for (int i = 0; i &lt; container.getCaption().length; i++) {             table.setColumnCollapsed(container.getCaption()[i],                     container.getVisible()[i].booleanValue());         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p><em>Workspace<\/em> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\"> abstract public class Workspace extends CssLayout implements PermissionAccessUI {     private Logic logic;      private Float splitPosition = 50f;      private Mode mode = Mode.NORMAL;      public String CAPTION = &quot;&quot;;     public ThemeResource PICTURE = null;      private FilterTable table = null;     private FilterTable tableAll = null;      private ItemClickEvent.ItemClickListener editItemClickListener;     private ItemClickEvent.ItemClickListener editItemClickListenerAll;      private VerticalSplitPanel verticalSplitPanel = null;     private HorizontalSplitPanel horizontalSplitPanel = null;      private BottomTabs bottomTabs = null;      private MenuNavigator navigator = null;      private FilterPanel filterPanel = null;      private ModifierAccess permissionAccess = ModifierAccess.HIDE;      private VerticalLayout layout;     private ItemClickEvent.ItemClickListener selectItemClickListener;     private ItemClickEvent.ItemClickListener selectItemClickListenerAll;      public Workspace(Logic logic) {         this.logic = logic;         table();         tableAll();         navigatorLayout();         filterPanel();         horizontalSplitPanel();         verticalSplitPanel();         addComponent(verticalSplitPanel);          editOff();         setSizeFull();     }     \/\/... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u0434\u0435 <code>table()<\/code> \u0438 <code>tableAll()<\/code> \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438 (\u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u0430). <code>navigatorLayout()<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 (\u043e\u043d\u043e \u0436\u0435 <em>MenuNavigator<\/em>) \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c <em>Workspace<\/em>. <code>filterPanel()<\/code> \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c. \u0412 <code>veritcalSplitPanel()<\/code> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0438\u0436\u043d\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0430\u043c\u0438 <del>tabs<\/del> \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u0432 <code>table()<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041a\u043b\u0430\u0441\u0441 <em>MenuNavigator<\/em> \u0434\u0430\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 <em>Workspace<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\"> public abstract class MenuNavigator extends MenuBar implements PermissionAccessUI {      private ModifierAccess permissionAccess = ModifierAccess.HIDE;      private MenuItem add;     private MenuItem delete;     private MenuItem print;     private MenuItem filter;      public static final String ENABLE_BUTTON_STYLE =&quot;highlight&quot;;      private Workspace parent;      public MenuNavigator(String caption, Workspace parent) {         this.parent = parent;         setWidth(&quot;100%&quot;);         Command addCommand = menuItem -&gt; add();          Command deleteCommand = menuItem -&gt; delete();          Command printCommand = menuItem -&gt; print();          Command filterCommand = menuItem -&gt; filter();          add = this.addItem(&quot;add&quot; + caption,                                       new ThemeResource(&quot;ico16\/add.png&quot;),                                       addCommand);         add.setDescription(&quot;\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c&quot;);          delete = this.addItem(&quot;delete&quot; + caption,                                       new ThemeResource(&quot;ico16\/delete.png&quot;),                                       deleteCommand);         delete.setDescription(&quot;\u0423\u0434\u0430\u043b\u0438\u0442\u044c&quot;);          print = this.addItem(&quot;print&quot; + caption,                                       new ThemeResource(&quot;ico16\/printer.png&quot;),                                       printCommand);         print.setDescription(&quot;\u041f\u0435\u0447\u0430\u0442\u044c&quot;);          filter = this.addItem(&quot;filter&quot; + caption,                                       new ThemeResource(&quot;ico16\/filter.png&quot;),                                       filterCommand);         filter.setDescription(&quot;\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c&quot;);          this.setStyleName(&quot;v-menubar-menuitem-caption-null-size&quot;);         this.addStyleName(&quot;menu-navigator&quot;);     }     \/\/... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u0435\u043d\u044e, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432 <del>\u043a\u0432\u0430\u0437\u0438-<\/del>\u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0438 \u043e\u0431\u044f\u0437\u0443\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0435\u0433\u043e \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u0432 <code>table()<\/code> \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 UI <em>BottomTabs<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\"> abstract public class BottomTabs extends TabSheet implements PermissionAccessUI {      private ModifierAccess permissionAccess = ModifierAccess.HIDE;     private final List&lt;String&gt; captions = new ArrayList&lt;&gt;();     private final List&lt;Component&gt; components = new ArrayList&lt;&gt;();     private final List&lt;Resource&gt; resources = new ArrayList&lt;&gt;();      public BottomTabs() {         captions.removeAll(captions);         components.removeAll(components);         resources.removeAll(resources);         setSizeFull();         init();     }      private void init() {         initTabs();         for (int i = 0; i &lt; this.components.size(); i++) {             if (i &lt; resources.size() &amp;&amp; i &lt; captions.size()) {                 this.addTab(this.components.get(i)                         , this.captions.get(i)                         , this.resources.get(i));             }         }     }     \/\/... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0441\u043f\u0438\u0441\u043a\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438: <code>captions<\/code> \u2014 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043e\u043a, <code>components<\/code> \u2014 \u043a\u0430\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u0439 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0435 \u0438 <code>resource<\/code> \u2014 \u043a\u0430\u043a\u0430\u044f \u0438\u043a\u043e\u043d\u043a\u0430 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0430\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <em>PermissionAccessUI<\/em> \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0447\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0432 \u044d\u0442\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435, \u0430 \u0447\u0442\u043e \u043d\u0435\u0442, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0443\u0440\u043e\u0432\u043d\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\"> public interface PermissionAccessUI {      void setPermissionAccess(ModifierAccess permission);      void replacePermissionAccess(ModifierAccess permissionAccess);      ModifierAccess getModifierAccess();  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0438 \u043d\u0438\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <em>Workspace<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">\/\/...     public void setPermissionAccess(ModifierAccess permission) {         if (navigator != null) {             navigator.replacePermissionAccess(permission);         }         if (bottomTabs != null) {             bottomTabs.replacePermissionAccess(permission);         }          this.permissionAccess = permission;          switch (permission) {             case EDIT: {                 this.setVisible(true);                 this.setEnabled(true);                 break;             }             case READ: {                 this.setVisible(true);                 this.setEnabled(false);                 break;             }             case HIDE: {                 this.setVisible(false);                 this.setEnabled(false);                 break;             }         }     }      public void replacePermissionAccess(ModifierAccess permissionAccess) {         PermissionAccess.replacePermissionAccess(this, permissionAccess);     }      public ModifierAccess getModifierAccess() {         return permissionAccess;     } \/\/...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043b\u0430\u0441\u0441 <em>PermissionAccess<\/em> \u2014 \u044d\u0442\u043e <code>final<\/code> \u043a\u043b\u0430\u0441\u0441, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <del>\u0443\u0442\u0438\u043b\u044c\u043d\u043e\u0433\u043e<\/del> Utils \u043a\u043b\u0430\u0441\u0441\u0430 <del>\u0441\u0430\u043c\u043e\u043c\u0443 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b<\/del>, \u043e\u043d \u0431\u0435\u0440\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <em>PermissionAccessUI<\/em> \u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\"> public final class PermissionAccess {     \/\/...     public static void replacePermissionAccess(PermissionAccessUI component,              ModifierAccess newValue) {         switch (component.getModifierAccess()) {             case EDIT: {                 if (newValue.equals(ModifierAccess.HIDE)                                     || newValue.equals(ModifierAccess.READ)) break;                 component.setPermissionAccess(newValue);                 break;             }             case READ: {                 if (newValue.equals(ModifierAccess.HIDE)) break;                 component.setPermissionAccess(newValue);                 break;             }             case HIDE: {                 component.setPermissionAccess(newValue);                 break;             }         }     }     \/\/... }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"primery\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/h3>\n<p>  <\/p>\n<h4 id=\"dannye\">\u0414\u0430\u043d\u043d\u044b\u0435<\/h4>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c (\u043e\u043d \u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <em>Bean<\/em>), \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e <em>Element<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\"> public class Element implements Serializable {     private Integer id = 0;     private String name = &quot;element&quot;;     private Float price = 0.0F;      public Element(Integer id, String name, Float price) {         this.id = id;         this.name = name;         this.price = price;     }      public Integer getId() {         return id;     }      public void setId(Integer id) {         this.id = id;     }      public String getName() {         return name;     }      public void setName(String name) {         this.name = name;     }      public Float getPrice() {         return price;     }      public void setPrice(Float price) {         this.price = price;     }      @Override     public boolean equals(Object o) {         if (this == o) return true;         if (o == null || getClass() != o.getClass()) return false;         Element element = (Element) o;         return Objects.equals(id, element.id) &amp;&amp;                 Objects.equals(name, element.name) &amp;&amp;                 Objects.equals(price, element.price);     }      @Override     public int hashCode() {         return Objects.hash(id, name, price);     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u0434\u043b\u044f <em>Bean<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0432\u0441\u0435 \u0437\u0430\u043f\u0438\u0441\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"java\"> public class ElementContainer extends DataContainer&lt;Element&gt; {     public ElementContainer() {         super(Element.class);     }      @Override     protected void initHeaders() {         addCaption(&quot;id&quot;, &quot;name&quot;, &quot;price&quot;);         addHeader(&quot;ID&quot;, &quot;\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435&quot;, &quot;\u0426\u0435\u043d\u0430&quot;);         addCollapsed(true, false, false);     }      @Override     public DataContainer loadAllData() {         add(new Element(1, &quot;name1&quot;, 1.0f));         add(new Element(2, &quot;name2&quot;, 2.0f));         add(new Element(3, &quot;name3&quot;, 3.0f));         add(new Element(4, &quot;name4&quot;, 4.0f));         add(new Element(5, &quot;name5&quot;, 5.0f));         add(new Element(6, &quot;name6&quot;, 6.0f));         add(new Element(7, &quot;name7&quot;, 7.0f));         add(new Element(8, &quot;name8&quot;, 8.0f));         add(new Element(9, &quot;name9&quot;, 9.0f));         add(new Element(10, &quot;name10&quot;, 10.0f));         add(new Element(11, &quot;name11&quot;, 11.0f));         return this;     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u0434\u0435 \u0432 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 <code>addCaption<\/code>, <code>addHeader<\/code>, <code>addCollapsed<\/code> \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f <em>property<\/em> \u043a\u043b\u0430\u0441\u0441\u0430 <em>Element<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0432 \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0438 \u043a\u0430\u043a\u0438\u0435 \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0441\u043a\u0440\u044b\u0442\u044b.<\/p>\n<p>  <\/p>\n<h4 id=\"realizaciya-klassov-dlya-ui\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0434\u043b\u044f UI<\/h4>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 <em>Workspace<\/em> \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 <em>MyLayout<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">public class MyLayout extends Workspace {     private ElementContainer container = new ElementContainer();     private MyTabSheet tabSheet;     private MyMenu menu;      public MyLayout(Logic logic) {         super(logic);         tabSheet = new MyTabSheet();         menu = new MyMenu(&quot;myMenu&quot;, this);         logic.setDataToTable(container.loadAllData(), getTable());          setBottomTabs(tabSheet);         setNavigator(menu);     }      @Override     protected ItemClickEvent.ItemClickListener editTableItemClick() {         return itemClickEvent -&gt; {         };     }      @Override     protected ItemClickEvent.ItemClickListener selectTableItemClick() {         return itemClickEvent -&gt; {         };     }      @Override     protected ItemClickEvent.ItemClickListener editTableAllItemClick() {         return itemClickEvent -&gt; {         };     }      @Override     protected ItemClickEvent.ItemClickListener selectTableAllItemClick() {         return itemClickEvent -&gt; {         };     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u0434\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c (\u043c\u0435\u0442\u043e\u0434\u044b <code>ItemClickEvent.ItemClickListener<\/code>), \u0437\u0434\u0435\u0441\u044c \u043e\u043d\u0438 \u043f\u0443\u0441\u0442\u044b\u0435. \u0422\u0430\u043a\u0436\u0435 <code>logic.setDataToTable(container.loadAllData(), getTable())<\/code> \u0437\u0434\u0435\u0441\u044c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <em>MenuNavigator<\/em> \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 <em>MyMenu<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">public class MyMenu extends MenuNavigator {      public MyMenu(String caption, Workspace parent) {         super(caption, parent);     }      @Override     public void add() {         if (getAdd().getStyleName() == null)             getAdd().setStyleName(ENABLE_BUTTON_STYLE);         else             getAdd().setStyleName(null);     }      @Override     public void delete() {         if (getDelete().getStyleName() == null)             getDelete().setStyleName(ENABLE_BUTTON_STYLE);         else             getDelete().setStyleName(null);     }      @Override     public void print() {         if (getPrint().getStyleName() == null)             getPrint().setStyleName(ENABLE_BUTTON_STYLE);         else             getPrint().setStyleName(null);      } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u0434\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f \u043d\u0430\u0436\u0430\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0435\u0436\u0438\u043c.<\/p>\n<p>  <\/p>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0443 <em>MyTabSheet<\/em> \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <em>BottomTabs<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"java\">public class MyTabSheet extends BottomTabs {     public MyTabSheet() {         super();     }      @Override     public void initTabs() {         addCaption(&quot;Tab1&quot;, &quot;Tab2&quot;, &quot;Tab3&quot;, &quot;Tab4&quot;);          addComponent(new Label(&quot;label1&quot;),                 new Label(&quot;label2&quot;),                 new Label(&quot;label3&quot;),                 new Label(&quot;label4&quot;));          addResource(FontAwesome.AMAZON,                 FontAwesome.AMAZON,                 FontAwesome.AMAZON,                 FontAwesome.AMAZON         );     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f 4 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <em>Label<\/em>, \u0438 \u043d\u0430 \u0432\u0441\u0435 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438 \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u043e\u043a Amazon, <del>\u043d\u0435 \u0441\u043e\u0447\u0442\u0438\u0442\u0435 \u0437\u0430 \u0440\u0435\u043a\u043b\u0430\u043c\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0443\u043a\u0432\u0430 \u0410 \u0438\u0434\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0439<\/del>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/7c0\/3f8\/b64\/7c03f8b64a01424baaa8a1e3aa34452e.png\" alt=\"\u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0441 GitHub\"\/><\/p>\n<p>  <\/p>\n<h3 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  <\/p>\n<p>\u0427\u0442\u043e-\u0442\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u0430. <del>\u041d\u043e \u0434\u0430 \u043b\u0430\u0434\u043d\u043e<\/del> \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438. \u0422\u0430\u043a\u0436\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u0441\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a\u043e\u0432(\u0441\u043f\u0438\u0441\u043a\u043e\u0432), \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e-\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u043e\u0432 (\u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0434\u0435\u0439 \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c), \u0430 \u0442\u0430\u043a \u0436\u0435 \u0443\u043b\u0443\u0447\u0448\u0430\u0442\u044c API \u0438 \u043d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0430\u0437\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<h3 id=\"ps\">PS<\/h3>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0432 \u0445\u043e\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u043e\u0441\u0438\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430, \u043d\u043e \u044f \u0434\u0443\u043c\u0430\u044e \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>  <\/p>\n<h3 id=\"blagodarnosti\">\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/sah4ez\/erp_vaadin_framework\">\u0422\u043a\u0430\u0447\u0435\u043d\u043a\u043e \u0415\u0432\u0433\u0435\u043d\u0438\u044e<\/a> \u0437\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 <em>FilterPanel<\/em> \u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0443\u0447\u0430\u0441\u0442\u0438\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"ssylki\">\u0421\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/sah4ez\/erp_vaadin_framework\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a>, \u0442\u0430\u043c \u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c. \u0418 \u043f\u043e\u043a\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e SNAPSHOT, \u043d\u043e \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u043d\u0430 \u0441\u043a\u043e\u0440\u044b\u0439 \u0440\u0435\u043b\u0438\u0437.<\/p>\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=\"https:\/\/habrahabr.ru\/post\/318496\/\"> https:\/\/habrahabr.ru\/post\/318496\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/108\/bfa\/475\/108bfa475d6a45a480d8f4115263093a.png\" alt=\"\u0425\u0430\u0431\u0440\u043a\u0430\u0442\"\/><\/p>\n<p>  <\/p>\n<h2 id=\"vvedenie\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0417\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u0437\u0430\u0442\u0435\u0432\u0430\u043b\u043e\u0441\u044c? \u0413\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430. \u0418 \u0441 \u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0430\u043b\u0441\u044f \u043d\u0430\u0448 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u043f\u0443\u0442\u044c. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0441\u0442\u0435\u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041a\u0440\u0430\u0442\u043a\u043e \u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043b\u0438 \u043a \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0439 &quot;\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438&quot; \u043d\u0430\u0447\u0430\u043b\u0438 \u0432\u044b\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u0431\u0443\u0434\u0443\u0449\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f <del>\u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u0432\u043e\u0439<\/del> \u0444\u0440\u0435\u0439\u043c\u043e\u0432\u043e\u0440\u043a.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u043a\u0430\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438, \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <del>\u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u043e\u0433\u043e<\/del> \u0444\u0440\u0435\u0439\u043c\u043e\u0432\u0440\u043a\u0430. \u041d\u0443 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u043f\u043b\u0430\u043d\u044b.<\/p>\n<p>  <\/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-283070","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/283070","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=283070"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/283070\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=283070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=283070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=283070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}