ขี่จิงโจ้ รอบที่ 3-- มาแก้ไขโค้ดเพื่อให้ได้เวปอย่างที่คุณต้องการกันเถอะ ตอนที่ 2

ต่อจากตอนที่แล้วนะคะ เราก็สามารถเปลี่ยน theme ของเวปได้แล้ว ทีนี้เรามาเปลี่ยนหน้าตาเวปกันบ้าง
2. การเปลี่ยนข้อมูลแสดงผลหน้าตาของเวป ไฟล์ .jspx ที่ถูกสร้างให้อัตโนมัติ
ถ้าจำกันได้ เจ้า Spring Roo จะสร้างหน้าเวป 4 หน้าให้เราอัตโนมัติ ตามแบบ CRUD ซึ่งก็จะได้ไฟล์ create.jspx , list.jspx, show.jspx และ update.jspx มาสำหรับหนึ่งตารางข้อมูล ทีนี้หากเราต้องการปรับเปลี่ยนหน้าตาเหล่านี้ให้เป็นอย่างที่เราต้องการทำยังไงดี
อันดับแรก จะต้องไปที่ไฟล์ Controller ของข้อมูลชุดนั้นก่อนเลยค่ะ

จะเห็นว่าตรง @RooWebScaffold มีคำสั่งให้ automaticallyMaintainView=true อยู่ ให้เปลี่ยนเป็น =false ซะ ตรงนี้ก็คือคำสั่งที่ให้ Spring Roo ปรับเปลี่ยนหน้าเวปของเราให้อัตโนมัติค่ะ ที่ต้องมาเปลี่ยนเป็น false ก็เพราะว่า ถึงแม้เราไปแก้โค้ดหน้าเวปให้เปลี่ยนไปตามที่เราชอบแล้ว แต่ว่า spring roo ก็จะจัดการปรับหน้าเวปเรากลับมาเป็นเหมือนเดิมอยู่ดีค่ะ เพราะว่ามันจะสร้างหน้าเวปตามไฟล์ .java ที่มีอยู่ตามรูปแบบของมันเสมอ ดังนั้นต้องแก้เป็น false ก่อนที่เราจะเริ่มทำการแก้โค้ด .jspx นะคะ

มาถึงการแก้โค้ด ไฟล์ .jspx จะใช้ Syntax ของ spring form สำหรับฟอร์มที่เก็บข้อมูล (ดูได้ที่นี่ )และใช้ Syntax HTML กับ JSPX กับส่วนอื่นๆที่เหลือ

ยกตัวอย่างเช่น หน้าเวปที่เราได้ ตรง List Menu จะแสดงข้อความยาวๆ (คือทั้ง object) แต่เราอาจจะต้องการให้แสดงแค่ ชื่อ อย่างเดียว ก็สามารถ แก้ไขโดย ตรง <form:select> จะมี <form:options> ซึ่งก็คือตัวเลือกใน List เราก็เพิ่มตัวแปรเข้าไป ให้ itemLabel="name" (เมื่อ name คือชื่อตัวแปรใน .java) แค่นี้ก็ทำให้แสดงเฉพาะชื่อของกลุ่มแล้วค่ะ
 <form:options itemValue="id" itemLabel="name" items="${expensecategorys}"/>

3. การที่เราจะเพิ่มไฟล์ .jspx เข้าไปใหม่ (ที่ไม่ใช่ 4 ไฟล์ที่ระบบสร้างให้อัตโนมัติแบบข้างบน) ก็สามารถทำได้เลย แต่จะต้องแก้ไขไฟล์ views.xml ซึ่งเป็นไฟล์ที่ทำหน้าที่ระบุว่ามีไฟล์ .jspx อะไรบ้าง

อย่างในรูปข้างบน จะเห็นว่าถ้าเราต้องการเพิ่มไฟล์ .jspx เข้าไปใหม่อีกไฟล์ ก็จะต้องเพิ่ม <definition> เข้าไปที่ระบุชื่อไฟล์นั้นๆค่ะ
4. การที่เราจะจัดการหน้าเมนู ที่มีไว้ให้อัตโนมัติ เราสามารถเพิ่มเมนูใหม่ๆ ปรับย้ายได้ตามต้องการ แต่ก็จะขออธิบายโครงสร้างมันไว้คร่าวๆเผื่อใครอยากจะแก้ไขไฟล์เดิม menu.jspx นะคะ

จะเห็นว่าไฟล์ menu.jspx นี้เป็น Syntax HTML ธรรมดา จะมีพิเศษก็ตรงที่ตัวแรป id กับค่าตัวแปรต่างๆที่ถูกเอามาใช้ เช่น ${web_mvc_jsp_create_recordexpenses_menu_item_url} นั้นเป็นตัวแปรของข้อความที่จะเอามาแสดงซึ่งถูกสร้างอัตโนมัติโดยระบบ อยู่ในไฟล์ที่ชื่อว่า application.properties ดังรูปค่ะ

จะเห็นว่า ตัวแปรก็เก็บแค่ข้อความที่จะใช้แสดงผลในหน้าเวปค่ะ เพราะฉะนั้น เราสามารถที่จะตั้งชื่อตัวแปรใหม่ก็ได้ หรือเปลี่ยนข้อความ(สีน้ำเงิน) ก็ได้ค่ะ

อีกจุดนึงก็คือ ตัวแปรที่ถูกใช้ในฟอร์ม เช่น <spring:message code=label.recordexpenses> ตัวแปร label.recordexpenses นี้คือตัวแปรที่อยู่ในไฟล์ message.properties ค่ะ

จะเห็นว่า การตั้งชื่อมักจะบอกก่อนว่าข้อความนี้จะถูกใช้ที่บริเวณไหน เช่น button. แล้วก็บอกรายละเอียดชื่อของข้อความ เช่นปุ่มบันทึกก็เป็น button.save เช่นเคยเราสามารถปรับเปลี่ยนข้อความ หรือเพิ่มตัวแปรใหม่ๆได้ค่ะ

ทีนี้ตรงนี้มีประโยชน์ตรงที่ว่า Spring Roo ออกแบบนี้เพื่อให้รองรับเวปที่มีมากกว่า 1 ภาษา ดูได้จากไฟล์ message.properties จะมีต่อท้ายว่า _de / _es คือเปลี่ยนตามภาษาค่ะ เพราะฉะนั้นเราก็แค่ให้หน้าแรกของเวปสามารถกดเลือกภาษาที่จะอ่านได้ ระบบก็จะมาดึงข้อมูลตัวแปรจากไฟล์ภาษาที่เลือกไปแสดงผลค่ะ

เดี๋ยวจะมาต่อ ตอนที่ 3 ให้จบการแก้ไขเวปอย่างง่ายๆบน Spring Roo นะคะ