Polymer เป็น Platform Web Component ที่พัฒนาโดย Google ที่รวม Component ที่จำเป็นต้องใช้ในการพัฒนา Web และเครื่องมือในการผนวกบริการต่างๆ ของ Google เข้ามาใช้ได้ง่ายมากขึ้น ผ่านทาง Component ที่มีให้ นอกจากนี้ยังมี Polymer Core Component สำหรับ UI ต่างๆ พร้อมรองรับการพัฒนา Web แบบ Responsive ด้วย Polymer ในแนวคิดการออกแบบ แบบ Material Design ซึ่งถูกใช้ในงานออกแบบ Android Application ใน Android 5.0 ด้วย

โดยปกติการใช้งาน Polymer จะใช้งานผ่าน Bower เป็นหลัก แล้วถึงจะแก้ไขโค้ดของหน้า Web ที่เราจ้องการ แต่ Polymer มีเครื่องมือใหม่เรียกว่า Designer ช่วยให้คุณใช้งาน Polymer ได้ง่ายมากขึ้น ซึ่ง Polymer Designer สามารถเรียกใช้งานผ่านทางหน้าเว็บไซต์ของโครงการได้ หรือจะเอา source code มาติดตั้งและใช้งานภายในหน่วยงานก็ได้เช่นกัน มาลองใช้งานผ่านเว็บกันก่อน

เข้าใช้งาน Polymer Designer ได้ที่ https://www.polymer-project.org/tools/designer/ จะเข้าสู่หน้าจอว่างๆ ดังนี้

ส่วนประกอบของ Polymer Designer มี 4 ส่วนได้แก่

  • ส่วน Tools Bar
  • Properties & Styles
  • Palette & Tree
  • Canvas
  • การใช้งานก็ง่ายมาก เพียงแค่เลือก Component ที่ต้องการใช้งานจาก Palette วางลงใน Canvas จากนั้นเราสามารถตั้งค่า propertiy ต่างๆ เพิ่มเติมผ่านทาง Property & Style ได้ หรือเลือกแก้ไข Code ได้เช่นกัน

    มาลองใช้งาน Designer กัน ให้ลาก Core Scaffold มาวาง จากนั้นกำหนด auto size

    ลาก Google Map วางเพิ่มแล้วกำหนด Auto Size แก้ไข label ใน core-menu เป็น Road และ Setellite ดังภาพ

    เพิ่ม event ให้ core-item ทั้ง 2 อันและเขียน function เพิ่มในส่วน script ดังนี้

    กดปุ่ม preview เราจะได้หน้าเว็บดังภาพ

    เลือกเมนู Satellite ด้านข้าง Google Map ก็จะเปลี่ยนเป็นภาพถ่ายดาวเทียม

    หากเราย่อขนาดของหน้าต่าง browser ให้แคบลง จะพบว่า Scaffold ออกแบบมาให้รองรับ Responsive ด้วย หน้าเว็บก็จะปรับตามขนาดหน้าจอให้ โดยซ่อน menu ให้

    ลองคลิกที่ icon menu ด้านบน menu ก็จะแสดงออกมาดังภาพ

    นอกจากนี้คุณยังสามารถแชร์โค้ดที่ได้จากการใช้งาน Designer ไปยัง Gist ได้ด้วย ทำให้คุณสามารถแก้ไขหน้าเว็บได้ทุกที่ที่คุณต้องการ

    Comments are closed.