qop's notes: Flex

顯示具有 Flex 標籤的文章。顯示所有文章

2010-03-29

寫了個方便處理 FacebookSession 的類別

承上一篇「Flash Builder 4 寫 Facebook Apps」，有自行測試者應該都會覺得在開發 Facebook appa上，除錯顯得很麻煩。必須先把 AppKey 和 AppSecret 填入程式中，測試完，拿掉 AppKey 和 AppSecret，編譯再上傳測試，中間會來來回回很多次。時間應該浪費在美好的事物上，玩 Games 應該比寫 Codes 美好 :P。
可以將 AppKey 和 AppSecret 放到一個檔案裡，再載入。URL-encoded 的文字檔是個選擇，為了讓本篇看起來有深度點(誤)，在此採用SWF。若要更有深度可以用ZIP、DOC...，也可以修改副檔名偽裝一下。
若可以載入 Key 檔，表示是在開發過程，必須連一下 Facebook 取得 Session。若無法載入 Key 檔，表示己經發佈了。

2010-03-26

Flash Builder 4 寫 Facebook Apps

Adobe Developer Center 上　Jeanette Stallons　的兩篇 Quick Start 是必看的文章：Build and test locally、Deploy on Facebook。熱騰騰的 Flash Builder 4 當然要好好利用一下 :D

Step 1: 先要有網站空間，使用免費的也行。設定一個空目錄，如：「http://www.riarock.net/fbapps/fbastutorial/」給 Facebook App 使用。

Step 2: 登入 Facebook 並在「http://www.facebook.com/developers/」建立新的應用程式。其中必填的項目為：
基本資料→應用程式名稱 :: 就是應用程式名稱，不能用 Face、FB 等混淆視聽的字眼，所以在此用了 Footbook。
畫布→畫布頁面網址 :: 如「http://apps.facebook.com/fbastutorial/」。
畫布→Canvas Callback URL :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
畫布→呈現方法 :: 設定使用「Iframe」。
聯外通→聯外通網址 :: 在這個例子設定為「http://www.riarock.net/fbapps/fbastutorial/」。
進階→沙盒模式 :: 測試時先設定為「啟用」。

Step 3: 安裝好 Flash Builder 4 之後，開一個新專案，命名為 fbastutorial。將 Facebook_library_v3.4_flex.swc 放到專案的 libs 目錄。預設的 Application 為 fbastutorial.mxml，不寫程式，直接執行。

Step 4: 將產生的 bin-debug/fbastutorial.html 複製到 src/index.html。並在指定的位置增加下面標起來的程式碼，用來取得 Facebook 給的 GET 參數。

var flashvars = {}; // ← 找到這一行，增加下面的程式碼
// *** START 增加的部份 ***
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ) {
  var strQueryString = strHref.substr(strHref.indexOf("?")+1);
  var aQueryString = strQueryString.split("&");
  for ( var iParam = 0; iParam < aQueryString.length; iParam++ ) {
      var aParam = aQueryString[iParam].split("=");
      flashvars[aParam[0]] = aParam[1];
  }
}
// *** END 增加的部份 ***

Step 5: fbastutorial.mxml 的內容如下。

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="840" minHeight="500"
      applicationComplete="init()"
 viewSourceURL="srcview/index.html">
<!-- *** 注意：這裡是用 applicationComplete，不是用 creationComplete *** -->
 
 <fx:Script>
  <![CDATA[
   import com.facebook.Facebook;
   import com.facebook.commands.friends.GetFriends;
   import com.facebook.commands.users.GetInfo;
   import com.facebook.data.friends.FriendsCollection;
   import com.facebook.data.friends.GetFriendsData;
   import com.facebook.data.users.FacebookUser;
   import com.facebook.data.users.FacebookUserCollection;
   import com.facebook.data.users.GetInfoData;
   import com.facebook.events.FacebookEvent;
   import com.facebook.net.FacebookCall;
   import com.facebook.utils.FacebookSessionUtil;
   
   import mx.controls.Image;
   
   private var session:FacebookSessionUtil
   private var facebook:Facebook;
   private var fbUser:FacebookUser;
   private var dictionary:Dictionary;
   
   private function init():void {
    // *** 一開始測試時可以先填入 API Key 和　Application Secret
    //session = new FacebookSessionUtil("<API Key>", "<Application Secret>", loaderInfo);
    session = new FacebookSessionUtil(loaderInfo.parameters.fb_sig_api_key, null, loaderInfo);
    // 取得 Facebook Session，有 Session 才有權使用 Facebook API
    facebook = session.facebook;
    // 取得 Facebook Session 並連結之後，呼叫 onSessionConnect 方法
    session.addEventListener(FacebookEvent.CONNECT, onSessionConnect);
    
    if(loaderInfo.parameters.fb_sig_added == true){
     // 有登入時，呼叫核對 Session，OK的話發出 CONNECT 事件
     session.verifySession();
    } else if(loaderInfo.parameters.fb_sig_added == false){
     // 沒登入時
     navigateToURL(new URLRequest("http://www.facebook.com/login.php?api_key="+loaderInfo.parameters.fb_sig_api_key),"_top");
    } else {
     // 沒取得資料時
     session.login();
     btnLogin.visible = true;
    }
   }
   
   private function onSessionConnect(event:FacebookEvent):void {
    // 呼叫取得朋友資料
    var call:FacebookCall = facebook.post( new GetFriends() );
    // 取得朋友資料之後，執行 onGetFriendsComplete
    call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsComplete);
   }
   
   private function onGetFriendsComplete(event:FacebookEvent):void {
    // 呼叫時用 GetFriends，取得時用 GetFriendsData
    var friendsData:GetFriendsData = event.data as GetFriendsData;
    var friends:FacebookUserCollection = friendsData.friends;
    // 將朋友的 ID 放入 uids 陣列
    var uids:Array = [];
    for(var i:int=0; i< friends.length; i++) {
     var f:FacebookUser = friends.getItemAt(i) as FacebookUser;
     uids.push(f.uid);
    }
    // GetFriends 只能取得朋友的 uid，必須呼叫 GetInfo 才能取得朋友資料
    var call:FacebookCall = facebook.post(
     // 設定要取得的資料項
     new GetInfo(uids, ["name", "pic_square"])
    );
    call.addEventListener(FacebookEvent.COMPLETE, onGetFriendsAttr);
   }
   
   private function onGetFriendsAttr(event:FacebookEvent):void {
    // 呼叫時用 GetInfo，取得時用 GetInfoData
    var getInfoData:GetInfoData = event.data as GetInfoData;
    var userCollection:FacebookUserCollection = getInfoData.userCollection;
    dictionary = new Dictionary();
    // 一一取出朋友資料
    for(var i:int=0; i<userCollection.length; i++) {
     var usr:FacebookUser = userCollection.getItemAt(i) as FacebookUser;
     var img:Image = new Image();
     // 沒有大頭貼時用預設的圖
     if(! usr.pic_square) {
      img.source = 'http://static.ak.fbcdn.net/pics/q_silhouette.gif';
     } else {
      img.source = usr.pic_square;
     }
     img.toolTip = usr.name;
     img.buttonMode = true;
     // 使用字典以方便用物件取得字串
     dictionary[img] = usr.uid;
     img.addEventListener(MouseEvent.CLICK,onImageClick);
     tilesPic.addElement( img );
    }
   }
   private function onImageClick(event:MouseEvent):void {
    var img:Image = event.currentTarget as Image;
    navigateToURL(new URLRequest("http://www.facebook.com/profile.php?id="+dictionary[img]),"_blank");
   }
  ]]>
 </fx:Script>
 
 <s:Button x="10" y="10" label="點按登入 Facebook" id="btnLogin"
     visible="false" click="session.validateLogin()"/>
 <s:Scroller x="30" y="30" width="800" height="450">
  <s:TileGroup width="100%" height="100%" clipAndEnableScrolling="true" id="tilesPic">
  </s:TileGroup>
 </s:Scroller>
 
</s:Application>

Step 6: 發佈，上傳至「http://www.riarock.net/fbapps/fbastutorial/」測試。

Step 7: 範例在「http://apps.facebook.com/fbastutorial/」，於 swf 上按右鍵選「View Source」就可以看到原始檔，並下載專案檔了。

2008-08-28

在 UIComponent 中加入 Bitmap

Flex UIComponent 的 addChild() 只能加入 UIComponent 物件，
若要從 BitmapData 弄個 Bitmap 便無法加入。

Flex3 的 SWFLoader 可以解決這個問題，例如：

var bmp:BitmapData = new BitmapData(sw, sh);
bmp.draw(global.application.t_canvas, matrix);
var swf:SWFLoader = new SWFLoader();
swf.source = new Bitmap(bmp);
this.addChildAt(swf, 0);

2008-08-04

Flex in a Week

Flex in a Week
Adobe 官方影音教學, 應該要有 5 天的教學課程, 目前只有 3 天...
真的一個星期就可以學會 Flex 嗎? 這要看「會」的定義是什麼...

2008-06-09

Marc 的教學: 建立類似 Visio 的 RIA

Creating a simple diagramming application
除了原始檔, 還有影音教學, 讚啦 :D

2008-03-22

使用 Flash CS3 製作 Flex 的組件

到 http://www.adobe.com/go/flex3_cs3_swfkit 下載 Flex Component Kit for Flash CS3 (也可以一併下載 Flex Skin Design Extensions)

使用 Extension Manager 安裝如這篇說明 Installing the Flex Component Kit for Flash CS3

nick velloff 的製作範例在 Flex Component Kit Examples, MAX 2007 Chicago Presentation

2007-12-14

AIR beta3, Flex 3 beta 3, BlazeDS beta

Adobe labs 昨天發佈的 beta

Flex 3 beta 3 應該是正式版前最後的公開測試版

BlazeDS 是新釋出的開源專案, 功能只包含部份的 LCDS(LiveCycleR Data Services) ES 功能。 AMF3 spec 也一併釋出了。
LCDS ES 應該還是商業版, 又是開源版輔助商業版的策略。

2007-11-22

載入外部類別庫

承上篇, CNS2UCS4.as 對編輯器而言檔案實在太大, 不論使用 Flash IDE 或 Flex 去編輯都是不智的選擇。用 Flex 開啟 CNS2UCS4.as 會整個當在那兒, 除非再去調整啟動時 JVM 的設定。相對的, 可以使用 Notepad++ 之類的小巧文字編輯器。
若每次使用都要用 Flash 或 Flex 編譯, 也是件痛苦的事情。可以用 command line 來編譯 (參考) :
C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\bin>compc -source-path C:\AS3_classes -include-classes CNS2UCS4 -directory=true -debug=false -output C:\AS3_classes\CNS2UCS4
-directory=true的設定可以不包成 swc, 在C:\AS3_classes\CNS2UCS4裡會有 library.swf 那正是我們要的。
FLA 第一格:

stop();
var my_this = this;
var CNS2UCS4:Class;
var ldr:Loader = new Loader();
var ldrContext:LoaderContext = new LoaderContext();
ldrContext.applicationDomain = ApplicationDomain.currentDomain;
ldr.load(new URLRequest("CNS2UCS4/library.swf"), ldrContext);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);

function onComplete(e:Event):void{
 CNS2UCS4 = getDefinitionByName('CNS2UCS4') as Class;
 gotoAndStop(2);
}

相關檔案下載