Vaadin提示：以声明方式构建UI
如果您使用了GWT，那么您可能會發現UiBinder對于設計復雜的UI很有用。 在有關Vaadin的系列文章中，我們希望在Vaadin和GWT之間得出相似之處。 Vaadin提供了多種開箱即用的工具和組件，用于構建復雜且美觀的UI。 其中之一是可以像UiBinder那樣聲明性地構建UI。 與GWT相比，Vaadin提供了直接使用.html文件的可能性。
編程方式
與GWT中一樣，Vaadin UI也可以通過編程方式構建。 例如，假設我們要構建一個簡單的表單以將任務添加到待辦事項列表。 以編程方式執行此操作的一種方法：
public class MainUI extends UI {@Override protected void init(VaadinRequest request) { // TODO Auto-generated method stub FormLayout layout = new FormLayout(); TextField taskTitle = new TextField(); taskTitle.setCaption("Title"); taskTitle.setIcon(VaadinIcons.CHEVRON_DOWN); TextArea taskDescription = new TextArea(); taskDescription.setCaption("Description"); taskDescription.setIcon(VaadinIcons.LINES); DateField taskDate = new DateField(); taskDate.setCaption("Date");Button button = new Button("Add"); button.setIcon(VaadinIcons.PLUS);layout.addComponent(taskTitle); layout.addComponent(taskDescription); layout.addComponent(taskDate); layout.addComponent(button); setContent(layout); }}結果：
聲明方式
如果用戶界面很復雜且具有嵌套組件，則聲明方法可能會很有用。 Vaadin開發了可以綁定到Java組件HTML自定義元素。 自定義元素以vaadin-開頭。 元素的其余名稱可以通過分隔單詞并使其小寫而從java類中提取，如Vaadin的網站中所述。 以聲明的方式創建UI的第一步是創建html文件，我們將其命名為Form.html：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="vaadin-version" content="8.0.5"> </head> <body> <vaadin-form-layout> <vaadin-text-field icon="fonticon://Vaadin-Icons/e7ce" caption="Task Name" _id="todoTitle"> </vaadin-text-field> <vaadin-text-area icon="fonticon://Vaadin-Icons/e7ef" _id="todoDescription"> </vaadin-text-area> <vaadin-date-time-field caption="Date" _id="todoDate"> </vaadin-date-time-field> <vaadin-button icon="fonticon://Vaadin-Icons/e801"_id="todoButton"> Add </vaadin-button> </vaadin-form-layout> </body> </html>第二步是創建將綁定到此文件的java類。
@DesignRoot public class Form extends FormLayout {public Form() {Design.read("Form.html", this);} }現在我們可以將其用作UI類中的常規組件：
public class MainUI extends UI {@Override protected void init(VaadinRequest request) { setContent(new Form()); }}要將.html的字段綁定到java類中的字段，需要設置_id屬性。 例如，綁定我們的文本框：
<vaadin-text-field icon="fonticon://Vaadin-Icons/e7ce" caption="Task Name" _id="todoTitle"> </vaadin-text-field>然后我們可以將其添加到java文件中，它將被自動綁定：
@DesignRoot public class Form extends FormLayout {TextField todoTitle;public Form() {Design.read("Form.html", this);//we can directly use it without initialization} }Vaadin還提供用于交互設計UI的有趣工具： Vaadin Designer 。 Vaadin Designer允許使用鼠標和拖放來設計UI。 我們僅將此工具用于演示目的，因此我們無法真正對其進行評估。 Vaadin-Designer可以通過減少構建UI的時間和處理“樣板”部分來幫助提高生產率。 不幸的是，Vaadin Designer不是免費的，其增值取決于一個項目到另一個項目。
帶走
以編程方式設計UI并不總是很方便。 Vaading有一種有趣的方法以聲明方式構建UI。 HTML自定義元素提供了一種直接將.html文件鏈接到Java的方法。 也許這是GWT開發人員探索的道路，因為UiBinder將在下一個3.0版本中刪除。
翻譯自: https://www.javacodegeeks.com/2017/07/vaadin-tip-building-uis-declaratively.html
總結
以上是生活随笔為你收集整理的Vaadin提示：以声明方式构建UI的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓原生系统（安卓原声）
- 下一篇： play!框架_在Play上使用twit