我的新作品-網路KTV SingPadApp

SingPadApp - 在網頁上唱歌的軟體，歌曲來源是YouTube ，只要Browser 支援Adobe Flash Player 就可以在家免費唱KTV.

使用的技術有:
1. Google Application Engine
2. Adobe Flex SDK 4.6
3. S3BlazeDS
4. objectify-appengine

網址: http://singpadapp.appspot.com

GAE + BlazeDS 發生 Detected duplicate HTTP-based FlexSessions

在Google App Engine 裡使用Adobe BlazeDS 會發生FlexSessions 錯誤

Detected duplicate HTTP-based FlexSessions, generally due to the remote host disabling session cookies. Session cookies must be enabled to manage the client connection correctly.

解決方式:
使用修改過的BlazeDS

28個將資料轉成圖表的工具

28 Rich Data Visualization Tools  這篇文介紹了28個將資料轉成圖表的工具,其中包含了Flex, Ajax 和Silverlight 等常用的技術.

Open Source AS3 VideoPlayer

apdev-videoplayer 是一個Open Source 的AS3 VideoPlayer, 可以讓你改變外觀顏色及控制的物件.

官網: http://code.google.com/p/apdev-videoplayer/
介紹: http://apdevblog.com/new-version-of-our-as3-open-source-videoplayer/
API Doc: http://apdevblog.com/examples/apdev_videoplayer/docs/

追蹤物件內容的變更

Know Your Flex Proxy
這篇Bolg 文章介紹利用 mx.util.ObjectProxy 來追蹤物件內容的變更, 其中的影片裡有示範, 可惜沒提供程式碼, 要耐心看影片, 我覺得這是個很實用的技巧, 滿有趣的.

Flex Report

Printing with Flex
這篇Blog 文章介紹了有關Flex Report 的解決方案及相關Framework, 有興趣的朋友可以研究看看.

一篇簡介Flex 4 Skin的文章

Skinning Flex 4 slides, Uber-Basic Example Button Skin
這篇Blog 文章用投影片的方式, 簡單的介紹了Flex 4 Skin, 對Flex 4 Skin 還沒深入了解的朋友, 可以點進去看看.

我的第一個Flex作品 - Showcase

終於把我的第一個Flex作品發表出來, 這是一個圖片(產品)展示的程式, 分為前端和後端二個獨立的程式.

主要使用的技術為 Flex, BlazeDS, Spring BlazeDS, iBATIS, 資料庫使用Mysql.

Complier Flex 和 Java 程式均使用Ant.

開發用的Server 使用Tomcat 6.x. 採用標準的Java EE war檔架構.

Production Server 採用Stax 作為我的執行Java webapp程式的空間, Stax 跟 Google App Engine 很類似, 都提供執行Java程式的環境, 唯一不同的是Stax 有提供Mysql, Google App Engine 使用特殊的檔案空間來存放資料, 那還要重新學習太麻煩了, 還是用實體的資料庫及寫SQL比較方便.

圖片是使用外部連結的方式, 在外部的Server裡有放crossdomain.xml, 不然圖片的效果會無法出來, 在debug 模式下也會出現錯誤訊息.

前端展示

因為怕資料被改掉, 無法展示後端程式, 只能貼圖給大家參考
登入後端管理


圖片分類設定

圖片設定

如何印出物件的內容

Flex Quick Tip: Printing an Objects’ contents
這篇Blog文章介紹如何印出ActionScript物件的內容, 對程式debug很有幫助, 提供給大家參考.

Flash vs. Silverlight

基本上Flash 和 Flex 是相同的東西, 只是設計的方式不同,
Flash vs. Silverlight: What Suits Your Needs Best? 這篇文章可提供想要比較Flex 和 Silverlight 的人作一個參考.

Flex 3 和 Flex 4 新舊元件的差異

Adobe 有一篇Differences between Flex 3 SDK and Flex 4 SDK beta 介紹了Flex 3 和 4 新舊元件的對照, 和stats 語法的改變, 很值得參考.

介紹Google App Engine 和Flex 整合的文章

Cloud to RIA: Accessing Google App Engine (Java) Data Through Flex AMF - Part I

Cloud to RIA: Accessing Google App Engine (Java) Data Through Flex AMF - Part II

Cloud to RIA: Accessing Google App Engine (Java) Data Through Flex AMF - Part III

Google App Engine 提供了免費放程式的空間, 能夠跟Flex結合, 很值得來研究看看.

Flex 4 SDK Beta 發佈

Adobe 發佈Flex4 SDK Beta , Flex Builder 也改名叫Flash Builder.

下面是有關Flex 4的新功能的介紹:
Overview of Flex 4 (Gumbo)
Top 10 Changes in Flex 4

Flex 4 Beta 公佈後, 一堆的相關Blog介紹文章也相繼出爐, 其中有一篇Network Monitor in Flash Builder 4, 介紹監控程式的網路封包, 這個Flash Builder4的新功能讓人覺得很有趣, 等換上新版的Builder後可以試看看.

另一篇介紹Flash Builder 4 和BlazeDS整合的文章
Building Flex application for BlazeDS Remoting destinations using Flash Builder 4

很Cool 的Flex 4 Layouts

下面這個網址介紹了Flex 4 Layouts 技術, 很Cool 可以把平面轉成3D 的形式, 程式demo在影片的後半段, 要耐心看完前面的介紹.

http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/

Spring BlazeDS Integration 1.0.0.RC1 發佈

Sping 公布Spring BlazeDS Integration 1.0.0.RC1, 前一版是1.0.0.M2

主要變動是 在路徑 WEB-INF\config 下的 web-application-config.xml 檔,
remote-service tag 改命名為 remoting-destination

我在開啟Tomcat 時Spring 發生class not fund的錯誤, 所以這次的1.0.0.RC1 最少還需要com.springsource.net.sf.cglib-2.1.3.jar 和 com.springsource.org.codehaus.jackson-0.9.9.4.jar
如果你是download spring-flex-1.0.0.RC1-with-dependencies.zip
這2個jar 檔可以在 spring-flex-1.0.0.RC1\projects\ivy-cache\repository 下找到

如何取得TileList 裡資料來源的排序

最近遇到一個困擾, 想要在Tile裡的圖片做Drag 的動作, 並且把Drag 後的圖片位置取出來, 找了網路上的資料後發現好像只有TileList 能夠做Drag, 那又發現另一個問題, 找遍TileList 的API, 就是看不出來有哪個function能夠取出每個物件的index位置, 後來經過google 的搜尋, 終於找到我想要的答案, 答案在這裡, 參考裡面的getChildIndexInParent Function.

我的 TileList Sameple

admin.page.ProductImageItemRenderer 內容

重頭戲, 用 var cursor:IViewCursor = ICollectionView(imageTile.dataProvider).createCursor(); 取得TileList 裡dataProvider 的物件集合, 這已經是排序過的集合, 只要利用迴圈做index++ 取得編號即可.

Flex 利用 BlazeDS 上傳檔案

Flex 利用 BlazeDS 上傳檔案的程式範例

Client Side Flex 的程式範例



Server Side 負責接收的Java method

BlazeDS 結合Spring 的設定方法

資料參考來源 Spring BlazeDS Integration

BlazeDS Framework 本身就是讓單純的Java Bean 程式來給Flex 做遠端呼叫, 即然是Jave Bean, 那想說是不是可以利用Spring 的IoC 和AOP 等概念來做複雜的應用, 而不會讓原本寫的Java Bean 寫的更複雜, 例如在每次呼叫method 前做權限檢查, 以防止有心人士的違法呼叫, 這就可以使用Spring AOP來做到. 下面就列出BlazeDS 結合 Spring 的設定方法.

1. 準備好Spring 的相關api, 下載 Spring BlazeDS Integration API
2. 修改web.xml, 參考下圖, mark 掉的是原本BlazeDS 的寫法, 改成Spring 的Servlet


3. 設定Spring config 檔web-application-config.xml, 放在WEB-INF\config下, 提供遠端呼叫的Bean 和介面就設在這裡, 內容參考下圖.



4. remoting-config.xml 裡的Java Bean設定就由web-application-config.xml 取代. 下圖為remoting-config.xml 的內容.


5. BlazeDS 的4個xml 設定檔(services-config.xml, remoting-config.xml, proxy-config.xml, messaging-config.xml) 需放在WEB-INF\flex下.

這樣就完成了BlazeDS 結合 Spring 的設定, 如需例外的設定, 請參考Spring BlazeDS Integration


本文配合 Spring BlazeDS Integration 1.0.0.RC1 的發佈, 已修改為新的tag語法. 2009.05.17

如何在Flex Builder 3 設定使用Flex 4 Gumbo SDK

最近看到很多範例都是用Flex 4 Gumbo SDK寫的, 為了要測試Gumbo 強大的功能, 只好把還是測試版的SDK 給裝起來, 等我把Flex 學會, 也差不多是Flex 4正式版出來的時候, 那就乾脆用新的好了, 下面是安裝的步驟:

1. 到Adobe Open Source 下載GumboSDK
下載後, 把把zip檔解開

2. 用Flex Builder 3 建一個Flex project

3. 在Flex Builder 3 的Menu中選 Project\Properites\
左邊選單中選擇Flex Complier

右方選擇Config Flex SDKs, 進去後按Add button, 選擇Flex 4 SDK的目錄
然後在Flex Complier中就可以選擇Flex 4 SDK了, 記得也要修改Flash Player的版本為10.0.0

要測試的話, 可以到Flex Examples 網站, 找個Gumbo的範例來測試
要注意Gumbo 的namespace 修改成

 xmlns:mx="http://ns.adobe.com/mxml/2009"

如果有用到 <mx: 開頭的物件, 就要加上這個namespace

ActionScript 開發工具

Adobe 提供Flex Builder 3 來開發ActionScript 程式,
Flex Builder 3 有2種安裝方式
1. Flex Builder 3 安裝版, 簡單說就是next next 安裝完成可以使用了.
2. Eclipse + Flex Builder 3 plugin , 相信開發Java的人對Eclipse 不會陌生, 好處是可開發Java也可開發ActionScript, 這種方式比較有彈性.

用了一陣子Flex Builder 3 , 感覺還不錯, 也沒發現當機情況, 覺得Adobe有用心在做這套軟體.

我以前最愛用的Java IDE - IntelliJ IDEA 7.0 開始也支援ActionScript,
可惜沒有支援Visual的開發方式, 只能用文字模式, 有點不太方便, 不適合初學者使用.
也許等我寫熟了, 又可以重拾最優秀的開發工具IntelliJ IDEA.