Vaadin提示：以声明方式构建UI
如果您使用了GWT，那么您可能會(huì)發(fā)現(xiàn)UiBinder對(duì)于設(shè)計(jì)復(fù)雜的UI很有用。 在有關(guān)Vaadin的系列文章中，我們希望在Vaadin和GWT之間得出相似之處。 Vaadin提供了多種開箱即用的工具和組件，用于構(gòu)建復(fù)雜且美觀的UI。 其中之一是可以像UiBinder那樣聲明性地構(gòu)建UI。 與GWT相比，Vaadin提供了直接使用.html文件的可能性。
編程方式
與GWT中一樣，Vaadin UI也可以通過編程方式構(gòu)建。 例如，假設(shè)我們要構(gòu)建一個(gè)簡(jiǎn)單的表單以將任務(wù)添加到待辦事項(xiàng)列表。 以編程方式執(zhí)行此操作的一種方法：
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); }}結(jié)果：
聲明方式
如果用戶界面很復(fù)雜且具有嵌套組件，則聲明方法可能會(huì)很有用。 Vaadin開發(fā)了可以綁定到Java組件HTML自定義元素。 自定義元素以vaadin-開頭。 元素的其余名稱可以通過分隔單詞并使其小寫而從java類中提取，如Vaadin的網(wǎng)站中所述。 以聲明的方式創(chuàng)建UI的第一步是創(chuàng)建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>第二步是創(chuàng)建將綁定到此文件的java類。
@DesignRoot public class Form extends FormLayout {public Form() {Design.read("Form.html", this);} }現(xiàn)在我們可以將其用作UI類中的常規(guī)組件：
public class MainUI extends UI {@Override protected void init(VaadinRequest request) { setContent(new Form()); }}要將.html的字段綁定到j(luò)ava類中的字段，需要設(shè)置_id屬性。 例如，綁定我們的文本框：
<vaadin-text-field icon="fonticon://Vaadin-Icons/e7ce" caption="Task Name" _id="todoTitle"> </vaadin-text-field>然后我們可以將其添加到j(luò)ava文件中，它將被自動(dòng)綁定：
@DesignRoot public class Form extends FormLayout {TextField todoTitle;public Form() {Design.read("Form.html", this);//we can directly use it without initialization} }Vaadin還提供用于交互設(shè)計(jì)UI的有趣工具： Vaadin Designer 。 Vaadin Designer允許使用鼠標(biāo)和拖放來(lái)設(shè)計(jì)UI。 我們僅將此工具用于演示目的，因此我們無(wú)法真正對(duì)其進(jìn)行評(píng)估。 Vaadin-Designer可以通過減少構(gòu)建UI的時(shí)間和處理“樣板”部分來(lái)幫助提高生產(chǎn)率。 不幸的是，Vaadin Designer不是免費(fèi)的，其增值取決于一個(gè)項(xiàng)目到另一個(gè)項(xiàng)目。
帶走
以編程方式設(shè)計(jì)UI并不總是很方便。 Vaading有一種有趣的方法以聲明方式構(gòu)建UI。 HTML自定義元素提供了一種直接將.html文件鏈接到Java的方法。 也許這是GWT開發(fā)人員探索的道路，因?yàn)閁iBinder將在下一個(gè)3.0版本中刪除。
翻譯自: https://www.javacodegeeks.com/2017/07/vaadin-tip-building-uis-declaratively.html
總結(jié)
以上是生活随笔為你收集整理的Vaadin提示：以声明方式构建UI的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安卓原生系统（安卓原声）
- 下一篇： linuxu盘制作工具（linux u盘