การปรับค่าลักษณะต่างๆของ Text แต่ละบรรทัดใน RichEditableText by Ziah

จากบล็อคที่แล้วที่ได้แสดงถึงการสร้าง Chat ด้วย RichEditableText ในบล็อคนี้จะอธิบายอีกหนึ่งความสามารถของ RichEditableText ที่มีความยืดหยุ่นมากกว่า TextArea อีกอย่างนึงครับ

โดยปกติแล้ว TextArea จะสามารถแก้ไข Property ของ Text ได้ แต่ว่าจะทำการแก้ไขทั้งหมดไม่สามารถแก้ไขเป็นส่วนๆได้ ซึ่งความสามารถนี้มีใน RichEditableText ตามชื่อของมันเลย เรามาเริ่มจากการดู Property ของมันกันเลยครับ

จากการนั่งเจาะดู Property ของมันทำให้ผมเห็นได้ว่า จริงๆแล้วการเก็บ Text ของ RichEditableText นั้นสามารถเก็บแยกๆกันเป็น Paragraph ได้เท่านี้ก็พอเดาได้ใช่ไหมครับว่าเราจะแก้ไข Text แยกกันเป็นส่วนๆได้อย่างไร โดยโค้ดมีหน้าตาดังนี้ครับ

var pe:ParagraphElement = new ParagraphElement; //สร้างตัวแปรย่อหน้า
var se:SpanElement = new SpanElement; //สร้างตัวแปรบรรทัด
se.text = obj.message; //ใส่ค่ากับ Span0
se.color = "#00FFFF"; //ใส่สี ในส่วนนี้สามารถกำหนดค่าลักษณะต่างๆของ Text ส่วนนี้ได้เลยครับ
pe.addChild(se) //กำหนดเสสร็จแล้วก็จับใส่ตัวแปรย่อหน้าเลยครับ
txtChat.content.addChild(pe); //แล้วก็ไปจับใส่ RichEditableText ได้เลยครับ โดยนำไป addChild ใส่ Property content ที่เป็น TextFlow

จากโค้ดข้างต้นเราจะใช้โค้ดดังกล่าวแทน txtChat.text+=obj.message เหมือนทั่วๆไป แต่เราจะสร้างตัวแปรเพื่อกำหนัดคุณลักษณะต่างๆของ Text ก่อนแล้วค่อยในไปใส่ RichEditableText ของเรา แล้วเราจะได้ผลลัพธ์ดังนี้เลยครับ

สร้างห้อง Chat โดยใช้ Spark ของ Adobe Flex by Ziah

ในที่จริงแล้วการสร้างห้อง Chat ดูเหมือนจะง่าย แต่หลังจากได้ทำแล้วส่วนที่มีปัญหาคือการเลื่อน Scrollbar อัตโนมัติทำงานไม่ถูกต้องเท่าที่ควร ในวันนี้ผมเลยจะมาเสนอวิธีการสร้างห้อง Chat และทำให้มีการ Scroll ที่ถูกต้องครับ

<s:TextInput id="txtChatInput" keyDown="sendChat(event)" text="" x="7" y="133"/>
<s:RichEditableText id="txtChat" clipAndEnableScrolling="true" x="13" y="28" width="201" height="97" editable="false" selectable="false"/>
<s:VScrollBar id="scrllChat" viewport="{txtChat}" fixedThumbSize="true" skinClass="components.chat_scrollVerticalScrollbar" x="213" y="27"/>


จากด้านบน

• TextInput คือส่วนที่จะให้ผู้ใช้ได้กรอกข้อความ
• RichEditableText เป็นคอมโพเนนท์ที่คล้ายๆ TextArea แต่ว่าเป็นของ Tag Spark โดยมันมีความสามารถต่างๆเพิ่มเข้ามาทำให้ใช้งานได้ดีมากยิ่งๆขึ้นส่วนสำคัญคือสามารถใช้กับ Custom ScrollBar ของเราได้ดังข้อถัดไป
• VScrollBar จากที่เห็นจะเป็นการใส่สกินของเราเองและใส่ viewport คือ RichEditableText ของเรา

ทีนี้โดยทั่วไปแล้ว เมื่อผู้ใช้ได้รับค่าเข้ามาเพื่ออัพเดท Chat เราจะทำการเลื่อนไปที่ล่างสุดโดยอัติโนมัติ แต่โค้ดโดยทั่วไปและ ตาม website ต่างๆได้เสนอมาว่าให้ใส่โค้ดดังนี้ในฟังก์ชั่นอัพเดทค่าห้อง Chat ของเรา ( id ของคอมโพเนนท์ อ้างอิงจากคอมโพเนนท์ด้านบน)

txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat
txtChat.validateNow(); //อัพเดทค่าล่าสุด
scrllChat.value = txtChat.contentHeight; //แบบที่ 1 ให้ Scroll ไปที่ส่วนที่ท้ายสุดของ chat
scrllChat.value = scrllChat.maximum ; //แบบที่ 2 ให้ Scroll เป็นค่าที่สูงที่สุด(ท้ายสุด) ของ Scroll

แต่ว่าทั้งสองแบบนั้น เมื่อเราทำการพิมหลายๆบรรทัดก็ยังคงทำให้เกิดบั๊คตามมา (แบบที่1มักเป็นกับแค่เพียงภาษาไทย แบบที่สองเป็นทั้งสองภาษา)

ซึ่งหลังจากที่ได้อ่าน Property ต่างๆของ RichEditableText ทำให้ได้การเขียนคำสั่งที่ทำให้ Chat สามารถทำงานได้อย่างถูกต้องตลอดดังนี้ครับ

txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat
txtChat.validateNow(); //อัพเดทค่าล่าสุด
txtChat.scrollToRange(txtChat.text.length,txtChat.text.length); //ใช้ฟังก์ชั่นเลื่อน Scroll ไปที่ตำแหน่งสุดท้ายของอักษรใน Chat ของเรา

จากด้านบนจะทำให้การเลื่อน Scroll อัตโนมัติของเราเลื่อลงมาล่าสุดได้ตลอดถูกต้องแล้วล่ะครับ

Reference : http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/RichEditableText.html