บันทึกนี้ถูกย้ายไปที่ Using Jasper Report with Grails ตอนที่ 2

http://khomkrit.blogspot.com/2009/01/using-jasper-report-with-grails-2.html

บทความนี้ถูกย้ายไปที่ Using Jasper Report with Grails ตอนที่ 1

ณ ตอนนี้ใน Grails นั้นมี plugin ในการสร้าง chart อยู่สองตัวก็คือ

• Google Chart Plugin
• JFreeChart Eastwood Plugin

โดยในตัวแรกนั้น (Google Chart Plugin) จะช่วยอำนวยความสะดวกในการใช้งาน Google Chart API

โดยจากปกตินั้น จะส่ง URL ไปที่ Google Chart พร้อมด้วย property ต่างๆที่เหมาะสมตามความต้องการ แต่สำหรับบางคนการทำลักษณะนี้อาจจะไม่สะดวก และค่อนข้างยุ่งยาก เพราะว่าเราต้องใส่ property ต่างๆของ chart ที่เราต้องการลงไปใน URL ซึ่งชื่อของ property ต่างๆก็ลำบากต่อการจำ เพราะว่ามันไม่ได้เขียนเต็มๆนี่สิ มันดันย่อมาซะงั้น เช่น chl, cht หรือ chd อะไรทำนองนี้ อีกทั้งเราต้องมาเขียนลักษณะของ url ให้ถูกต้องอีก คือแต่ละ property หลักบางครั้งอาจต้องคั่นด้วยเครื่องหมาย & และ property ย่อยๆก็ยังต้องคั่นด้วยเครื่องหมาย | (pipe) หรือ , (comma) อีก

แต่ว่า Google Chart Plugin ตัวนี้ ทำให้เราใช้ Google Chart API ผ่าน g Tag ของ Grails ได้เลย เช่น

<g:pieChart title=’Sample Pie Chart’ colors=“${colors}​”
labels=“${labels}​” fill=“${‘bg,s,efefef’}​” dataType=’text’ data=’${values3}’ />

เอา tag นี้ไปแปะในไฟล์ .gsp ได้เลย…

จาก code ตัวอย่าง เราจะเห็นได้ว่า เราสามารถกำหนดค่าต่างๆลงใน property ของ Tag ได้เลยตรงๆ และชื่อ property ก็ง่ายต่อการจำ ไม่ได้เป็นคำย่อเหมือนกับการส่ง URL ไปโดยตรง code ดูชัดเจนมากขึ้น

ไม่ว่าจะยังไงซะ ผมก็ไม่ชอบอยู่ดี ให้ผมส่ง URL ไปที่ Google ตรงๆยังจะสะดวกว่าอีก คงเป็นเพราะผมชินกับการใช้ Gogole Chart API ไปแล้วล่ะ

อย่างไรก็ตาม ไม่ว่าจะใช้ Google Chart Plugin หรือส่ง URL ไปตรงๆเลย ก็ยังมีข้อเสียตรงที่ว่า ถ้าเราไม่ได้เชื่อมต่อ Internet แล้ว เราก็ไม่สามารถสร้าง Chart ได้

เอาล่ะ…เข้ามาถึงเรื่องที่จะเขียนจริงๆครั้งนี้ได้ซะที

Plugin ตัวที่สองที่จะพูดถึงก็คือ JFreeChart Eastwood Plugin ตัวนี้เกิดมาเพื่อแก้ปัญหาตอนที่เราไม่ได้เชื่อมต่อ Internet นี่แหละ เพราะมันจะทำตัวในลักษณะ Emulate Google Chart API ซึ่งทำให้จากเดิมเราจะส่ง URL ไปง้อให้ Google เค้าช่วยสร้าง Chart ให้ แต่เมื่อใช้ Plugin ตัวนี้ก็ไม่จำเป็นอีกต่อไป ตรงกันข้าม เราสามารถส่ง URL ลักษณะเดียวกับที่เราส่งไปให้ Google Chart มาที่เครื่องเราเองได้เลย

ตัวอย่างเช่นจากเดิมส่ง Request ไปง้อ Google โดย

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250×100&chl=Hello|World

หลังจากที่เราไม่ง้อ Google แล้ว ก็ส่งแบบนี้ได้เลย

http://localhost:8080/ชื่อโปรเจคเรา/chart?cht=p3&chd=s:hW&chs=250×100&chl=Hello|World

หรือถ้าลงเป็น plugin ของ Grails Project ของเราเอง แล้วเราต้องการเอา Chart มาแปะที่หน้าเวปของเรา เพื่อความยืดหยุ่นก็จะเขียนได้ว่า

${request.contextPath}/chart?cht=p3&chd=s:hW&chs=250×100&chl=Hello|World
มันจะได้ค่ามาลักษณะเดียวกับ Google คือเป็นภาพ Chart ตาม parameter ที่เราส่งไป

ส่วนการติดตั้ง Plugin ตัวนี้ไม่ยากสามารถทำได้ 2 ทางคือ

ที่ CLI พิมพ์

$>grails install-plugin eastwood-chart

หรือถ้ามี plugin ตัวนี้อยู่แล้ว ก็แค่ copy ไปวางไว้ใน folder ชื่อ plugins(ถ้าไม่มีให้สร้างขึ้นมาใหม่เอง) ที่อยู่ที่ root ของ Grails Project ของเรา

จากนั้นทดสอบการทำงานโดย Browse ไปที่

http://localhost:8080/โปรเจคของเรา/plugins/eastwood-chart-เวอร์ชั่นของeastwoodchart/test.gsp

plugin ตัวที่สองนี้ ทำให้คนที่เคยใช้ Google Chart API อยู่แล้วไม่จำเป็นต้องศึกษาวิธีการใช้งานใหม่ สามารถใช้งานได้แบบเดิมๆ หรือสามารถศึกษาวิธีการใช้งาน Google Chart API ได้ ที่นี่

จากเดิมก่อนหน้านี้ ผมเคยพยายามใช้ JFreeChart API สำหรับ Java Application แล้ว แต่ Resource มันน้อยเหลือเกิน และทีสำคัญกว่าจะได้ Chart มาแต่ละอันเขียน Code มือหงิกเลย แต่หลังจากที่ได้มาพบกับ EastWood Chart Plugin ตัวนี้แล้ว รู้สึกสบายใจ ไม่ต้องเสี่ยงอาการมือหงิกอีกต่อไป เขียน Code น้อยลงเยอะเลย Resource และวิธีใช้ก็อ่านได้จาก Google Chart API ได้ตรงๆเลย

จากที่ได้เขียน Hibernate with NetBeans มาแล้ว ก็มีคนบอกว่าให้เขียนวิธีใช้ด้วยสิ คราวนี้จึงมาเขียนวิธีใช้

จากตัวอย่างที่ยกมาจากครั้งที่ผ่านๆมา สามารถนำ Class ต่างๆที่เรามาใช้งานได้ดังนี้

การเพิ่ม record ใหม่

User user = new User();
user.setName("myName");
user.setAge(20);
user.setWeight(30);

new UserFacade().saveUser(user);

ส่วนการ Query นั้นก็ไม่ยาก ทำได้โดย

List users = new UserFacade().findByAge(20);

จากข้างบนคือการ Query โดยค้นหาจาก Age

เห็นได้ว่าการค้นคืน หรือการเพิ่ม Record ใหม่ ทำได้ไม่ยากอย่างที่คิดไว้เลยถ้าหากว่าเราใช้ Hibernate ทำ ORM แล้ว

หลังจากเราได้ไฟล์ชื่อ User.java มาแล้ว เราจะเห็นว่า ข้างในไฟล์ที่ NetBeans generate มาให้นั้นจะมี attribute มาให้ 1 ตัวก่อนคือ id มี type เป็น String ดังรูปเลย

จากนั้นเรามาสร้าง attribute เพิ่มให้ class User ซึ่งก็คือการเพิ่ม Field ในตารางชื่อ User นั่นเอง ซึ่งสามารถทำได้โดยการนำ mouse สุดที่รักไป click เบาๆที่ที่เอาไว้เขียน code ในไฟล์ User.java หรือจะให้แนะนำก็ตรงบรรทัดใต้คำว่า PrimaryKey: String id ก็แล้วกัน จากนั้นก็กดปุ่มอะไรก็แล้วแต่ให้ auto complete box เด้งขึ้นมา เช่น Ctrl+SpaceBar หรือสำหรับผมแล้วใช้วิธี . (จุด) ครับ จากนั้น auto complete box ก็จะเด้งขึ้นมาครับ (หมายเหตุ: ในขั้นตอนนี้ถ้า auto compete box เด้งขึ้นมาจ๊ะเอ๋ อาจจะทำให้ตกใจเล็กน้อยถึงปานกลางนะครับ ทำใจดีๆครับ ไม่ต้องตกใจ) ดังรูปนี้เลยครับ

ดังรูปให้เลือกที่ Hibernate Property เลยครับ จากนั้นจะมี Dialog Box เล็กๆขึ้นมาดังรูปครับ

จากนั้นกรอกตามรูปเลยครับ ซึ่ง Field บนสุด (Name) คือชื่อของ Field ที่เราจะสร้าง ส่วน Field ถัดมา (Class Name) คือชนิดของข้อมูลของ Field ที่เรากำลังจะสร้างขึ้น จากนั้นกด OK แล้วถ้าหากว่าอยากจะสร้าง Field อื่นๆอีก ก็ทำเช่นนี้ไปเรื่อยๆจนกว่าจะพอใจ

ซึ่ง Field นี้จะเป็น Attribute ของคลาส User และเป็นชื่อของ Field ในตารางชื่อ User ที่เรากำลังจะสร้างขึ้นนั่นเอง

เมื่อเราเพิ่มชื่อ Field แล้วในแต่ละครั้งจะมี Field เพิ่มขึ้นมา และเมื่อเราเพิ่ม Field จนพอใจแล้วจะได้ประมาณว่าดังรูปข้างล่างนี้เลยครับ

จากนั้นเราจะทำการสร้างไฟล์ HibernateUtil ขึ้นมาใช้ (จริงๆในขั้นนี้เราไม่ได้เอามาใช้โดยตรง) ซึ่งสามารถทำได้โดยการไป click ขาวเบาๆที่ชื่อโปรเจค แล้วเลือก Net>File/Folder… ดังรูป

จากนั้นเลือกที่ Category เป็น Hibernate และ File Types เป็น HibernateUtil.java ดังรูปเลย

จากนั้นกรอกไปดังรูป ชื่อ Class ที่เราจะสร้าง ชื่อโปรเจคที่จะให้ไฟล์นี้อยู่ และสุดท้าย ชื่อ Package ที่จะให้ไฟล์นี้อยู่ จากตัวอย่างให้ไฟล์นี้ไปยู่ที่ Package ชื่อว่า bean ดังรูปเลย

จากนั้นเราจะเห็นไฟล์ที่เราสร้างอยูในตำแน่งที่เรากำหนดดังรูป

จากนั้นในขั้นตอนนี้เราจะสร้าง Facade (ซึ่งเป็น 1 ในอีกหลายๆ Design Pattern) ขึ้นมาเอาไว้สำหรับ control หรือเรียกใช้ คลาส User นั่นเอง ส่วนที่ว่าทำไมต้อง Facade และ Facade ใช้ทำอะไรนั้น นอกเหนือจากบทความนี้นะครับ ลองหาอ่านดูเอง … ไปที่ไฟล์ User.java แล้วเอา Mouse คลิ๊กที่ว่างๆซักที่ แล้วทำยังไงก็แล้วแต่ให้มี auto complete box เด้งขึ้นมา (ขึ้นมารอบสองแล้วคงไม่ตกใจแล้วนะ) จากนั้นเลือกที่ Hibernate Facade ดังรูป

จากนั้นเราก็ไม่ต้องกำหนดอะไรอีกแล้ว ชำเลืองตาไปทางซ้ายนิดๆ (ถ้าจอกว้างๆก็หันหน้าไปหน่อยๆ) ก็จะเห็นว่ามีไฟล์ชื่อ UserFacade.java ขึ้นมาดังรูป

จากนั้นเข้าไปที่ไฟล์ UserFacade.java เราจะเห็นหน้าตามันเป็นแบบนี้

เราจะเห็นได้ว่า Class UserFacade ที่ NetBeans สร้างมาให้นั้นจะมีเพียง Method เดียวในขั้นตอนต่อไปเราจะสร้าง Method ให้มากกว่านี้เพื่อจะได้ให้ Object ที่สร้างมาจาก Class UserFacade ทำอะไรได้มากกว่าที่มันกำหนดมาให้ตอนแรก โดยการ Click ในไฟล์นี้ แล้วก็ทำให้ auto complete box เด้งขึ้นมาแล้วเลือกที่ HQL Generator ดังรูป

เมื่อเลือกที่ HQL Generator แล้วจะปรากฏหน้าต่างขึ้นมาดังรูป

panel ทางด้านซ้ายจะบอกว่าในคลาส User มี Attribute ชื่ออะไรบ้าง (แต่ละ Attribute จะกลายไปเป็น Field ของ ตารางชื่อ User ในอนาตค)
จากนั้นกดปุ่ม Add ทางด้านล่างเพื่อที่จะสร้าง HQL Syntax ขึ้นมาใช้ หรือพูดง่ายๆก็คือหน้าต่างหน้าเป็นหน้าต่างสำหรับช่วยให้เราสร้าง HQL Syntax ขึ้นมาช้นั่นเอง ซึ่งจริงๆแล้วจะเขียนเองก็ได้ โดยใจตัวอย่างนี้ให้เลือกที่ node Age ก่อนจากนั้นจึงค่อยกดปุ่ม Add โปรแกรมจะสร้าง รายการขึ้นมาใหม่ทางด้านขวามือของ panel ทางด้านซ้าย ดังรูป

จากนั้นกำหนดค่าต่างๆดังรูป โดย Method Name คือชื่อของ Method ที่เราจะสร้างให้ทำงานตาม HQL Syntax ที่เรากำลังจะสร้าง ในที่นี้จะสร้าง method ที่ทำหน้าที่ค้นคืน user โดยค้นคืนโดยอ้างจากอายุ(Age) จึงตั้งชื่อ method ว่า findByAge

หลังจากที่เรากำหนดค่าต่างๆ และเมื่อกดปุ่ม OK แล้ว NetBeans จะสร้าง Code ขึ้นมาให้เราดังรูป

จะเห็นได้ว่าเป็นการสร้าง method ชื่อ findByAge ตามที่เราได้กำหนดไว้และมี return Type เป็น Object ของคลาส java.util.List

เมื่อสร้างเสร็จแล้วต่อไปเราจะให้ NetBeans สร้างตารางชื่อ User และมี Field ต่างๆตามที่เรากำหนดไว้ในไฟล์ชื่อ User.java ซึ่งสามารถทำได้โดย ขั้นแรกให้ คลิ๊กขวาที่โปรเจค แล้วเลือก Build ก่อน นั่งรอซักพัก หรือถ้าเครื่องแรมน้อยๆ อืดๆก็ให้นอนรอได้เลย รับรองว่าไม่ทันได้นอนก็ Build เสร็จแล้ว (แล้วจะให้นอนทำไมล่ะนั่น)

จากนั้นให้ click ขวาที่นี่ตามรูปเลย แล้วเลือก Create DB Table

พอถึงขั้นตอนนี้ก็เสร็จแล้ว การกำหนด และสร้างอะไรต่างๆนาๆ ต่อไปเราจะเอาไปใช้ละนะครับ