Google Web Polymer - "Hello World"
Category : Google Web Polymer

Google Web Polymer เหมาะสำหรับคนที่จะสร้าง Web Application สักตัว แต่ก็ควรมีพื้นฐานของการใช้ Node.js บ้างนะครับ

Google Web Polymer – More Routing (EP.7)

Posted by arnondora on April 8th, 2015

คราวที่แล้ว เราได้รู้เรื่องของ การ Routing พื้นฐานกันไปแล้ว วันนี้เรามาเรียนอีกแบบนึงกัน รอบนี้เราไม่ต้องแตะ JS สักบรรทัดเลยล่ะ ก่อนอื่น เราต้อง Install ตัวของ more-routing กันก่อน ก็ปกติตามแบบฉบับของ bower เลย bower install –save Polymore/more-routing เท่านี้เราก็จะได้ตัวของ more-routing กันแล้ว งั้นมาต่อกันเลย สืบเนื่องจากไฟล์เมื่อคราวที่แล้ว ใน Index.html เรามี Section หรือหน้าของเราอยู่ 3 หน้านั่นคือ Home, Portfoilo และ Contact ทั้งหมดนี้ถูกเชื่อมด้วย js เหมือนเมื่อคราวที่แล้วว่ากันไป แต่วันนี้อย่างที่บอกครับ เราจะไม่เขียน JS เลยสักบรรทัดเดียว! ก่อนอื่น เราจะเก็บตัวข้อมูลของ Routing ไว้ที่ไฟล์ route.html <link rel=”import” href=”bower_components/more-routing/more-routing.html”> <more-routing-config driver = […]

Google Web Polymer – Core Pages หลอกตาประชาชน (EP.6)

Posted by arnondora on April 2nd, 2015

เมื่อ EP. ทีแล้วเราได้เรียนรู้เรื่องของการผูกข้อมูลกับ JS กันไปแล้ว วันนี้เราขยับมาอีกสเต๊ปนั้นคือ การใช้ Core Pages กับ JS แบบเมื่อ EP. ที่แล้ว Today’s Target วันนี้เราจะมาเรียนรู้เรื่องของการใช้ Core Pages เพื่อให้เรากระโดดไปอีกหน้าได้อย่างง่ายดาย (ถ้านึกไม่ออกให้ไปลองเข้าหน้าเว็บของ Polymer ดู แล้วลองคลิกลิงค์ดูจะเห็นว่าหน้ามันไม่ได้ถูกโหลดใหม่เลย) จริงๆมันมีหลายวิธีในการทำ แต่วันนี้เราจะใช้วิธีบ้านๆในการทำก่อน นั่นคือ เราจะสร้าง หน้าของเราทั้งหมดในไฟล์เดียว แล้วใช้ js ควบคุมการแสดงผลอีกที มาเริ่มทำกันเบย~~ ก่อนอื่นให้ดึงไฟล์ของเมื่อ ep ที่แล้วมาก่อนนะ แล้วใน Content ให้ตามนี้เลย <core-pages selected = “0”> <section> <h1>Home</h1> <div>Home content</div> </section> <section> <h1>Portfolio</h1> <div>Portfolio content</div> </section> <section> <h1>Contact</h1> […]

Google Web Polymer – Auto Binding-Template (EP.5)

Posted by arnondora on March 30th, 2015

เมื่อตอนที่ผ่านๆมาเราได้เรียนรู้เรื่องของการ สร้างโครงสร้างของหน้าไปบ้างแล้ว ตอนหลังนี้จะเป็นเรื่องของการผูกข้อมูล หรือเรียกดีๆว่า Data-Binding แต่ก่อนจะพูดถึงเรื่องนั้น เราต้องมาพูดถึงเรื่อง Data-Binding กันก่อน Data-Blinding คืออะไร? ภาษาไทยเราเรียกว่า การผูกข้อมูล (เรียกแล้วแปลกๆเรียก Data-Binding นี่แหละนะ) มันคือการทำให้ Content เราเป็น Dynamic คือ Content ในหน้าเว็บมันดึงหรือสร้างมาจากที่สักที่นึง ที่ไม่ใช่ข้อมูลตายตัว มันทำงานยังไง? ตามปกติแล้ว ในการสร้างเว็บที่ Dynamic หรือไม่ต้อง Refresh หน้าใหม่ Content ข้างในก็ Update ได้เองนั้น เราจะใช้สิ่งที่เรียกว่า AJAX ซึ่งวิธีการทำงานของมันก็คือ JS จะส่ง Request ไปหา Web Server Web Server ส่งข้อมูลกลับมา ลบข้อมูลของเก่าที่แสดงทิ้ง สร้างที่วางข้อมูลใหม่  เอาข้อมูลที่ได้จาก Web Server มาวางลงไปในที่วางที่พึ่งสร้าง จากที่เห็น Process […]

Google Web Polymer – Core Drawer Panel อะไรของมันแว๊! (EP.4)

Posted by arnondora on March 27th, 2015

กลับมาอีกแล้วนะฮ่ะ ตอนที่เขียนตอนนี้ Class โดน Cancel ได้เจ็บปวดมาก เลยว่างออกมาเขียน Blog นี่แหละ มาต่อจากความที่แล้วกันเลยครับ ย้อนความแปบ! เมื่อตอนที่แล้ว เราได้สร้างหน้า Index.html ที่มี Toolbar ที่มีปุ่ม Hamburger กับ search เรียบร้อยแล้ว ด้วย core-header-panel และเติมความหวืหว่าด้วย core-header-panel ไปแล้ว แต่มันเกิดปัญหาอยู่ว่า ถ้าเราเปิดบน Smart Device มันก็แล้วไปเพราะมันโออยู่นะครับ แต่ถ้ามาเปิดใน Desktop แล้วเนี่ย มันเหมือนเอาแอฟโทรศัพท์มายืดให้เราใช้เลย มันโคตรไม่สวยเลย วันนี้เราจะทำให้มันโอ้วเย้ ขึ้นด้วย core-drawer-panel มารู้จักกับ core-drawer-panel กัน เอาง่ายๆมันก็คือแถบที่อยู่ทางซ้าย ที่เป็นเมนูเหมือนเวลาเราใช้ Application บนโทรศัพท์เลยครับ ตอนนี้กลับมาที่ไฟล์ของเมื่อ EP ที่แล้วก่อน เราจะสร้าง core-drawer-panel มาคร่อม core-header-panel อีกทีนึง (เขียนไปเยอะก็เริ่มแอบงงเหมือนกัน) […]

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

Posted by arnondora on March 26th, 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 […]

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

Posted by arnondora on March 25th, 2015

อย่างที่เคยบอกไปว่า 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 […]

Google Web Polymer – Getting Started & Installation (EP.1)

Posted by arnondora on March 24th, 2015

Web Polymer -> ความคิดใหม่สุดแหวกแนวในการสร้าง Web Application เจ้า Web Polymer Google ได้เปิดตัวจริงๆจังๆตั้งแต่ในงาน Google I/O 2013 แล้วล่ะครับ แต่ตอนนั้นผมก็ยังเฉยๆกับมันอยู่ แต่ตอนนี้พอเข้าไปลองเล่นจริงๆแล้ว มันเจ๋งมาก หลักการทำงานของมันก็คือการแยกส่วนต่างๆของ Web Application ออกเป็นส่วนๆ แยกกันทำงานอย่างอิสระ เวลาเราใช้ก็เพียงก็นำมันมาต่อรวมกันเท่านั้นเอง (เหมือนเล่น Lego เลยเนอะ) ถามว่า Web Polymer จริงๆแล้วมันคืออะไรกันแน่ล่ะ? เอาจริงๆแล้วตามที่ Google เคยบอกไว้ มันคือ UI Library ตัวหนึ่งที่อิงหลักการของการสร้าง Web Application อย่างเต็มสตรีมกันเลยทีเดียว ซึ่งมันจะต่างกับพวก Bootstrap ที่เน้นการทำงานที่ค่อนข้างง่ายๆ ซึ่งเจ้า Polymer จะมองวัตถุทุกชิ้นเป็น HTML Tag ชนิดนึงเลย ต่างจาก UI Library เจ้าอื่นๆที่อยู่ในแท๊ค Div […]