Google นำเสนอการออกแบบ Application ใหม่ ชื่อ Material Design และจะถูกใช้งานบน Android L ภายใต้แนวคิดการออกแบบในลักษณะนี้ทำให้ Application อยู่ในรูปแบบ responsive มากขึ้น สามารถแสดงผลได้บนทุกๆ อุปกรณ์ และที่สำคัญคือมี Animation อัตโนมัติแทบจะทุกๆ widget เลย แนวคิดแบบนี้สามารถนำเอามาปรับใช้กับการพัฒนา Mobile App หรือ Web App ได้ ไม่จำเป็นต้องเป็น Android App นะครับ ในส่วนของ Web App ทาง Google มีโครงการ Polymer เป็น platform ในการพัฒนา Web App ในรูปแบบของ Web Component สามารถใช้งาน Meterial Design ได้เลย ผ่าน Component ต่างๆ ที่มีให้ สำหรับท่านที่สนใจ Material Design ก็ไปศึกษาข้อมูลเพิ่มเติมกันได้ครับ

เรามาลองสร้าง Layout ในแบบ Material Design โดยใช้ Polymer กันครับ อันดับแรกต้องมี Polymer กันก่อน วิธีง่ายที่สุดคือการใช้ paper element ในรูปแบบ zip file แต่วิธีที่ Google แนะนำคือใช้ Bower ติดตั้ง component ที่จำเป็นต้องใช้จะทำให้ Web App ที่ได้มีขนาดเล็ก เราจะมาใช้วิธีที่ง่ายที่สุดแล้วกันครับ เข้าไปที่ Getting The Code คลิกที่ Get The Paper Elements จากนั้นจะมี dialog ขึ้นมาให้เราเลือกว่าเราจะดาวน์โหลดจากที่ไหน ให้เลือก Download Zip เมื่อได้ไฟล์แล้ว ให้แตกไฟล์นี้ลงในไดเรคทอรีของโปรเจค

mkdir hello-polymer

cd hello-polymer

curl -o elements.zip https://bowerarchiver.appspot.com/archive?paper-elements=Polymer/paper-elements

unzip elements.zip

เราจะได้ไดเรคทอรี components ออกมา ให้สร้างไฟล์ index.html เปล่าๆ แล้วใส่ข้อมูล ดังนี้

จากโค้ดข้างต้นเราทำการเรียกใช้ platform.js และ component ที่เราต้องใช้โดยการ import ผ่าน tag link เข้ามา เราจากนั้นเริ่มเรียกใช้ component ที่เราต้องใช้ มาลองสร้าง Title Bar กับ Menu กันก่อน ดังนี้

จากโค้ดข้างต้นเพิ่ม

  • core-toolbar เพื่อสร้าง toolbar
  • paper-icon-button เพื่อสร้างปุ่มแบบ icon ให้ใช้ icon ชื่อ menu
  • paper-menu-button เพื่อสร้างปุ่มแบบ menu dropdown ใช้ icon เป็นรูป create
  • paper-item เพื่อสร้าง menu item

เราจะได้หน้าเว็บเป็นแบบนี้

หน้าเว็บแบบ Mobile แบบนี้

ลองมาดูใน iPad เปิดผ่าน Phonegap Developer นะครับ

พอสนุกสนาน อยากเล่น Polymer ต่อก็อ่านเอกสารได้ที่หน้า document ของโครงการ polymer ครับ

Comments are closed.