การใช้จำกัดบรรทัดการแสดงผลข้อความและใส่ทูลทิปให้กับ Text ใน Flex by Ziah
Jun0
ในบางครั้งการออกแบบจาก Flash Catalyst เมื่อนำมาใส่ข้อมูลจริงอาจมีบางครั้งที่ข้อมูลยาวเกินขนาด ซึ่งถ้าเราไม่ทำอะไรกับมัน ข้อมูลText ก็จะล้นออกมาซึ่งจะทำให้ การแสดงผลนั้นออกมาผิดพลาด ซึ่งเราจะแก้ไขโดยการจำกัดจำนวนบรรทัดของText และใช้ Tooltip ให้แสดงข้อมูลเต็มเมื่อนำเมาส์มาชี้ โดยที่ไม่ต้องยุ่งกับส่วนของข้อมูลเลย ดังรูป
การแสดงผลที่ผิดพลาด
เมื่อแก้ไขแล้ว
• ขั้นแรกเราจะทำการจำกัดบรรทัด โดยใส่ property maxDisplayLines ให้กับ Richtext ตัวที่เราจะทำการจำกัดบรรทัด และใส่ width เพื่อให้รู้ขนาดความกว้างของบรรทัด
<s:RichText id=”txtName” maxDisplayedLines=”1″ text=”Item Name” textAlign=”center” width=”117″ x=”4″ y=”2″>
ก็จะทำให้ได้กานจำกัดบรรทัดโดยจะตัดประโยคให้พอดีกับบรรทัดและเติม … ต่อท้าย ดังรูป
• ต่อไปเราจะทำการเพิ่ม ToolTip โดยมีสองวิธีคือใส่ในแท็กเลยหรือเพิ่มใน ActionScript ก็ได้
วิธีใส่ในแท็ก
<s:RichText id=”txtName” maxDisplayedLines=”1″ text=”Item Name” textAlign=”center” width=”117″ x=”4″ y=”2″ toolTip=”{/*ตัวแปรที่นำมา Binding*/}”>
วิธีใส่ใน ActionScript
//ในส่วนที่มีการเปลี่ยนแปลงข้อมูล
var str:String = //ข้อมูลที่รับมา
txtName.text = str;
txtName.toolTip = str; //String ของข้อมูลที่เหมือนกับ property text
ก็จะได้ ToolTip เมื่อนำเมาส์มาชี้ดังรูป
เราได้การแสดงผลที่ไม่เกินจากที่เรากำหนดไว้และสามารถชี้เพื่อแสดงข้อมูลทั้งหมดได้แล้วล่ะครับ
แถมอีกนิดการตกแต่ง ToolTip ใน Flex ทำได้ง่ายนิดเดียวครับใช้โค้ดนี้
styleManager.getStyleDeclaration(“mx.controls.ToolTip”).setStyle(styleProp:String,newValue:*); //styleProp คือ Property ที่ใช้ใน CSS ครับ newValue ก็ค่าที่เราจะใช้ เช่น color : red; ก็ใช้เป็น (“color”,”red”) ครับ
ตัวอย่าง
styleManager.getStyleDeclaration(“mx.controls.ToolTip”).setStyle(“backgroundColor”,”black”);
styleManager.getStyleDeclaration(“mx.controls.ToolTip”).setStyle(“fontWeight”,”bold”);
styleManager.getStyleDeclaration(“mx.controls.ToolTip”).setStyle(“fontSize”,”21″);
styleManager.getStyleDeclaration(“mx.controls.ToolTip”).setStyle(“color”,”#FFFFFF”);
styleManager.getStyleDeclaration(“mx.controls.ToolTip”).setStyle(“fontFamily”,”Arial”);
ผลลัพธ์
Enjoy this article?
Consider subscribing to our RSS feed!
ไม่มีความเห็น
ยังไม่มีความเห็น