Tutorial

Google Web Polymer - Core Toolbar & Core Header Panel (EP.3)

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

Google Web Polymer - Core Toolbar & Core Header Panel (EP.3)

เมื่อตอนก่อน เราพูดเรื่องของ Elements พื้นฐานไปบ้างและ ลงลึกเรื่องของ Icon ไปแล้ว วันนี้เราจะมาลงลึกในเรื่องของ Toolbar กันบ้าง แบบที่เราเห็นอยู่ใน Android Application
ก่อนอื่นให้ลง core-toolbar, paper-icon-button, core-icon และ paper-progress ไปก่อน อย่าลืมลง platform ด้วยล่ะ ไม่งั้นรันไม่ได้เน้อ โดยใช้คำสั่งตามนี้เลย

bower install --save Polymer/core-toolbar Polymer/paper-icon-button Polymer/paper-progress

หลังจากที่เราได้ติดตั้ง Element ที่จำเป็นทั้งหมดในวันนี้แล้ว มาเริ่มสร้างกัน ก่อนอื่น เราจะมาสร้าง Toolbar กันก่อนโดยใช้ tag core-toolbar และจะเพิ่มข้อความว่า My App ลงไปใน Toolbar ที่พึ่งสร้างด้วย

<core-toolbar>
   <div>My App</div>
</core-toolbar>

หลังจากนั้นผมอยากได้ผม Menu เราก็เติม Button เข้าไป ที่สอนไปเมื่อ EP. ที่แล้ว แต่ผมจะใช้เป็นปุ่มจาก Paper Icon แทน และเอาปุ่มค้นหาไว้ขวาสุดด้วย

<core-toolbar>
    <paper-icon-button icon = "menu"></paper-icon-button>
    <div>My App</div>
    <paper-icon-button icon = "search"></paper-icon-button>
</core-toolbar>

ถ้าเราได้รันแล้ว เราจะสังเกตว่า ปุ่มค้นหามันจะอยู่ติดกับคำว่า My App วิธีแก้คือ เราจะใช้ Properites พิเศษนั่นคือ flex

<core-toolbar>
    <paper-icon-button icon = "menu"></paper-icon-button>
    <div flex>My App</div>
    <paper-icon-button icon = "search"></paper-icon-button>
</core-toolbar>

แต่ถ้าเราลองรันดูแล้ว เราจะเห็นว่า ถ้าเราใส่ลิงค์ลงไปใน My App แล้ว เวลาใช้งานจริงเราจะคลิกแล้วลิงค์จะทำงานได้ทุกจุดเลยตรงที่ว่างๆอยู่ วิธีแก้คือ เพิ่ม span ที่มี flex เข้าไป

<core-toolbar>
    <paper-icon-button icon = "menu"></paper-icon-button>
    <div>My App</div>
    <span flex></span>
    <paper-icon-button icon = "search"></paper-icon-button>
</core-toolbar>

และลองรันดูครับ โอ้ว!! เราได้สิ่งที่ต้องการเรียบร้อยแล้ว แต่สียังไม่ได้ เราจะใช้ CSS ในการเปลี่ยนสีพื้นหลังของ Toobar กัน ซึ่งก็ใช้ผ่าน properity background-color ปกติได้เลย

ลองมาเล่น Properites อย่างอื่นใน Toolbar กันบ้าง!!

เราสามารถขยายขนาดของ Toolbar ให้สูงขึ้นได้โดยการ เพิ่ม Class tall ลงใน core-toolbar เช่น

<core-toolbar class = "tall"></core-toolbar>

หลังจาก Toolbar ของเราขยายก็ทำให้พื้นที่บน Toolbar มันเยอะขึ้น เราสามารถจัดวาง Element ใน Toolbar ได้เยอะขึ้น จึงมี Class top, middle และ bottom ขึ้นมาเพื่อจัดวาง Element เช่น

<core-toolbar class = "tall">
    <div class = "middle">My App</div>
</core-toolbar>

นอกจากนี้ยังมี Class indent เพื่อขยับ Element ไปข้างขวา เหมือนกับเรา Indent ในโค๊ตเลยล่ะะ!!! และอีกอันที่เด็ด คือ Class fit มันจะทำให้ Element นั่นไม่มี margin นั่นคือชิดไปกับ toolbar ได้เลย เช่นผมจะใช้ paper-progress มาลองให้ดู

<core-toolbar>
     <paper-progress class= "fit"></core-progress>
</core-toolbar>

เราจะมาเพิ่มอะไรให้ตัว App เรากัน!

ในที่นี้ผมจะใช้ core-header-panel แต่ก่อนอื่น install มันกันก่อน

bower install --save Polymer/core-elements

เราจะเอาไฟล์ index.html ของเราเมื่อกี้มาปรับปรุงกันนะครับ ก่อนอื่นเราจะค่อม core-toolbar ด้วย core-header-panel ทั้งหมด และเติม properites fullbleed layout vertical ลงใน body

 <body fullbleed layout vertical>
    <core-header-panel flex>
       <core-toolbar>
          <paper-icon-button icon = "menu"></paper-icon-button>
          <div>My App</div>
          <span flex></span>
          <paper-icon-button icon = "search"></paper-icon-button>
          <paper-progress class= "fit" value = "30"></paper-progress>
       </core-toolbar>
    </core-header-panel>
 </body>

จากนั้นก็เพิ่ม Div tag ลงไปต่อจากcore-toolbar และลองเพิ่ม content มั่วๆลงไปดู

 <body fullbleed layout vertical>
    <core-header-panel flex>
       <core-toolbar>
          <paper-icon-button icon = "menu"></paper-icon-button>
          <div>My App</div>
          <span flex></span>
          <paper-icon-button icon = "search"></paper-icon-button>
          <paper-progress class= "fit" value = "30"></paper-progress>
       </core-toolbar>
       <div class = "container">
          <div class = "banner">
             Banner 1
          </div>
       <div class = "container">
          <div class = "banner">
             Banner 2
          </div>
       <div class = "container">
          <div class = "banner">
             Banner 3
          </div>
       <div class = "container">
          <div class = "banner">
             Banner 4
          </div>
       <div class = "container">
          <div class = "banner">
             Banner 5
          </div>

      </div>
    </core-header-panel>
 </body>

หลังจากเราได้ลองใช้เจ้า core-header-panel แบบพื้นๆไปแล้ว ทีนี้เรามาลองดู Mode ของมันมั่งดีกว่า

  • Scroll - อันนี้จะทำให้ Toolbar ไม่เลื่อนตามเราเวลาเราเลื่อนหน้าลงไปข้างล่าง

  • sceamed - จะทำให้ Drop Shadow หายไป

  • waterfall - จะทำให้เหมือนมีเงาวิ่งตาม content ที่วิ่งผ่านไป

  • waterfall-tall อันนี้เด็ด มันจะขยาย Toolbar ตอนเราเลื่อนไปข้างบนและหดเล็กเหลือเท่าเดิมเวลาเราเลื่อนลงข้างล่าง
    วิธีใช้ทั้งหมดนี้ เช่น

    My App

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

  • การติดตั้งและสร้าง core-toolbar
  • Positioning Properties เช่น centre bottom middle
  • Properties flex เพื่อให้ Element ยืดจนสุดขอบ
  • Properties fit เพื่อให้ Element ไม่มี Margin (ติดกันไปเลย)
  • การติดตั้งและสร้าง core-header-panel
  • Mode ต่างๆของ core-header-panel
    **Source Code : **https://drive.google.com/folderview?id=0BwrPA9Miv4o2TGNtV1g0VUxBMHc&usp=sharing

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...