Java web with Servlet, jQuery and JSON data

>> เพื่อนๆคงทราบแล้วว่า เราสามารถขนส่งข้อมูลผ่าน HTTP protocol ได้หลายรูปแบบโดยการกำหนดผ่านทาง MIME Type หรือก็คือการระบุค่าสตริงดังกล่าวให้กับ Content-type (ขึ้นอยู่กับแต่ละภาษาว่าจะกำหนดอย่างไร)

>> MIME Type ต้องถูกกำหนดจากสองฝั่งเสมอ สองฝั่งที่ว่านี้ก็คือ client site และ server site เพื่อนๆสามารถดูวิธีการกำหนด MIME Type ให้กับแต่ละภาษายอดนิยมได้ที่นี้ รวมถึง MIME Type แต่ละรูปแบบด้วย
http://www.freeformatter.com/mime-types-list.html

>> เรากำลังพูดถึง application/json ซึ่งเป็น MIME Type รูปแบบหนึ่ง ที่จะขนส่งข้อมูลจาก client สู่ server หรือจาก server ไปยัง client โดยเพื่อนๆสามารถตรวจสอบว่า json ที่กำลังจะใช้เป็นข้อมูลนั้นถูกต้องตามไวยากรณ์หรือไม่ ได้ที่นี่
https://jsonformatter.curiousconcept.com/
ด้วยการทดลองเขียนสตริงนี้ลงไป
{"one": "Singular sensation", "two": "Beady little eyes"}

>> ครับ ผมกำลังจะสร้างเว็บจาวาตัวอย่างที่เราเตรียม json สตริงไว้ก่อน จากนั้นเตรียม servlet ให้อ่านมัน และ servlet นี้ถูกเรียกให้ดึงค่า json สตริงดังกล่าวมาแสดงผลเป็น option ของ select tag ที่ฝั่งหน้าบ้าน โดยกลไกการดึงค่าจะอาศัย post ของ jQuery เป็นตัวช่วยครับ

>> อ่านเพิ่มเติม
- post ของ jQuery
http://api.jquery.com/jquery.post/
- html ของ jQuery
http://api.jquery.com/html/
- select and option tag เผื่อว่าใครลืมไปแล้ว
http://www.w3schools.com/tags/tag_select.asp

>> เรามาเริ่มกันเลยดีกว่า เปิด Eclipse ตัวเก๋าขึ้นมา ผมใช้เวอร์ชัน 8.0.2 นะครับ จากนั้นสร้าง Dynamic Web Project
- ตั้งชื่อว่า GetJsonFromServletByJQuery
- รายละเอียดอื่นๆตามภาพด้านล่างนี้ครับ


>> อย่าเพิ่งกด Finish นะครับ กด Next ไปก่อนจนเจอหน้าต่าง Web Module ตรงนี้เพื่อนๆจะให้มัน Generate web.xml deployment descriptor ให้ด้วยก็ได้ แน่นอนว่าผมต้องการ


>> Eclipse ไม่สร้างไฟล์ index ให้เรา (หน้าแรกของเว็บ หรือก็คือหน้า home page) เราก็สร้างกันเอง คลิกขวาที่ folder ชื่อ WebContent เลือก New แล้วมองหา JSP File ตั้งชื่อว่า index (นามสกุลมันใส่ให้เอง)


>> ตามไปโหลด jQuery มาเพราะเราจำเป็นต้องใช้ พิมพ์ใน Google ใช้คีย์ว่า jquery download มองหาปุ่มสีส้มแล้วคลิก


>> ผมเลือก Download the compressed, production jQuery 1.113 ตามรูป (เลือกตัวที่บีบอัดแล้ว ไฟล์จะมีขนาดเล็ก แต่ดูโค้ดลำบากมาก ทว่าเราไม่ตามเข้ามาดูหรอก ดังนั้นตัวนี้แหละ)


>> ได้มาแล้วก็ย้ายมันเข้ามาในโปรเจ็กค์ ด้วยการสร้าง folder ชื่อ js ให้อยู่ภายใต้ WebContent ก่อน จากนั้นจึงลากไฟล์ jquery มาใส่
- กลับไปที่ index.jsp เขียนเพิ่มส่วนนำเข้า jquery ดังภาพด้านล่างนี้ ณ บรรทัดที่ 7
- จากนั้นคลิกขวาที่ folder ชื่อ js อีกครั้งเพื่อสร้างไฟล์ javascript เปล่าๆที่ลงท้ายด้วย .js จากภาพผมตั้งชื่อมันว่า my-jquery.js ครับ ณ บรรทัดที่ 8 ก็นำเข้าไฟล์ javascript เปล่าๆนี้เช่นกัน ซึ่งเราจะใช้มันเขียน jquery ในลำดับถัดไป


>> มาทดสอบดูว่าเราสามารถเขียน jquery ให้ทำงานได้หรือไม่ ด้วยโค้ดต่อไปนี้


>> แต่เอ๋! เรายังไม่มี server ที่จะใช้รัน web app นี้เลยนี่ คลิกขวาที่โปรเจ็กค์แล้วเลือก Run As ดูก่อน


>> อื่ม...Eclipse นี้ใหม่มาก อย่าสน ไม่มี server ก็หามาติดตั้งได้ไม่ยาก ณ หน้าต่าง Run On Server จงเลือก Manually define a new server เลือกรายการของ Apache แล้วเลือกโครงสร้างของ Tomcat v8.0 Server (ใครจะใช้เวอร์ชันต่ำกว่านี้ก็ได้นะ แต่ต้องหา Tomcat เวอร์ชันตามรายการที่เลือก) กด Next ครับ


>> ทิ้ง Eclipse ไว้ก่อน ออกท่องโลกกันต่อ พี่ Google พิมพ์ลงไปว่า apache tomcat download ลิงค์ของ Apache เองกดเข้าไปเลย เพื่อนๆสามารถมองหาเวอร์ชันที่ต้องการได้จากฝั่งซ้าย (ดูภาพประกอบนะ) ส่วนตัวผมเองขณะนี้เลือก Tomcat 8.0.24 Released แล้วกดลิ้งค์ Download เลย


>> มายังหน้าดาวน์โหลดของมัน ก็หาที่เป็นรุ่นที่เข้ากับระบบปฏิบัติการของเรา ของผมคือ 64-bit Windows zip กดไป


>> ได้มาแล้วก็แตก zip จากนั้นกลับมาหา Eclipse จากคราวก่อนเมื่อเรากด Next ก็จะพบกับหน้า Tomcat Server ที่ได้เลือกมา ให้เรากดปุ่ม Browse... ไปยัง folder ของเจ้าแมว Tomcat ที่เพิ่งแตก zip ไปสดๆ ก่อนจะกด Finish


>> ทีนี้คลิกขวาที่โปรเจ็กค์อีกครั้งแล้วทดสอบ Run As ไป ณ Server ที่เราเพิ่งจัดการติดตั้งแล้วเสร็จ แต้นแต้นนน! อิอิอิ


>> เห็นไหม ความสำเร็จเล็กๆก็เกิดขึ้นได้ ขอเพียงเรามีความเพียรพยายามมากพอ แต่อย่าเพิ่งดีใจเร็วเกินไป หัวใจของเรื่องนี้ยังไม่ได้เริ่มกันเลยนะเธอ เออสิ อ้อ!เธอจะลองคัดลอก URL ใน address bar ไปวางไว้ที่ Browser ตัวโปรดก็ได้นะ ก็จะได้อย่างที่ฉันได้ทำไปนี้


>> เราต้องมาสร้าง Servlet กันแล้วล่ะ ผมเริ่มด้วยการสร้าง package ก่อน ให้ชื่อว่า com.pros.controller ซึ่งอยู่ภายใต้ folder ชื่อ src ดังในภาพ (ก็คลิกขวาที่ src นั่นแล้วเลือก New ต่อด้วย Servlet ไงล่ะ) จากนั้นค่อยกด Next


>> จัดการเรื่อง URL Mapping เสียให้เรียบร้อย เอาเป็นว่าชื่อ JsonController นี่แหละ เพื่อเมื่อยิงมายังชื่อนี้แล้วก็จะมาเจอ servlet ตัวนี้เลย อย่าลืมกด Next


>> ณ หน้าต่าง Create Servlet จากในภาพผมเลือกที่จะ override เฉพาะเมธอด doPost ครับ คือจะให้ jquery ยิง post มาที่ doPost แห่งนี้ ดังนั้น interface ทั้งสองนี้ต้องสอดรับกันพอดี กด Finish


>> เรากำลังอยู่ที่คลาส JsonController กับเมธอด doPost ก่อนอื่นต้องเตรียม json ซึ่งก็คือสตริงรูปแบบธรรมดาที่เข้าคู่กันด้วย key กับ value โดยที่ระหว่าง key กับ value จะต้องคั่นด้วยเครื่องหมาย : (colon) และระหว่างแต่ละคู่จะต้องคั่นด้วยเครื่องหมาย , (comma) อีกนิดหนึ่ง... json ยอมรับให้ key กับ value อยู่ภายใต้เครื่องหมาย " (double quote) เท่านั้น ซึ่งพวกมันทั้งหมดจะต้องถูกห่อด้วยเครื่องหมายวงเล็บปีกกา { และ } ตามภาพผมสร้างขึ้นมาสามคู่

{ "one": "Singular sensation",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep" }

>> ต่อมาก็ขอ response object มาระบุชนิดของข้อมูลที่จะส่งกลับไปยัง client เพราะข้อมูลนี้เป็น json จึงต้องบอกผ่าน content type เพื่อให้มันเข้าใจว่าเราใช้ MIME Type เป็น application/json ดังนี้
response.setContentType("application/json");

***หมายเหตุ หากต้องการให้มันเข้าใจว่ามีภาษาไทยอยู่ด้วย ก็ให้ใช้ระบบ UTF-8 ช่วย ดังนี้
response.setContentType("application/json; charset=utf-8");

จากนั้นจัดการสั่งออบเจ็กค์ PrintWriter พิมพ์ออกมา (out.print) บอกให้มันกวาดข้อมูลออกไปได้เลยโดยไม่ต้องรอให้บัฟเฟอร์เต็มก่อน (out.flush) สุดท้ายก็ปิดการใช้สตรีม (out.close)

***หมายเหตุ หากเราไม่ปิดสตรีมเองก็อย่าได้กังวลมากนัก เพราะโดยธรรมชาติแล้วแมวน้อย Tomcat จะปิดให้โดยอัตโนมัติ (แต่เมื่อไรอีกเรื่องหนึ่งนะ)


>> เราเตรียมหลังบ้านเรียบร้อย ต่อไปก็เวิร์กหน้าบ้านกันต่อ เปิดไฟล์ index.jsp เพิ่มบรรทัดที่ 11 ในรูปเข้าไปครับ เพราะเราจะอ่าน json จากหลังบ้านมาแสดง ณ จุดๆนี้


>> เกือบจะสุดท้ายแล้ว นี่คือหัวใจของเรื่องนี้เลยนะ เปิดไฟล์ my-jquery.js ที่ได้สร้างไว้ก่อนหน้านี้ขึ้นมา ลบโค้ดเก่าออกแล้วพิมพ์เข้าไปใหม่ตามภาพครับ

- บรรทัดที่ 2 คือ console.log เอาไว้ดูเป็น debug ด้วยการกด F12 ณ Chrome Browser ว่า .post ทำงานหรือเปล่า
- บรรทัดที่ 5 ประกาศอาเรย์แบบ javascript เตรียมไว้เก็บ option tag
- บรรทัดที่ 6 ใช้ .each ของ jquery อ่าน jsonData ที่ถูก return กลับมาในรูปแบบ callback function แยก json ออกเป็น key กับ value
- บรรทัดที่ 10 ใช้ jquery หา select tag ที่เพิ่งเขียนเพิ่มเข้าไป จากนั้นต่อ option tag ให้กับมัน
- บรรทัดที่ 12 ระบุว่าผลลัพธ์ของการ callback คือรูปแบบ json (มิเช่นนั้นมันอาจตีความไม่ถูกต้อง)

>> รันผ่าน server อีกครั้งผลลัพธ์จึงเป็นที่ประจักษ์แก่สายตา! (ฮ่าๆๆๆ!!!)


***หมายเหตุ หาก Eclipse ของเพื่อนๆไม่เห็นผลการเปลี่ยนแปลงใดๆหลังจากแก้ไขไฟล์ jquery หรืออื่นๆโปรดตรวจสอบว่า เราได้บอกให้ Eclipse มัน reload โปรเจ็กค์ให้หรือไม่ ถ้ายังก็ควรเลือก Build Automatically ไว้ด้วย


>> สวัสดี

เริ่มต้นกับ Hibernate part 1

>> เราเริ่มกันจากที่นี่ http://www.tutorialspoint.com/hibernate/
อย่างที่เราทราบกันว่า Java Database Connectivity (JDBC) เป็นหนึ่งในกลวิธีของจาวา API ที่สร้างขึ้นมาเพื่อติดต่อหรือเข้าถึงเพื่อใช้งานฐานข้อมูลเชิงสัมพันธ์ (relational databases) ด้วยภาษาจาวา

>> และวิธีการใช้ JDBC ติดต่อไปยังฐานข้อมูลโดยหลักการ Object-Relational Mappin (ORM) ก็คือการเขียนจาวาคลาสธรรมดาที่เรียกว่า model ให้สามารถพูดคุยหรือสื่อสารไปยังฐานข้อมูลเชิงสัมพันธ์ได้

ได้อย่างไร?

ได้โดยคนกลางที่ implement หลักการ ORM นี้ไงล่ะ ย่อมเป็นใครก็ได้ ทว่าขณะนี้เราสนใจเพียงเขาคนเดียว เขาก็คือ Hibernate framework

>> Hibernate จะทำหน้าที่แปลง (convert) ข้อมูลที่ถูกส่งระหว่างฐานข้อมูลเชิงสัมพันธ์กับภาษาโปรแกรมที่ใช้หลักการ OOP ซึ่งในที่นี้ก็คือภาษาจาวานั่นเอง


>> แต่ก่อนที่การแปลงนี้จะเกิดขึ้น เราผู้เป็นนักพัฒนาจะต้องจับคู่จาวาคลาสธรรมดาเข้ากับตารางในฐานข้อมูลเสียก่อน ระบุชนิดข้อมูลทางฝั่งจาวาเข้ากับชนิดข้อมูลของฟิลด์ทางฝั่งตารางในฐานข้อมูล

>> เหล่าออบเจ็กต์ที่ Hibernate จะทำงานด้วยเรียกว่า persistent object ซึ่งจะถูกทำให้เกิดขึ้นโดย Hibernate อ่านค่า configuration ที่นักพัฒนาได้กำหนดเอาไว้ผ่านบริการที่เรียกว่า persistence services จากคอร์คลาสจำนวนหนึ่งที่ Hibernate จัดเตรียมไว้ให้ครับ

>> คอร์คลาส (core classes) ที่สำคัญได้แก่
- Configuration
- Session Factory
- Session
- Transaction
- Query
- Criteria

>> แต่มันยังไม่พอ... อะไรนะ? Hibernate ยังต้องพึ่งพา Java API ที่สำคัญยิ่งอีกสามกลุ่ม (ขอยืมแขนขาหน่อยเธอ) ได้แก่
- JDBC
- Java Naming and Directory Interface (JNDI)
- Java Transaction API (JTA)

>> JDBC ก็ใช้ติดต่อไปยังฐานข้อมูล, JNDI กับ JTA จะทำให้ Hibernate ทำงานร่วมกับ J2EE application servers ได้ (เช่น จาวาเว็บที่เขียนด้วย JSP & Servlet ไง เชื่อว่าเพื่อนๆน่าจะรู้จักกันอยู่)

>> Hibernate เป็นคนกลางที่ทำหน้าที่สร้าง persistent object ระหว่างฝั่งโปรแกรมจาวากับฐานข้อมูลได้อย่างไรนะ?
อ้อ ได้อย่างนี้จ๊ะ Hibernate ต้องการเส้นทางและระยะเวลาการคุยกันระหว่างโปรแกรมจาวากับฐานข้อมูล พูดในทางจาวาเว็บก็คือเส้นทางและระยะเวลาการคุยกันระหว่าง client กับ server สิ่งนี้เรียกว่า session

session จะมีอยู่ตลอดไประหว่างการสื่อสารดังกล่าว การให้ความสำคัญกับสถานะของข้อมูลหรือก็คือข่าวสารที่คุยกัน หรือพูดได้ว่าเกิดการติดตาม state ของข้อมูลเรียกว่า stateful คืออยู่ในหน่วยความจำเสมอ

ทว่าตรงข้าม การไม่ใช้หน่วยความจำเพื่อจดจำ state ของข้อมูล นี่จะเรียกว่า stateless ตัวอย่าง
A: สวัสดี B ฉันชื่อ A นะ
B: สวัสดี A ฉันชื่อ B จ๊ะ
A: มีเหตุระเบิดเกินขึ้นอีกแล้วเธอรู้ไหม B! (แทนที่ B จะคุยต่อ มันดันถาม...)
B: เธอเป็นใคร
A: สวัสดี B ฉันชื่อ A นะ
B: สวัสดี A ฉันชื่อ B จ๊ะ (แล้วทั้งคู่ก็คุยกันต่อ พักๆก็ลืมกันอีก)
หนึ่งในประโยชน์ของ stateless คือการใช้หน่วยความจำหนุมเวียน เกิดการ reuse บ่อยครั้งไม่เปลืองทรัพยากรเครื่อง server

อธิบายเรื่องนี้เพราะว่า session ที่ Hibernate ต้องการคือ stateful ซึ่งนำมาสู่การใช้ transaction (JTA)

>> ตัวอย่างเช่น ถอนเงินจากธนาคาร 500 บาท ก็จะเกิดการหักบัญชีที่ถูกถอนนั้น 500 บาทจริงไหม (สมมติไม่มีค่าธรรมเนียมนะจ๊ะเธอ) จากนั้นแบ่งเงินที่ได้รับมา 300 บาทฝากใส่บัญชีแฟนเก่า ก็จะเกิดการบวกเพิ่มเงินของบัญชีที่ถูกฝากนั้นจริงไหมหือ (สมมติไม่มีค่าธรรมเนียมนะทูลหัว)

สิ่งที่เกิดขึ้นนี้เรียกว่า atomic transactional ซึ่งมีผลเพียงสองประการ
1) สำเร็จทั้งหมด ถอน 500 และฝาก 300 สำเร็จทั้งคู่
2) ล้มเหลวทั้งหมด ถอน 500 และฝาก 300 ล้มเหลวทั้งคู่

>> เอาล่ะทฤษฎีพอแล้ว part ต่อไปเราจะใช้ Eclipse เขียนโปรแกรมที่ว่านี้กัน เราจะขอออบเจ็กต์ session จากคลาสโรงงานที่ชื่อ SessionFactory มาเพื่อเริ่มทำ transaction หรือก็คือธุรกรรม ครั้นเมื่อกระทำธุรกรรมเสร็จก็จะปิด transaction ดังกล่าวก่อนจะปิด session ในลำดับถัดไป คืนนี้ฝันดี ระวังตัวและดูแลตัวเอง บึ้ม! สวัสดีครับ

***หมายเหตุ รูปภาพทั้งหมดนำมาจาก www.tutorialspoint.com

JasperReport and iReport part 6

JavaBeans Set Datasource

>> ตามตำราที่ได้แนะนำไป ผมก็ทยอยทำตามตัวอย่างและประยุกต์ใช้หลังจากที่อ่านไป ก็ได้สร้าง folder งานชื่อ report8 ซึ่ง part ก่อนยังเป็น report4 อยู่เลย เห็นว่าเรื่องนี้น่าสนใจมากจึงนำมาเสนอก่อนครับ

>> ในงานของ JasperReports เราสามารถเตรียม Datasource ได้อย่างหลากหลาย ไม่ว่าจะเป็น JDBC Connection หรือ Hibernate Connection ที่ส่งมาทางโค้ดจาวา, XML Datasource, CSV Datasource, JRDataSourceProvider, MS Excel Datasource, JSON Datasource และอื่นๆอีกมากมายรวมถึงเรื่องนี้ JavaBeans ที่ถูกกำหนดให้เป็น Datasource อีกประเภทหนึ่งด้วย

>> ก็ตามประสาผู้เริ่มต้น อะไรคือ จาวาบีน (JavaBean) มันก็คือจาวาคลาสธรรมดาที่มีนิยามอยู่ไม่กี่ข้อ ได้แก่
1) จาวาคลาสนั้นต้องมี public default constructor หรือ public constructor ที่ไม่มี arguments (บางคนเรียกมันว่า parameter) ตัวอย่าง

public class Product { } //มันจะสร้าง default constructor ให้เอง

หรือ

public class Product {
public Product() { } //แบบนี้เราตั้งใจเขียน constructor เปล่าๆเอง
}

หรือ

public class Product {
public Product(String name) { } //เมื่อเขียน constructor แบบนี้
public Product() { } //ดังนั้นจะต้องเขียน constructor เปล่าให้มันด้วย
}

2) จาวาคลาสนั้นต้องใช้ accessible ได้แก่ get, set สำหรับเข้าถึงคุณลักษณะ (attributes) ของมัน หรือใช้ is หากคุณลักษณะนั้นมีชนิดเป็น boolean ตัวอย่าง

public class Product {
private String name;
public Product(String name) { this.name = name; }
public Product() { }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
}

3) จาวาคลาสนั้นควรมีความสามารถ (ไม่บังคับหรอกนะ) serializable ได้ เมื่อต้องถูกจัดเก็บหรือเคลื่อนย้ายโดยการทำงานของ virtual machine ที่เป็นอิสระจาก platform ใดๆเช่น การส่งจาวาบีนข้ามเครือข่ายที่ต่างระบบปฏิบัติการ ตัวอย่างโค้ด

public class Product implements java.io.Serializable {
private String name;
public Product(String name) { this.name = name; }
public Product() { }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
}

>> อ่านเพิ่มเติมเกี่ยวกับ JavaBean conventions
https://en.wikipedia.org/wiki/JavaBeans

>> เมื่อเรามีจาวาบีน ก็ต้องมีตัวสร้างหรือเตรียมจาวาบีนให้ แน่นอนว่าเราจะสร้างจาวาคลาสมาจัดการความจำเป็นนี้ จาวาบีนทั้งหลายที่เป็นข้อมูลของเราซึ่งจะถูกส่งให้กับ JasperReports จะต้องถูกเก็บหรือส่งมาเก็บไว้ในคลาสดังกล่าวนี้ก่อน โดยมีข้อกำหนดว่ามันต้องประกาศ public static เมธอดที่สามารถคืนค่าเป็น Java Collection เท่านั้น คลาสเตรียมจาวาบีนนี้เราให้นิยามว่าเป็น โรงงาน (Factory) สมมติให้ชื่อว่า ProductFactory ดังนี้

public class ProductFactory {
public static List getProducts() {
Product p1 = new Product("product 1");
Product p2 = new Product("product 2");
List products = new ArrayList();
products.add(p1);
products.add(p2);
return products;
} //end static method
} //end class

>> เป็นความคิดที่ไม่ซับซ้อนเลยใช่ไหมล่ะ เรียบง่ายเสียด้วยซ้ำ สมมติให้จาวาบีนและคลาสโรงงานข้างต้นต่างก็อยู่ใน package ชื่อ com.sample เราจะได้เห็นภาพการเรียกใช้ package ใน iReport ด้วย เอาล่ะ ตอนนี้เรามีทรัพยากรตามนี้นะครับ (ดูรูปประกอบนะ)
- ณ D:\Workspace\Report\jasperreports\myreports\report8
มี myreport.jrxml
- ณ D:\Workspace\Report\jasperreports\myreports\report8\com\sample
มี Product.java และ ProductFactory.java


>> เปิด Command Prompt ขึ้นมา แล้วยิงไปที่
D:\Workspace\Report\jasperreports\myreports\report8\com\sample
ทำให้ .java เหล่านี้เป็น .class ก่อนด้วยคำสั่ง javac *.java เราจะได้
- Product.class
- ProductFactory.class

***สำคัญมาก! iReport เวอร์ชัน 5.6 ที่ผมใช้นี้ ทำงานไม่ได้กับจาวาเวอร์ชัน 1.8 จึงถอยไปใช้จาวาเวอร์ชัน 1.7 ทว่าเมื่อผมสั่งสร้างจาร์บนสภาพแวดล้อมจาวาเวอร์ชัน 1.7 มันกลับใช้เป็น datasource ไม่ได้ (มีปัญหาความไม่เข้ากันสืบเนื่องมาจากตัวโหลดคลาส) จึงต้องถอยไปสร้างจาร์บนจาวาเวอร์ชัน 1.6 แทน (JDK 1.8 ซึ่งมี major version 52 และ JDK 1.7 ซึ่งมี major version 51 ไม่สามารถใช้ได้กับ iReport version 5.6 ต่างจาก JDK 1.6 ซึ่งมี major version 50 สามารถใช้เตรียม .jar กระทั่งถึง fill data ลง report ดังนั้นผมจะบอกว่าขณะนี้ผมใช้ JRE และ JDK เวอร์ชัน 1.6 นะครับ)

>> ยังใช้ Command Prompt เดิม ถอยมาที่
D:\Workspace\Report\jasperreports\myreports\report8
สร้าง .jar จากประดา .class ของเราโดยอ้างถึง package ด้วย ผมตั้งชื่อจาร์ตัวอย่างนี้ว่า ProductBeanDataSource.jar ร่ายคำสั่งสร้างจาร์ขั้นพื้นฐานคือ
jar cf (ดูลำดับวิธีการได้ในรูป) ตามด้วยชื่อพร้อมสกุลของจาร์ ตามด้วยประดา .class เจ้ากรรม โดยอาศัยการเคาะหนึ่งทีเป็นการคั่นคำสั่ง

และถ้าอยากจะดูว่าจาร์ที่ได้ไส้ข้างในเป็นอย่างไรก็
jar tf ตามด้วยชื่อจาร์นั้น
อย่าลืมนะครับว่าจาวาสำคัญชื่อไฟล์กับ public class ที่ถูกเขียนอยู่ภายใน ดังนั้นพิมพ์ใหญ่พิมพ์เล็กอย่าได้ตกหล่นเทียว


>> เรื่องนี้คือ JavaBean กับ Datasource เราจึงใช้การเชื่อมต่อแบบ JavaBeans set datasource ซึ่งต้องใช้ไฟล์จาร์เป็นวัตถุดิบ และเราก็ได้เตรียมเสร็จแล้ว

>> ณ iReport เพิ่ม ProductBeanDataSource.jar เข้ามาเลยสิครับ ตรงไปที่ Tools > Options > แท็บ Classpath กดปุ่ม Add JAR ตามรูป



>> ได้แล้วก็ตรงไปที่ไอคอน datasource เปิดหน้าต่าง Connections/Datasource กดปุ่ม New


>> เลือก JavaBeans set datasource กดปุ่ม Next


>> ตั้งชื่อ datasource ผมตั้งว่า TestProductBeanDataSource
- ระบุ factory คลาสไปที่ com.sample.ProductFactory ที่เราได้สร้างไว้
- ระบุ public static method ชื่อ getProducts
- ทดสอบการเชื่อมต่อ กดปุ่ม Test (ขอย้ำว่าขณะนี้ทำงานบนสภาพแวดล้อม JRE 1.6)


>> กดปุ่มไอคอน Query เลือกแท็บที่ชื่อ JavaBean Datasource ในช่อง Class name บอกมันให้หาบีนที่ชื่อ com.sample.Product กดปุ่ม Read attributes เราจะพบกับ attribute ที่เราได้สร้างไว้ นั่นคือ name (สร้างไว้เยอะก็เห็นเยอะ) ตอนนี้อยากทำงานกับ attribute ตัวไหนก็คลิกแล้วกดปุ่ม Add selected field(s) ด้านล่าง มันจะไปสร้าง field ชื่อเดียวกันนี้ให้ครับ อย่าลืมปิดท้ายด้วยการกดปุ่ม OK


>> ลาก Text Field ตัวหนึ่งเพื่อทดสอบผลลัพธ์ มาวาง ณ ส่วนใดๆของรายงาน ผมเลือกส่วน Detail 1 คลิกขวาที่มันเพื่อเลือก Edit expression


>> อะไรก็ตามที่ถูกเขียนไว้ใน Expression editor ให้ลบออก แล้วมองหา name ของเราได้จากหมวด Fields เจอแล้วดับเบิลคลิกที่ name สองครั้ง มันจะถูกเขียนใน Expression editor เป็น $F{name} กดปุ่ม Apply


>> สุดท้ายแล้วไป Preview กันเลย เย้ มาแล้วๆ คืนนี้ดึกแล้ว ฝันดีครับเพื่อนๆ