หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

GWT-polymer-etement

ข้อสังเกต: Vaadin ไม่ได้รับการสนับสนุนอีกต่อไป

Vaadin ถ่ายโอนความเป็นเจ้าของของห้องสมุดนี้ดังนั้น Vaadin จึงไม่ให้การสนับสนุนอีกต่อไปหรือทำการพัฒนาที่ใช้งานอยู่อีกต่อไป

เราตัดสินใจครั้งนี้เพราะเมื่อแสดงให้เห็นว่าองค์ประกอบของพอลิเมอร์สามารถรวมเข้ากับ GWT ได้อย่างง่ายดายเราต้องการลงทุนเวลาของทีมในการเพิ่มผลประโยชน์ผู้ใช้ที่มีค่าให้กับองค์ประกอบหลักของ Vaadin

นอกจากนี้เรายินดีที่จะประกาศว่าการเป็นเจ้าของที่เก็บจะถูกโอนภายใน 20 เม.ย. 2017 ไปยัง @Manolo ซึ่งจะยังคงรักษาไว้

หากคุณยินดีที่จะเข้าร่วมในฐานะผู้ทำงานร่วมกันโปรดแสดงความคิดเห็นใน #151 ผู้ทำงานร่วมกันจะได้รับการเข้าถึงหลังจากการถ่ายโอน เราสนับสนุนให้มีส่วนร่วมในรูปแบบและรูปร่างใด ๆ

การแนะนำ

  • Polymer : เป็นไลบรารี JavaScript สำหรับการสร้างเว็บแอปพลิเคชันที่มีส่วนประกอบของเว็บ
  • พอลิเมอร์-องค์ประกอบ : เป็นชุดของวิดเจ็ตที่สร้างขึ้นในพอลิเมอร์ คอลเลกชันแบ่งออกเป็นส่วน ๆ : เหล็ก, กระดาษ, ทอง, นีออน, แพลตตินัม, วาดีน ฯลฯ
  • GWT-Polymer-Elements : เป็น Java wrapper ที่เปิดใช้งานองค์ประกอบโพลีเมอร์ที่จะใช้ในโครงการ GWT ตอนนี้มันมี wrappers สำหรับเหล็ก, กระดาษ, แอพ, คอลเลกชันแพลตตินัมและวาดิดิน แต่อาจเพิ่มมากขึ้นในอนาคต

ไลบรารีถูกสร้างขึ้นโดยใช้ Vaadin GWT-Api-Generator ยูทิลิตี้ที่สามารถตรวจสอบเว็บคอมโพเมอร์พอลิเมอร์และ Emit GWT Java Code

เนื่องจากพอลิเมอร์แตกต่างระหว่างคอลเลกชันคลาส GWT-Polymer-Elements จึงถูกนำหน้าด้วยคำนำหน้าเดียวกัน ( เหล็ก, กระดาษ, Vaadin ) เพื่อที่จะอ้างถึงองค์ประกอบเว็บดั้งเดิมได้อย่างง่ายดายและค้นหาเอกสารที่เกี่ยวข้องกับมันได้อย่างง่ายดาย

การสาธิต

เยี่ยมชมกรณีการแสดงของเราเพื่อดูว่าส่วนประกอบมีลักษณะอย่างไรและดูรหัสตัวอย่างโดยใช้แต่ละองค์ประกอบ

ชาวชวา

เมื่อเราแยกวิเคราะห์รหัสส่วนประกอบดั้งเดิมเพื่อสร้าง Java API เราจะคัดลอกเอกสาร JS ทั้งหมดที่มีอยู่ทั้งหมดดังนั้นจึงมีอยู่ใน Javadoc โปรดทราบว่าบางครั้งคำอธิบายจะอ้างถึง JS แต่เราคิดว่าเป็นการดีกว่าที่จะรักษาข้อมูล

ใช้ไลบรารี GWT

คุณต้องใช้อย่างน้อย GWT-2.8.0 เพื่อใช้ห้องสมุด

เพิ่มองค์ประกอบ Vaadin-GWT-Polymer-lements ใน ClassPath ของคุณ

ไฟล์ .jar ประกอบด้วยรหัส Java ทั้งหมดและส่วนประกอบเว็บของคอลเลกชันโพลีเมอร์เหล็กและกระดาษดังนั้นคุณไม่จำเป็นต้องจัดการกับกระบวนการดาวน์โหลดและปรับใช้ไลบรารีและส่วนประกอบที่ห่อหุ้ม JS ทั้งหมด

ใช้ maven
  • หากโครงการของคุณใช้ maven เพิ่มการพึ่งพาต่อไปนี้ใน 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 ClassPath ของคุณ

อัปเดตการกำหนดค่าโมดูลของคุณ

  • เพิ่มบรรทัดนี้ในไฟล์โมดูล *.gwt.xml : 
 < inherits name = " com.vaadin.polymer.Elements " />

เพิ่ม Polyfill ส่วนประกอบของเว็บ (ไม่บังคับ)

  • เฉพาะ Chrome เท่านั้นที่มีการสนับสนุนพื้นเมืองสำหรับส่วนประกอบเว็บทุกวันนี้เพื่อให้โครงการของคุณทำงานร่วมกับเบราว์เซอร์ที่ทันสมัยทั้งหมดคุณต้องรวม Polyfill เว็บคอมโพนั้น

    หากคุณใช้ส่วนประกอบพอลิเมอร์เป็น Widgets ไลบรารีจะโหลดขี้เกียจเมื่อจำเป็น มิฉะนั้นโหลดเร็วมากในหน้าโฮสต์ .html ของคุณตามที่แสดงในรหัสต่อไปนี้ 

 < head >
    < script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
    < script src =" myapp/myapp.nocache.js " > </ script >
</ head >

การบริโภคส่วนประกอบเว็บใน GWT

Vaadin gwt-polymer-elements Bundles คลาสเพื่อสร้างแอปพลิเคชันของคุณโดยใช้ Widgets หรือ Elements JSInterop อดีตเป็นวิธีการคลาสสิกในขณะที่หลังจะกลายเป็นแนวโน้มใหม่

แต่ตอนนี้ Elements เป็นวิธีที่ยากที่สุดเพราะ GWT ขาด Elemental-2.0 API ที่สมบูรณ์ขึ้นอยู่กับ JsInterop เราให้ชุดอินเทอร์เฟซองค์ประกอบเล็ก ๆ ที่ จำกัด เฉพาะที่จำเป็นสำหรับการใช้งานของเราพวกเขาจะถูกแทนที่ด้วย Elemental-2.0 เมื่อมีให้บริการ

โดยสรุปสำหรับโครงการ GWT แบบคลาสสิกและการผลิตมันจะง่ายกว่าที่จะใช้ Widget เนื่องจาก API จะไม่มีการเปลี่ยนแปลงที่สำคัญ มิฉะนั้นหากคุณต้องการกำจัดลำดับชั้นของวิดเจ็ตเราขอแนะนำให้เริ่มใช้ Element API ผสมกับไลบรารีการจัดการ DOM บางอย่างเช่น gwtquery หรือเพียงแค่วิธีการที่รวมอยู่ใน Elemental API

  • การใช้ วิดเจ็ตคลาสสิก API ใน Java 
 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 ใด ๆ เป็นอาร์กิวเมนต์ที่ต่อท้ายเข้ากับส่วนประกอบของเว็บที่แสดงผล DOM

  • ใช้ องค์ประกอบ API ใน Java 
 // 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 ใน 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 >

จัดแต่ง ทรงผมของคุณ

พอลิเมอร์ใช้กฎการจัดแต่งทรงผมเงาสำหรับการจัดแต่งทรงผมแบบกำหนดขอบเขตของ DOM ในท้องถิ่นขององค์ประกอบ รองรับไวยากรณ์พิเศษบางอย่างซึ่งไม่สามารถเข้าใจได้โดยตัวแยกวิเคราะห์ GWT GSS

พอลิเมอร์ดูแลไวยากรณ์การแยกวิเคราะห์ <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

หากคุณต้องการดำน้ำในแหล่งข้อมูล .java เราจะไม่เก็บรักษาไฟล์ที่สร้างขึ้นดังนั้นคุณต้องดาวน์โหลด Vaadin-GWT-Polymer-Elements-xxx-sources.jar Bundle มิฉะนั้นคุณอาจดูคลาส Helper Java และเทมเพลตดูในโครงการ GWT-Api-Generator

การนำเข้าส่วนประกอบเว็บ

ก่อนที่จะใช้ส่วนประกอบใด ๆ คุณต้องนำเข้าไฟล์ที่เหมาะสม แต่ gwt-polymer-elements มาพร้อมกับยูทิลิตี้บางอย่างเช่นเดียวกับที่คุณจะทำโดยอัตโนมัติ

  • วิดเจ็ต : เมื่อคุณใช้วิดเจ็ตการนำเข้าจะเกิดขึ้นโดยอัตโนมัติ 
    PaperButton button = new PapperButton();
  • องค์ประกอบ : สร้างส่วนประกอบใหม่ผ่านคลาส Helper Polymer 
    PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
  • การนำเข้าแบบไดนามิก : Polymer มีสองวิธีในการทำการนำเข้าแบบไดนามิก 
    Polymer.importHref("paper-button/paper-button.html");
  • การนำเข้าแบบสแตติก : การเพิ่มแท็กลงในหัวหน้าโฮสต์เป็นวิธีดั้งเดิมในการทำให้เว็บคอมโพสิตพร้อมใช้งานหากคุณต้องการพวกเขาในแอปพลิเคชันแบบผสม (DOM, JS หรือ GWT) หรือหากคุณต้องการให้แน่ใจว่าส่วนประกอบของเว็บมีให้ตั้งแต่ต้น 
   <link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>

ปัญหาอะซิงโครนัส

ส่วนประกอบของเว็บสามารถลงทะเบียนและเริ่มต้นแบบอะซิงโครนัส ดังนั้น 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
     }
  })

การใช้สแน็ปช็อตล่าสุด

เพิ่ม repo ต่อไปนี้ใน 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 ด้วยตัวเอง

  1. โคลนที่เก็บด้วย $ git checkout https://github.com/vaadin/gwt-polymer-elements.git
  2. เปลี่ยนเป็นโฟลเดอร์โครงการ $ cd gwt-polymer-elements
  3. เรียกใช้ $ npm install เพื่อดาวน์โหลดส่วนประกอบทั้งหมดไปยังโฟลเดอร์ src/main/resources เพื่อสร้างไฟล์ Java ทั้งหมดที่จำเป็นสำหรับ GWT ใน src/main/java/ Folder และรวบรวมและติดตั้งไลบรารีส่วนประกอบในคุณ maven repo ท้องถิ่น

เรียกใช้การสาธิตในพื้นที่

  1. ในการเรียกใช้และแก้ไขข้อบกพร่องการสาธิตให้ไปที่โฟลเดอร์สาธิต $ cd demo
  2. เรียกใช้ $ mvn gwt:devmode เพื่อเรียกใช้การสาธิตใน SuperDevMode มิฉะนั้นเรียกใช้ $ mvn clean package เพื่อสร้างแอปพลิเคชันตัวอย่างภายใต้ไดเรกทอรี target
  3. คุณสามารถให้บริการสาธิตได้โดยตรงจาก target/gwt-polymer-demo หรือคุณสามารถปรับใช้ target/gwt-polymer-demo.war ในคอนเทนเนอร์ Servlet
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด