>> ใช้ css เวอร์ชัน 3 น่าจะดีที่สุดและง่ายที่สุดสำหรับผมในตอนนี้ครับ
แน่นอนว่า browser ใหม่ๆรองรับมาตราฐานนี้กันหมดแล้ว (เยี่ยมชม)
>> มาฟังปัญหาของผมกันก่อนนะ แท้จริงแล้ว component (รากฐานของ ui ของ vaadin แต่ละชิ้นมาจาก interface ที่ชื่อ Component) เพียงนำมาจับใส่ css class name พวกมันก็สามารถเล่น animation ได้ด้วยดี แต่ทว่า...เมื่อพวกมันเล่น animation จบสิ้นไปแล้ว พวกมันก็ยังคงติดแหง่กฝังอยู่ในแท็ก html (= =) ใครฟังมาถึงตอนนี้ก็ต้องบอกผมว่า แหม มันก็เป็นธรรมชาติของการใส่ style sheet อยู่แล้วนี่ (css ย่อมาจาก Cascading Style Sheets) ก็เหมือนตอนใส่สีพื้นหลังไง background-color: yellow; มันก็ต้องได้สีเหลืองอยู่อย่างนั้นแหละ แต่ๆๆแต่ผมไม่ต้องการแบบนั้น เพราะงานของผมเจ้าชิ้นที่ใส่ animation ไปนั้นน่ะเมื่อมันถูกลากหรือย้ายตำแหน่ง (ตำแหน่งของ dom เปลี่ยนไป) มันจะกลับไปเล่น animation ซ้ำอีกรอบ เพื่อนคนเดิมก็บอกมาอีกว่า ก็ใช้ animation fill mode กำหนดให้มันเล่นไปข้างหน้า (forwards) อย่างเดียวเลยก็ได้นี่ ผมก็ขอบคุณเขานะ แต่ๆๆแต่เมื่อผมกดปุ่ม F5 (refresh page) เท่านั้นแหละ เจ้ากรรม animation ก็จะกลับมาเล่นใหม่เหมือนเดิม คำตอบที่ผมต้องการคือ เมื่อพวกมันเล่นจบผมจะลบพวกมันทิ้งไปเลย! (เอาออกจากแท็ก html)
เหตุที่ต้องทำเช่นนี้ก็เพราะว่า เว็บนี้มีกลุ่มลูกค้าที่จะเข้ามาซื้อสินค้า (เล่นเว็บเราอะนะ) ในแต่ละช่วงเวลาต่างกัน บ้างก็จะเอากระเป๋า บ้างก็จะเอารองเท้า เป็นต้น ตัวอย่างพฤติกรรมการซื้อสินค้าเช่น คนไหนที่คลิกซื้อกระเป๋า เจ้ากระเป๋านี่จะต้องหมุนติ้วๆสามรอบภายในเวลา 1 วินาทีก่อนจะถูกโยนใส่ตะกร้าของเขา และเมื่อพวกเขาเข้าไปดูของในตะกร้า พวกเขาจะยังไม่จ่ายเงิน พวกเขาสามารถจัดของในตะกร้าได้ (เหมือนกับการจัดกระเป๋าไอเทมในเกมออนไลน์) ทำให้สินค้าสามารถถูกย้ายตำแหน่ง เป็นเหตุให้โครงสร้างของ html ในส่วนนั้นเปลี่ยนแปลงและผลคือ animation หมุนติ้วๆกลับมาเล่นซ้ำอีก ทีนี้ถ้าลูกค้ากดปุ่ม F5 สินค้าทุกชิ้นที่เขาได้เลือกไว้ในตะกร้าก็จะหมุนติ้วๆกันทุกชิ้น เฮ้!
เพราะผมเองก็ไม่คล่อง javascript หนักเลยคือรู้เรื่อง animation ของ css น้อยมากเมื่อเที่ยบกับการเขียนโปรแกรมนี้ด้วย vaadin ในเมื่อผมเป็น java และตอนนี้ต้องใช้ css มาทำ animation, ผมจึงอยากทราบว่า ผมจะรู้ได้อย่างไรว่า animation เหล่านั้นได้เล่นจนเสร็จสิ้นไปแล้วครับ?
และผมก็มีคำตอบ นั่นคือเรื่อง animation end event (อ่านเพิ่มเติม) ซึ่งต้องใช้ javascript มาดักฟัง ...ห๊ะ?...นี่ต้องมาเขียนจาวาสคริปต์อีกแล้วหรือ ก็ใช่ไง
>> เอาล่ะในเมื่อหนีมันไม่พ้นก็พุ่งชนเสียเลย, ผมรู้ว่า vaadin สามารถเข้าใจ javascript เพียวๆได้ (อ่านเพิ่มเติม) ด้วยการกำหนด function ก่อนจากนั้นค่อยเรียกใช้ แต่แนวทางนี้สำหรับสินค้าแต่ละชิ้นของเว็บดูเหมือนว่าจะต้องส่งค่า id ให้กับ function ด้วย เพื่อที่ function จะได้แยกแยะสินค้าแต่ละชิ้นได้ แล้วยังไงต่อ...ก็ต้องหาทางผูก id เข้ากับ animation end event อย่างนั้นสินะ โอ้ย~คิดไม่ออก อ่อนแอจาวาสคริปต์
มีวิธีอื่นอีกไหมที่สามารถเอาชนะปัญหานี้ได้ (แน่นอนว่ายังต้องพึ่งพา javascript) อ้อ การเขียน vaadin แบบ native ไง (คำเรียกของผมเอง) ซึ่งจะเรียกให้ถูกต้องคือการเขียน gwt ขึ้นมาเองโดยวิธีการที่เรียกว่า widgetset (อ่านเพิ่มเติม) พร้อมกับใช้วิธี rpc ในการสื่อสารระหว่าง vaadin (ฝั่งหลังบ้าน) กับ gwt (ฝั่งหน้าบ้าน) ดังกล่าว (อ่านเพิ่มเติม) เพื่อนๆจะเห็นว่าผมต้องอ่านเยอะ ยิ่งความรู้ไม่มี ผมก็ต้องอ่านให้มากเข้าไว้ (ไม่นับว่าอ่านแล้วตีความผิดอีก อะโด่~) เอาล่ะครับมาลงมือทำกันเถอะ
>> เครื่องมือที่ผมจะใช้สร้างงานชิ้นนี้
- NetBeans IDE 8.1
- และวิธีทำให้ netbeans นี้สร้าง vaadin project ให้ผมได้
(คลิกไปอ่านพร้อมกันเลย: https://vaadin.com/docs/-/part/framework/getting-started/getting-started-netbeans.html)
>> อุ้ย!ยาวไปแล้วขอตัดจบก่อน (เล่นตัว) ให้เพื่อนๆลองสร้างโปรเจ็กต์แรกพลางกันไปก่อน เดี๋ยวพรุ่งนี้ผมมาคุยให้ฟังต่อ
>> ขอบคุณยิ่งสำหรับแหล่งความรู้เหล่านี้ที่แชร์กันในโลกออนไลน์ ซึ่งทำให้ผมสามารถเอาชนะปัญหานี้ได้ โดยเพื่อนๆสามารถอ่านเพิ่มเติมเองได้ครับ
- How to Capture CSS3 Animation Events in JavaScript
- Client-server connector and onStateChanged
- How to add CSS AnimationEnd event handler to GWT widget?
- Navigator userAgent Property
- Delayed Client -> Server RPC call when using JSNI -> Java callbacks
- Component and UI Extensions
- Animate.css
>> และนี่คืองานที่ผมทำสำเร็จแล้วบน eclipse ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น