AODTO : Flash ActionScript and FLEX

.NET Platform
- FluorineFx.NET
- WebORB for .NET
- Web Service

PHP
- AMPPHP
- SWX
- Web Service

JAVA
- BlazeDS
- LCDC
- LCDC ES
- Web Service

กำลังรวบรวมข้อมูลนะครับ
จะมา update เรื่อยๆ

การทำ popup ใน joomla

Posted by: aodTo on: October 1, 2009

การทำ popup ใน joomla นั้น หลายคนอาจจะมีคิดว่า

ถ้าเราใส่ header หรือ footer มันก็จะติดไปตอนทำ popup นะสิ
ซึ่งผมก็คิดเช่นนั้น แต่ไม่รู้ว่าใครมีวิธีทำอย่างไรนะครับ

วันนี้ที่ผมแบ่งประสบการณ์เรื่องการทำ popup ก็เพราะว่าไม่รู้ว่าจะทำอย่างไร
ไม่ใส่แค่ใส่ window.open() แล้วก็จะได้

วิธีการทำก็คือ จะต้องมีตัวแปรเพิ่มต่อท้าย url string 1 ตัวคือ
tmpl=component

เช่น

http://yourdomain/index.php?tmpl=component&option=com_job

แค่นี้เองครับ ก็ได้เหล่ะ ^^

ในการรับส่งข้อมูลไปมาระหว่าง Flash platform นั้นทำได้หลายรูปแบบ ไม่ว่าจะเป็นการส่งด้วย URL String, ส่งผ่านการ Remoting, ผ่าน RPC Web Service หรืออื่นๆ ซึ่งผู้พัฒนาสามารถเลือกใช้งานให้เหมาะสมกับงานนั้นๆได้  ถ้าคุณพัฒนางานที่ไม่มีความซับซ้อนมาก เช่น รับ-ส่ง ข้อมูลไปมาระหว่าง Flash กับ Server-Side Script อย่างพวก php เพื่อจะดึงข้อมูลจาก ฐานข้อมูล คุณอาจจะส่งข้อมูลด้วย URL String ดังเช่น

username=test&password=123456

หรือจะส่งข้อมูลเป็น set คุณต้องนึกถึง array 2 มิติเป็นแน่ เช่น

ar=[[firstname,lastname],[firstname,lastname]]

แล้วคุณค่อยไป sub string เพื่อแยกข้อมูลเป็น array 2 มิติใน flash อีกทีหนึ่ง ซึ่งลำบากไม่ใช่น้อยเลย เมื่อเทียบกับสมัยแต่ก่อน แต่คุณอาจคิดว่า ส่งเป็นแบบ xml ก็ได้ ง่ายกว่าตัวอย่างด้านบนด้วย และไม่ต้อง convert อะไรมากมาย ซึ่งก็ถือว่าเป็นวิธีที่สะดวกอีกทางหนึ่ง

แต่คุณจะรู้หรือไม่ว่า flash platform มี protocol ที่เรียกว่า AMF  (Action Message Format) ซึ่งทำให้เราสามารถส่ง data ที่เป็นก้อนๆไปมาหากันได้โดยไม่ต้องแปลงอะไรเลย คุณลองคิดดูสิว่า ถ้าจะโยน array 2 มิติไปให้ php อ่านข้อมูลที่เป็น array 2 มิติ คุณจะต้องทำอย่างไร ซึ่งก็ตอบเป็นเสียงเดียวกันว่า ได้แต่ต้อง modified นิดหน่อย แต่ถ้าคุณมีวิธีที่สามารถ ส่ง array 2 มิติ ไปเลยโดยไม่แปลงอะไรเลย แล้วเมื่อโยนกลับมาคุณก็ไม่ต้องแปลงอะไรเลย เรียกใช้ได้เลยล่ะ ชีวิตคุณจะง่ายขึ้นขนาดไหน

SWX เป็น 1 ทางเลือกที่คุณต้องการ (เหมือนผมขายของเลยนะเนี่ย ^^)
โดย swx จะพัฒนาที่อยู่บนมาตรฐานของ amp protocol เมื่อคุณต้องการใช้งาน เพียงแค่ไปดาวโหลด library api มา โดยปัจจุบันอยู่ที่ version 2 (มิถุนายน 2552) เวลาเรียกใช้งาน แค่ link class path ไปหา library api ที่เราโหลดมา  ไม่ต้องลงโปรแกรมอะไรเลย คุณก็ใช้ได้แล้ว

การทำงานของ swx
swx ต้องการหลักๆอยู่ 2 อย่างคือ gateway และ service class
โดยที่

Gateway คือ ที่อยู่ของ gateway ที่เวลาส่งข้อมูลระหว่าง flash และ server-slide-script จะเชื่อมต่อเข้าหากัน เช่น
http://localhost/swx2/php/swx.php
.

Service class คือ class ที่คุณต้องสร้างขึ้นมา โดยแต่ละ class สามารถใส่ function การทำงานของ service class ได้ตามต้องการเช่น
ฟังก์ชั่นการ login() , logout(), showProfile() เป็นต้น

เท่านี้คุณก็สามารถรับ ส่งข้อมูลระหว่าง Flash platform กับ Server ได้อย่างง่ายด้วย

//---------------------------------------------------------------
import org.swxformat.SWX; //import คลาส SWX เข้ามาใช้งาน

var swx:SWX = new SWX();//สร้าง object ของ class SWX
swx.gateway = "http://localhost/swx2/php/swx.php";// ระบุ gateway
swx.encoding = "GET";//ระบุการส่งข้อมูลแบบ GET
swx.debug = true;//ระบุการใช้งานแบบ debug mode เป็น true เพื่อง่ายต่อการพัฒนางาน

var callParameters:Object =
{
    serviceClass: "Calculator",//ระบุ service class
    method: "addNumbers",//ระบุ function ที่เรียกใช้งานของ service class
    args: [35, 7],//ส่งค่า argument ไป  2 ตัว

    result: [this, resultHandler]
    //ระบุเมื่อมีการทำงานสำเร็จ ให้ส่งผลลัพธ์ไปที่ function อะไร
}

swx.call(callParameters);//เรียกใช้งาน ผ่าน swx object

//แสดงผลลัพธ์
function resultHandler(event:Object)
{
    trace(event.result);
}

//---------------------------------------------------------------

ศึกษาข้อมูลเพิ่มเติมได้ที่ : http://swxformat.org/

——————————————————
AODTO: Flash ActionScript and Flex

Flex และ google map Part I

Posted by: aodTo on: June 9, 2009

วันนี้จะมาคุยกันเรื่องการทำ map กันนะครับพี่น้อง
เห็นหลายๆคนสนใจ เลยอยากนำเสนอและแลกเปลี่ยนเรียนรู้
ผมก็พอมีข้อมูลอยู่บ้างเล็กน้อย ก็ขอคำแนะนำเพื่อนๆ ด้วยครับ

มาเริ่มกันเลยดีกว่าครับ
การจะทำ แผนที่ หรือ map ให้แสดงผลบน flash หรือ flex นั้น จะมีอยู่ประมาณ 3-4 เจ้านะครับที่ผมเห็นนะ
- google map api
- yahoo map api
- mapquest api
- longdo map สำหรับประเทศไทย

ซึ่งแต่ละตัวจะมีข้อดีข้อเสียแตกต่างกัน แล้วแต่ความเหมาะสมของแต่ละงานครับ
การจะนำมา map ให้มาแสดงผลบน flash นั้นทำได้ง่ายมากๆเลยครับ ตอนแรกผมก็ งง
ทำได้ไงว่ะ ^^

แต่พอมาดูก็ร้องอ๋อ ไม่ยากๆ คือ
1.ต้องไปดาวน์โหลด API หรือเรียกว่า Library ของ map แต่ละตัวมาก่อน
(ผมจะยกตัวอย่างโดยใช้ google map api นะครับ)

โดย API  จะมีไฟล์มาให้เรา 2 แบบคือ ใช้กับ flash และ flex
ถ้าใช้กับ flex จะมีชื่อไฟล์ว่า map_flex_1_9a.swc
2. นำไฟล์ map_flex_1_9a.swc เพิ่มเข้าไปใน flex โดยคลิกขวาที่ Project ของเรา แล้วเลือก property
3.คลิก Flex buil path จากนั้นเลือก tab Library path
4. คลิกปุ่ม Add SWC…
แล้ว browser หาไฟล์ map_flex_1_9a.swc ของเรา แล้วคลิกปุ่ม ok เราก็เสร็จขั้นตอนการ นำ api เข้ามาใช้ใน flex แล้ว
ต่อไปเหลือแค่เรียกใช้งาน  API ตัวนี้แค่นั้นเอง

สร้าง map บน flex อย่างง่าย
———————————————————————————————–
1:   <?
xml version=“1.0″ encoding=“utf-8″?>
2:  <
mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute”>
3:  <
maps:Map xmlns:maps=“com.google.maps.*” id=“map” mapevent_mapready=“onMapReady(event)”
4:         width
=“100%” height=“100%” />
5:  <
mx:Script>

6:    <![CDATA[
7:   
8:     import com.google.maps.LatLng;
9:     import com.google.maps.Map;
10:    import com.google.maps.MapEvent;
11:    import com.google.maps.MapType;
12:
13:    private function onMapReady(event:Event):void {
14:      this.map.setCenter(new LatLng(40.736072,-73.992062),
                              14, MapType.NORMAL_MAP_TYPE);
15:    }
16:    ]]>
17: </mx:Script>
18: </mx:Application>
-----------------------------------------------------------------------------------------------
บรรทัดที่ 3: เป็นการเรียกใช้ class Map โดยตั้งชื่อว่า map และมีการเชื่องโยง xmlns กับ classs ที่อยู่ใน
          package com.google.maps.*
บรรทัดที่ 8-11: เป็นการ import class ที่จำเป็นในการแสดงผลของ map โดยจะประกอบไปด้วย
- ละติจูด ลองติจูด
_ การนำ class Map มาใช้งาน
- การดักจับเหตุการณ์ของ Map
- และชนิดของ Map
บรรทัดที่ 13: เป็นการประกาศ function เพิ่มดักจับเหตุการเมื่อ map โหลดเสร็จเรียบร้อย พร้อมใช้งาน
           จากการประกาศไว้ที่บรรทัดที่ 3 "mapevent_mapready="onMapReady(event)" 
บรรทัดที่ 14: เป็นการกำหนด ละติจูด ลองติดจูดให้กับ map โดยแสดงผลในโหลด NORMAL_MAP

แค่นี้ก็ใช้งานได้แล้วครับ ^^ ง่ายตามที่บอกไว้ไหมล่ะ

ซึ่งรายละเอียดเชิงลึกมาต่อกัน Part II นะครับ
- ข้อดีข้อเสียของ map แต่ละตัว
- ความสามารถในการโต้ตอบ และ function ต่างๆ

ติดตามกันให้ได้นะครับ...
AODTO....

การจัด css บน Flex

Posted by: aodTo on: May 5, 2009

หลายคนคงจะหน้ามือตาลาย คล้ายจะเป็นลมกันบ้างใช่ใหม่ครับ
สำหรับการทำยังไงให้ เจ้า component ต่างๆใน flex มันดูสวยเหมือนชาวบ้านเค้า

ผมก็นั่งเล่น เปลี่ยนไปเปลี่ยนมาตั้งนาน
ลองสร้างไฟล์ css ใน flex builder แล้วก็ จับ component มา preview ดู

แต่บางอย่างทำไม มันไปขึ้นเป็นรูป เป็นร่างให้
ก็ไม่เข้าใจ ส่งสัยจะใช้ css ใน flex ไม่เป็น ^^

เพราะ css บน flex มันจะไม่ใช่ css เหมือนเราจัดบนเว็บ 100%
flex จะมี compiler css ต่างหากเลย
ทำให้สามารถใส่พวก class ที่เขียนด้วย actionscript  เข้าไปได้

แล้ว flex จะคอมไพล์เป็น .swf อีกทีหนึ่ง
แม้ของเค้าดีจริงๆ ^^

อ่าวๆ นอกเรื่องๆ
ผมอยากให้เพื่อนๆลองใช้ เจ้า Flex 3 Style Explorer  V3 Beta ดูครับ
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

หรอจะหาดาวน์โหลดไปใช้งานบนเครื่องก็ได้นะครับ ตามนี้
http://blog.5d.cn/user39/riahome/upload/2007-12/Flex3StyleExplorer_V3Beta.rar

จะทำให้ชีวิตเราง่ายขึ้นเลยนะครับ
ในการจัด css
แล้วโปรแกรมจะ generate css ให้
เราก็แค่เอาไปวางใน flex ก็ใช้ได้ล่ะ
ขอให้สนุกกับการจัด css บน flex นะครับ
วันหลังจะเอาอะไรมาแนะนำใหม่

a

Blog Stats

  • 74,478 hits

calendar

November 2009
M T W T F S S
« Oct    
 1
2345678
9101112131415
16171819202122
23242526272829
30