Tutorial

Google Web Polymer - Basic Elements & Icon มหาสนุก (EP.2)

By Arnon Puitrakul - 25 มีนาคม 2015

Google Web Polymer - Basic Elements & Icon มหาสนุก (EP.2)

อย่างที่เคยบอกไปว่า Web Polymer มันคือการเอา Element มาวางต่อๆกันจนเป็น Application ขึ้นมา วันนี้เราจะมาดูต่อกันว่า เราจะเรียกใช้ Elements ได้ยังไง

Google แบ่ง ตัว Build-in Elements ออกเป็น 2 ประเภท นั่นคือ

  • Core Icons - ตรงตามชื่อเลยครับ มันคือ Icon ทั้งหลาย

  • Core Elements - มันคือ Element ที่ใช้งานพื้นฐานเช่นพวก Layout Element, Icon หรือจะเป็นพวก **Ajax calling **

  • Paper Elements - ส่วนอันนี้จะเป็นส่วนของพวก Material Design ทั้งหมด
    ทั้งหมดที่ว่ามา เราสามารถเลือกติดตั้งได้ตามการใช้งานเลยนะครับ แต่วันนี้เราจะติดตั้งมันทั้ง 3 อย่างเลย
    แต่ก่อนจะใช้เราจะต้องติดตั้งมันเข้ามาซะก่อน ก่อนอื่นให้ cd ไปที่ project ของเราก่อน หลังจากนั้นให้เราติดตั้งตัว Core Icons,Core Elements และ Paper Elements โดยผ่าน Bower (อย่าลืมเติม S นะ ไม่งั้นไม่หาไม่เจอจริงๆนะ โดนมาแล้ว)

    bower install --save Polymer/core-icons
    bower install --save Polymer/core-elements
    bower install --save Polymer/paper-elements

เสร็จแล้วเราจะได้ Dependencies ของ Elements ทั้งหมดมา
แต่วันนี้เรายังไม่ลองเล่น Element ทั้งหมด เพราะมันเยอะมาก วันนี้ขอลองเล่น Element ที่ง่ายที่สุดก่อนนั่นคือ Icon นั่นเอง

ก่อนอื่นต้อง Import File ของ core-icons ก่อน

<link rel="import" href="bower_components/core-icons/core-icons.html">

จากบรรทัดนี้เราก็ได้ Import core-icons เข้ามาเรียบร้อยแล้ว ถัดมาเราจะมาลองใช้มันง่ายก่อน มันใช้ง่ายผ่าน Tag ง่ายๆครับนั่นคือ **<core-icon> **

<core-icon icon = "android"></core-icon>

เราสามารถเข้าไปดูรูปแบบของ Icon ที่ Google ทำไว้ให้ได้ที่ https://www.polymer-project.org/0.5/components/core-icons/demo.html

มาลองเปลี่ยนสี, ขนาดของมันกัน

การเปลี่ยนสีและขนาดของมันนั้น เราสามารถทำได้ง่ายๆ โดยการกำหนด Class ผ่าน CSS ได้เลย เช่น

<style>
   .icon-larger
   {
      width : 200px;
      height : 200px;
   }

   .android-colour
   {
      color: #9aed00;
   }
</style>

จากนั้นผมก็มีแก้ที่บรรทัด Icon ที่เราสร้างไว้โดยการApply Style ที่เราสร้างขึ้นมาเมื่อกี้กัน

<core-icon class = "icon-larger android-colour" icon = "android"></core-icon>

แค่นี้เราก็ได้ Android Icon ที่มีสีเขียวแล้วล่ะ!!!

เรามาสร้าง Icon เองกัน !!!

ก่อนอื่น เราจะสร้าง ไฟล์ชื่อ custom-icon ขึ้นมาก่อน ในนั้นให้ใส่ตามนี้เลย

<link rel="import" href="bower_compoments/core-iconset-svg/core-iconset-svg.html">

<core-iconset-svg id = "custom-icons" iconSize = "50">
    <svg>
      <defs>
         <g id = "fancy-circles">
             <circle cx= "25" cy = "25" r ="18"/>
             <circle cx= "12" cy = "12" r ="10"/>
             <circle cx= "35" cy = "40" r ="6"/>
         </g>
      </defs>
    </svg>
</core-iconset-svg>

บรรทัดแรกเป็นการ Import core-iconset-svg เข้ามาเพื่อสร้าง Icon Set ของเราเอง จากนั้นก็เปิดแท๊ค ขึ้นมาพร้อมกับตั้งชื่อบน Id และข้างในนั้นก็เป็น Defintion ของตัว Icon ที่เราสร้าง ถัดมาเราจะกลับมาที่ Index.html เพื่อเรียกใช้ Icon ที่เราสร้างกัน

<link rel="import" href="custom-icons.html">

ก่อนอื่นเราต้องมา Import ไฟล์ custom-icons ที่เราสร้างเมื่อกี้ก่อน ทีนี้เราก็สามารถเรียกใช้ Icon นี้ได้แล้ว เราจะมาเรียกกัน

<core-icon icon = "custom-icons:circles"></core-icon>

สังเกตุนะครับ ว่า เวลาเราเรียก icon เราจะต้องเขียนเป็น custom-icons:circles อันนี้มันคือ ชื่อของ Collection ตามด้วย : (Colon) และชื่อ Icon เพราะฉะนั้นถ้าเราสร้าง Icon Collection เองหรือจะเรียก Collection ที่เราโหลดมาก็เพียงแค่ Import และเรียกใช้ได้โดยตรงเหมือนด้านบนเลย

สุดท้ายของวันนี้แล้ว นั่นคือการสร้าง ปุ่ม กัน!!

ก่อนอื่นให้ Import File นึงเข้ามาก่อน

<link rel="import" href="bower_components/core-icon-button/core-icon-button.html">

ส่วนวิธีการเรียกใช้ก็เหมือนกับปกติเลยครับ นั่นคือเรียกผ่าน Tag เช่น

<core-icon-button icon = "android"></core-icon-button>

และก็หมดแล้วสำหรับวันนี้ สรุปวันนี้เราได้เรียนรู้เรื่อง

  • ประเภทของ Elements
  • การติดตั้ง Elements
  • การ Custom ตัว Icons ด้วย CSS
  • การสร้างและเรียกใช้ Icon Collection ที่เป็น SVG
  • การสร้างปุ่มด้วย core-icon-button
    ไว้ต่อคราวหน้า คราวหน้าจะเป็นเรื่องอะไรนั้นรอต่อไปนะครัช ......
    Source Code:https://drive.google.com/folderview?id=0BwrPA9Miv4o2M3dLUmFPeXNkUms&usp=sharing
    **Lesson Translated and Modified From **Polycasts EP1,2 From Google Developers Channel

Read Next...

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...

Humanise the Number in Python with "Humanize"

Humanise the Number in Python with "Humanize"

หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...