>> นี่เที่ยงคืนแล้วหรือไร ผมยังคงนั่งจดจ่ออยู่กับการเตรียมตัวอย่างจาวาโค้ดซึ่งเขียนด้วย Vaadin Framework, ที่น่าสนใจคือเราจะเขียน JavaScript (ของเราเอง) ให้ Vaadin เข้าใจได้อย่างไร นี่จึงเป็นอีกหนึ่งบันทึกที่ผมตั้งใจนำมาเล่าครับ
>> หัวใจของเรื่องคือ JavaScript Components ซึ่ง Vaadin ได้จัดเตรียมช่องทางเพื่อใช้คุยกับ JavaScript เพียวๆ อันประกอบไปด้วย
- AbstractJavaScriptComponent สำหรับฝั่ง Server-side หรือก็คือฝั่ง Vaadin component นั่นแหละจ้า
- JavaScriptComponentState สำหรับทั้งฝั่ง Client-side ที่เป็น JavaScript เพียวของเรากับฝั่ง Server-Side ข้างต้น
- และสุดท้าย Javascript เพียวๆสำหรับฝั่ง Client-side
>> ดังที่กล่าวไปแล้วหากเพื่อนๆมือใหม่คนไหน (หรือกระทั่งตัวผมเอง) ยังไม่แน่ใจ ยังไม่ค่อยเข้าใจ มาเถอะ ให้ผมลองอธิบายความคิดความเข้าใจของผมให้ฟังก็แล้วกันนะ, เรามาเริ่มกันที่ GWT หรือความคิดของ Google ที่ว่าเขียนจาวาได้ HTML + JavaScript ไปพร้อมกัน หรือพูดง่ายๆว่า เขียนจาวา (ภาษาหลังบ้าน) ได้งานของหน้าบ้าน (ที่แสดง ณ browser) ไปพร้อมกัน, GWT ดังกล่าวมี 3 layers เป็นหลักครับ
1. ฝั่งหลังบ้าน คือ จาวา ก็จะใช้ จาวาคอมไพเลอร์ มาจัดการ เปลี่ยนจาวาเป็น ไบท์โค้ด (Byte Code) และให้ JVM มาทำงาน (จาวาจึงต้องใช้ server)
2. ฝั่งหน้าบ้าน คือ GWT ก็จะใช้ GWT คอมไพเลอร์ มาจัดการ เปลี่ยนจาวาที่ GWT รู้จักเป็น JavaScript พร้อมส่งไปให้ Browser ทำงาน
3. ตรงกลาง เรียกว่า share หรือก็คือพื้นที่ที่ฝั่งหลังบ้านจะใช้ทำความรู้จักกับหน้าบ้าน เป็นพื้นที่ที่ทั้งสองฝั่งสามารถรับส่ง message ระหว่างกันไปมาได้ เขียนด้วยจาวาอีกเช่นกันและใช้เทคโนโลยี Asynchronous เป็นตัวขับเคลื่อน
>> ด้วยเหตุที่ว่า Vaadin ประดิษฐ์ขึ้นมาบนฐานความคิดของ GWT มันจึงหนี layer ทั้งสามนี้ไม่พ้น ทว่ามันก็ทำให้ layer ใกล้ชิดกันมากขึ้น ราวกับเหรียญที่มีสองด้าน หรือกล่าวว่าเขียนจาวาโดยความคิดของ Vaadin เพื่อนๆก็จะได้งานหน้าบ้าน (ที่เป็น HTML + JavaScript) ไปด้วยเลย แต่เขียนง่ายกว่า GWT, คอมไพล์ไวกว่า GWT ทั้งยังมีเทคโนโลยีหรือความคิดเรื่องของ Container ที่จะทำให้เพื่อนๆสามารถ อ่าน เพิ่ม ปรับปรุง ลบ ข้อมูลใดๆที่ยิงยาวจากหน้าบ้านไปยังฐานข้อมูลได้เลย ว้าว! (ไม่นับว่ามี Theme ให้เล่นอีกนะ สุโก้ย~)
>> เพื่อนๆมือใหม่ควรทราบว่า หาก component หรือง่ายๆว่าคลาสต่างๆที่ Vaadin จัดเตรียมไว้ให้นั้นไม่ตรงกับความต้องการของเพื่อนๆแล้วล่ะก็ เพื่อนๆมีแนวโน้มที่จะต้องประดิษฐ์ Widget (คำเรียกใน GWT) ขึ้นมาใหม่แล้วล่ะครับ
>> Widget หรือก็คือ component (คำเรียกใน Vaadin) นี้คือการกลับไปเขียน GWT แล้วสั่งคอมไพล์เพื่อให้ได้ JavaScript ซึ่งเราเรียกจาวาโค้ดที่มีหน้าตาให้มองเห็นได้นี้ว่า Widget แฮะๆ ก็อย่างที่เพื่อนๆรู้กันอยู่แล้วว่า เราเลือกใช้ GWT หรือ Vaadin ก็เพราะเราไม่ต้องการยุ่งกับงานหน้าบ้านที่ต้องใช้กลไกของ JavaScript หลากหลายลักษณะที่มุ่งแสดงผลบน browser ที่หลายหลากยี่ห้อ ดังนั้นเราจึงมานั่งหลังขดเขียนจาวาแล้วได้งานหน้าบ้านไปพร้อมกัน
>> เพื่อคอมไพล์จาวาโดยใช้ไลบรารีของ GWT เราเรียกกระบวนการนี้ว่าการคอมไพล์ให้ได้ Widget หรือก็คือความคิดที่เรียกว่า Widgetset, ความคิดดังกล่าวนี้ต้องใช้ 3 layers มาทำงานดั่งที่แจ้งไปแล้ว แต่ขอแบ่งให้ชัดกว่านี้อีกสักเล็กน้อยครับ ดังนี้
1. ฝั่ง Client-side widget (หรือก็คือ GWT ใน Vaadin)
2. ฝั่ง Server-side component (หรือก็คือตัว Vaadin)
>> Client-side widget พื้นฐานนั้นประกอบไปด้วย
- Connector ทำหน้าที่เชื่อมต่อกับฝั่ง Server-side component ทำงานกับ RPC และ onStateChange เป็นหลัก
- RPC ทำให้ Widget พูดคุยหรือส่ง message มายังฝั่ง Server-side component ได้ (แท้จริงมันทำงานส่ง message จาก Server-side component ไปยัง Widget โดยอัตโนมัติ)
- State หรือก็คือพื้นที่ตรงกลางที่เป็น share ระหว่างสองฝั่ง คอยรับรู้การเปลี่ยนแปลงหรือการส่ง message ของสองฝั่งซึ่งจะกระตุ้นให้เกิดเหตุการณ์ onStateChange ณ Connector
- Widget หรือก็คือคลาสที่เขียนด้วยไลบรารี GWT ที่เพื่อนๆต้องการสร้างขึ้นเป็น component ชิ้นใหม่นั่นเองครับ (และแน่นอนว่า Connector จะต้องรู้จัก มันจึงจะถูกทำงานได้)
>> Server-side component พื้นฐานนั้นประกอบไปด้วย
- คลาสที่เขียนด้วยไลบรารี Vaadin ซึ่งจะส่งข้อมูลหรือ message หรือเรียกว่าพูดคุยกับ Widget นั่นแหละจ๊ะ โดยส่งผ่านการเปลี่ยนแปลงที่ต้องการไปยัง State
>> เมื่อ State รับทราบการเปลี่ยนแปลงก็จะกระตุ้นให้เกิด onStateChange ที่ Connector ทันที เป็นเหตุให้ Server-side component สามารถสื่อสารกับ Widget ได้ในที่สุด
>> พูดมาเสียยาวตกลงผมจะทำอะไรเนี่ย (หัวเราะ) และตอนนี้ก็ไม่ไหวแล้ว ง่วงแล้ว ตีสองแล้ว เป็นอันว่าจากความคิดและขั้นตอนทั้งหมดที่เล่าไปนั้น เราไม่ทำ Widgetset หรอก เราต้องการ Server-side component หนึ่งคลาสที่เป็น AbstractJavaScriptComponent และหนึ่งคลาสที่เป็น share หรือกล่าวว่าเป็น JavaScriptComponentState สุดท้ายเราต้องการ Connector ที่เขียนด้วยภาษา JavaScript เพียวๆครับ
>> แล้วผมจะมาเล่าต่อว่าจะสร้าง แผนที่ ลงบน Vaadin ด้วยวิธีการดังกล่าวนี้ได้อย่างไรใน part ต่อไปนะ (ตัวอย่างน่ะทำเสร็จแล้วจ้า เอาดูรูปไปก่อน แฮะๆ)
>> ผมบอกเล่าด้วยความตั้งใจนะ ผมตั้งใจทำมันทั้งโค้ด ทั้งรูป หวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ร่วมกันระหว่างเราทั้งสองนะครับ ฝันดีๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น