gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadin mentransfer kepemilikan perpustakaan ini, sehingga Vaadin tidak lagi memberikan dukungan atau melakukan pengembangan aktif di atasnya.
Kami mengambil keputusan ini karena sekali menunjukkan bahwa elemen polimer dapat dengan mudah diintegrasikan dalam GWT, kami ingin menginvestasikan waktu tim kami dalam menambahkan manfaat pengguna yang berharga ke elemen inti Vaadin, dan menyerahkan tongkat kepada masyarakat untuk melakukan integrasi dengan kerangka kerja lainnya.
Selain itu, kami dengan senang hati mengumumkan bahwa kepemilikan repositori akan ditransfer pada 20 April 2017 ke @manolo, yang akan terus mempertahankannya.
Jika Anda bersedia berpartisipasi sebagai kolaborator, silakan tinggalkan komentar di #151. Kolaborator akan diberikan akses setelah transfer. Kami mendorong kontribusi dalam bentuk dan bentuk apa pun.
Perpustakaan telah dihasilkan menggunakan Vaadin GWT-API-Generator, sebuah utilitas yang dapat memeriksa komponen web polimer dan memancarkan kode Java GWT.
Karena polimer membedakan antara koleksi, kelas elemen-polimer GWT diawali dengan awalan yang sama ( besi, kertas, vaadin ), agar dapat dengan mudah merujuk ke komponen web asli, dan untuk dengan mudah menemukan dokumentasi yang terkait dengannya.
Kunjungi kasus acara kami untuk melihat bagaimana komponen itu terlihat, dan untuk melihat ke kode contoh menggunakan setiap komponen.
Ketika kami mengurai kode komponen asli untuk menghasilkan Java API, kami menyalin semua dokumentasi JS yang ada sehingga tersedia di Javadoc. Perhatikan bahwa kadang -kadang deskripsi akan merujuk ke JS, tetapi kami menganggap bahwa lebih baik mempertahankan info.
Anda membutuhkan setidaknya GWT-2.8.0 untuk menggunakan perpustakaan.
File .jar mencakup semua kode Java dan komponen web dari koleksi besi dan kertas polimer, sehingga Anda tidak harus berurusan dengan proses mengunduh dan menggunakan semua perpustakaan dan komponen yang dibungkus JS.
pom.xml Anda < 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 dan memasukkannya ke dalam proyek GWT Project Anda.*.gwt.xml Anda: < inherits name = " com.vaadin.polymer.Elements " />
Hanya Chrome yang memiliki dukungan asli penuh untuk komponen web saat ini, oleh karena itu, untuk membuat proyek Anda berfungsi dengan semua browser modern, Anda harus memasukkan Polyfill WebComponents.
Jika Anda menggunakan komponen polimer sebagai Widgets , perpustakaan akan memuatnya saat dibutuhkan. Kalau tidak, memuatnya sangat awal di halaman host .html Anda seperti yang ditunjukkan pada kode berikut.
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > Vaadin gwt-polymer-elements Bundles Bundles Kelas untuk membangun aplikasi Anda menggunakan Elements Widgets atau JSinterop. Yang pertama adalah pendekatan klasik, sedangkan yang terakhir akan menjadi kecenderungan baru.
Tetapi saat ini, Elements adalah cara yang paling sulit karena GWT tidak memiliki API Elemental-2.0 lengkap yang mengandalkan JsInterop . Kami menyediakan serangkaian antarmuka unsur yang sangat kecil terbatas untuk yang dibutuhkan untuk implementasi kami, mereka akan digantikan oleh Elemental-2.0 saat tersedia.
Singkatnya, untuk proyek GWT klasik dan produksi akan lebih mudah menggunakan Widget karena API tidak akan memiliki perubahan penting. Jika tidak, jika Anda ingin menyingkirkan hierarki widget, kami sarankan untuk mulai menggunakan Element API yang mencampurkannya dengan beberapa pustaka manipulasi DOM seperti gwtquery atau hanya metode yang termasuk dalam elemen 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 );Catatan: Konstruktor widget menerima konten HTML sebagai argumen yang ditambahkan ke komponen web yang diberikan 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 atau Elements di 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 ' >
< 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 menggunakan aturan penataan dom shadow untuk memberikan gaya tersingkir dari DOM lokal elemen. Ini mendukung beberapa sintaks tambahan yang tidak dapat dipahami oleh parser GSS GSS.
Polimer menangani sintaksnya yang memarsing blok <style> apa pun yang mungkin Anda miliki di halaman host Anda, tetapi jika Anda ingin menentukan beberapa aturan gaya di UIBinder, Anda harus menambahkan blok gaya Anda ke panel apa pun.
< 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 >Untuk informasi lebih lanjut tentang sintaks gaya polimer, kunjungi dokumentasi mereka
Jika Anda ingin menyelami sumber .java , kami tidak memelihara file yang dihasilkan, sehingga Anda perlu mengunduh bundel vaadin-gwt-polimer-elemen-xxx-sources.jar. Kalau tidak, Anda mungkin akan melihat kelas pembantu Java dan Template terlihat dalam proyek GWT-API-Generator.
Sebelum menggunakan komponen apa pun, Anda harus mengimpor file yang sesuai. Tetapi gwt-polymer-elements hadir dengan beberapa utilitas sehingga Anda akan dilakukan secara otomatis.
PaperButton button = new PapperButton();
Polymer PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer memiliki beberapa metode untuk melakukan impor secara dinamis Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
Komponen web dapat didaftarkan dan diinisialisasi secara tidak sinkron. Dengan demikian gwt-polymer-elements hadir dengan beberapa metode yang membantu menjalankan callback ketika komponen sebenarnya siap.
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
}
})
Tambahkan repo berikut ke pom.xml Anda, dan ubah versi menggunakan yang terbaru yang terdaftar di URL ini
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots><enabled>true</enabled></snapshots>
</repository>
Untuk mengkompilasi Perpustakaan vaadin-gwt-polymer-elements sendiri.
$ git checkout https://github.com/vaadin/gwt-polymer-elements.git$ cd gwt-polymer-elements$ npm install untuk mengunduh semua komponen ke folder src/main/resources , untuk membuat semua file Java yang diperlukan untuk GWT di src/main/java/ folder dan untuk mengkompilasi dan menginstal pustaka komponen di repo maven lokal Anda. $ cd demo$ mvn gwt:devmode untuk menjalankan demo di SuperDevMode, jika tidak jalankan $ mvn clean package untuk membangun aplikasi demo di bawah Direktori target .target/gwt-polymer-demo atau Anda dapat menggunakan target/gwt-polymer-demo.war dalam wadah servlet.
