Eclipse 語系設定

參考自 "Eclipse 設定編輯畫面的語系 (解決中文亂碼問題)"


Eclipse 語系設定的優先權：

單一檔案的語系編碼 > Project 語系編碼 > Workspace 語系編碼

1) Workspace 語系編碼

• 開啟 "偏好設定" (Preferences)
• 左側選單 Generals -> Workspace
• 右側 Text file encoding 設定

2) Project 語系編碼

• 專案開啟後，選主選單 Project -> Properties
• 左側選單點選 Resource
• 右側 Text file encoding 設定

3) 單一檔案的語系編碼

• 於 Package Explorer 面版，在文字檔上按右鍵
• 於 彈跳出來的選單面版，點選 Properties
• 左側選單點選 Resource
• 右側 Text file encoding 設定

另外可依副檔名設定編碼：

• 開啟 "偏好設定" (Preferences)
• 左側選單 Generals -> Appearance -> Content types
• 右側 Content types 欄選定文字檔類型
• 右側 Default encoding 輸入編碼設定

Publishing APK for Android with ANE included by using Flash CS6

Select Menu: "File > Publish Settings > ActionScript Settings"
Select Tab: "Library path"
Click icon button: "Add New Path"
Click icon button: "Browse to a Native Extension (ANE) file"

After browsing and selecting an ANE file, the file will be added in included files ( Checking "General" tab in "AIR for Android Settings"  ).

Publishing APK by using "AIR for Android Settings" panel, the ANE will be added in the APK file.

AIR native extension for android (Java)

官方的教學文件裡有一篇 Developing native extensions for Adobe AIR, 裡面的教學算很詳盡, 但有些細節不太正確, 以下是個人初次試做的心得。

官方建議在 Flash Builder 4.6 上安裝 Android Developer Tools 並直接在上面開 3 個 projects: Android Application Project, Flex Library Project 和 Flex Mobile Project。
在 Flash Builder 開 Android Application Project 遇到的狀況:
1. 以系統管理員身分執行 Flash Builder 才能安裝 plug-in。
2. 只能安裝 Android Developer Tools, 無法安裝 Android NDK plugins (問題不明)。
3. 撰寫時要切換到 Java perspective (個人在 Flash Builder 上開 Android Application Project 有莫名的排斥 XD )。

個人是在 Eclipse 上做 Android Application Project 開發:
1. 建立專案時選 Android Application Project。
2. 取消勾選 "Create custom launcher icon", 勾選 "Make this project as a library"。
3. 選 BlankActivity ( Create Activity 應該可以取消)。
4. 將 FlashRuntimeExtensions.jar 加到 libraries 裡 ( 此 jar 位於 AIR SDK 的目錄裡, 如 C:\air_sdk_33\lib\android ) 。
5. 依劇規則撰寫類別檔之後, 我們要的 jar 檔會在 /bin 目錄裡自動生成。

Flex Library Project:
1. 在 Flash Builder 上建立 Flex Library Project。
2. 依規則撰寫類別檔之後, 我們要的 swc 檔會在 /bin 裡。
3. 如官方教學, 在專案的 /src 裡新增一個 extension.xml。例如:

<extension xmlns="http://ns.adobe.com/air/extension/3.1">
  <id>com.riarock.string</id>
  <versionNumber>1</versionNumber>
    <platforms>
      <platform name="Android-ARM">
        <applicationDeployment> 
          <nativeLibrary>shinderstringnative.jar</nativeLibrary>
          <initializer>com.riarock.shinderstringnative.extensions.ShinderStringExtension</initializer> 
      </applicationDeployment> 
    </platform>
  </platforms>
</extension>

打包成 .ane :
1. 將 Android Application Project 裡生成的 jar 檔, 放到專案的 /bin/native 目錄內。
2. 將 Flex Library Project 裡生成的 swc 檔解壓縮 (swc 其實也是 zip 格式), 將 library.swf 放到上一步的 /bin/native 目錄內 (避免打包時, 找不到 library.swf 的錯誤, 理論上打包時應該要自動解壓縮並放到 ane 檔裡才是)。
3. 如官方教學, 在 Flex Library Project 專案的 /src 內新增一個批次檔 package.bat (windows):

set adt_directory=C:\air_sdk_33\bin
set library_directory=C:\Users\shinder\Adobe Flash Builder 4.6\StringANEConnector
set native_directory=C:\Users\shinder\workspace\ShinderStringNative\bin\native

set signing_options=-storetype pkcs12 -keystore "C:\Users\shinder\Desktop\mycert_shinderlin_123456.p12"
set dest_ANE=ShinderString.ane
set extension_XML=%library_directory%\src\extension.xml
set library_SWC=%library_directory%\bin\StringANEConnector.swc

"%adt_directory%"\adt -package -tsa none %signing_options% -target ane "%dest_ANE%" "%extension_XML%" -swc "%library_SWC%" -platform Android-ARM -C "%native_directory%" .

4. 在 命令列中執行  package.bat, 就可以在相同的目錄看到 ane 檔了。
5. -tsa none 的參數可以避免打包時 "Could not generate timestamp" 的錯誤。

測試功能的專案:
1. 在 Flash Builder 上建立 Flex Mobile Project。
2. 在 Properties > Flex Build Path > Native Extensions 加入 ane 檔。
3. 在 Properties > Flex Build Packaging > Google Android > Native Extensions, 勾選 ANE 項目裡的 Package (就是發佈時要包含 ane 檔的內容)。
4. 按 Export Release Build 就可以生成 apk 檔了。

註1: jar, swc, apk 都是 zip 格式, 就可以用 7-zip 之類的工具就查看打包的內容。
註2: Permissions 應該是在 Flex Mobile Project 上設定, 而不是在 Android Application Project 上設定。

ColorBox 在 IE 上無法正常顯示

夜路走多了, 也會遇到 IE 的 ...
現在網路的測試幾乎都是 Google Chrome 一路到底，IE 能不碰就不碰，但客戶還是很在意的。
用了 jQuery 的小外掛 ColorBox，如死不死在 IE 上就是不 work，網路上找到這篇，原來很多人都碰到了，心裡的訐譙也就少了一半。
我原本 DOCTYPE 開頭為：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

改成以下就 OK 了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

測試 AIR-Kinect

跟朋友借了 Kinect 偵測器用以 survey Adobe AIR 的應用。

朋友當初買的是 Xbox + Kinect 整組, 所以沒有附電源線 ( 電源+AUX-USB轉接 )。若是單買 Kinect     會附電源線。網路上電源線大概 360 NT, 原廠的大概 800 NT, 我直接跑去光華買, 問了好幾家才問到一家有賣, 還開價 450 NT, 想說懶得等就直接買了 QQ。

目前在 Windows 上測試還滿容易的, 先到 Kinect for windows 下載並安裝 SDK, Toolkit 應該可以不用安裝 (另一種方式是使用 OpenNI, 但我一直在 windows 7 32-bit 上裝不起來, 就不想試了)。

裝好 Kinect for Windows SDK 之後, 到 as3NUI 下載 airkinect-2-core, 並解壓縮。其中 bin/airkinect-2-core.swc 和 bin/airkinect-2-core-mssdk.ane 是我們會用到的兩個檔案。

as3NUI 建議使用 Flash Builder 4.6 (或其它 IDE ) 去開發, 在這兒有 Video 教學。以下是使用 Flash CS6 來測試的個人步驟：

1. 建立一個專案目錄 kinect_01/ 。
2. 以 Flash CS6 新建 AIR 檔案 kt_main01.fla 並存放在 kinect_01/ 裡。
3. 將 airkinect-2-core.swc 和 airkinect-2-core-mssdk.ane 兩個檔案放到 kinect_01/ 裡。
4. 在 kt_main01.fla 的「ActionScript設定」裡, 分別於「元件庫設定」加入 .swc 和 .ane 檔。
5. 發佈時使用「Windows 安裝程式」不能使用「AIR套件」發佈。

以下程式參考 as3NUI 的範例，但寫在 fla 的第一影格：

import com.as3nui.nativeExtensions.air.kinect.Kinect;
import com.as3nui.nativeExtensions.air.kinect.KinectSettings;
import com.as3nui.nativeExtensions.air.kinect.events.CameraImageEvent;
import com.as3nui.nativeExtensions.air.kinect.data.User;
import com.as3nui.nativeExtensions.air.kinect.data.SkeletonJoint;
import com.as3nui.nativeExtensions.air.kinect.constants.CameraResolution;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;

var kinect:Kinect;
var kinectSettings:KinectSettings;
var bmp:Bitmap;
var skeletonContainer:Sprite;

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.nativeWindow.visible = true;

if(Kinect.isSupported()){
 bmp = new Bitmap;
 this.addChild( bmp );
 skeletonContainer = new Sprite;
 this.addChild( skeletonContainer );
 kinect = Kinect.getDevice();
 kinect.addEventListener(CameraImageEvent.DEPTH_IMAGE_UPDATE, depthImageUpdate);
 kinectSettings = new KinectSettings();
 kinectSettings.depthEnabled = true;
 kinectSettings.skeletonEnabled = true;
 kinectSettings.depthResolution = CameraResolution.RESOLUTION_640_480;
 kinect.start( kinectSettings );
 this.addEventListener(Event.ENTER_FRAME, myEnterFrame);
} else {
 trace('Kinect is not Supported!');
}

function myEnterFrame(event:Event):void {
 var user:User;
 var joint:SkeletonJoint;
 var gr:Graphics = skeletonContainer.graphics;
 gr.clear();
 for each( user in kinect.usersWithSkeleton) {
  joint = user.rightHand;
  gr.beginFill(0xFF0000);
  gr.drawCircle(joint.depthPosition.x, joint.depthPosition.y, 10);
  gr.endFill();
  joint = user.leftHand;
  gr.beginFill(0x0000FF);
  gr.drawCircle(joint.depthPosition.x, joint.depthPosition.y, 10);
  gr.endFill();
 }
}

function depthImageUpdate(event:CameraImageEvent):void {
 bmp.bitmapData = event.imageData;
}

對 Dart 的一些看法

看了 What Is Dart, and Why Should You Care? 想記錄一下自己對 Dart 的想法。
Dart 是 Google 用來取代 JS (JavaScript) 所設計的程式語言。以 Google 這樣大的公司要支持一項技術，並沒有多大的困難。但對於目前瀏覽器群雄並起的情況下，我個人並不看好它的流行。

不看好的主因：

1. 目前 Dart 並不是一項標準，也就是其它瀏覽器並沒有理由去實作它，就算是 Open Source 頂多也只能是個外掛。早期的 VBScript 是除了 JS 外的另一種選擇，但目前似乎很少人在前端使用 VBScript，原因是它只能在 IE 上執行。不過 Dart 是以取代 JS 之姿出現，改進了 JS 上的許多缺點，並不是 VBScript 可以相比的。
2. 另外，JS 最近蓬勃發展，libs 多如牛毛，要前端開發者放棄好用的 libs (如 jQuery)，除非有好的替代品，不然以目前如此年輕的 Dart 而言 libs 是無法跟 JS 相比的。

Dart 的優點：

1. 新的程式語言，對開發人員而言，除了要熟悉語法，還必須熟稔語言的 API。Dart 是 C-like，全物件導向，語法比較貼近 ECMAScript 4；若有在開發 JS，Dart 的 API 看起來也應該很容易熟悉。
2. Google 可以為 Dart 在 Chrome 建立讓人驚奇的功能。

目前我選擇 CoffeeScript 的原因是：

1. 簡潔語法和物件導向的寫法 (或許有人不喜歡沒有 {} 並且要縮排的語法)。
2. 編譯 (亦可解譯) 為 JavaScript，依然是寫 JS 用 JS 的 libs。

Yepnope.js 和 CoffeeScript 拆檔 (續)

繼上篇 Yepnope.js 和 CoffeeScript 拆檔 改良一下, 使用 CoffeeScript.load() 裡的 callBack 功能, 讓 *.coffee 可以依序載入並執行。另外, 設置了 isDeveloping 變數, 使得在開發的過程避免 *.coffee cache 的問題。

Yepnope.js 和 CoffeeScript 拆檔

Yepnope.js 和 CoffeeScript 拆檔其實是兩回事。
Yepnope.js 和 RequireJS 提供類似的功能, 都是用來載入外部的 *.js 或 *.css。Yepnope.js 可以依條件而決定是否載入, 同時也可以確保我們要的執行順序, 感覺還不錯。
但 Yepnope.js 和 coffee-script.js 搭配時, 無法直接透過 Yepnope.js 載入 *.coffee 並執行; 而是在載入 coffee-script.js 後, 以 CoffeeScript.load() 分別載入 *.coffee 檔。
以下的範例又搭配 Backbone.js, 為了讓類別定義可以自由取用, 將類別名放在 window.myproj 物件下當做屬性。

CoffeeScript Loader Plugin

require-cs 是使用 RequireJS 的 CoffeeScript Loader Plugin。
其實就是把 RequireJS 和 coffee-script.js 的功能加在一起, 而在沒編譯的情況下可以引入 *.coffee 檔執行。
其 Demo 將 CoffeeScript 分成幾個檔案, 然而皆以 RequireJS 的 module 方式撰寫, 個人比較不喜歡。
RequireJS 其實廣受使用, 排斥 module 寫法純粹是個人喜惡 :P

JavaScript ( AJAX ) 的跨網域存取

JavaScript 的跨網域存取是透過 XMLHttpRequest 物件。標準為 Cross-Origin Resource Sharing ( CORS ) , 參考資料為: XMLHttpRequest 執行 AJAX 跨網域存取。
方式是在被存取的資源設定 HTTP Header 屬性 Access-Control-Allow-Origin, 其值設定為允許存取的網域, 或以 * 表示所有網域。
以下是個 PHP 的例子:

<?php
header("Access-Control-Allow-Origin: http://www.riarock.com");
?>
Hello JavaScript Cross Domain!