การใช้จำกัดบรรทัดการแสดงผลข้อความและใส่ทูลทิปให้กับ 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”);
ผลลัพธ์
การเปลี่ยนโค้ดจาก MX Compenent (Flex 3) มาเป็น Spark Component (Flex 4) by Ziah
Mar0
จากครั้งที่แล้วที่ผมได้อธิบายถึงการเปลี่ยนโค้ดจาก Flex 3 มาใช้ใน Flex 4 นะครับซึ่งจะเป็นรูปแบบของโค้ดหรือการทำงาน ซึ่งในครั้งนี้ผมจะอธิบาย Component ต่างๆที่ส่วนมากจะถูกเปลี่ยนมาใช้กับ Spark ใน Flex 4 กันนะครับ
แท็กที่ถูกเปลี่ยนจาก MX มาใช้แบบ Spark
| MX Component (Flex 3) | Spark Component (Flex 4) |
| <mx:Button> | <s:Button> |
| <mx:ButtonBar> | <s:ButtonBar> |
| <mx:CheckBox> | <s:CheckBox> |
| <mx:ComboBox> | <s:DropDownList> |
| <mx:HorizontalList> | <s:List>* |
| <mx:HRule> | <s:Line> |
| <mx:HScrollBar> | <s:HSlider> |
| <mx:List> | <s:List>** |
| <mx:NumericStepper> | <s:NumericStepper> |
| <mx:RadioButton> | <s:RadioButton> |
| <mx:RadioButtonGroup> | <s:RadioButtonGroup> |
| <mx:TextArea> | <s:TextArea> |
| <mx:TabBar> | <s:TabBar> |
| <mx:TextInput> | <s:TextInput> |
| <mx:TileList> | <s:List>*** |
| <mx:ToggleButtonBar> | <s:ButtonBar> |
| <mx:VideoDisplay> | <s:VideoPlayer> |
| <mx:VRule> | <s:Line> |
| <mx:VScrollBar> | <s:VScrollBar> |
| <mx:VSlider> | <s:VSlider> |
| <mx:Application> | <s:Application> |
| <mx:Window> | <s:Window> |
| <mx:WindowedApplication> | <s:WindowedApplication> |
| <mx:Canvas> | <s:Group> |
| <mx:HBox> | <s:HGroup> |
| <mx:Panel> | <s:Panel> |
| <mx:Tile> | <s:Group>*** |
| <mx:VBox> | <s:VGroup> |
*กำหนด Layout เป็น HorizontalLayout โดยใช้แท็ก <s:layout>
**กำหนด Layout เป็น VerticalLayout โดยใช้แท็ก <s:layout>
***กำหนด Layout เป็น TileLayout โดยใช้แท็ก <s:layout>
ตัวอย่างการใช้แท็ก Layout
<s:List>
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
แล้วอย่าลืมเปลี่ยน namespace อย่างที่ได้อธิบายใน การนำโปรเจ็คแอปพลิเคชั่นใน Flex Builder 3 ไปใช้งานใน Flash Builder 4 ไว้แล้วนะครับ เท่านี้ก็สามารถเปลี่ยน MX component ที่ใช้ใน Flex 3 มาเป็น Spark component ของ Flex 4 ได้แล้วล่ะครับ
การนำโปรเจ็คแอปพลิเคชั่นใน Flex Builder 3 ไปใช้งานใน Flash Builder 4 by Ziah
Feb1
Flash Builder 4 ในปัจจุบันนั้นค่อนข้างรองรับแอปพลิเคชั่นจากโปรเจ็คที่สร้างใน Flex Builder 3 แล้ว เพียงเรา import โฟลเดอร์โปรเจ็คนั้นๆเข้ามาและเลือกใช้ Flex SDK 4 โดยถ้าเรายังต้องการใช้ Skin halo แบบเดิมกับที่ใช้ใน Flex 3 แล้ว ก็จะมีการเปลี่ยนแปลงเพียงเล็กๆน้อยๆดังนี้
เปลี่ยน namespace ของแอปพลิเคชั่น และเพิ่ม namespace ให้กับ stylesheet
สำหรับแอปพลิเคชั่น มีการแก้ไขดังนี้
Flex 3:
xmlns:mx=”http://www.adobe.com/2006/mxml”Flex 4:
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”
แก้ไข namespace mx เป็น fx
Flex 3:
<mx:Script>
</mx:Script>
<mx:Binding>
</mx:Binding>
<mx:Metadata>
</mx:Metadata>
Flex 4:
<fx:Script>
</fx:Script>
<fx:Binding>
</fx:Binding>
<fx:Metadata>
</fx:Metadata>
และเพิ่ม namespace ให้กับ Stylesheet โดยการเพิ่มโค้ดดังนี้
@namespace “library://ns.adobe.com/flex/mx“;
@namespace s “library://ns.adobe.com/flex/spark“;
จากนั้นก็กำหนด Style
Button{fontSize:18;}
s|Button{fontSize:18;}
เพิ่มแท็ก Declarations ให้กับ Component ที่ไม่เกี่ยวกับการแสดงผล
คอมโพเนนท์ต่างๆที่ไม่เกี่ยวข้องกับการแสดงผลเราจะนำแท็กของมันซ้อนไว้ในแท็ก Declarations ดังนี้
<fx:Declarations>
</fx:Declarations>
ตัวอย่างเช่น
<fx:Declarations>
<mx:StringValidator id=”v1″ source=”{input1}” property=”text” minLength=”24″/>
</fx:Declarations>
แก้ไข States
States ใน Flex 3 จะมีลักษณะดังนี้
Flex 3:
<mx:State name=“loading”>
<mx:AddChild relativeTo=“{myBox}”>
<mx:Text textAlign=“center” text=“Loading…” selectable=“false” />
</mx:AddChild>
…
<mx:VBox id=“myBox”>
</mx:VBox>
แก้ไขเป็น Flex 4 ดังนี้
Flex 4:
<mx:State name=“loading”>
…
<mx:VBox id=“myBox”>
<mx:Text textAlign=“center” text=“Loading…” selectable=“false”
visible=“false” includeInLayout=“false”
visible.loading=“true” includeInLayout.loading=“true”
/>
</mx:VBox>
ในครั้งหน้าจะมาอธิบายถึงการแปลง mx เป็น s หรือ เปลี่ยนสกินจาก Halo เป็น Spark กันนะครับ
credits http://www.learnosity.com/techblog/index.cfm/2010/3/21/Flex-3-to-Flex-4-Migration-Howto
บั๊กของ Flash CS4 ในการสร้าง Component ของ Flex และการลงส่วนเสริมอื่นๆ by plug.in
Jul0
Flex Component Kit เป็นอุปกรณ์ช่วยสร้าง component ของ Flex จากใน Flash ซึ่งลักษณะของเจ้าตัวนี้จะเป็นโครง Template ของ Component ต่างๆใน Flex เช่น ปุ่ม , tab และอื่นๆ ซึ่งสามารถใช้ Flash แก้ไขได้ และนำกลับมาตกแต่งใน Flex ให้สวยงามได้ไม่ยากเย็นนัก
ปัญหาคือเจ้าตัว Flex Component Kit นี้มันเคยใช้ได้ดีใน CS3 แล้วมันดันลงใช้ใน CS4 ไม่ได้นี่ซิ ทำไงดีหล่ะ = =”
Flex : ใช้ wmode แล้วพิมพ์ไทยไม่ได้ by heha
May1
เรื่องมีอยู่ว่าผมเขียน flex แล้วตอน test ก็พิมพ์ไทยได้ปกติดี แต่ทำไมอยู่ๆ ตอน up ขึ้นของจริงทำไมพิมพ์ไม่ได้ละเนีย!! ปรากฏว่าปัญหาอยู่ที่ wmode = transparent ที่ใช้แก้ bug flash บังพวก html ครับ และใน facebook ก็จำเป็นต้องมีด้วยเช่นหน้าต่าง publish หรือ invite ต่างๆ จึงจำเป็นต้องใช้อย่างเลี่ยงไม่ได้ หลังจากนั่งถามพี่กู (Google) สักพัก วิธีแก้ปัญหาก็ออกมาละครับ โดยการเอา <input type=”text”> จาก html นั่นแหละไปทับใน flash ให้ตรงกัน!! โอ… คนคิดวิธีแก้มันช่าง… แต่ก็ช่วยแก้ได้ละครับ ขั้นตอนมีดังนี้
Who are we?
