Google Polymer - วิธีที่จะเปลี่ยนวิธีสร้างเว็บแอป

และ องค์ประกอบที่สร้างการควบคุม UI ของผู้เล่นในที่ลับ.

วันนี้ด้วย Web Components เราสามารถตั้งชื่อองค์ประกอบของเราเองได้เช่นกัน เราสามารถสร้างองค์ประกอบเช่น, เพื่อฝังฟีด Twitter หรือ (อาจ) เพื่อฝังแผนภูมิ.

นอกจากนี้องค์ประกอบที่กำหนดเองเหล่านี้อาจมีแอตทริบิวต์ที่กำหนดเองที่ยอมรับสองสามรายการ ในเรื่องที่เกี่ยวกับ องค์ประกอบคุณตั้งค่าคุณลักษณะที่เรียกว่า ชื่อผู้ใช้ ซึ่งจะใช้เพื่อระบุชื่อผู้ใช้ Twitter.

องค์ประกอบที่กำหนดเองในโพลิเมอร์

พอลิเมอร์มาพร้อมกับองค์ประกอบมากมายที่เกือบทุกความต้องการของเว็บแอปพลิเคชัน Google แบ่งองค์ประกอบเหล่านี้ออกเป็นกลุ่ม: องค์ประกอบเหล็ก, องค์ประกอบกระดาษ, องค์ประกอบเว็บของ Google, องค์ประกอบทอง, องค์ประกอบนีออน, องค์ประกอบแพลทินัมและโมเลกุล.

1. องค์ประกอบเหล็ก

องค์ประกอบเหล็กคือชุดขององค์ประกอบพื้นฐาน องค์ประกอบพื้นฐานเหล่านี้คือสิ่งที่เราใช้ตามปกติ สร้างหน้าเว็บ เช่นอินพุตรูปแบบและรูปภาพ ความแตกต่างคือโพลิเมอร์เพิ่มพลังพิเศษให้กับองค์ประกอบเหล่านี้.

องค์ประกอบทั้งหมดในกลุ่มนี้คือ เหล็ก- ยกตัวอย่างเช่น , ซึ่งใช้ในการแสดงภาพ องค์ประกอบได้รับการติดตั้งคุณสมบัติพิเศษบางอย่างที่เราไม่สามารถใช้ในปกติ ธาตุ. ตัวอย่างเช่นเราสามารถเพิ่ม พรีโหลด, จางหาย, และ ตัวยึด แอตทริบิวต์:

ตัวอย่างด้านบนจะแสดงตัวยึดตำแหน่งรูปภาพก่อนจากนั้นจางหายไปเป็นรูปภาพจริงใน src ตามที่โหลดเต็ม, ประสิทธิภาพการโหลดภาพที่ราบรื่น.

2. องค์ประกอบของกระดาษ

องค์ประกอบกระดาษ เป็นกลุ่มขององค์ประกอบการออกแบบวัสดุ การออกแบบวัสดุเป็นภาษาการออกแบบของ Google เพื่อทำให้ส่วนต่อประสานผู้ใช้และประสบการณ์ในแพลตฟอร์มของ Google ทั้งเว็บและแอป Android สอดคล้องกันมากขึ้น องค์ประกอบบางอย่างที่เป็นเอกลักษณ์ของการออกแบบวัสดุคือปุ่มกระดาษและการกระทำแบบลอย (FAB).

กระดาษ

กระดาษ เป็นอุปมาของ Google สำหรับ สื่อที่รองรับเนื้อหา. ในการเพิ่มกระดาษด้วยโพลิเมอร์เราใช้ ธาตุ. องค์ประกอบนี้ใช้เวลา 2 คุณลักษณะ:

• การยกระดับ เพื่อยกกระดาษจึงเพิ่มเงาเพื่อเสริมความสูง
• มีชีวิตชีวา จะใช้ภาพเคลื่อนไหวเมื่อการเปลี่ยนแปลงระดับความสูงของกระดาษ.

ปุ่มการกระทำลอยตัว (FAB)

ปุ่มการดำเนินการลอยตัว (FAB) เป็นปุ่มวงกลมที่มีไอคอนลอยอยู่บนหน้าจอโดยปกติจะมีสีที่โดดเด่น Google แนะนำว่าปุ่มนี้มีฟังก์ชั่นที่เข้าถึงได้บ่อย นี่คือตัวอย่าง:

ตัวอย่างโค้ดต่อไปนี้เพิ่มวัสดุกระดาษที่มีภาพและ FAB.

เราจะได้ผลลัพธ์ดังต่อไปนี้:

เรามีรูปภาพพร้อม “หัวใจ” ปุ่มลอยอยู่ด้านบนของมัน คลิกที่นี่เพื่อกดปุ่ม adn เพื่อให้มีเอฟเฟกต์ระลอกคลื่นเพื่อรับทราบการคลิก.

• ดูตัวอย่างกระดาษ

3. Google Web Components

Google Web Components เป็นองค์ประกอบพิเศษที่จัดการกับ Google APIs และบริการต่างๆเช่น Google Maps, Youtube รวมถึง Google Feed เพื่อตั้งชื่อให้ องค์ประกอบในกลุ่มนี้ ทำให้การโต้ตอบกับบริการของ Google อยู่ห่างออกไปเพียงไม่กี่บรรทัด.

ต่อไปนี้เป็นตัวอย่างในการแสดง Google แผนที่โดยใช้ ธาตุ.

  นี่คือ Googleplex  

ในขณะที่คุณสามารถข้างต้น องค์ประกอบใช้เวลา ละติจูด และ ลองจิจูด เพื่อระบุตำแหน่งบนแผนที่ เรายังสามารถทำรัง เพื่อแสดงเครื่องหมายแผนที่ของสถานที่นั้นพร้อมกับข้อความซึ่งจะปรากฏเมื่อคลิกที่เครื่องหมาย.

• ดูการสาธิตแผนที่

ต้องการแสดงวิดีโอ Youtube หรือไม่ คุณสามารถใช้ ธาตุ.

ในทำนองเดียวกันเราปรับแต่งผลลัพธ์ผ่านแอตทริบิวต์.

• ดูการสาธิต Youtube

4. องค์ประกอบทอง

องค์ประกอบทองคำคือ องค์ประกอบที่ออกแบบมาโดยเฉพาะสำหรับแอพอีคอมเมิร์ซ. ที่นี่คุณจะพบองค์ประกอบในการแสดงบัตรเครดิตอีเมลโทรศัพท์และการป้อนข้อมูล ZIP ซึ่งทั้งหมดได้รับการติดตั้ง การตรวจสอบรูปแบบ เพื่อให้มั่นใจว่าการป้อนข้อมูลและความปลอดภัยถูกต้อง นี่คือตัวอย่างหนึ่งในการเพิ่มอินพุตบัตรเครดิต Visa.

5. องค์ประกอบอื่น ๆ

องค์ประกอบที่เหลือรวมองค์ประกอบนีออนสำหรับภาพเคลื่อนไหวและเอฟเฟกต์พิเศษองค์ประกอบ Platinum สำหรับออฟไลน์และการแจ้งเตือนแบบพุชและสุดท้ายโมเลกุลห่อสำหรับห้องสมุดบุคคลที่สาม.

หมายเหตุถึงบรรณาธิการ: ในช่วงเวลาของการเขียนนี้องค์ประกอบ Neon ธาตุแพลทินัมและโมเลกุลยังคงไม่สามารถใช้ได้.

การบูรณาการพอลิเมอร์

ต้องการใช้โพลิเมอร์ในการพัฒนาเว็บไซต์ของคุณหรือไม่ นี่คือวิธีการติดตั้งและรวมเข้ากับหน้าเว็บของคุณ เนื่องจากองค์ประกอบโพลีเมอร์ส่วนใหญ่พึ่งพาซึ่งกันและกันวิธีที่ดีที่สุดในการติดตั้งโพลีเมอร์คือผ่าน Bower.

Bower เป็นผู้จัดการการพึ่งพาโครงการที่ทำให้การติดตั้งสคริปต์หรือรูปแบบที่จำเป็นในการเรียกใช้โครงการง่ายขึ้น ลองดูโพสต์ก่อนหน้าของเราเกี่ยวกับวิธีการติดตั้งอัปเดต & ลบเว็บไลบรารีอย่างง่ายดายด้วย Bower.

ในการรวมโพลิเมอร์ให้เรียกใช้ Terminal จากนั้นนำทางไปยังไดเรกทอรีโครงการของคุณโดยสมมติว่าคุณได้สร้างขึ้นมา จากนั้นเรียกใช้ ต้นสน คำสั่งเพื่อเริ่มต้นไฟล์ bower.json ลงในโครงการของคุณที่จะใช้ในการบันทึกการอ้างอิงโครงการ เปิด bower.json และเพิ่มบรรทัดต่อไปนี้.

 "dependencies": "polymer": "Polymer / polymer # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "องค์ประกอบเหล็ก": " PolymerElements / iron-elements # ^ 1.0.0 "," paper-elements ":" PolymerElements / iron-elements # ^ 1.0.0 "," องค์ประกอบทอง ":" PolymerElements / องค์ประกอบทองคำ # ^ 1.0.0 " 

การตั้งค่านี้ถือว่าเรากำลังจะใช้องค์ประกอบทั้งหมดจากแต่ละกลุ่ม คุณสามารถลบสิ่งที่คุณไม่ต้องการออกจากรายการการพึ่งพา เมื่อมีการตั้งค่าการอ้างอิงให้เรียกใช้ ติดตั้ง bower คำสั่งเพื่อติดตั้งการพึ่งพาในรายการ.

กระบวนการนี้อาจใช้เวลาสักครู่เนื่องจากเกี่ยวข้องกับการคว้าไฟล์จำนวนมากจากที่เก็บ เมื่อเสร็จแล้วคุณควรพบพวกเขาบันทึกไว้ใน bower_components โฟลเดอร์.

เปิดไฟล์ HTML ที่คุณต้องการใช้ส่วนประกอบโพลิเมอร์ภายในหัวเอกสาร, เชื่อมโยง WebComponents.js ซึ่งก็คือ polyfill สำหรับเบราว์เซอร์ที่ยังไม่รองรับ WebComponents และ นำเข้าไฟล์ส่วนประกอบ ใช้การนำเข้า HTML.

นี่คือตัวอย่าง:

การตั้งค่านี้จะทำให้เราสามารถใช้ , , องค์ประกอบ.

โชว์ผลงาน

นี่คือแอปพลิเคชันเว็บบางส่วนที่ใช้ Google โพลิเมอร์อยู่แล้ว.

Google

Google ใช้ Google Polymer ในหน้าเว็บ Google IO 2015 Google Fi บริการไร้สายของ Google สำหรับผู้ให้บริการและผู้ขายที่เป็นพันธมิตร และ Google Music.

องค์ประกอบที่กำหนดเอง

CustomElements เป็นฮับที่คุณสามารถค้นหาองค์ประกอบที่กำหนดเองซึ่งสร้างขึ้นด้วย Web Components มันทำให้การใช้องค์ประกอบกระดาษที่จะมีและสร้างรายการ นอกจากนี้ยังให้เส้นทางที่สะดวกในการติดตั้งองค์ประกอบเหล่านี้ผ่าน Bower และ NPM.

Chrome Dev Editor

แอปพลิเคชัน Chrome สำหรับการแก้ไขรหัสที่ทำงานได้ดีอย่างน่าประหลาดใจ แอพนี้ใช้ปุ่ม FAB เมนูกระดาษและองค์ประกอบกล่องโต้ตอบกระดาษในส่วนติดต่อผู้ใช้.

ผู้ออกแบบพอลิเมอร์

เครื่องมือในการสร้างเว็บแอปพลิเคชันด้วยองค์ประกอบโพลิเมอร์โดยใช้ส่วนต่อประสานแบบลากและวาง.

พยากรณ์สต็อกประจำวัน

รายงานตลาดหลักทรัพย์และการคาดการณ์ที่สร้างขึ้นทั้งหมดด้วยองค์ประกอบพอลิเมอร์.

จดหมายโพลิเมอร์

แอปอีเมลไคลเอ็นต์สำหรับ Gmail มันดูดีและลื่นไหลแม้ว่ามันจะเศร้า แต่ก็ใช้งานไม่ได้เต็มที่.

ความคิดสุดท้าย

พอลิเมอร์มีขอบเขตมหาศาลและอาจใช้เวลาสักครู่เพื่อทำความคุ้นเคยกับองค์ประกอบที่กำหนดเองทั้งหมดรวมถึง API อย่างไรก็ตามองค์ประกอบของเว็บและโพลีเมอร์จะมีอิทธิพลต่อวิธีการสร้างแอปพลิเคชันเว็บอย่างแน่นอน อยู่ข้างหน้าฝูงชนโดยอ่านเพิ่มเติมเกี่ยวกับ Web Components - การอ้างอิงอยู่ด้านล่าง.

• ดูการสาธิต
• แหล่งดาวน์โหลด

การอ้างอิงที่มีประโยชน์

• สถานะของคอมโพเนนต์ของเว็บ
• แนะนำโดยละเอียดเกี่ยวกับองค์ประกอบที่กำหนดเอง
• บล็อกอย่างเป็นทางการของ Google Polymer