กระแส RIA แรงเหลือเกิน ก็มีให้เลือกเยอะ flex, silverlight, javaFX, openLazlo, ajax แต่ยืนบน flash มานานละ ที่ทำงานก็ต้องใช้ flex ทำงานด้วย ก็เลยมาทำ RIA ด้วย flex นี่แหละ และมันก็สามารถทำบน linux ได้ด้วย ก็ลองบน ubuntu นี่แหละ มาดูแบบง่ายๆ กันก่อน ว่าผลที่ทำออกมาจะเป็นแบบไหน
เริ่มต้นด้วยการโหลด flex sdk มาก่อน จากนั้น extract ไว้ที่ตามใจชอบ จากนั้น ไป config เล็กน้อยสำหรับ SciTE อีกหน่อย(ผมเคย config มันไปทีนึงแล้ว ลองทบทวนดูอีกทีก็ได้ครับ)
$ sudo gedit /usr/share/scite/html.properties
บางส่วน แก้ code เป็น
file.patterns.xml=*.xml;*.xsl;*.svg;*.xul;*.xsd;*.dtd;*.xslt;*.axl;*.xrc;*.rdf;*.swfml;*.mxml filter.web=Web (html htm asp shtml css xml docbook jsp swfml mxml)|$(file.patterns.web);*.css;*.xml;*.docbook|
*.swfmil ไม่จำเป็น แค่เพิ่ม *.mxml ก็พอ ใส่ code สำหรับปุ่ม build ด้านล่างของ file หน่อย
command.build.*.mxml=/path/to/your/flex_sdk/bin/mxmlc $(FileNameExt) -output $(FileName).swf
จริงๆ จะสั่งจาก terminal ตรงๆ ก็ได้ ตัว flash player ยังคงเหมือนเดิมเรื่อง font ต้องทำการ embed font เสมอ แต่วิธีการ embed font ใน flex ต่างจาก flash หน่อย
$ gedit /path/to/your/flex_sdk/frameworks/flex-config.xml
ใน tag fonts เพิ่มก้อนนี้เข้าไป
1 2 3 4 5 6 | <languages> <language-range> <lang>ThaiEng</lang> <range>U+0E01-U+0E5B,U+0020,U+0041-U+005A,U+0020,U+0061-U+007A,U+0020,U+0061-U+007A,U+0030-U+0039,U+002E,U+0020-U+002F,U+003A-U+0040,U+005B-U+0060,U+007B-U+007E</range> </language-range> </languages> |
สั่งต่อ
$ scite flex_example1.mxml
เอา code ก้อนนี้แปะไป
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <?xml version="1.0" encoding="UTF-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="feedRequest.send()" layout="absolute"> <mx:Style> @font-face { font-family : mySerif; src : local("Serif"); unicode-range : "ThaiEng"; } Panel{ fontFamily: mySerif; } </mx:Style> <mx:HTTPService id="feedRequest" url="http://feeds.feedburner.com/ubuntuclub" useProxy="false" /> <mx:Panel x="20" y="10" width="475" height="400" title="Flex on Ubuntu" layout="absolute" > <mx:Label x="20" y="5" htmlText="{feedRequest.lastResult.rss.channel.title}" /> <mx:DataGrid id="dgPosts" x="20" y="30" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}"> <mx:columns> <mx:DataGridColumn headerText="Posts" dataField="title"/> <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" /> </mx:columns> </mx:DataGrid> <mx:LinkButton x="20" y="285" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/> <mx:TextArea x="20" y="185" width="400" height="80" htmlText="{dgPosts.selectedItem.description}" /> </mx:Panel> </mx:Application> |
แล้วก็กดปุ่ม build โลดดด
ก็จะได้ผลอย่างที่เห็นนั่นแหละครับ
แล้วเอา .swf ไปใช้งานตามสะดวก
เห็นไหม บน Linux ก็ทำ Flex ได้
