1. com.vaadin.ui.AbstractJavaScriptComponent หรือก็คือ หลังบ้าน
2. com.vaadin.shared.ui.JavaScriptComponentState หรือก็คือ share พื้นที่
3. จาวาสคริปต์ที่ทำหน้าที่เป็น Connector ซึ่งถูกเขียนรวมกับฟังก์ชันของแผนที่ที่เป็นงานของ หน้าบ้าน
>> ภาพด้านล่างนี้คือ main โปรแกรม
- บรรทัดที่ 5 และ 6 ระบุว่าเราจะเขียนคลาสแผนที่เพิ่มอีกสองคลาส ได้แก่ GoogleMap และ LongdoMap
- ส่วนบรรทัดที่ 24 คือจุดเริ่มต้นการทำงาน
- บรรทัดที่ 26 แบ่งหน้าจอออกเป็นสองด้าน ด้านซ้ายจะให้แสดง Google map ส่วนด้านขวาจะให้แสดง Longdo map
- บรรทัดที่ 29 และ 30 กำหนดพิกัดเริ่มต้น (ประเทศไทย)
- บรรทัดที่ 34 ถึง 37 อธิบายได้ว่า สร้าง Google map กำหนดพิกัดให้ จากนั้นกำหนดความกว้างและยาว 100 เปอร์เซ็นต์
- บรรทัดที่ 39 ถึง 41 อธิบายได้ว่า ให้วาด Google map ข้างต้น กำหนด caption กำหนดความกว้างและยาว 100 เปอร์เซ็นต์
- บรรทัดที่ 43 ให้ Google map ที่ได้แสดงยังพื้นที่ด้านซ้าย (ดังคำอธิบายในบรรทัดที่ 26)
- บรรทัดที่ 48 ถึง 51 อธิบายได้ว่า สร้าง Longdo map กำหนดพิกัดให้ จากนั้นกำหนดความกว้างและยาว 100 เปอร์เซ็นต์
- บรรทัดที่ 53 ถึง 55 อธิบายได้ว่า ให้วาด Longdo map ข้างต้น กำหนด caption กำหนดความกว้างและยาว 100 เปอร์เซ็นต์
- บรรทัดที่ 57 ให้ Longdo map ที่ได้แสดงยังพื้นที่ด้านขวา (ดังคำอธิบายในบรรทัดที่ 26)
>> ต่อที่คลาส DrawMap ครับ
- บรรทัดที่ 13 ให้คลาสนี้สืบทอดมาจาก VerticalLayout
- บรรทัดที่ 15 ถึง 18 ประกาศว่าคลาสนี้ประกอบไปด้วย component สำคัญใดบ้าง
- บรรทัดที่ 20 ให้ constructor ของคลาสรับพารามิเตอร์ที่มีชนิดเป็น Map interface เท่านั้น (เราเขียนขึ้นเองครับ) ทั้งนี้เพราะผมจะกำหนดให้คลาส GoogleMap และ LongdoMap เป็น Map ด้วย
- บรรทัดที่ 30 และ 31 เมื่อใดก็ตามที่เกิดการกดปุ่ม ค่าที่กำหนดไว้ใน text field จะถูกอ่านและนำมากำหนดให้กับ Map ออบเจ็กต์ทุกครั้ง ซึ่งจะเป็นผลให้เกิดการทำงาน onStateChange โดยอัตโนมัติดังที่ได้เล่าไป
- บรรทัดที่ 35 ถึง 47 เป็นการจัด layout เพื่อให้ประดา component ทั้งหลายเป็นไปตามตำแหน่งที่เราต้องการครับ
- บรรทัดที่ 52 ถึง 66 เขียนบริการ getter methods เอาไว้ส่งออก component สำคัญที่อนุญาตให้เรียกใช้ ณ คลาสอื่นๆ
>> และนี่คือ Map interface ครับผม
>> ก่อนที่จะไปต่อ ภาพด้านล่างคือโครงสร้างทั้งหมดของโปรเจ็กต์นี้
>> คลาส GoogleMap ที่จัดว่าเป็น server-side component และเป็น Map
- หัวใจสำคัญของคลาสนี้มี 3 ตำแหน่งนะ ได้แก่ 1. บรรทัดที่ 7 @JavaScript เพื่อเรียกใช้ไฟล์จาวาสคริปต์ใดๆ ทั้งจากภายนอกและภายในโปรเจ็กต์
-- ภายนอกเรียกไปยัง https://maps.googleapis.com เพื่อใช้ google map api เวอร์ชัน 3 (เท่าที่ทราบในตอนนี้)
-- ภายในเรียกไปยัง JavaScript Connector
2. บรรทัดที่ 11 ระบุว่าคลาสนี้สืบทอดจาก AbstractJavaScriptComponent และเป็น Map
3. บรรทัดที่ 14 เชื่อมโยงตนเองกับ share ในที่นี้คือ State ซึ่งจะได้รับผลการเปลี่ยนแปลงทุกครั้งที่มีการกำหนดพิกัดเข้ามาใหม่
>> คลาส GoogleMapState
>> JavaScript Connector ของ Google map
- บรรทัดที่ 1 ระบุที่อยู่ตาม package ของไฟล์นี้ โดยแทนที่ . (dot) หลังจาก window object ด้วยเครื่องหมาย _ (underscores) ไม่อย่างนั้นจะหาไฟล์นี้ไม่พบ
- บรรทัดที่ 3 บอกว่าพื้นที่ที่เป็นของคลาส GoogleMap นี้แหละคือ DOM ที่จะใช้ผูกเป็นหน้าตาบน browser
- บรรทัดที่ 5 ถึง 16 คือฟังก์ชัน onStateChange (ชื่อต้องตั้งตามนี้เลย) เพราะเมื่อกำหนดค่าพิกัดใหม่ฉันใด ฟังก์ชันนี้จะทำงานทันทีฉันนั้น ผมก็ตั้งใจให้มันไปเรียกใช้ google map api วาดแผนที่ออกมาให้ครับ :)
>> จบไปแล้วกับ Google map คราวนี้มาดู Longdo map กันบ้าง เพื่อนๆจะเห็นว่าวิธีการเหมือนเดิม ต่างกันแค่ api ของตัววาดแผนที่เท่านั้น
>> และลิงค์ด้านล่างนี้คือเอกสารทั้งหมดที่ผมอ่านแล้วลองประยุกต์ทำเอง (ลอกมาว่างั้นเถอะ หัวเราะ) ขอบคุณสำหรับความรู้ครับผม
- Vaadin 7 Loves JavaScript Components
https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components
- Integrating a JavaScript component
https://vaadin.com/wiki/-/wiki/Main/Integrating+a+JavaScript+component
- Integrating JavaScript Components and Extensions
https://vaadin.com/book/vaadin7/-/page/gwt.javascript.html
- Longdo map api (v.2)
http://map.longdo.com/longdo-map-api
- Longdo map api tutorial example (not v.2)
http://map.longdo.com/api/docs/tutorial-mmmap-api-beginners
- Google Maps JavaScript API v3 example
http://www.daydev.com/developer/s6-programming-language/google-maps-javascript-api-v3.html
ไม่มีความคิดเห็น:
แสดงความคิดเห็น