從表面上看 ， Vaadin和GWT通常與DukeScript有很多共同點。 兩者都致力于為Java開發(fā)人員提供面向瀏覽器的解決方案，并且由于其對Maven的原生支持而與IDE集成良好。 但是，這些方面實際上是它們共有的全部。 從編程模型到框架如何處理代碼，再到應(yīng)用程序如何部署，Vaadin和DukeScript完全不同。

為了真正理解這些觀點，讓我們開始研究Vaadin和DukeScript的編程模型。 盡管您使用Java編程的方式明顯不同，但是每個人都有一個非常好的動機，這對適用的目標(biāo)開發(fā)人員群體來說是非常有意義的。 從這個意義上講，在這個故事中沒有“更好”或“更糟”，只有兩種不同的方法使Java開發(fā)人員能夠訪問各種設(shè)備上基于瀏覽器的平臺。

在Vaadin中，對于開發(fā)人員群體而言，主要的人群是Java Swing開發(fā)人員，他們希望將其Java桌面業(yè)務(wù)應(yīng)用程序移至Web和移動設(shè)備。 因此，Vaadin提供了與Swing相當(dāng)?shù)慕M件模型。 提供了一系列的GUI組件，例如“標(biāo)簽”和“按鈕”，以及許多更復(fù)雜的組件，包括各種圖形和其他令人印象深刻的與UI相關(guān)的功能，以及“布局”和“事件”，再次讓人想起Swing。

這就是Vaadin中典型的“ Hello World”場景。 注意GUI組件，“ VerticalLayout”和“ ClickEvent”：

瓦丁的Hello World

import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.annotations.Widgetset; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.Button; import com.vaadin.ui.Button.ClickEvent; import com.vaadin.ui.Label; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout;@Theme("mytheme") @Widgetset("org.hw.vaadin.MyAppWidgetset") public class MyUI extends UI {@Overrideprotected void init(VaadinRequest vaadinRequest) {final VerticalLayout layout = new VerticalLayout();layout.setMargin(true);setContent(layout);Button button = new Button("Click Me");button.addClickListener(new Button.ClickListener() {@Overridepublic void buttonClick(ClickEvent event) {layout.addComponent(new Label("Thank you for clicking"));}});layout.addComponent(button);}@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)public static class MyUIServlet extends VaadinServlet {} }

在上面，還請注意用于與瀏覽器相關(guān)的功能（即主題和窗口小部件集）的注釋，以及與Servlet容器集成的Java EE相關(guān)的注釋，指出Vaadin是與客戶端/服務(wù)器相關(guān)的框架。

與Vaadin專注于類似Swing的開發(fā)模型相反，DukeScript具有KnockoutJS開發(fā)模型 ，DukeScript團(tuán)隊認(rèn)為該模型是更先進(jìn)和現(xiàn)代的方法。 KnockoutJS開發(fā)模型將視圖與邏輯完全分開。 可以在甚至創(chuàng)建視圖之前開發(fā)和測試邏輯， 如此處所述 。 盡管Vaadin應(yīng)用程序也可以進(jìn)行單元測試，但使用Vaadin可以測試視圖（例如，“ clickButton”），而使用DukeScript可以測試邏輯（例如，“ addUser”）。 使用DukeScript，開發(fā)人員不再負(fù)責(zé)應(yīng)用程序的布局和可用性方面，而專家可以代替。

就像Swing知識對使用Vaadin有所幫助（雖然不是必需的）一樣，KnockoutJS知識對DukeScript的使用盡管不是必需的也是有用的。 但是，由于Java開發(fā)人員可能比KnockoutJS更熟悉Swing，因此Java開發(fā)人員可能需要花更多的時間來熟悉KnockoutJS，然后再開始使用DukeScript。

另一方面，DukeScript編程模型使得可以將應(yīng)用程序前端的開發(fā)委派給特定于前端的編碼器，即委托給使用KnockoutJS進(jìn)行前端開發(fā)的開發(fā)人員。 為了證明這一點，請閱讀 DukeScript團(tuán)隊的Anton Epple 撰寫的有關(guān)JavaCodeGeeks的最新文章 。 另一方面，在這種完全分離的場景中，可以將綁定本身視為Java編程任務(wù)的一部分，即Java開發(fā)人員會將這些綁定添加到從提出了該觀點的前端開發(fā)人員那里獲得的標(biāo)記中。一起。

現(xiàn)在，讓我們轉(zhuǎn)到DukeScript中的典型“ Hello World”場景。 如上所述，視圖和業(yè)務(wù)邏輯被拆分為單獨的文件，一個使用HTML，另一個使用Java。 這是HTML端，與KnockoutJS.com的“ Hello World”場景相同：

DukeScript中的“ Hello World”視圖

<p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

這是提供上述屬性的雙向數(shù)據(jù)綁定的業(yè)務(wù)邏輯，通常使用KnockoutJS開發(fā)模型中JavaScript，但由于DukeScript，它是用Java表示的：

DukeScript中“ Hello World”的業(yè)務(wù)邏輯

import net.java.html.json.ComputedProperty; import net.java.html.json.Model; import net.java.html.json.Property;@Model(className = "Data", targetId = "", properties = {@Property(name = "firstName", type = String.class),@Property(name = "lastName", type = String.class) }) final class DataModel {@ComputedPropertystatic String fullName(String firstName, String lastName) {return firstName + " " + lastName;}private static Data ui;static void onPageLoad() throws Exception {ui = new Data();ui.setFirstName("Planet");ui.setLastName("Earth");ui.applyBindings();} }

與Vaadin一樣，DukeScript“ Hello World”場景也使用了注釋。 每當(dāng)在開發(fā)過程中保存Java源文件時，這些批注就會生成帶有上面引用的所有g(shù)etter和setter的POJO。

這兩個“ Hello World”場景都針對瀏覽器。 他們?nèi)绾巫龅竭@一點，即如何處理上面的代碼并使之可在瀏覽器中使用，是本系列下一篇文章的主題。 但是，目前，通過閱讀本文，您應(yīng)該對這兩個框架的編程模型的差異有一個很好的了解。

通過使用Vaadin，您可以訪問一系列用Java表示的GUI組件，這些GUI組件排列在與Swing相類似的組件樹中。 使用DukeScript，您可以完全訪問JavaScript生態(tài)系統(tǒng)為業(yè)務(wù)邏輯提供的前端和整個Java生態(tài)系統(tǒng)所提供的所有功能，并且特別關(guān)注KnockoutJS的雙向數(shù)據(jù)綁定功能，以將視圖連接到業(yè)務(wù)邏輯。

感謝Vaadin的Matti Tahvonen和DukeScript的Anton Epple對本文進(jìn)行了評論并做出了貢獻(xiàn)。

翻譯自: https://www.javacodegeeks.com/2015/08/hello-world-in-vaadin-dukescript.html

總結(jié)

以上是生活随笔為你收集整理的Vaadin和DukeScript中的Hello World的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。