By Arnon Puitrakul - 26 มีนาคม 2015
เมื่อตอนก่อน เราพูดเรื่องของ 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 ปกติได้เลย
เราสามารถขยายขนาดของ 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>
ในที่นี้ผมจะใช้ 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 ตอนเราเลื่อนไปข้างบนและหดเล็กเหลือเท่าเดิมเวลาเราเลื่อนลงข้างล่าง
วิธีใช้ทั้งหมดนี้ เช่น
และนี่ก็จบแล้วครับ สำหรับวันนี้
สรุปวันนี้เราได้เรียนรู้เรื่อง
จากตอนที่แล้ว เราเล่าในเรื่องของการ Harden Security ของ SSH Service ของเราด้วยการปรับการตั้งค่าบางอย่างเพื่อลด Attack Surface ที่อาจจะเกิดขึ้นได้ หากใครยังไม่ได้อ่านก็ย้อนกลับไปอ่านกันก่อนเด้อ วันนี้เรามาเล่าวิธีการที่มัน Advance มากขึ้น อย่างการใช้ fail2ban...
SSH น่าจะเป็น Protocol ที่หลาย ๆ คนใช้ในการเข้าถึง Shell ของเครื่องปลายทาง สำหรับควบคุมการทำงานของเครื่องคอมพิวเตอร์ต่าง ๆ แต่มันไม่น่าจะดีเท่าไหร่ หาก SSH Server ไม่แข็งแกร่งมากเพียงพอ วันนี้เราจะมาแนะนำ 5 วิธีการที่จะช่วยลด Attack Surface ของ SSH Server ในเครื่องของเรากัน...
เราเป็นคนที่อ่านกับซื้อหนังสือเยอะมาก ปัญหานึงที่ประสบมาหลายรอบและน่าหงุดหงิดมาก ๆ คือ ซื้อหนังสือซ้ำเจ้าค่ะ ทำให้เราจะต้องมีระบบง่าย ๆ สักตัวในการจัดการ วันนี้เลยจะมาเล่าวิธีการที่เราใช้ Obsidian ในการจัดการหนังสือที่เรามีกัน...
หากเราเรียนลงลึกไปในภาษาใหม่ ๆ อย่าง Python และ Java โดยเฉพาะในเรื่องของการจัดการ Memory ว่าเขาใช้ Garbage Collection นะ ว่าแต่มันทำงานยังไง วันนี้เราจะมาเล่าให้อ่านกันว่า จริง ๆ แล้วมันทำงานอย่างไร และมันมีเคสใดที่อาจจะหลุดจนเราต้องเข้ามาจัดการเองบ้าง...