การทำงานระหว่าง Flash Catalyst CS5.5 และ Flash Builder 4.5 ในเวอร์ชั่นใหม่ by Ziah
Jul0
ในก่อนหน้านี้ Flash Catalyst 5 (ต่อจากนี้จะเรียกว่า Fc) และ Flash Builder 4 (ต่อจากนี้จะเรียกว่า Fb) ได้สร้างความสะดวกในการสร้าง UI ใน Fc แล้วจึงนำไปโค้ดดิ้งต่อใน Fb แต่หลังจากที่ตัวผมเองได้ทำงานกับทั้งสองโปรแกรมมาสักพัก ก็ได้พบความลำบากนิดหนึ่งในการใช้งานคือ มันเป็นโฟลว์ทางเดียว เมื่อคนออกแบบสร้าง Fc มาเสร็จแล้ว เราก็ต้องอิมพอร์ทเข้ามาทำงานใน Fb เพราะ Fc ไม่สามารถแก้ไขโค้ดใดๆได้เลย และเมื่อทางโค้ดดิ้งแก้ไขอะไรเรียบร้อยแล้ว เมื่อถึงเวลาจะมีการแก้ UI ต้องแก้ในโค้ดดิ้งเลย เพราะเมื่อเราทำการอิมพอร์ทเข้า Fb แล้ว เราจะไม่สามารถนำกลับไปทำใน Fc ได้อีก แต่หลังจากนั้นเพียงไม่นาน Adobe ก็ได้ปล่อยเวอร์ชั่นใหม่มาครับ คือเพิ่ม .5 เข้าไปเป็น Fc CS 5.5 และ Fb 4.5 ซึ่งส่วนใหญ่จะมากับการซัพพอร์ท Mobile ต่างๆ แต่ก็มีผลพลอยได้ด้วยคือ ทาง Fb สามารถเรียก Fc ขึ้นมาแก้ไข UI ได้แล้วล่ะครับ!
เรามาดูกันเลยดีกว่าว่าเป็นอย่างไร
• เรามาทำการ Import Flash Catalyst Project กันก่อนเลยครับ โดยตอนนี้ได้ย้ายที่แล้ว

• ก็จะได้โปรเจ็ค Flex จาก Fc เหมือนเวอร์ชั่นเดิมนะครับ

• จากนั้นเราลองมาแก้โค๊ดกันสักหน่อย

• ต่อไปเราก็ใช้ความสามารถใหม่ของ Fb 4.5 ครับ กดไปที่ Edit Project in Flash Catalyst

• จะทำให้เราเห็นโปรเจ็คใน Fb ของเราโดนล็อคดังรูป และโปรแกรม Fc ก็จะทำการเปิดโปรเจ็ค Fb ของเราใน Fc เองครับ

• เรามาดูกันใน Fc จะเห็นได้ว่าโค้ดที่เราแก้ไขไว้ได้เข้ามาใน Fc แล้ว ซึ่งทำให้เราสามารถแก้ไข UI หลังโค้ดดิ้งได้แล้วล่ะครับ

• เรามาลองใส่ State เพิ่มอีกตัว

• เมื่อเราแก้ไข UI ต่างๆ ใน Fc เสร็จแล้วเราก็มาเลือก Resume Working On Project in Flash Builder ครับ
- หรือถ้าต้องการทำการเริ่มการแก้ไขใหม่อีกครั้งจาก Fb ที่มีอยู่ให้เลือก Re-open Project in Flash Catalyst ครับ
- หรือถ้าต้องการยกเลิกการแก้ไขจาก Fc ให้เลือก Cancel Editing Project in Flash Catalyst ครับ

• เมื่อเราแก้ไขเสร็จแล้ว UI ที่ถูกแก้ไขก็จะถูกนำมาแก้ใน Fb Project ของเราในทันทีเลยล่ะครับ

เราจะเห็นได้ว่าโฟลว์การทำงานของ Fc 5.5 และ Fb 4.5 ไม่ได้ไปทางเดียวเหมือนเวอร์ชั่นเก่าๆอีกต่อไปครับ เพราะเราสามารถแก้ไขไปมาระหว่างสองโปรแกรมได้อย่างอิสระแล้ว ทำให้ผู้ที่ทำ Flex มีความสะดวกสบายขึ้นในเวอร์ชั่นใหม่นี่ครับ
การใช้จำกัดบรรทัดการแสดงผลข้อความและใส่ทูลทิปให้กับ 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
Feb0
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






