การใช้จำกัดบรรทัดการแสดงผลข้อความและใส่ทูลทิปให้กับ Text ใน Flex by

30
Jun
0

ในบางครั้งการออกแบบจาก Flash Catalyst เมื่อนำมาใส่ข้อมูลจริงอาจมีบางครั้งที่ข้อมูลยาวเกินขนาด ซึ่งถ้าเราไม่ทำอะไรกับมัน ข้อมูลText ก็จะล้นออกมาซึ่งจะทำให้ การแสดงผลนั้นออกมาผิดพลาด ซึ่งเราจะแก้ไขโดยการจำกัดจำนวนบรรทัดของText และใช้ Tooltip ให้แสดงข้อมูลเต็มเมื่อนำเมาส์มาชี้ โดยที่ไม่ต้องยุ่งกับส่วนของข้อมูลเลย ดังรูป

การแสดงผลที่ผิดพลาด

01

เมื่อแก้ไขแล้ว

03

• ขั้นแรกเราจะทำการจำกัดบรรทัด โดยใส่ property maxDisplayLines ให้กับ Richtext ตัวที่เราจะทำการจำกัดบรรทัด และใส่ width เพื่อให้รู้ขนาดความกว้างของบรรทัด

<s:RichText id=”txtName” maxDisplayedLines=”1″ text=”Item Name” textAlign=”center” width=”117″ x=”4″ y=”2″>

ก็จะทำให้ได้กานจำกัดบรรทัดโดยจะตัดประโยคให้พอดีกับบรรทัดและเติม ต่อท้าย ดังรูป

02

• ต่อไปเราจะทำการเพิ่ม 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 เมื่อนำเมาส์มาชี้ดังรูป

03

เราได้การแสดงผลที่ไม่เกินจากที่เรากำหนดไว้และสามารถชี้เพื่อแสดงข้อมูลทั้งหมดได้แล้วล่ะครับ

แถมอีกนิดการตกแต่ง 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”);

ผลลัพธ์

04

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน