vaadin

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

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

在Vaadin中，對于開發(fā)人員群體而言，主要的人群是Java Swing開發(fā)人員，他們希望將其Java桌面業(yè)務應用程序移至Web和移動設備。 因此，Vaadin提供了與Swing相當?shù)慕M件模型。 提供了一系列的GUI組件，例如“標簽”和“按鈕”，以及大量更復雜的組件，包括各種圖形和其他令人印象深刻的與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是與客戶端/服務器相關(guān)的框架。

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

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

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

現(xiàn)在，讓我們轉(zhuǎn)到DukeScript中的典型“ Hello World”場景。 如上所述，視圖和業(yè)務邏輯被拆分為單獨的文件，一個使用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è)務邏輯，通常使用KnockoutJS開發(fā)模型中JavaScript，但由于DukeScript，它是用Java表示的：

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

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

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

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

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

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

vaadin

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

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