gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadinはこのライブラリの所有権を転送するため、Vaadinはもはやサポートを提供しないか、積極的な開発を行います。
ポリマー要素をGWTに簡単に統合できることを実証したら、Vaadin Core要素に貴重なユーザーの利点を追加するためにチームの時間を投資し、他のフレームワークと統合するためにバトンをコミュニティに渡すことをお勧めします。
さらに、リポジトリの所有権が2017年4月20日までに@Manoloに譲渡されることをお知らせします。
コラボレーターとして参加することをいとわない場合は、＃151にコメントを残してください。協力者は、転送後にアクセスが許可されます。あらゆる形と形での貢献をお勧めします。
ライブラリは、ポリマーのウェブコンポーネントを検査してGWT Javaコードを発することができるユーティリティであるVaadin GWT-API-Generatorを使用して生成されました。
ポリマーはコレクションを区別するため、GWT-Polymer-Elementsクラスには、元の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プロジェクトClassPathに配置できます。*.gwt.xmlモジュールファイルに追加します。 < inherits name = " com.vaadin.polymer.Elements " />
ChromeのみがWebコンポーネントを完全にサポートしているため、プロジェクトをすべての最新のブラウザで動作させるには、WebComponents PolyFillを含める必要があります。
ポリマーコンポーネントをWidgetsとして使用する場合、ライブラリは必要に応じて怠zyに負荷をかけます。それ以外の場合は、次のコードに示されているように.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いずれかを使用してアプリケーションを構築します。前者は古典的なアプローチであり、後者は新しい傾向になります。
しかし、今のところ、GWTがJsInteropに依存している完全なElemental-2.0 APIが不足しているため、 Elements最も困難な方法です。実装に必要なものに限定されたエレメンタルインターフェイスの非常に小さなセットを提供します。それらは、利用可能なときにElemental-2.0に置き換えられます。
要約すると、APIには重要な変更がないため、クラシックおよびプロダクションGWTプロジェクトの場合、 Widget使用が容易になります。それ以外の場合は、ウィジェット階層を取り除きたい場合は、 gwtqueryなどのDOM操作ライブラリまたはElemental APIに含まれる方法のみと混合するElement 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 );注：ウィジェットコンストラクターは、WebコンポーネントレンダリングされたDOMに追加される引数としてHTMLコンテンツを受け入れます
// 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 >
Polymerは、要素のローカルDOMのスコープスタイリングを提供するために、Shadow 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バンドルをダウンロードする必要があります。それ以外の場合は、GWT-API-GeneratorプロジェクトでJava Helperクラスとテンプレートを見ることができます。
コンポーネントを使用する前に、適切なファイルをインポートする必要があります。しかし、 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からデモを直接提供するか、生成されたtarget/gwt-polymer-demo.warサーブレット容器に展開できます。
