LevelUp! Studio » fxg https://blog.levelup.in.th Experience the new world. Fri, 26 May 2017 10:06:07 +0000 th hourly 1 http://wordpress.org/?v=3.8.1 การแก้ไขนำไฟล์ Fxg มาแก้ไขและทดสอบแสดงผล https://blog.levelup.in.th/2012/08/31/edit-and-test-fxg-file/ https://blog.levelup.in.th/2012/08/31/edit-and-test-fxg-file/#comments Fri, 31 Aug 2012 15:46:36 +0000 http://blog.levelup.in.th/?p=1999 โดยปกติแล้วเวลาเรา Import project จาก Catalyst มาใช้จะมีไฟล์ที่กำหนดหน้าตาต่างๆของ componentต่างๆที่เราสร้างอยู่ในโฟลเดอร์ assets graphic ซึ่งไฟล์ดังกล่างเวลาเปิดใน Flex จะไม่สามารถเปิดแท็บ Design เหมือนไฟล์ mxml ได้ และยังไม่มี Autocomplete ใดๆ เรียกได้ว่าเห็นเป็น text file ธรรมดาเลยทีเดียว ซึ่งเราต้องแก้ไขไฟล์แบบใช้จินตนาการเลยทีเดียว วันนี้เลยจะมานำเสนอวิธีที่ทำให้สามารถแก้ไขไฟล์ได้โดยมองเห็นครับ

ไฟล์ fxg ในโปรเจ็ค

ไฟล์ fxg ในโปรเจ็ค

ตัวอย่างโค๊ดภายในไฟล์ fxg

ตัวอย่างโค๊ดภายในไฟล์ fxg

ในขั้นแรกอย่างที่เห็นว่าในไฟล์ fxg จะเป็นแท็กที่ค่อนข้างคุ้นเคย ซึ่งจริงๆมันก็คือแท็ก Spark ต่างๆนั่นเอง วิธีการนำไปแก้ไขจึงไม่ยากโดยการคัดลอกส่วนที่เราจะแก้ไข ซึ่งถ้าไม่รู้ว่าส่วนไหนก็ทำการคัดลอกมันทั้งหมดเลยก็ได้ แล้วในไปใส่ในไฟล์ mxml

fxg2

หลังจากนำมาใส่ mxml ก็จะได้้ดังนี้ แต่ยังรันไม่ได้หรือยังเข้าหน้า design ไม่ได้ครับ

จากนั้นเราก็ทำการใส่แท็ก Spark เพิ่มเข้าไปเช่น <Group> ใส่เป็น <s:Group> ครับ ซึ่งจะทำให้โค๊ดรันได้แล้ว เราก็ทำการรันหรือเข้าไปดูใน Tab Design ของ Flex ก็ได้ครับ

fxg3

เมื่อใส่ Tag Spark ก็ทำให้สามารถแสดงผลได้

หลังจากนั้นเมื่อแก้ไขเสร็จก็ทำการคัดลอก Attribute ต่างๆที่เราทำการแก้ไขกลับไปวางใน fxg ที่ก็อปปี้มาเปิด เท่านี้ก็เรียบร้อยแล้วครับ

เมื่อแก้ไขเสร็จ

เมื่อแก้ไขเสร็จ

]]>
https://blog.levelup.in.th/2012/08/31/edit-and-test-fxg-file/feed/ 0