gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadin轉移了該圖書館的所有權，因此Vaadin不再提供支持或積極發展。
我們做出了這一決定，因為一旦證明了可以輕鬆地集成到GWT中的聚合物元素，我們希望將團隊的時間投入到為Vaadin Core Elements增加寶貴的用戶福利，並將指揮棒傳遞給社區，以與其他框架進行集成。
此外，我們很高興地宣布，存儲庫的所有權將於2017年4月20日將其轉移給@Manolo，後者將繼續維護它。
如果您願意參加合作者，請在＃151中發表評論。轉移後將授予合作者訪問權限。我們鼓勵以任何形式和形狀做出貢獻。
該庫是使用Vaadin GWT-API-Generator生成的，該實用程序能夠檢查聚合物WebComponents並發射GWT Java代碼。
由於聚合物區分集合，因此GWT聚合物元素類別具有相同的前綴（鐵，紙，vaadin ），以便輕鬆地參考原始的Web組件，並輕鬆找到與之相關的文檔。
訪問我們的節目案例以查看組件的外觀，並使用每個組件查看示例代碼。
當我們解析原始組件代碼以生成Java API時，我們將復制所有現有的JS文檔，以便在Javadoc中可用。請注意，有時描述會指JS，但我們認為維護信息最好。
您至少需要GWT-2.8.0才能使用庫。
.jar文件包括聚合物鐵和紙質收集的所有Java代碼和Web組件，因此您不必處理下載和部署所有JS包裝的庫和組件的過程。
pom.xml < dependencies >
< dependency >
< groupId >com.vaadin.polymer</ groupId >
< artifactId >vaadin-gwt-polymer-elements</ artifactId >
< version >1.7.0.0</ version >
< scope >provided</ scope >
</ dependency >
</ dependencies >vaadin-gwt-polymer-elements-1.7.0.0.jar存檔，並將其放入GWT Project class Path。*.gwt.xml模塊文件： < inherits name = " com.vaadin.polymer.Elements " />
因此，如今，只有Chrome對Web組件有完整的本機支持，因此，為了使您的項目與所有現代瀏覽器一起使用，您必須包括Web Components Pollefill。
如果將聚合物組件用作Widgets ，則庫會在需要時懶惰。否則，如以下代碼中所示，在.html主機頁面中非常早。
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > vaadin gwt-polymer-elements捆綁類，使用Widgets或JSInterop Elements構建您的應用程序。前者是經典的方法，而後者將成為新的趨勢。
但是目前， Elements是最困難的方法，因為GWT缺乏依賴JsInterop的完整Elemental-2.0 API。我們提供了一組很小的元素接口，僅限於實施所需的元素接口，在可用時，它們將被元素-2.0替換。
總而言之，對於經典和生產GWT項目，使用Widget會更容易，因為API不會進行重要的更改。否則，如果您想擺脫小部件層次結構，我們建議我們開始使用Element API與某些DOM操作庫（如gwtquery或元素API中包含的方法混合使用。
PaperButton button = new PaperButton ();
button . setIcon ( "polymer" );
button . setLabel ( "Polymer" );
button . setRaised ( true );
button . addClickHandler ( new ClickHandler () {
public void onClick ( ClickEvent event ) {
// ...
}
});
RootPanel . get (). add ( button );注意：小部件構造儀接受任何HTML內容作為參數，該參數附加到Web組件渲染的DOM
// Create a new instance of PaperButton
PaperButtonElement button = Polymer . createElement ( PaperButtonElement . TAG );
// Set some properties
button . setIcon ( "polymer" );
button . setLabel ( "Polymer" );
button . setRaised ( true );
// Add event listeners
button . addEventListener ( "click" , new EventListener () {
public void onBrowserEvent ( Event event ) {
// ...
}
});
// Append to the html document
RootPanel . get (). getElement (). appendChild ( button );Widgets或Elements < ui : UiBinder xmlns : ui = ' urn:ui:com.google.gwt.uibinder '
xmlns : g = ' urn:import:com.google.gwt.user.client.ui '
xmlns : p = ' urn:import:com.vaadin.polymer.paper.widget ' >
< ui : style >
.container paper-button.colored {
background: #4285f4;
color: #fff;
}
</ ui : style >
< g : HTMLPanel >
<!-- As Widget -->
< p : PaperButton toggles = " true " raised = " true " active = " true " addStyleNames = " {style.colored} " >active</ p : PaperButton >
<!-- As Element -->
< paper-button raised = " " noink = " " >Click me</ paper-button >
</ g : HTMLPanel >
聚合物使用陰影DOM樣式規則來提供元素本地DOM的範圍示意樣式。它支持一些額外的語法，而GWT GSS解析器無法低估。
Polymer負責其語法解析您在主機頁面中可能擁有的任何<style>塊，但是如果您想在Uibinder中指定一些樣式規則，則必須在任何面板中添加樣式塊。
< ui : UiBinder xmlns : ui = ' urn:ui:com.google.gwt.uibinder '
xmlns : g = ' urn:import:com.google.gwt.user.client.ui '
xmlns : p = ' urn:import:com.vaadin.polymer.paper.widget ' >
< g : HTMLPanel >
< style is = " custom-style " >
paper-toolbar paper-icon-button {
--paper-icon-button-ink-color: var(--paper-indigo-500);
}
</ style >
< p : PaperToolbar >
< p : PaperIconButton icon = " menu " />
< span class = " title " >Toolbar</ span >
</ p : PaperToolbar >
</ g : HTMLPanel >有關聚合物樣式語法的更多信息，請訪問其文檔
如果您想潛入.java源，我們不維護生成的文件，因此您需要下載vaadin-gwt-polymer-elements-xxx-sources.jar bundle。否則，您可能會在GWT-API-Generator項目中查看Java助手課程和模板。
在使用任何組件之前，您必須導入適當的文件。但是gwt-polymer-elements附帶一些實用程序，因此您將自動完成。
PaperButton button = new PapperButton();
Polymer助手類創建新組件 PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer有幾種動態執行導入的方法 Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
Web組件可以註冊並初始化。因此， gwt-polymer-elements帶有一些方法，這些方法有助於當組件實際準備就緒時運行回調。
PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer.ready(button, new Function() {
public Object call(Object args) {
// Set button properties here
}
})
PolymerButton button = new PolymerButton();
// You could set methods here
button.setFoo(bar);
button.ready(new Function() {
public Object call(Object args) {
// But you have to enclose in a callback calls to element methods
}
});
Polymer.importHref(Arrays.asList("paper-tabs", "paper-tab-element"), new Function() {
public Object call(Object args) {
// Create your elements here and call their methods
}
})
將以下存儲庫添加到您的pom.xml ，並使用此URL中列出的最新版本更改版本
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots><enabled>true</enabled></snapshots>
</repository>
要自己編譯vaadin-gwt-polymer-elements庫。
$ git checkout https://github.com/vaadin/gwt-polymer-elements.git克隆存儲庫。$ cd gwt-polymer-elements$ npm install以將所有組件下載到src/main/resources文件夾，以創建src/main/java/文件夾中GWT所需的所有Java文件，並在本地Maven Repo中編譯和安裝組件庫。 $ cd demo$ mvn gwt:devmode以SuperDevMode運行演示，否則運行$ mvn clean package以在target目錄下構建演示應用程序。target/gwt-polymer-demo提供演示，也可以在Servlet容器中部署生成的target/gwt-polymer-demo.war 。
