vaadin

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

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

在Vaadin中，對于開發人員群體而言，主要的人群是Java Swing開發人員，他們希望將其Java桌面業務應用程序移至Web和移動設備。 因此，Vaadin提供了與Swing相當的組件模型。 提供了一系列的GUI組件，例如“標簽”和“按鈕”，以及大量更復雜的組件，包括各種圖形和其他令人印象深刻的與UI相關的功能，以及“布局”和“事件”，這再次讓人想起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 {} }

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

與Vaadin專注于類似Swing的開發模型相反，DukeScript具有KnockoutJS開發模型 ，DukeScript團隊認為該模型是更高級的現代方法。 KnockoutJS開發模型將視圖與邏輯完全分開。 如此處所討論的 ，甚至可以在創建視圖之前開發和測試邏輯。 盡管Vaadin應用程序也可以進行單元測試，但使用Vaadin可以測試視圖（例如，“ clickButton”），而使用DukeScript可以測試邏輯（例如，“ addUser”）。 使用DukeScript，開發人員不再負責應用程序的布局和可用性方面，而專家可以代替。

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

另一方面，DukeScript編程模型使應用程序前端的開發可以委托給前端特定的編碼器，即委托給使用KnockoutJS進行前端開發的開發人員。 為了證明這一點，請閱讀 DukeScript團隊的Anton Epple 撰寫的有關JavaCodeGeeks的最新文章 。 另一方面，在這種完全分離的場景中，可以將綁定本身視為Java編程任務的一部分，即Java開發人員會將這些綁定添加到從已經將視圖提交給前端開發人員的標記中一起。

現在，讓我們轉到DukeScript中的典型“ Hello World”場景。 如上所述，視圖和業務邏輯被拆分為單獨的文件，一個使用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>

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

DukeScript中“ Hello World”的業務邏輯

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”場景也使用了注釋。 每當在開發過程中保存Java源文件時，這些批注就會使用上面引用的所有getter和setter生成POJO。

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

通過使用Vaadin，您可以訪問一系列用Java表示的GUI組件，這些GUI組件排列在與Swing相類似的組件樹中。 借助DukeScript，您可以完全訪問JavaScript生態系統為業務邏輯提供的前端和整個Java生態系統所提供的所有功能，并且特別關注KnockoutJS的雙向數據綁定功能，以將視圖連接至業務邏輯。

感謝Vaadin的Matti Tahvonen和DukeScript的Anton Epple對本文進行了評論并做出了貢獻。

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

vaadin

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。