แก้ไขรูปของ Grails - RichUI Plugin Star Rating

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