Streamimg by RED5

Next milestone…
(Streaming media server)

MyFlexTube

Next mission…
(Working with youtube, google vdo, yahoo etc.)

อันนี้สำหรับดึงมาจาก YouTube.com
http://cookbooks.adobe.com/post_Basic_example_with_Flex_and_YouTube-5741.html

Better way more than use Application.application.xXX

การอ้างอิงถึง property หรือ method ของ Component อื่น หลายคนคงคุ้นเคยการเรียกแบบ Application.application.xXX ด้วยข้อดีที่ใช้งานง่าย เขียนโค้ดสั้น ถ้าระบบใหญ่ การแก้ไขคงต้องเหนื่อยไม่น้อย เพราะการเรียกใช้งานแบบนี้ทำให้ระบบนั้นไม่เป็นอิสระกัน ทำให้เกิดปัญหายุ่งยากตามมาเมื่อต้องปรับปรุงระบบ

เทคนิคการทำให้ระบบแต่ละส่วนมีอิสระต่อกันวิธีหนึ่งที่นิยมใช้กัน คือ สร้างอีเวนต์ให้กับ Component ที่เราสร้างขึ้น เมื่อเรียกใช้ก็ dispatch ให้อีเวนต์ที่สร้างให้ทำงานตามต้องการ

ขอยกตัวอย่างโค้ด ที่เรียกใช้งาน แบบ Application.application.xXX และแบบใช้การสร้างอีเวนต์ให้กับ Component

แบบ Application.application.xXX

<?xml version=”1.0″ encoding=”utf-8″?>
<!– FxSpaghetti.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*”>

<mx:ViewStack id=”vStk” resizeToContent=”true”>
<local:FxSp1 id=”fxSp1″/>
<local:FxSp2 id=”fxSp2″/>
</mx:ViewStack>

</mx:Application>

………………………………………………………………………………..

<?xml version=”1.0″ encoding=”utf-8″?>
<!– FxSp1.mxml –>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.core.Application;
]]>
</mx:Script>

<mx:TextArea id=”txtAr” text=”Something…”/>

<mx:ControlBar>
<mx:Button label=”Next&gt;”
click=”
Application.application.vStk.selectedIndex = 1;
callLater(function():void{
Application.application.fxSp2.txtAr.text = txtAr.text;
});
“/>
</mx:ControlBar>

</mx:Panel>

………………………………………………………………………………..

<?xml version=”1.0″ encoding=”utf-8″?>
<!– FxSp2.mxml –>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.core.Application;
]]>
</mx:Script>

<mx:TextArea id=”txtAr”/>

<mx:ControlBar>
<mx:Button label=”&lt;Back”
click=”
Application.application.vStk.selectedIndex = 0;
“/>
</mx:ControlBar>

</mx:Panel>

………………………………………………………………………………..

แบบสร้างอีเวนต์ให้ Component

<?xml version=”1.0″ encoding=”utf-8″?>
<!– FxIndy.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*”>

<mx:ViewStack id=”vStk” resizeToContent=”true”>

<local:FxInd1 id=”fxInd1″
eventNext=”
vStk.selectedIndex = 1;
callLater( function():void{
fxInd2.txtAr.text = fxInd1.txtAr.text;
} );
“/>

<local:FxInd2 id=”fxInd2″
eventBack=”
vStk.selectedIndex = 0;
“/>

</mx:ViewStack>

</mx:Application>

………………………………………………………………………………..

<?xml version=”1.0″ encoding=”utf-8″?>
<!– FxIndy1.mxml –>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Metadata>
[Event(name="eventNext", type="flash.events.Event")]
</mx:Metadata>

<mx:TextArea id=”txtAr” text=”Something…”/>

<mx:ControlBar>
<mx:Button label=”Next&gt;”
click=”
this.dispatchEvent( new Event(‘eventNext’) );
“/>
</mx:ControlBar>

</mx:Panel>

………………………………………………………………………………..

<?xml version=”1.0″ encoding=”utf-8″?>
<!– FxIndy2.mxml –>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Metadata>
[Event(name="eventBack", type="flash.events.Event")]
</mx:Metadata>

<mx:TextArea id=”txtAr”/>

<mx:ControlBar>
<mx:Button label=”&lt;Back”
click=”
this.dispatchEvent( new Event(‘eventBack’) );
“/>
</mx:ControlBar>

</mx:Panel>

………………………………………………………………………………..

สรุป ทั้งสองแบบมีผลลัพธ์การทำงานเหมือนกัน แตกต่างกันที่วิธีเขียน และการทำงาน
แบบแรกเขียนง่าย ระบบไม่เป็นอิสระ เมื่อระบบใหญ่ขึ้นจะแก้ไขปรับปรุงยาก
แบบที่สอง ระบบค่อนข้างเป็นอิสระต่อกัน

RemoteObject & AMFPHP Beginning level

Rock!! Step by Step.

1. สร้าง DB บน MySQL

CREATE DATABASE `myflexphp` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

CREATE TABLE `my_user` (

`user_auto_id` INT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_username` VARCHAR( 25 ) NULL ,
`user_email` VARCHAR( 25 ) NULL

)  ;

2. AMFPHP installation.

ดาวน์โหลด AMFPHP ที่ www.amfphp.org จะได้ amfphp-1.9.beta.20080120.zip แตกไฟล์ออกมา

สร้างโฟลเดอร์ใหม่ใน Web root directory ชื่อ myamftest ตามโครงสร้างดังนี้ แล้วนำโฟลเดอร์ amfphp ที่แตกไฟล์แล้วไปเก็บไว้

ภายใน amfphp->services ให้สร้างโฟลเดอร์ใหม่ ชื่อ myflexphp

C:\
….|-AppServ
……..|-www
…………|-myamftest
…………….|-amfphp
………………..|-services
……………………|-myflexphp

ทดสอบโดยเข้าไปที่ http://127.0.0.1/myamftest/amfphp/browser/ จะได้ผลดังนี้

จะเห็นฟอร์มและค่าดีฟอล์ท ให้กดปุ่ม Save ได้เลย

3. เขียน *.php (PHP Class, PHP Dao)

สร้างคลาส MyUser ไว้ในไฟล์ MyUser.php และเก็บไว้ในโฟลเดอร์ myflexphp ดังนี้
<?php
/** * MyUser class */
class MyUser{
var $user_auto_id;
var $user_username;
var $user_email;
/** * explicit actionscript package */
var $_explicitType = “myflexphp.MyUser“;
}
?>

สร้างคลาส MyUserDao ไว้ในไฟล์ MyUserDao.php และเก็บไว้ในโฟลเดอร์ myflexphp ดังนี้
<?php
/**
* @author
* @copyright 2008
*/
/**
* First MyUserDao class */            /** Flex */
require_once “./MyUser.php”;         /** Flex */
class MyUserDao{                    /** Flex */
var $myConn;
/** ************* ************* */
function MyUserDao(){            /** Flex */
$this->myConn = mysql_connect(“127.0.0.1″, “root”, “123456″);
mysql_select_db(“myflexphp”, $this->myConn);
mysql_query(“SET NAMES ‘utf8′”,$this->myConn);
}
/** ************* ************* */
function insertRow($valObj){
$query =
“
INSERT INTO my_user(user_auto_id,user_username,user_email) VALUES
(‘”.$valObj["user_auto_id"].”‘,’”.$valObj["user_username"].”‘,’”.$valObj["user_email"].”‘)
“;
return mysql_query($query,$this->myConn);
}
/** ************* ************* */
function selectAll(){
$query = “SELECT * FROM my_user”;
$result = mysql_query($query, $this->myConn);
$arr = array();
$valObj;
while($row = mysql_fetch_array($result)){
$valObj = new MyUser();
$valObj->user_auto_id = $row["user_auto_id"];
$valObj->user_username = $row["user_username"];
$valObj->user_email = $row["user_email"];
$arr[] = $valObj;
}
return $arr;
}
}
?>

ทดสอบ *.php เข้าไปที่ http://127.0.0.1/myamftest/amfphp/browser/ อีกครั้ง จะเห็น services ที่เราสร้างขึ้น

สามารถทดสอบได้ โดยเลือกเมธอดที่้ต้องการทดสอบ แล้วกดปุ่ม Call
insertRow จะเป็นการเก็บข้อมูลลงตารางในฐานข้อมูล
selectAll จะแสดงข้อมูลจากตาราง

4. Create Flex project and config complier arguments

เปิด Flex Builder 3 ไปที่ File->New->Flex Project

ใส่ค่าที่จำเป็นดังนี้

Project name: MyFlexApp
Project location ให้เลือกค่าดีฟอลท์
Applicaion type ให้เลือก Web application (runs in Flash Player)
Server technology ในช่อง Application server type ให้เลือก PHP

กดปุ่ม Next >

คอนฟิก PHP Server

ใส่ค่าที่จำเป็นดังนี้
Server location
….|-Web root:C:\AppServ\www\myamftest
….|-Root URL:http://127.0.0.1/myamftest

กดปุ่ม Validate Configuration

Compiled Flex application location
….|-Output folder:C:\AppServ\www\myamftest\MyFlexApp-debug

กดปุ่ม Finish

สร้างไฟล์ servics-config.xml ตามตำแหน่งนี้
MyFlexApp
….|-src
……..|-services-config.xml

ข้อมูลที่จำเป็นใน services-config.xml มีดังนี้

<?xml version=”1.0″ encoding=”UTF-8″?>
<services-config>
<services>
<service id=”amfphp-flashremoting-service”
class=”flex.messaging.services.RemotingService”
messageTypes=”flex.messaging.messages.RemotingMessage”>
<destination id=”amfphp“>
<channels>
<channel ref=”my-amfphp”/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id=”my-amfphp”>
<endpoint uri=”http://127.0.0.1/myamftest/amfphp/gateway.php“
class=”flex.messaging.endpoints.AMFEndpoint”/>
</channel-definition>
</channels>
</services-config>

*เพื่อความยืดหยุ่นในการใช้งาน การระบุ endpoint uri อาจเขียนได้เป็นดังนี้
<endpoint uri=”../myamftest/amfphp/gateway.php“
/>
ซึ่งช่วยให้เราอัพโหลดขึ้น server hosting ได้ในทันทีโดยไม่ต้องมาเปลี่ยนทุกครั้งเมือ build โปรเจ็คท์

จากนั้นคลิกขวาที่ MyFlexApp->Properties เลือก Flex compiler

ปรับปรุงข้อมูลใน Additional compiler arguments:
จาก
-locale en_US
เป็น
-locale en_US -services “services-config.xml”

5. เขียน *.as ( ActionScript Class )

สร้างโฟลเดอร์ใหม่ชื่อ myflexphp และสร้างคลาส MyUser ในไฟล์ MyUser.as  ตามตำแหน่งนี้

MyFlexApp
….|-src
……..|-myflexphp
…………|-MyUser.as

package myflexphp
{
[RemoteClass(alias="myflexphp.MyUser")]
[Bindable]
public class MyUser
{
public var user_auto_id:String;
public var user_username:String;
public var user_email:String;
}
}

6. Remoting ( mx:RemoteObject )

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[
import myflexphp.MyUser;
import mx.utils.ArrayUtil;
import mx.rpc.events.ResultEvent;

private function btInsert():void{
var valObj:MyUser = new MyUser();
valObj.user_auto_id = txtInUserAutoId.text;
valObj.user_username = txtInUserUsername.text;
valObj.user_email = txtInUserEmail.text;
rmtObjMyUserDao.getOperation("insertRow").send(valObj);
}

private function btSelect():void{
rmtObjMyUserDao.getOperation("selectAll").send();
}

private function resultSelectAll( event:ResultEvent ):void{
ac = new ArrayCollection( ArrayUtil.toArray( event.result ) );
}
]]>
</mx:Script>

<mx:ArrayCollection id=”ac”/>

<mx:RemoteObject id=”rmtObjMyUserDao”
source=”myflexphp.MyUserDao”
destination=”amfphp“>
<mx:method name=”insertRow”/>
<mx:method name=”selectAll” result=”resultSelectAll(event)”/>
</mx:RemoteObject>

<mx:DataGrid dataProvider=”{ac}”/>

<mx:Form>
<mx:FormItem label=”user_auto_id”>
<mx:TextInput id=”txtInUserAutoId”/>
</mx:FormItem>
<mx:FormItem label=”user_username”>
<mx:TextInput id=”txtInUserUsername”/>
</mx:FormItem>
<mx:FormItem label=”user_email”>
<mx:TextInput id=”txtInUserEmail”/>
</mx:FormItem>
<mx:HBox>
<mx:Button label=”INSERT” click=”btInsert()”/>
<mx:Button label=”SELECT” click=”btSelect()”/>

</mx:HBox>
</mx:Form>

</mx:Application>

แหล่งอ้างอิงที่เกี่ยวข้อง

http://www.sephiroth.it/tutorials/flashPHP/flex_remoteobject/index.php

Utility tool may be you looking for http://www.drezzy.com/amfphpdbutil/bin/AMFPHPDbUtil.html

Stupid hero callLater() method and creationPolicy property =D

ท่านผู้อ่านที่เริ่มต้นศึกษา Flex อาจจะประสบปัญหาเกี่ยวกับการเรียกใช้งาน properties หรือ method ของคอนโทรล ทั้งๆที่เขียนลงไปใน MXML แล้ว ลองไล่โค้ดดูมั่นใจว่ามันถูกแน่ๆ แต่พอเรียกมาใช้งาน ดันมีข้อผิดพลาด ผมก็งงไปนานเหมือนกันครับ กว่าจะเจอวิธีแก้ไข หลังจากอยู่กับ Flex นานพอควร ท่านอาจารย์ Google ก็ได้บอกวิธีแก้ ซึ่งผมคิดว่าน่าจะเจอตั้งแต่เริ่มเขียน Flex ขอบอกต่อเลยแล้วกันครับ จะได้ไม่เสียเวลา

ขอยกตัวอย่างโค้ด

<?xml version=”1.0″ encoding=”utf-8″?>
<!– CallLaterTest.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[
private function btSendClick():void{
vStk.selectedIndex = 1;
txtArDes.text = txtArSrc.text;
}
]]>
</mx:Script>

<mx:ViewStack id=”vStk” resizeToContent=”true”>

<mx:Panel title=”Source page”>
<mx:TextArea id=”txtArSrc”/>
<mx:ControlBar>
<mx:Spacer width=”100%”/>
<mx:Button label=”Send &amp; Next&gt;”
click=”btSendClick()”/>
</mx:ControlBar>
</mx:Panel>

<mx:Panel title=”Destination page”>
<mx:TextArea id=”txtArDes”/>
<mx:ControlBar>
<mx:Button label=”&lt;Back”
click=”vStk.selectedIndex = 0;”/>
</mx:ControlBar>
</mx:Panel>

</mx:ViewStack>

</mx:Application>

จะได้ Design View ดังนี้

เมื่อรันโปรแกรม กดปุ่ม Send & Next คงจะเดาออกใช้มั้ยครับว่า ViewStack จะแสดงหน้าใหม่ แล้วคัดลอกข้อความใน TextArea จากหน้าแรกไปใส่ใน TextArea ในหน้าใหม่ อาฮะ แต่ผลที่ได้กลับข้อความแจ้งข้อผิดพลาด ชิทททท !! วอท อะ ซัมติง รอง (บน IE จะแจ้งข้อความผิดพลาด, FireFox จะเปิดหน้าใหม่ แต่ไม่สามารถใ่ส่ค่าใน TextArea หน้าใหม่ได้)

วิธีแก้ไขมี 2 วิธี จะใช้แบบไหนก็ได้ขึ้นอยู่กับความถนัดของผู้ใช้ ซึ่งแต่ละวิธีก็มีข้อดีข้อเสียต่างกัน มาดูกันว่าเขาทำกันยังงัย

1. ใช้เมธอด callLater() : เมธอดนี้จะทำงานเมื่อ properties หรือ method ของคอนโทรลมีคุณสมบัติพร้อมที่จะดำเนินการ วิธีการใช้งาน เป็นดังนี้

..
<mx:Script>
<![CDATA[
private function btSendClick():void{
vStk.selectedIndex = 1;
callLater( function():void{ txtArDes.text = txtArSrc.text; } );
}
]]>
</mx:Script>
..

ข้อดี เมื่อคอนโทรลถูกสร้างเป็นออบเจ็คแล้ว properties หรือ method ของคอนโทรลจะพร้อมใช้งาน เมธอด callLater() ก็จะดำเนินการตามที่เราเขียน ซึ่งจะมีข้อดีในเรื่องการจัดสรรหน่วยความจำที่ระบบจะนำมาใช้ สาเหตุที่ properties หรือ method ต่างๆ ไม่สามารถใช้งานได้ในทันทีนั้นก็เนื่องมาจากคอนโทรลที่เราเขียนด้วย MXML ถ้ายังไม่แสดงให้เราเห็นมันจะเหมือนกับเป็นการประกาศไว้เฉยๆ แต่ยังไม่ได้สร้างเป็นออบเจ็ค ดังนั้นการเรียกใช้งานมันจึงเกิดข้อผิดพลาด
ข้อเสีย เขียนโค้ดยาวเพิ่มขึ้น ( ตอบง่ายไปมั้ยเนี่ย O_o )

2. ตั้งค่า creationPolicy ให้เป็น all : เป็นการตั้งค่าให้กับ*คอนเทนเนอร์ ซึ่งนั่นก็คือ การประกาศและสร้างออบเจ็คท์ของคอนโทรลทั้งหมดที่อยู่ในคอนเทนเนอร์ดังกล่าว ทั้งนี้เพื่อให้สามารถเรียกใช้งาน properties หรือ method ของคอนโทรลได้ในทันที การใช้งานเป็นดังนี้
(*คอนเทนเนอร์ คือ ก็คือคอนโทรลที่ทำหน้าที่วางเลเอาท์หรือบรรจุคอนโทรลอื่นเอาไว้ เช่น Lay out container ก็จะมี Box, HBox, VBox, HDiviedBox เป็นต้น Navigation container ก็จะมี ViewStack, Accordion, TabNavigator เป็นต้น )

..
<mx:Script>
<![CDATA[
private function btSendClick():void{
vStk.selectedIndex = 1;
txtArDes.text = txtArSrc.text;
}
]]>
</mx:Script>

<mx:ViewStack id=”vStk” resizeToContent=”true” creationPolicy=”all”>
..

ข้อดี เขียนโค้ดได้ง่าย สั้น เหมาะสมสำหรับระบบที่ไม่ใหญ่มาก
ข้อเสีย ถ้าเป็นระบบใหญ่ๆ ถ้ามีหลายคอนโทรล ระบบจะสร้างออบเจ็คทั้งหมดไว้รอเลย ไม่ว่าจะได้ใช้งานหรือไม่ก็ตาม ดังนั้นระบบต้องจัดสรรหน่วยความจำและใช้เวลามากขึ้นเพื่อสร้างออบเจ็คเหล่านั้น

ลองทดสอบดูนะครับ

Introduct to Flex/Flash Google Maps API

สวัสดีครับ วันนี้เราจะมาเรียนรู้การใช้งาน Google maps ด้วย Flex ซึ่งทาง Google เองก็ได้จัดเตรียมคอนโทรล หรือคอมโพเนนท์ต่างๆให้เราเรียกใช้อย่างหลากหลาย มีตัวอย่างพร้อมโค้ดให้ได้ศึกษากันมากมาย อีกทั้งมี API Reference ที่อธิบายการใช้งานอย่างครบครัน เนื้อหาที่เราจะมาศึกษากันก็มีขั้นตอนง่ายๆไม่กี่ข้อ ก่อนอื่นท่านต้องมีอีเมลของ www.gmail.com ก่อนจากนั้นเข้าไปที่ http://code.google.com/apis/maps/documentation/flash/ จากนั้นขั้นตอนต่อไป คือ

1. Sign up for a Google Maps API Key
2. Download the Google Maps API for Flash SDK
3. Read the Developer’s Guide
4. Read the API Reference

รายละเอียด
1. Sign up for a Google Maps API Key : อันนี้เราจะต้องใส่ข้อมูล Key ที่ทาง Google จะกำหนดให้เราใส่ตอนที่ใช้งานคอนโทรล หากเรายังไม่มีโดเมน อยากทดสอบบนเครื่องก่อน ก็ไม่เป็นไร ใส่หลอกๆไปก่อนก็ได้ เช่น http://www.myflexapp.com เราก็จะได้ Key มาใช้ ตามรูป

Gen API Key

API Key

Example to use

2. Download the Google Maps API for Flash SDK : จากนั้นให้เราไปดาวน์โหลดไลบารี่ ซึ่งเราจะได้ sdk.zip เมื่อเราแตกไฟล์ออกมาจะมีโฟลเดอร์ต่างๆ ที่มีโครงสร้างดังนี้คือ

sdk
|-doc
|-lib

สมมติโปรเจ็คของเราชื่อ MyFlexAppProj ให้นำโฟลเดอร์ sdk ไปไว้ที่ src ตามรูป

Copy sdk folder to Flex Project

แล้ว Add library ให้โปรเจ็คโดยมีขั้นตอนดังนี้

Right-click -> Project Properties

Flex build path -> Library path -> Add SWC.. (with MyFlexAppProj->src->sdk->lib->map_1_9a.swc and MyFlexAppProj->src->sdk->lib->map_flex_1_9a.swc)

Add SWC.. Complete

เมื่อแอดไลบรารี่ จากไฟล์ *.swc เสร็จทดสอบการเปิด Map มาใช้งานด้วยโค้ดแล้วรันตามตัวอย่างต่อไปนี้

<?xml version=”1.0″ encoding=”utf-8″?>
<!– MyFlexAppProj –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

<mx:Script>
<![CDATA[
import com.google.maps.MapEvent;
private function onMapReady(event:MapEvent ):void{
// On map ready do something next...
}
]]>
</mx:Script>

<maps:Map xmlns:maps=”com.google.maps.*” id=”map” mapevent_mapready=”onMapReady(event)” width=”100%” height=”100%”
key=”ABQIAAAABwL7md2NWj6biS6JxgqfrBQvnK2mGiivBE7AnaybDmFzcPWj7RTpe6Kdvx4Sp9qBvP_Cf9FG6IJO9g”/>

</mx:Application>

ขั้นตอนหลักๆก็มีเพียงเท่านี้ครับ ส่วนจะเพิ่มออปชั่นอะไรให้ Map ดูแปลกตาน่าสนในท่านผู้อ่านก็สามารถศึกษาเพิ่มเติมในข้อ 3. และ 4. ได้ เท่าที่ผมได้อ่านเนื้อหาและลองทำบางส่วน เราสามารถประยุกต์ใช้งานได้หลากหลาย เช่น ใส่ Marker, รูปภาพ, รูปไอคอน, เส้นทาง, การวาดรูปโพลิกอน, รูปวงกลม เป็นต้น
ตัวอย่างพี่ผมทดสอบการใช้งาน http://www.khonkaensmile.com

ไม่รู้เข้าใจกันบ้างหรือป่าว ก็ลองทดสอบดูกันนะครับ ถ้ามีอะไรคอมเมนท์ถามได้เลยครับ ขอบคุณครับ

Working with RSS feed

การเผยแพร่ข้อมูลหรือกระจายข่าวทางอินเตอร์เน็ตที่นิยมในปัจจุบัน ถ้าคุณเป็นเว็บโปรแกรมเมอร์คงเคยได้ยินหรือเคยเขียนโค้ดเอาข้อมูลที่เป็น RSS feed มาแสดงผล ทั้งความง่าย ความนิยม ข้อมูลที่ทันสมัย โดยผู้เขียนไม่ต้องมาคอยปรับปรุงข้อมูลให้เมื่อย นักพัฒนา Flex/Flash หลายคนก็นิยมใช้อย่างแพร่หลายเช่นกัน เทคนิคการใช้ก็ไม่ยาก เพียงแต่จะมีเทคนิคเล็กน้อยที่แตกต่างไปบ้าง

ในเบื้องต้นเราเข้าใจกันดีอยู่แ้ล้วว่าพอเราเปิดเว็บที่สร้างด้วย Flex/Flash นั่นก็คือการเปิด *.html ที่มี *.swf ฝังอยู่ ทีนี้ ไอ้เจ้าไฟล์ *.swf เนี่ย มันจะมีวิธีการดึงข้อมูลจาก RSS สองกรณี คือ
1. กรณีที่ *.swf ดึงข้อมูลจาก RSS ที่อยู่บนโดเมนเดียวกัน เช่น http://www.knopsod.com/myflex.html สามารถดึงข้อมูล จาก http://www.knopsod.com/myrss.xml ได้ในทันที โดยใช้คอนโทรล HTTPService ของ Flex เป็นตัวดึงข้อมูล
2. กรณีที่ *.swf ดึงข้อมูลจากโดเมนอื่น หรือจากเว็บอื่น อันนี้ต้องใช้ความสามารถของภาษา Server-side script ช่วย ซึ่งขึ้นอยู่กับแต่ละภาษาว่ามีการจัดการอย่างไร จากนั้นก็ใช้คอนโทรล HTTPService ดึงข้อมูลเหมือนกรณีแรก
เพียงเท่านี้คุณก็จะได้ข้อมูลจาก RSS ตามที่้้ต้องการ

*สำหรับการดึงข้อมูลที่เป็นภาษาไทย เพื่อการแสดงผลที่ถูกต้อง ไฟล์ RSS ควรมีการระบุ encoding เป็น UTF-8 ทั้งนี้เนื่องจาก Flex สนับสนุน UTF-8 เป็นหลักครับ ตามตัวอย่างดังนี้
<?xml version=”1.0″ encoding=”UTF-8″?><rss version=”2.0″>…

สุดท้ายนี้ผมมีตัวอย่างมาศึกษากัน ลองดูนะครับ หากเพื่อนมีเทคนิคอื่นที่ดีกว่า ยินดีรับคำชี้แนะครับ

<!– Flex  –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:smilecomp=”smilecomp.*”
verticalLineScrollSize=”40″
backgroundColor=”#FFFFFF”
creationComplete=”init()”>

<mx:Script>
<![CDATA[
import mx.events.BrowserChangeEvent;
import mx.utils.URLUtil;
import mx.managers.BrowserManager;
import mx.managers.IBrowserManager;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

public var browserManager:IBrowserManager;

public function init():void{
browserManager = BrowserManager.getInstance();
browserManager.init("");

hSRSS.request.url = (
URLUtil.getServerName( browserManager.url ) == "localhost" ||
URLUtil.getServerName( browserManager.url ) == "127.0.0.1"
)?"news.xml":"http://www.matichon.co.th/khaosod/rss/firstpage_news.xml";

hSRSS.method = URLRequestMethod.POST;
hSRSS.send();
}

private function resultHSRSSHandler(event:ResultEvent):void{
var ac:ArrayCollection = event.result.rss.channel.item;

rptr.dataProvider = ac;

labelRSS.text = event.result.rss.channel.description;
}

private function faultHSRSSHandler(event:FaultEvent):void{
Alert.show("RSS feed connection fail!","RSS feed connection fail!");
}

private function lnkBarClickHandler( event:MouseEvent ):void{
var lnkBt:LinkButton = LinkButton( event.currentTarget );
navigateToURL( new URLRequest(lnkBt.getRepeaterItem().link) );
}
]]>
</mx:Script>

<mx:HTTPService
id=”hSRSS”
url=”../rss/rss.php”
useProxy=”false”
fault=”faultHSRSSHandler(event)”
result=”resultHSRSSHandler(event)”
showBusyCursor=”true”
/>

<mx:Panel width=”100%” title=”News” horizontalAlign=”center”>

<mx:Tile>
<mx:Repeater id=”rptr”>
<mx:LinkButton label=”{String(rptr.currentItem.title).substr(0,25)}”
fontWeight=”normal” textDecoration=”underline” color=”#0000FF”
toolTip=”{String(rptr.currentItem.description)}”
click=”lnkBarClickHandler( event )”/>
</mx:Repeater>
</mx:Tile>

<mx:Label id=”labelRSS”/>

<mx:ControlBar/>

</mx:Panel>
</mx:Application>

<?php
// PHP file. This file is rss.php
readfile( $_REQUEST["url"] );
//    header(‘Content-Type: text/xml’);
//    $url = ‘http://cognitivecache.blogspot.com/rss.xml’;
//    $content = file_get_contents($url);
//    echo $content;

?>