Note: ผมใช้ Grails 1.0.4 + RichUI 0.6
เดิมที เดิมทีถ้าเราใช้ Grails Plugin ชื่อ
RichUI Star Rating ที่ใช้สำหรับทำการให้คะแนน หรือ rating แล้ว โดย default รูปของดาวที่เราจะเห็นก็จะมีหน้าตาแบบนี้
ซึ่งไฟล์ที่เกี่ยวข้องก็คือไฟล์ชื่อ starrating.gif ซึ่งอยู่ใน
$PROJECT_HOME/plugins/richui-x.x/web-app/images/
และไฟล์จะมีหน้าตาแบบนี้
ซึ่งสำหรับบางคน (เช่นผมเอง) คิดว่ามันไม่สวย และรูปดาวหน้าตาเหลืองๆแบบนี้อาจจะไม่เข้ากับ theme และโทนสีของเว็บที่เรากำลังทำนัก ดังนั้น ผมจึงอยากที่จะเปลี่ยนแปลงใหม่ให้มันมีหน้าตาเป็นแบบนี้ ซึ่งเข้ากันได้ดีกับโปรแกรมที่ผมกำลังทำอยู่
ปัญหาก็คือ ผมจะต้องทำอย่างไรบ้างที่จะให้ดาวของเราออกมาหน้าตาสวยงาม และเข้ากับ theme ของโปรแกรมกำลังทำ ซึ่งวิธีง่ายๆก็คือ นำรูปดาวเหลืองๆที่มากับ plugin ไปเปลี่ยนสีใหม่ ก็เสร็จแล้ว แต่ว่าจะมีปัญหาในกรณีที่รูปดาวใหม่ที่เราจะใช้ไม่ได้มีขนาดของดาว และขนาดของรูปดาวใหม่ไม่เท่ากับรูปดาวแบบเดิมเป๊ะๆ ดังนั้นเราต้องทำการแก้ไขไฟล์นิดหน่อย โดยเราจะเข้าไปยุ่งกับไฟล์ทั้งหมด 3 ไฟล์ คือไฟล์รูปดาว ไฟล์ CSS และไฟลืสำหรับการ render ดาว ดังนี้
1. เริ่มจากการหารูปดาวที่เราต้องการใช้ ในกรณีนี้ผมใช้รูปนี้
เพื่อให้ง่ายหน่อย รูปดาวแต่ละรูป (ในไฟล์เดียวกัน) ควรใช้พื้นที่แสดงผลตัวมันเองเป็นสี่เหลี่ยมจตุรัส ในกรณีรูปตัวอย่างนี้ดาวแต่ละรูปจะมีขนาดกว้าง 25 พิกเซล และยาว 25 พิกเซล ดังนั้นไฟล์ภาพดาวที่จะนำมาใช้จะมีความสูงรวม 75 พิกเซลและกว้าง 25 พิกเซลนั่นเอง
2. จากนั้นนำไฟล์รูปดาวที่เราจะใช้ไปวางแทนที่ไฟล์ดาวแบบเดิม
3. เปิดไฟล์
$PROJECT_HOME/plugins/richui-x.x/web-app/css/rating.css
และทำการแก้ทุกๆที่ที่เป็นเลข 30 (ขนาดความกว้างxยาว เดิมของรูปดาวสีเหลือง) ให้เป็น 25 ซึ่งเป็นขนาดความกว้างxยาวใหม่ของรูปดาวที่เราจะใช้ (แก้ชื่อไฟล์ดาวของเดิม ให้เป็นชื่อเดียวกับไฟล์รูปดาวใหม่ที่เราจะใช้ด้วย หากชื่อไม่เหมือนกัน)
4. แก้ไขคลาส .
unit-rating a.rx-unit ให้มีขนาดเพิ่มขึ้นสัมพันกับรูปที่เรานำมาใช้ เช่นจากตัวอย่างผมใช้รูปขนาดกว้าง 25 พิกเซล ก็จะแก้ได้ว่า
.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:25px;}
.unit-rating a.r2-unit{left:25px;}
.unit-rating a.r2-unit:hover{width: 50px;}
.unit-rating a.r3-unit{left: 50px;}
.unit-rating a.r3-unit:hover{width: 75px;}
.unit-rating a.r4-unit{left: 75px;}
.unit-rating a.r4-unit:hover{width: 100px;}
.unit-rating a.r5-unit{left: 100px;}
.unit-rating a.r5-unit:hover{width: 125px;}
.unit-rating a.r6-unit{left: 125px;}
.unit-rating a.r6-unit:hover{width: 150px;}
.unit-rating a.r7-unit{left: 150px;}
.unit-rating a.r7-unit:hover{width: 175px;}
.unit-rating a.r8-unit{left: 175px;}
.unit-rating a.r8-unit:hover{width: 200px;}
.unit-rating a.r9-unit{left: 200px;}
.unit-rating a.r9-unit:hover{width: 225px;}
.unit-rating a.r10-unit{left: 225px;}
.unit-rating a.r10-unit:hover{width: 250px;}
เมื่อแก้ไขแล้วบันทึกทับไป และปิดไฟล์
5. เปิดไฟล์
$PROJECT_HOME/plugins/richui-x.x/src/groovy/de/andreasschmitt/richui/taglib/renderer/RatingRenderer.groovy
จากนั้นไปที่บรรทัด 19 ที่เขียนว่า
int imageWidth = 30 ให้แก้เป็น
int imageWidth = 25 (ตามขนาดความกว้างของไฟล์รูปดาวอันใหม่)
เท่านี้ก็เป็นอันเสร็จสิ้น และใช้ได้ตามปกติแล้ว :)
และนอกจากนี้ที่ renderer ไฟล์นี้เอง เราสามารถกำหนดการแสดงผลง่ายๆได้ โดยแต่เดิมเจ้าตัว plugin ตัวนี้ถ้าหากเรากำหนด attribute ชื่อ
showCurrent เป็น
true แล้ว มันจะแสดง rating ปัจจุบันที่ดาวกำลังแสดงอยู่ แต่ที่ผมต้องการคือ นอกจากจะแสดง rating ปัจจุบันที่แสดงแล้ว ให้แสดงจำนวนครั้งของการให rating ลงไปด้วย และให้แสดงทั้ง 2 อย่างนี้อยู่ด้านบนของดาว แบบนี้
ผมจึงขยับส่วนของการแสดงตัวหนังสือขึ้นมาไว้ข้างบน โดยย้าย
if(attrs.showCurrent){
…
}
มองไปด้านบน และนำ if block นี้มาวางไว้ด้านล่างของ
div(id: “unit_long$id”){
เพื่อให้มัน render ก่อนที่จะ render ดาว จากนั้นแก้ใน if block ที่เราย้ายขึ้นมาดังนี้
if(attrs.showCurrent){
div(“class”: “static”){
span(“คะแนน ${attrs?.rating} ( ให้คะแนน ${attrs?.ratingCount} ครั้ง)
}
}
จะเห็นได้ว่าเรามีการอ้างถึง attribute ที่ชื่อ
ratingCount ด้วย ดังนั้นเมื่อเราทำการเรียกใช้ rating tag เราจึงจำเป็นต้องใส่ attribute เพิ่มเข้ามาอีก 1 ตัวคือ
ratingCount เพื่อบอกว่ามีการให้คะแนนไปแล้วกี่ครั้งด้วยนั่นเอง
เมื่อเราทดลองใช้ดูจะพบว่า เมื่อมีการให้คะแนนโดยการเลือกที่ดาวแล้ว จำนวนครั้ง และคะแนนที่ให้ จะเปลี่ยนแปลง ณ ตอนนั้นเลย เนื่องจาก tag นี้จะทำการแอบส่ง request ไปอัพเดทข้อมูลให้นั่นเอง สำหรับวิธีงานฝั่ง server อ่านได้จาก
reference ของ plugin ได้เลยครับ
Related Link from Roti