使用Xtend構建Vaadin UI

今天,我決定向Xtend打個招呼。 我希望學習一些新的編程語言。 選擇一個標準的清單并不多。

  • 它必須是在JVM上運行的編程語言,
  • 如果我不需要學習用于建筑應用的全新生態系統,那就太好了。

我已經檢查了幾個選項。 JVM的編程語言列表已不多了,但在我決定要選擇以下語言時:Groovy,Scala和Xtend。 在和我已經選擇Xtend。

Scala不能很好地適合我的標準,另一方面,符合我的條件的常規方法卻是Xtend之后我將學習的下一門編程語言。 很難解釋為什么我選擇Xtend。 我什至不認為Xtend是一種編程語言,它更像是擴展,但這是我的看法。

什么是Xtend

因此,這里有一些關于該語言的詞。 有關更多信息,請訪問Xtend網頁。 這是一種美觀而簡單的語言,可以使Java現代化。 Xtend代替了編譯后的字節碼,而是轉換為漂亮的Java類,這使其適用于無法使用字節碼(例如GWT)的平臺。 正如我已經提到的,用Xtend編寫的代碼產生Java類,因此在使用任何現有Java框架時都沒有限制。 該語言是用Xtext創建的,因此它已經準備好了Eclipse,并且有該語言的maven插件,因此在Eclipse中使用它不會有問題。

學習

學習Xtend并不難。 Java中目前缺少一些語法更改和一些新的語義概念。 與其他編程語言相比,沒有什么革命性的東西,Xtend只是用新功能擴展了Java,它將使您可以創建更好,更短的類。 我最關注的功能是閉包,lambda表達式和擴展。 這些東西使您可以創建一個非常好的構建器類。 您可以輕松創建UI Builders API,這將使您可以創建更簡單的視圖(不是在功能范圍內,而是在代碼理解的范圍內)。

參與Xtend

我已經提到Xtend是使用Xtext構建的,這意味著eclipse已經能夠正確處理Xtend語言。 創建新的Xtend類后,如果您不使用maven獲取依賴項,則eclipse將抱怨缺少的lib,并提供您將其添加到類路徑中。 這篇博客文章的目的是展示Xtend如何改善構建UI的方式。我已經找到了JavaFX,GWT的好示例……但是我沒有找到Vaadin的任何東西,因此我決定構建一個簡單的類來構建Vaadin UI。 或者更確切地說只是其中的一部分。 下面的示例尚未完全實現,它只能構建UI的一部分,但可以輕松擴展。

Vaadins UI是用Java編寫的命令式UI的示例。 構建UI的過程類似于GWT或SWT中構建命令式UI的過程。 這是一個簡單的示例,其外觀如下:

package org.pis.web.application;import org.eclipse.xtext.xbase.lib.InputOutput;import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Window;@SuppressWarnings("serial")
public class MainWindow extends Application {public void init() {Window main =  new Window();HorizontalLayout hl = new HorizontalLayout();Panel panel  = new Panel();final Button button = new Button("First button");button.addListener( new ClickListener() {@Overridepublic void buttonClick(ClickEvent event) {sayHello("Hello First Button");button.setCaption("First button clicked");}});panel.addComponent(button);Button button2 = new Button("Second button");button2.addListener(new ClickListener() {@Overridepublic void buttonClick(ClickEvent event) {sayHello("Hello Second Button");}});main.addComponent(hl);setMainWindow(main);}public void sayHello(final String string) {InputOutput.<String> println(string);}
}

上面的示例是Vaadin UI的典型實現,我的目標是使其變得更容易閱讀。 為此,我將從構建器類開始。

制作UI Builder API

為了更好地創建UI,我將首先創建一個組件構建器。 這不是構建器模式的標準實現,就像我們可以在純Java中那樣。 實際上,我們正在構建擴展類。 此類包含擴展方法,這些擴展方法將使用新方法擴展現有的類。 這是該類的實現。

package org.pis.web.applicationimport com.vaadin.ui.Window
import com.vaadin.ui.Button
import com.vaadin.ui.Panel
import com.vaadin.ui.HorizontalLayout
import com.vaadin.ui.ComponentContainerclass ComponentBuilder{def window ( (Window) => void initializer){new Window().init(initializer)}def panel( ComponentContainer it, (Panel) => void initializer){val panel = new Panel().init(initializer)it.addComponent(panel)return panel}def horizontalLayout (ComponentContainer it, (HorizontalLayout) => void initializer){val hl = new HorizontalLayout().init(initializer)it.addComponent(hl);return hl}def button ( ComponentContainer it, (Button)=> void initializer){println('Button in panel creation')val that = new Button().init(initializer);it.addComponent(that);return that}def private <T> T init(T obj, (T) => void init){init?.apply(obj)return obj }}

單獨的builder類不能做很多事情,它具有基本的功能,例如構建窗口,添加各種面板和按鈕,并且如果您熟悉Vaadin的話,您知道框架中內置了很多組件。 構建器中的幾乎所有方法都有兩個參數。 第一個參數代表將處理新組件的容器類,第二個參數是閉包,它將包含用于組件初始化的代碼。

制作UI

以下代碼段中的代碼說明了如何使用構建器類來構建Vaadin UI。 類主體中的第一行包括ComponentBuilder作為擴展。 強大的Xtend的lambda語法使代碼看起來更簡單易懂。 這樣,我們消除了Java的內部類和許多純Java代碼中的樣板代碼。 有關Xtend Lambda表達式的更多信息,請參見Xtend的文檔。

package org.pis.web.applicationimport com.vaadin.Application
import com.vaadin.ui.Buttonclass MainWindowXtend extends Application{extension ComponentBuilder = new ComponentBuilderoverride init() {  mainWindow = window[horizontalLayout[panel[button[caption = "First button"it.addListener()[sayHello('Hello First Button');component as Buttoncomponent.caption = 'First button clicked']]button[caption = "Second button"it.addListener()[sayHello('Hello');]]]]];  }def void sayHello(String string) { println(string)}}

結論

因此,這是一種非常不錯的語言,學習過程僅需幾個小時。 文檔寫得很好,主要的語言概念顯示在大約50頁中。 幾個小時后,您就可以準備改善您的應用程序了。 這就是Java的外觀。 簡而言之,與Xtend一起玩很有趣,值得花時間。

參考: Igor Madjeric博客上的JCG合作伙伴 Igor Madjeric 使用Xtend構建Vaadin UI 。

翻譯自: https://www.javacodegeeks.com/2013/02/building-vaadin-ui-with-xtend.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370012.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370012.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370012.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

python 瀏覽器顯示本地文件夾_瀏覽器讀取本地文件

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云文件存儲NAS是一個可共享訪問&#xf…

p15頁

給你一個n*n的01矩陣&#xff0c;只能夠將0變成1&#xff0c;使得每個元素上下左右之和均是偶數&#xff0c; 比如 0 0 0 0 1 0 1 0 0>>>>1 0 1 0 0 0 0 1 0 一個轉變了3步 多實例T 然后一個n&#xff08;n<15&#xff09; 表示n*n的矩陣 …

html 登陸sql server,jsp實現注冊與登錄頁面+sqlsever2008

//index.jspString path request.getContextPath();String basePath request.getScheme()"://"request.getServerName()":"request.getServerPort()path"/";%>登陸用戶登陸用戶名&#xff1a;密 碼:注冊新用戶//Logon.jspString path req…

百度前端學院-基礎學院-第四課

今天是第四天&#xff0c;進度可以&#xff0c;表揚一下自己。 今天的課程目標是&#xff1a;掌握 CSS 稍微復雜的一些選擇器&#xff0c;還有背景&#xff0c;邊框等一些 CSS 樣式屬性。 CSS背景&#xff1a; 背景色&#xff1a;background-color:gray; 背景圖&#xff1a…

JUnit測試方法訂購

直到4.10版為止的Junit都使用反射API返回的測試類中測試方法的順序作為測試方法執行的順序– Class.getMethods&#xff08;&#xff09; 。 引用getMethods&#xff08;&#xff09;api的Javadoc&#xff1a; 返回的數組中的元素未排序&#xff0c;并且沒有任何特定順序。 …

html中padding和margin的區別和用法與存在的bug消除

關于margin&#xff1a;在需要border外側添加距離時。空白處不需要背景時。相連的兩個部分的地方需要加外邊的邊距時使用。 關于padding&#xff1a;在需要border內側添加距離時。空白處需要背景時。相連的兩個部分的地方需要加內部的邊距時使用。 IE6中雙邊距Bug&#xff1a; …

python發微信提醒天氣冷了注意保暖_2019天氣變冷的朋友圈說說 注意保暖的微信問候語...

1.天冷了&#xff0c;注意添加衣物&#xff0c;別著涼。可你還是著涼了。看你難受的樣子&#xff0c;我的心&#xff0c;唉&#xff0c;只有一句話能表達&#xff1a;小樣&#xff0c;你也有今天&#xff01;為了不讓我得逞&#xff0c;你要注意身體哦。2.天氣變涼要注意&#…

Fiddler抓包使用教程-QuickExec

轉載請標明出處&#xff1a;http://blog.csdn.net/zhaoyanjun6/article/details/73468287 本文出自【趙彥軍的博客】 在 Fiddler 中自帶了一個 QuickExec 命令行&#xff0c;用戶可以直接輸入并快速執行腳本命令。 常見命令 help 打開官方的使用頁面介紹&#xff0c;所有的命令…

自己整理的css3動畫庫,附下載鏈接

動畫調用語法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數&#xff1a; 動畫名稱 如&#xff1a;bounceIn 一周期所用時間 如&#xff1a;0.3s 速度曲線 如&#xff1a;ease 值 描述 linear 動畫從頭到尾的速度是相同的。 ease 默認。動畫以低速開始&#xff0…

帶有Spring的REST的ETag

1.概述 本文將重點介紹ETags-Spring支持&#xff0c;RESTful API的集成測試以及帶有curl的使用場景。 這是關于使用Spring 3.1和Spring Security 3.1和基于Java的配置來建立安全的RESTful Web服務的系列文章的第9篇。 REST with Spring系列&#xff1a; 第1部分 – 使用Spring…

html5與css3都要學嗎,前端要學css3嗎?

前端要學css3&#xff1b;HTML5、CSS3是前端工程師必須要學會。現在移動端的興起&#xff0c;導致web前端開發的技術逐變向css3和html5轉變&#xff0c;所以css3一定要學。CSS3是CSS(層疊樣式表)技術的升級版本&#xff0c;于1999年開始制訂&#xff0c;2001年5月23日W3C完成了…

PHP中cookie和session的區別

1、cookie數據存放在客戶的瀏覽器上&#xff0c;session數據放在服務器上。 2、cookie不是很安全&#xff0c;別人可以分析存放在本地的COOKIE并進行COOKIE欺騙考慮到安全應當使用session。 3、session會在一定時間內保存在服務器上。當訪問增多&#xff0c;會比較占用你服務器…

ubuntu下anaconda3+pygame

有是很無語的地方&#xff0c;網上教程一堆&#xff0c;又是要下載什么包&#xff0c;然后又是什么依賴亂七八糟的整一堆。都不知道怎么想的 試了 sudo apt-get install python-pygame 這個是行不通的&#xff01;&#xff01;&#xff01;根本沒有任何卵用 害我捯飭了半天&am…

react 判斷圖片是否加載完成_React中型項目的優化實踐

項目介紹整個項目大概有60個頁面&#xff0c;用到的組件大概150&#xff0c;package里面的依賴大概有70個&#xff0c;應該勉強算得上是一個中型的React的項目了。下面給大家看看我們現在build一次項目的結果--打包時間約150s&#xff0c;打包完之后的資源gzip之后約1.2m&#…

搭建本地wordpress

1.首先&#xff0c;下載xampp&#xff0c;安裝按默認勾選即可。 2.安裝完成后&#xff0c;啟動Apache和MySQL這兩個服務。 啟動后變成綠色&#xff0c;表示啟動成功。 3.點擊MySQL項的Admin進入數據庫后臺。 4.點擊用戶賬戶新建用戶。 5.填寫用戶名&#xff0c;host name選本地…

編寫Java批注

Java 批注的允許的屬性類型刻意非常嚴格&#xff0c;但是允許的類型也可以使用一些簡潔的復合批注類型。 考慮教程站點中的示例注釋&#xff1a; package annotation; interface ClassPreamble {String author();String[] reviewers(); }在這里&#xff0c;作者和審閱者具有St…

Python基礎【day02】:字符串(四)

在Python中字符串本身有帶很多操作&#xff0c;字符串的特性&#xff0c;不可以被修改 0、字符串常用功能匯總 1、字符串的定義 #定義空字符串>>> name#定義非空字符串 >>> name"luoahong"#通過下標訪問 >>> name[1] u#不能修改字符串的值…

cryptojs vue 使用_VueJs里利用CryptoJs實現加密及解密

第一步 安裝安裝crypto-js第二步 創建在js文件目錄下創建一個js文件secret/*** 對頁面上輸入的密碼進行加密傳輸給后臺進行驗證&#xff0c;對返回的數據進行解密&#xff0c;在頁面展示*/let CryptoJS require(crypto-js); // 引入AES源碼jsexport default {/** 對密碼進行加…

html5 窗口變形,HTML5畫布(變形)

坐標變換案例1&#xff1a;function draw(){var cdocument.getElementById("myCanvas");var cxt c.getContext("2d");cxt.translate(200,50);cxt.fillStylergba(255,0,0,0.25);for(var i0;i<40;i){cxt.translate(25,25);cxt.scale(0.9,0.9);cxt.rotate(…

appium GUI介紹

Appium作為APP端的自動化測試工具&#xff0c;具有很多的有點&#xff0c;今天主要介紹一下它的UI界面&#xff0c;包含其中的一些參數等。主要說的是windows下的APPIUM GUI。 先看一眼它的界面(版本為1.4.16.1) 注: 1.android Settings - Android設置按鈕&#xff0c;所有和安…