HINA::工程幼稚園

[Famo.us] Inputs 模組 Part 2

2014-06-10T14:48:50+08:00

接續著講滑鼠、觸控等其他的模組。

MouseSync

顧名思義，就是跟滑鼠控制相關的同步事件模組，預設值有以下項目，

MouseSync.DEFAULT_OPTIONS = {
    direction: undefined, // 方向
    rails: false, // 指定單一方向移動
    scale: 1, // 滑鼠軌跡放大倍率
    propogate: true // 在文件中加入 mouseleave 事件監聽
};

常數

這兩個常數是給 direction 所使用的，

MouseSync.DIRECTION_X
MouseSync.DIRECTION_Y

方法

getOptions 取得設定值
setOptions 設定設定值

事件

start
update
end

ScrollSync

關於捲軸的同步事件模組，實際上他也會監聽滑鼠的滾輪事件，預設值有，

ScrollSync.DEFAULT_OPTIONS = {
    direction: undefined, // 方向
    minimumEndSpeed: Infinity, // 捲軸移動結束時的移動速度
    rails: false, // 指定單一方向移動
    scale: 1, // 移動軌跡放大倍率
    stallTime: 50, // 結束移動後多久（單位 ms）觸發 end 事件
    lineHeight: 40 // 捲動行高
};

常數

這兩個常數是給 direction 所使用的，

ScrollSync.DIRECTION_X
ScrollSync.DIRECTION_Y

方法

getOptions 取得設定值
setOptions 設定設定值

事件

start
update
end

TouchSync

這個模組在 TouchTracker 有稍微提及，他監聽了觸控的三個動作，並且使用 TouchTracker 將觸控資料記錄下來，基本的預設值有，

TouchSync.DEFAULT_OPTIONS = {
    direction: undefined, // 方向
    rails: false, // 指定單一方向移動
    scale: 1 // 觸控軌跡放大倍率
};

常數

這兩個常數是給 direction 所使用的，

TouchSync.DIRECTION_X = 0;
TouchSync.DIRECTION_Y = 1;

方法

getOptions 取得設定值
setOptions 設定設定值

事件

start
update
end

PinchSync, ScaleSync, RotateSync

手勢控制事件同步模組，用於雙指捏入與滑開的控制，基本上 PinchSync 與 ScaleSync 是相當類似的東西，只不過 ScaleSync 控制了元件的縮放，差別僅止于此。

而 RotateSync 則是雙指之間的旋轉，其三者的預設值皆相同，

預設值有，

PinchSync.DEFAULT_OPTIONS = {
    scale: 1 // 雙指移動放大倍率
};

ScaleSync.DEFAULT_OPTIONS = {
    scale : 1 // 雙指移動放大倍率
};

RotateSync.DEFAULT_OPTIONS = {
    scale : 1 // 雙指移動放大倍率
};

方法

getOptions 取得設定值
setOptions 設定設定值

TwoFingerSync

雙指移動的幕後功臣，上述三個雙指移動的事件同步模組，都是由這裡擴展出去的，由於只是作為一個可擴展的模組，所以他沒有任何的預設值，都是提供方法讓其他人使用。

靜態方法

calculateAngle(posA, posB) 計算兩點的 atan2（反正切弦）角度（單位是弧度
calculateDistance(posA, posB) 計算兩點間的距離
calculateCenter(posA, posB) 計算兩點間的中心點

私有方法

以下三個私有方法，皆由 EventHandler.setInputHandler 接管，

handleStart(event)
handleMove(event)
handleEnd(event)

GenericSync

這個輸入事件同步模組，是先前介紹所有模組的集大成。也就是說，你可以用這一個模組來掌控所有前面所敘述過的模組。

register 靜態方法

GenericSync 提供了一個註冊的靜態方法，當你要使用相關模組時，你必須要把這些模組註冊過，才能夠使用。

define(function(require, exports, module) {
    var GenericSync = require('famous/inputs/GenericSync');
    var ScrollSync = require('famous/inputs/ScrollSync');
    var TouchSync = require('famous/inputs/TouchSync');
    GenericSync.register({scroll : ScrollSync, touch : TouchSync});

    var sync = new GenericSync(['scroll', 'touch'], {direction : GenericSync.DIRECTION_X});
});

方法

setOptions 設定設定值
pipeSync 將已註冊的同步事件模組傳遞至設定的物件上
unpipeSync 在指定物件上註銷同步事件模組
addSync 加入指定的同步事件模組

範例

這個例子會在畫面上畫出一個 500x5500 的紅色長方形，當你滑鼠在紅色區塊滾動時，會觸發事件 start，你可以利用事件傳回的資料，來任意移動你的長方形區塊（或是做其他的事情

define(function(require, exports, module) {
    // import dependencies
    var Engine  = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var GenericSync = require('famous/inputs/GenericSync');
    var ScrollSync = require('famous/inputs/ScrollSync');
    var TouchSync = require('famous/inputs/TouchSync');

    GenericSync.register({scroll : ScrollSync, touch : TouchSync});

    var mainContext = Engine.createContext();

    var sync = new GenericSync(['scroll', 'touch'], {direction : GenericSync.DIRECTION_X});

    sync.on('start', function() {
        console.log(arguments);
    });

    var surface = new Surface({
        size: [500, 5500],
        properties: {
            backgroundColor: 'red'
        }
    });

    surface.pipe(sync);
    mainContext.add(surface);
});

[Famo.us] Inputs 模組 Part 1

2014-06-09T22:28:13+08:00

在 Famo.us 當中，提供了不少關於輸入（input）的模組，主要是用於接收使用者的操作輸入，諸如滑鼠、捲軸、觸控等等。

輸入控制

常見的輸入控制，除了滑鼠與觸控外，捲軸與手勢動作也包含在這些模組當中，主要有下列輸入模組可以使用，

非輸入模組

Accumulator 累加器，他提供一組累加功能，單純的使用 setter/getter 來加入或是取得你所累加的數字（或是數字陣列
TouchTracker 追蹤觸控輸入，當觸控元件並非選取狀態時，追蹤每一個觸控軌跡

同步事件模組

這些模組並不能直接使用在物件上，必須要與事件控制合併使用才會有效果，

GenericSync 通用輸入（包含滑鼠、觸控與捲軸輸入
MouseSync 滑鼠輸入
PinchSync 雙指捏入手勢
RotateSync 雙指旋轉手勢
ScaleSync 雙指縮放手勢（與 PinchSync 類似
ScrollSync 滑鼠滾輪輸入
TouchSync 觸控輸入
TwoFingerSync 雙指輸入（包含 PinchSync,RotateSync 與 ScaleSync

直接使用的模式檔案

亦即，這些檔案並非以 AMD 的模組形態存在，他只是單純初始化一個模式，只要載入檔案就會生效，

inputs/DesktopEmulationMode.js 只要是觸控裝置，他會取消所有滑鼠動作（恰巧與他的名字相反
inputs/FastClick.js 模擬觸控行為下的快速點擊，用於加速判別是否為 click 動作

Accumulator

累加器的使用方式很簡單，

// 你必須要傳入數字，陣列，或是他也接受 Transitionable 物件
// 第二個參數是事件名稱，亦即觸發該事件，會更新累加器
var accumulator = new Accumluator([0,0], 'update');

accumulator.emit('update', { delta: 10 });

console.log(accumulator.get()); // [10, 10]

TouchTracker

該模組本身會將事件傳回 TouchSync 與其相關同步事件模組上面，你可以在 TouchSync 上面看到私有變數 _touchTracker 就是由該模組所回傳的事件。

事件

touchstart
touchmove
touchend
touchcancel
unpipe 如果觸發該事件，會把自身所儲存的軌跡資料清除

方法

track 你必須要傳入一個觸控物件（Object）該物件必須包含 identifier 屬性

如果以下述範例來說明的話，這個物件會包含這些值，

{
  count: 1, // 觸控數量
  history: [ {...}, {...}, {...}, ... ], // 所有移動過的資料物件，裡面的物件跟這個物件結構相同
  identifier: 0, // 觸控數量唯一識別值
  origin: Surafce, // 觸控事件觸發來源
  timestamp: 140232312327, // 時間戳記
  x: 339, // 觸控坐標點 x
  y: 160 // 觸控坐標點 y
}

使用範例

直接使用的話，你必須要有個元件才行，

define(function(require, exports, module) {
    // import dependencies
    var Engine  = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var TouchTracker = require('famous/inputs/TouchTracker');

    var mainContext = Engine.createContext();

    var touchtracker = new TouchTracker();

    var surface = new Surface({
        size: [500, 500],
        properties: {
            backgroundColor: 'red'
        }
    });

    surface.pipe(touchtracker);

    touchtracker.on('trackmove', function() {
        console.log(arguments);
    });

    mainContext.add(surface);
});

下回待續 XDD

[Famo.us] SlideShow 模組開發

2014-06-05T23:11:05+08:00

身為農夫，種點菜也是很合理的。

Slideshow

概念是這樣，我們利用左右兩邊的頁面來置換中間的頁面，所以只需要兩段 Transform 來做這個動作。這個東西其實用 Famo.us 幾個模組就能兜出來，只是為了方便起見，所以才把它打包成模組方便使用。

Famo.us 模組

由於 Famo.us 是使用 AMD 的方式來載入外部組件，所以基本上，就是寫一個屬於你自己的元件來使用。一個基本元件構成需要這幾個部分，

define(function(require, exports, module) {
  'use strict';

  function Slidershow(options) {
  }

  Slidershow.DEFAULT_OPTIONS = {
  };

  Slidershow.prototype.commit = function commit() {
    return this.container.render();
  };


  Slidershow.prototype.render = function render() {
    return [
      {
        target: this.container.render()
      }
    ];
  };

  module.exports = Slidershow;
});

其中我們會看到 commit 與 render 兩個方法，這兩個方法在模組當中是屬於私有方法。這是 Famo.us 將元件交給 Engine 的時候所需要的方法。目前官方並沒有特別去解釋這兩個方法應該如何使用，不過萬能的原始碼還是會告訴我們一些端倪。

其中，如果你的 render 並不是返回 RenderNode 所需陣列，那你就必須要使用 commit 方法來返回單一 render 後的結果。

意思就是說，以下這兩種方法式可以交互使用的，

define(function(require, exports, module) {
  'use strict';

  function Slidershow(options) {
    this.id = Entity.register(this);
  }

  Slidershow.DEFAULT_OPTIONS = {
  };

  Slidershow.prototype.commit = function commit() {
    return this.container.render();
  };

  Slidershow.prototype.render = function render() {
    return this.id;
  };

  module.exports = Slidershow;
});

define(function(require, exports, module) {
  'use strict';

  function Slidershow(options) {
  }

  Slidershow.DEFAULT_OPTIONS = {
  };

  Slidershow.prototype.render = function render() {
    return [
      {
        target: this.container.render()
      }
    ];
  };

  module.exports = Slidershow;
});

渲染方式

是的，你可以不使用 commit，但是你不能省略 render 這個方法。但是，其中 render 所返回的物件，根據原始碼觀落陰得知，大概是下列元件（這一點尚未跟官方證實，

{
  align: null,
  opacity: 1,
  origin: [0, 0],
  size: null,
  target: 0,
  transform: [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0]
}

其中 align 代表原件對齊的方式，僅接受二維陣列，例如 [0, 0] 或是 [0.5, 0.5] 這樣的寫法。而 origin 則是原件對齊的基準點，基本上是 [0, 0] 代表左上角。這兩個設定必須要同時存在，才會發生效用，如果其中一方是 null 則物件不會受到對齊的影響。

opacity 則是指定整個物件的透明度，而 size 目前完全看不出來有什麼干擾，而 transform 則是接受 Famo.us 的 Tramsform 所產生的 Matrix3D 陣列，如果你想自己手寫也沒什麼問題。

而 target 就是最終要交給 RenderNode 去做產出的東西，如果你的 target 只是單純指定一個 id 或是字串，那麼你就必須要有 commit 來返回你需要演算的結果（也就是可渲染物件（ renderable

所以，要就是使用 render 方法返回所有你需要渲染的物件，不然就是利用 commit 來返回單一渲染物件，差別僅在此。

初始化

首先，我們需要一個工具來管理我們的設定值，所以可以直接使用 OptionsManager 來達到我們的需求，然後，我們再給他一個基本的 ContainerSurface 好讓 render 可以去渲染這個元件，

define(function(require, exports, module) {
  'use strict';

  var OptionsManager       = require('famous/core/OptionsManager');
  var ContainerSurface     = require('famous/surfaces/ContainerSurface');

  function Slidershow(options) {
    this.options = Object.create(Slidershow.DEFAULT_OPTIONS);
    this._optionsManager = new OptionsManager(this.options);

    if (options) this.setOptions(options);

    this.container = new ContainerSurface();
  }

  Slidershow.prototype.setOptions = function setOptions(options) {
    this._optionsManager.setOptions(options);
  };

  Slidershow.prototype.render = function render() {
    return [
      {
        target: this.container.render()
      }
    ];
  };

  Slidershow.DEFAULT_OPTIONS = {
    width: window.innerWidth,
    height: 500,
    dotNav: true,
    controlNav: true,
    transition: {
      duration: 600,
      curve: 'easeInOut'
    }
  };

  module.exports = Slidershow;
});

然後我們就做完了（咦！咦！咦！

小結

實際操作請參考這裡，

http://famous.hinablue.me/SlideShow/

原始碼請到我的 github 上面抄（誒

https://github.com/hinablue/famous.tw/blob/master/SlideShow/js/Slidershow.js

[Famo.us] Event 核心與模組介紹

2014-06-05T22:59:58+08:00

EventHandler, EventEmitter 這兩項核心很常出現在其他的模組當中，主要是負責事件控制、監聽與觸發，但是他跟 DOM 就沒有關係，單純的是綁在模組或是元件上面。

EventEmitter 核心

是 EventHandler 核心所依賴的核心（沒有之一，用於將事件往下擴散（或是將其子元件事件綁定在自己身上。

方法

emit(type, event) 觸發一個事件 type，並將該方法傳送到底下所屬的所有子處理程序
on(type, handler) 綁定一個事件，並指派一個子處理程序 handler
addListener 等同於 on
removeListener(type, handler) 移除一個事件，並且移除其子處理程序 handler
bindThis(owner) 指定自身的擁有者（通常為另一個物件或是模組

EventHandler 核心

依賴 EventEmitter 核心，做到更多事件控制的模組。他本身集合了事件與處理程序（callback）的分配，將二者放到陣列裡面互相對應，除了往下（downstream）傳遞之外，也能往上（upstream）監聽。

靜態方法

這兩項靜態方法，多是用於模組擴展時使用，目的是要讓你可以指派一個處理程序，讓他接收指定物件的事件觸發動作，或是接收指定物件的事件輸出。

EventHandler.setInputHandler 事件輸入（觸發
EventHandler.setOutputHandler 事件輸出（控制器輸出

方法

emit, trigger 同 EventEmitter 的 emit
on, addListener 同 EventEmitter 的 on
pipe 將自身的事件指派給指定的物件
unpipe 取消上述指派
subscribe 監聽來自上層物件的事件
unsubscribe 取消上述監聽

EventHandler 補充

整個 Famo.us 所有的事件控制都由這兩個模組延伸出去，其中 EventHandler 占了大多數，這個模組有兩個靜態方法，個別都是一種混插（mixin）的方法，

setInputHandler 可接受 trigger, subscribe, 與 unsubscribe
setOutputHandler 可接受 pipe, unpipe, on, addListener, 與 removeListener

這兩個靜態方法多用於模組擴充上面，意即，當你自行開發的模組需要使用事件的時候，可以設定兩組參數來接收這兩個靜態方法。而這兩組方法可以將所有的事件綁定在你所指定的控制器身上（通常是自己。

以 Scrollview 為例，

this._eventInput = new EventHandler();
this._eventOutput = new EventHandler();

this._eventInput.pipe(this.sync);
this.sync.pipe(this._eventInput);

EventHandler.setInputHandler(this, this._eventInput);
EventHandler.setOutputHandler(this, this._eventOutput);

方法

emit, trigger 針對監聽者群觸發事件（包含自定事件
pipe, unpipe 針對監聽者群 A 發送（或取消）指定事件給 B 監聽者群
on, addListener 針對監聽者群註冊事件
subscribe, unsubscribe 針對監聽者群 A 訂閱（或取消）來自 B 監聽者群的指定事件

pipe 與 subscribe 可以解釋為，

// 以下兩種寫法，結果相同
objectA.pipe(objectB);
objectB.subscribe(objectA);

EventEmitter 方法補充

emit 針對監聽者觸發事件
on, addListener 針對監聽者註冊事件
removeListener 針對監聽者移除事件

注意與 EventHandler 不同的地方，在於 EventHandler 是針對所有 同類型事件 的監聽者群去做動作，而 EventEmitter 只會針對 同類型事件 的單一監聽者做動作。兩者的面相並不太一樣，簡單來說，如果是以模組擴展為原則，那麼就是直接使用 EventHandler 就可以了。

至於 EventEmitter 能做什麼，只要是你模組當中，只需要單一事件操控（或者說不想讓整個事件對外擴散或是外部有權控制，那麼用 EventEmitter 也許就能符合你的需求。

Events 模組

EventMapper 將事件控制方法指派給所指定的方法
EventFilter 過濾事件控制方法與傳入資料，符合指定條件才會觸發事件
EventArbiter 設定事件控制器的模式

EventMapper

必須要傳入一個物件，這個物件需要擁有等同于 EventEmitter 或是 EventHandler 模組的條件，或是必須要有 emit 方法（此為必要條件之一

該模組的功能是，將所傳入的事件與其資料，透過所指定的物件，去觸發自定的事件控制器，舉個例子來說，當我觸發 click 的時候，我可以透過 EventMapper 將這個 click 事件，在物件中觸發，並去執行其他的程序。

有點類似於事件控制的路由器的角色。

EventFilter

必須要傳入一個條件程序，該條件程序必須返回 true 或 false，用以過濾所傳入的事件是否允許被觸發，這個條件程序的寫法為，

var condition = function( type, data ) {
    var type = type; // 所傳入的事件，例如 click
    var data = data; // 所傳入的事件資料

    return true;
};

這個模組最主要是用於判別哪些事件，是否要在元件中被觸發。可以有效的控制透過 EventHandler 所傳來的事件，讓事件有執行與否的決定權。

EventArbiter

設定事件模式，這個模組有兩個特殊方法，

setMode 將事件派發指定為該模式
forMode 建立一個事件派發模式（或是返回該模式所屬的事件控制，如果該模式已存在

這個模組的功用，在於設定整個事件傳送過程中，事件被傳遞到哪一個位置上，所設計出來的。舉個簡易的例子來說，

var eventArbiter = new EventArbiter();

eventArbiter.forMode('start');
eventArbiter.forMode('step1');
eventArbiter.forMode('step2');
eventArbiter.forMode('end');

eventArbiter.setMode('start');

上述它會自動產生四個 EventHandler 的模組，分別在四種模式 start, step1, step2, 與 end，然後，我們將他設定在 start，則該模組（eventArbiter）會派發事件給所屬的 EventHandler，並且會觸發一個 change 事件，傳出 {from: startMode, to: mode} 這樣的資料。

[Famo.us] Transform 核心模組

2014-06-05T22:52:25+08:00

Transform 是整個 Famo.us 動態效果的核心，預設全部都使用 matrix3d() 來做，有關於 matrix 的部分，可以參考 MDN 的說明。

Transform 核心

由於是使用 matrix3d 的關係，所以 Transform 最終輸出的結果，都會是一組 16 個數字的陣列（它是由一組 4x4 的矩陣轉換而來，上述提及的 MDN 說明當中，有詳細的數學說明，有興趣的人可以去研究一下

這個核心可以做的事情很多，最主要就是幫你把 matrix3d 繁瑣的運算換成方法，他也提供了不少運算用的方法，如果你有需要的話。

常見方法

由於整個 Transform 都是靜態方法，所以直接呼叫就會返回相對應的陣列。

Transform.translate(x, y, z) 三軸方向移動
Transform.scale(x, y, z) 三軸方向縮放
Transform.rotate(phi, theta, psi) 三軸方向旋轉，x 代表 phi，y 代表 theta，z 則是 psi，傳入的並不是角度，而是弧度（radians），亦即 Math.PI * 45 / 180 代表旋轉 45 度。
Transform.rotateX(phi), Transform.rotateY(theta), Transform.rotateZ(psi) 將上述的 rotate 拆分成三個軸
Transform.skew(phi, theta, psi) 三軸傾斜
Transform.perspective(focusZ) 取得 Z 軸透視（單位 px

運算方法

Transform.multiply4x4(a, b) 兩組 Transform 矩陣相乘，a, b 必須皆為 Transform 所產生的 4x4 矩陣（一組 16 個數字陣列
Transform.multiply(a, b) 快速矩陣相乘（將矩陣最後一列改為 [0, 0, 0, 1] 相乘
Transform.thenMove(m, t) 回傳矩陣依照 t 方向移動後的結果矩陣
Transform.moveThen(v, m) 先依照 v 方向運算移動矩陣，之後再將運算結果做一次 thenMove 的運算
Transform.thenScale(m, s) 回傳矩陣依照 s 方向縮放後的結果矩陣
Transform.rotateAxis(v, theta) 回傳矩陣依照指定軸 v 順時鐘旋轉 theta 的結果矩陣，指定軸 v 必須為一組陣列，包含三個繞軸的單位向量（unit vector representing the axis）
Transform.aboutOrigin(v, m) 返回一個相對於變形原點的矩陣，v 是為原點，m 為變形後的一組 Transform
Transform.getTranslate(m) 返回一組移動向量，m 為變形後的一組 Transform
Transform.inverse(m) 返回一個 m 的仿射矩陣的反矩陣
Transform.transpose(m) 返回一個 m 的轉置矩陣
Transform.interpret(M) 將 M 拆解成 translate, rotate, scale 與 skew 元件
Transform.average(M1, M2, t) 回傳一組 M1, M2 加權平均的陣列，t 為權數
Transform.build(spec) 將 translate, rotate, scale 與 skew 元件組合為 Transform 陣列
Transform.equals(a, b) 比較 a, b 是否相同
Transform.notEquals(a, b) 比較 a, b 是否不相同
Transform.normalizeRotation(rotation) 將三軸旋轉的結果侷限在 -pi ~ pi 之間，rotation 必須是三個浮點數所組成之陣列

屬性方法

Transform.inFront 是一組陣列，目的是將目標物件依照 Z 軸往上拉昇一個位階
Transform.behind 與上述相反，往下推降一個位階

簡易範例

http://famous.hinablue.me/transformExamples/

[Famo.us] RenderNode 核心說明

2014-06-05T22:48:57+08:00

RenderNode 算是整個 Famo.us 對於元件樹狀結構的核心，他專門用來處理你的元件，在樹狀結構中應該要怎麼長是靠他來處理。

RenderNode 核心

這個核心很特殊，你應該也幾乎沒有機會能直接使用他。他的初始化必須要是一個可渲染（renderable）的元件，而這個元件經過初始化後，自身就會轉換成 RenderNode 物件，來提供給 Famo.us 的引擎去做渲染動作。

什麼叫做可渲染元件？官方定義的有，

core/Group
core/RenderNode
core/Scene
core/Surface
core/View
core/ViewSequence
surfaces/ContainerSurface
views/EdgeSwapper
views/GridLayout
views/HeaderFooterLayout
views/Lightbox
views/RenderController
views/ScrollContainer
views/Scroller
views/Scrollview
views/SequentialLayout
widgets/Slider
widgets/ToggleButton

以後會不會增加，不確定。

渲染

渲染方式是依照堆疊在他的 _child 中的物件分層次，透過 ElementAllocator 將物件產出到 DOM 裡面去，順序這件事情之前在 Famo.us 官方有人提出討論過，實驗的結果，好像是先 var 先贏！

我實際就沒有太深入去研究這個順序問題，不過對於 DOM 來說，誰先誰後好像又會牽扯到 z-index 的問題，官方的解法是要你使用 Transform 去解決，不過，個人覺得，如果你真的很在意 DOM 順序，請在 new 任何可渲染物件的時候，留意一下上下順序（由上到下，DOM 就由先到後

方法

add 加一個子元件（一定要有一個可渲染物件
get 取得第一個子元件，或是自己
set 覆寫所有子元件，或是自己
getSize 第一個子元件（或自己）的尺寸

對於 add 有一個特別的使用方式（對於 Modifier 來說），舉例子來看會比較清楚，

define(function(require, exports, module) {
    var Engine     = require("famous/core/Engine");
    var Surface    = require("famous/core/Surface");
    var Modifier   = require("famous/core/Modifier");
    var RenderNode = require("famous/core/RenderNode");

    var mainContext = Engine.createContext();

    var renderNode = new RenderNode();
    var modifier = new Modifier({
        origin: [0.5, 0.5]
    });

    var surface = new Surface({
        size: [100, 100],
        content: "Secondary",
        properties: {
            lineHeight: "100px",
            textAlign: "center",
            backgroundColor: "red"
        }
    });
    renderNode.add(modifier).add(surface);

    console.log(renderNode.get()); // You will get the Modifier, not Surface.

    mainContext.add(renderNode);
});

你會發現，你用 get() 的時候，會拿到 Modifier 而非 Surface，這一點是因為 Modifier 可以被加入到任何 RenderNode 物件裡面，所以即便他並不是可渲染物件，他還是可以存在於 RenderNode 當中，這是比較特別的地方。

好處？好處就是動態效果製作時，我可以直接由 RenderNode 當中取出 Modifier，而不用另外找地方儲存（這樣還得用迴圈去運算，費時耗工

使用時機

通常 RenderNode 只是提供一個容器給物件來做存放，在開發 widgets 或是特殊的 views 的時候比較常見，由於 get() 方法相當方便（如上所述，對於 Modifier 相當友善），所以，如果你不是需要特殊物件的效果，也可以使用 RenderNode 來儲存你的元件。

[Famo.us] Scene 核心說明

2014-06-05T22:46:32+08:00

這個核心模組是用於提供一個已經定義好的結構化場景，定義什麼呢？

Scene 核心

說穿了，他等同於一組 Modifier 物件，定義了以下這些事情，

translate
rotate
rotateX
rotateY
rotateZ
rotateAxis
scale
skew

以上必須要是 Transform 模組的相對應物件。

matrix3d

以上必須要是一個 Function 用以返回 matrix3d 的數組（陣列數組

由於 Scene 本身會產生 RenderNode 的物件，所以有關於 RenderNode 的相關設定他也可以延伸使用，它會將相關的設定，套用到場景中的子元件身上。

另外，你需要一個 id 來識別這個場景。

方法

這個模組只有三種方法，

create 字面上叫做建立，實際上，他會複製一個場景
load 讀取定義好的場景屬性，但是不真實建立一個場景物件
add 將物件加入對應的場景子元件設定當中

簡單範例

以下範例取自官方 Famo.us Example 並且加入額外的修改，

define(function(require, exports, module) {
    var Engine     = require("famous/core/Engine");
    var Surface    = require("famous/core/Surface");
    var Scene      = require("famous/core/Scene");
    var Transform  = require("famous/core/Transform");

    var mainContext = Engine.createContext();

    var sceneDefinition = {
        id: "root",
        opacity: 1,
        target: [
            {
                transform: Transform.translate(10, 10),
                target: {id: "foo"}
            },
            {
                transform: [
                    {rotateZ: 0.1},
                    {scale: [0.5, 0.5, 1]}
                ],
                origin: [0.5, 0.5],
                target: {id: "bar"}
            }
        ]
    };

    var myScene = new Scene(sceneDefinition);

    var surface = new Surface({
        size: [400, 400],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            lineHeight: "400px",
            textAlign: "center",
            backgroundColor: "red"
        }
    });

    var surfaceTwo = new Surface({
        size: [400, 400],
        content: "Secondary",
        classes: ["grey-bg"],
        properties: {
            lineHeight: "400px",
            textAlign: "center",
            backgroundColor: "red"
        }
    });

    var surfaceThree = new Surface({
        size: [200, 200],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            lineHeight: "200px",
            textAlign: "center",
            backgroundColor: "black",
            color: "white"
        }
    });

    var surfaceFour = new Surface({
        size: [200, 200],
        content: "Secondary",
        classes: ["grey-bg"],
        properties: {
            lineHeight: "200px",
            textAlign: "center",
            backgroundColor: "black",
            color: "white"
        }
    });

    var surfaceFive = new Surface({
        size: [100, 100],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            lineHeight: "100px",
            textAlign: "center",
            backgroundColor: "white"
        }
    });

    var surfaceSix = new Surface({
        size: [100, 100],
        content: "Secondary",
        classes: ["grey-bg"],
        properties: {
            lineHeight: "100px",
            textAlign: "center",
            backgroundColor: "white"
        }
    });

    var mySceneClone = myScene.create();
    mySceneClone.id["foo"].add(surfaceFive);
    mySceneClone.id["bar"].add(surfaceSix);

    mainContext.add(mySceneClone);

    myScene.id["foo"].add(surfaceThree);
    myScene.id["bar"].add(surfaceFour);

    mainContext.add(myScene);

    var newScene = new Scene()
    newScene.load(sceneDefinition);

    newScene.id["foo"].add(surface);
    newScene.id["bar"].add(surfaceTwo);

    mainContext.add(newScene);
});

我們以上面的例子來說明，首先我們建立一個場景，叫做 root，然後賦予一個屬性，叫做 opacity: 1，接著開始設定子元件的特性（簡單來說，就是統一設定個別的 Modifier

var sceneDefinition = {
    id: "root",
    opacity: 1,
    target: [
        {
            transform: Transform.translate(10, 10),
            target: {id: "foo"}
        },
        {
            transform: [
                {rotateZ: 0.1},
                {scale: [0.5, 0.5, 1]}
            ],
            origin: [0.5, 0.5],
            target: {id: "bar"}
        }
    ]
};

最後，把對應的子元件加入場景，

myScene.id["foo"].add(surface);
myScene.id["bar"].add(surfaceTwo);

你也可以先新增一個場景，然後再讀入設定，

var newScene = new Scene()
newScene.load(sceneDefinition);

或者是，複製一個場景（複製的功能不會複製底下的物件，所以，你必須把物件加回去

var mySceneClone = myScene.create();
mySceneClone.id["foo"].add(surfaceFive);
mySceneClone.id["bar"].add(surfaceSix);

額外屬性

還記得剛剛的 opacity: 1 嗎？我說過 Scene 其實是一組類似 Modifier 模組的東西，所以，你可以用這一類的屬性來直接套用到全部的子元件上面，例如，

var sceneDefinition = {
        id: "root",
        opacity: 1,
        origin: [1, 1], // 全部子元件都給他 origin: [1, 1] 的設定
// 後略

[Famo.us] Surface 與 Modifier 核心模組

2014-06-05T22:40:39+08:00

Surface 與 Modifier 是最常使用的模組，先前有提過，這次稍微詳細介紹一下。

Surface 核心模組

這個模組預設會產生一組

的 DOM 元素，然後再進行操作。初始化的參數可以有，

size 是個陣列 [width, height] 單位是 px，必須要是數字
classes 也是陣列，這裡的內容會是
元素的 class 屬性值
properties 必須是一個 Object，內容是 CSS 設定值
content 內容是 HTML 字串

可改變的設定

elementType 預設是 div，你也可以用 span 他就會建立一個的 DOM 元素
elementClass 預設是 famous-surface，你也可以改掉

模組方法

on, removeListener, emit, pipe, unpipe 與 EventHandler 有關，主要就是用於監聽事件，或是將自身事件傳遞給指定模組
setProperties, getProperties 設定與取出 properties 內容
addClass, removeClass 設定與移除單一 class
setClasses, getClassList 設定多組 class 與取得目前 classes 列表
setContent, getContent 設定與取得 content 內容
setOptions 改變 options 初始值
getSize, setSize 設定與取得 size

Modifier 核心

之前有提過 Modifier 的一些使用說明，不過最近一次官方更新，有些東西被棄用了（至於要怎麼取代，或是用什麼取代，就沒有特別提及。

 class="famous-surface" style="/* Modifier 會在這裡發生 */">

其他的就不再贅述，先來看看可以使用的屬性與方法，

transform CSS3 變形設定，必須傳入 Transform 物件
opacity 透明度，數字，範圍由 0 ~ 1
origin 對齊，詳情請看之前的介紹
size 尺寸，詳情請看之前的介紹

方法

transformFrom 設定變形
opacityFrom 設定透明度
originFrom 設定對齊定位
sizeFrom 設定尺寸

以下方法將來會棄用

setTransform
setOpacity
setOrigin
setSize
halt
getTransform
getFinalTransform
getOpacity
getOrigin
getSize

棄用超多的（雖然目前還可用，不過如果有用到，得改掉才行。基本上，在 Modifier 原始碼當中，對於棄用這些方法，都有給建議的替代方式，不過大多都是說，

叫你去原先設定 Transform 的物件去拿

我不知道這樣是好是壞，對於 Modifier 來說，他不用扛那麼多東西在身上或許是好，不過對於開發者來說，還得多準備一個地方來放對應的 Transform 或是 TransitionableTransform 其實也挺傷腦筋的。

[Famo.us] Engine, Context 與 ElementAllocator

2014-05-12T12:25:29+08:00

這三樣東西是組成 Famo.us 引擎的主要功臣，負責 rFA 與 DOM 的溝通橋樑。

Engine 核心

在 Famo.us 當中，這個核心做的事情其實並不會太多，大抵上就是這些，

設定 rFA
監聽 resize
強迫取消 touchmove 事件（使用 preventDefault()
使用 EventHandler 監聽事件
使用 OptionsManager 設定預設值，並且監聽其 change 來更新元件

Engine 方法

pipe, unpipe, on, emit 對於 EventHandler 相關模組的操作
getFPS 取得目前 Engine 的 FPS
setFPSCap 設定 FPS 上限
setOptions 設定 Engine 的屬性
createContext 建立一個 div 的 Engine 框架，所有元件都必須被 add 在這個框架裡面。這個框架是採用核心模組 Context 來建立，所以會回傳 Context 這個元件。
registerContext 用來註冊一個 Context 元件，並且在下一次 loop 的時候出現在畫面上
nextTick 傳入下一個 loop 所需要執行的 function（它只會執行一次
defer 跟 nextTick 很類似，但是是延遲執行（如果每次運行時間小於 MAX_DEFER_FRAME_TIME 的話，預設是 10（單位秒

Engine 監聽事件

prerender 在做 nextTick 與 defer 之前會先 emmit
postrender 做完 nextTick 與 defer 之後才會 emmit

FPS

預設的 Engine 所使用的 FPS 是 1000 / frameTime，而這個 frameTime 的來由，是經過每次 loop 的執行時間去相減（單位是秒，也就是說，

frameTime = 目前時間 - 上一次運行的時間戳記

所以 Engine 並不是真的運行在 60 fps 底下的，而是依照你的瀏覽器執行時間來決定目前的 FPS 該是多少。而，setFPSCap 則是在這個取得 frameTime 的方法之前，做一個限制，

// skip frame if we're over our framerate cap
if (frameTimeLimit && currentTime - lastTime < frameTimeLimit) return;

也就是說，如果你設定 Engine.setFPSCap( 60 ); 就代表這個 frameTimeLimit 是 1000 / 60，如果運行的 loop 小於這個時間（速度過快，那麼這一次的 loop 就不會被執行了。

使用範例

以下是 Engine.createContext, Engine.registerContext 操作範例，

define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Context = require('famous/core/Context');
  var Surface = require('famous/core/Surface');

  var elem = document.createElement('div');
  elem.style.backgroundColor = 'black';
  elem.style.width = '100px';
  elem.style.height = '100px';
  document.body.appendChild(elem);

  var context = new Context(elem);
  Engine.registerContext( context );

  var mainCtx = Engine.createContext();

  var surface = new Surface({
    size: [100, 100],
    properties: {
      backgroundColor: 'red'
    }
  });

  mainCtx.add(surface);
});

輸出結果在畫面上，你可以看瀏覽器所產生的 DOM 會有兩個

，大概會長這樣，

 style="background-color: black; width: 100px; height: 100px;">
 class="famous-container">
   style="transform-origin: 0% 0% 0px; opacity: 0.999999; z-index: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); background-color: black; width: 100px; height: 100px;" class="famous-surface">

這樣應該可以理解 Engine.createContext 與 Engine.registerContext 的差別。Engine 核心中，最主要的就是 Context 核心處理 DOM 的部分。而處理 DOM 的部分則是 ElementAllocator 來負責，這裡就分別說明。

ElementAllocator 核心

這個核心專門在處理 DOM 中的元素，當你初始化這個物件的時候，預設就會拿到 document.createDocumentFragment() 來當作初始物件（或者是，你也可以傳入一個 DOM 的物件給他

但是，由於這個物件的方法，在官方說明下都是屬於私有方法，單獨要拿出來用也不是不行。只是用法有別。主要這個物件，是用來儲存 DOM 的物件，

allocate 用於儲存 DOM 物件
deallocate 用於取出儲存的 DOM 物件
migrate 把原本所屬的 DOM 子元件，轉移到新的 DOM 父元件底下
getNodeCount 計算所屬的子元件數量

底下的例子就會在 document.body 底下加入一個空的

元素。

  var body = new ElementAllocator(document.getElementsByTagName('body')[0]);
  body.allocate('div');

不過既然他是私有物件，就不再多贅述了。

Context 核心

這個核心主要是將 RenderNode 打包成物件並且將它放到 DOM 裡面。

這個核心包含了，

ElementAllocator
RenderNode
EventHandler

方法

add 在這個物件內加入一個 renderable 物件
migrate 與 ElementAllocator 類似，將這個物件搬移到另一個物件下
getSize 取得該物件的寬度與高度
setSize 設定該物件的寬度與高度，如果沒有傳入值，就是 document 的尺寸
getPerspective 取得該物件的透視深度（單位 px
setPerspective 設定物件透視深度，允許三個傳入值，分別是 perspective，transition 與 callback，其中 transition 必須要是 Transitionable 物件
on 監聽事件
emit 觸發事件
removeListener 移除監聽事件
pipe, unpipe 將自身事件指定（或取消）到其他物件上

使用方式

這一個元件必須要傳入一個 DOM 的元件，舉個簡單的例子來看，

  var elem = document.createElement('div');
  elem.style.backgroundColor = 'black';
  elem.style.width = '100px';
  elem.style.height = '100px';
  document.body.appendChild(elem);

  var ctx = new Context(elem);

  console.log(ctx);

這個 ctx 物件就可以用來控制 DOM 元件了。

[Famo.us] ViewSequence 核心說明

2014-05-12T12:24:10+08:00

標題與內容不符（不解釋

ViewSequence 核心

他是用來儲存一個序列化資料的模組，所以雖然字面上是 ViewSequence，但是骨子裡跟 View 沒有關係。

初始化方法

這個模組初始化可以傳入這幾個數值（使用 Object 的方式傳入，

array 傳入一個陣列，這個陣列用來儲存你的物件。
index 定義第一個元素，這個模組用這個元素來當作第一個被 render 的物件
loop 當巡迴過整個陣列之後，決定是否要返回第一個（或最後一個）元素
firstNode 第一個元素
lastNode 最後一個元素

這個模組建立後，裡面會再建立一個結構函示，名稱雖為 Backing，不過外部使用時，是用 _ 來取得。

模組方法

getValue(n) 取得第 n 個物件
setValue(n, value) 將第 n 個物件設定為 value
reindex(start, removeCount, insertCount) 重新定義索引值
getPrevious 取得目前索引值的上一個物件
getNext 取得目前索引值的下一個物件
getIndex 取得當前的索引值
toString 將目前索引值輸出為字串
unshift(value) 從開頭新增一個物件
push(value) 從尾端新增一個物件
splice(index, howMany) 從第 index 物件開始切割，然後移除掉 howMany 個物件
swap(other) 交換物件位置，與模組設定中的 .index 物件交換位置
getSize 取得該 .index 物件的尺寸

簡易操作

  var surf1 = new Surface({
    size: [120, 100],
    properties: {
      backgroundColor: 'black'
    }
  });
  var surf2 = new Surface({
    size: [130, 100],
    properties: {
      backgroundColor: 'black'
    }
  });
  var surf3 = new Surface({
    size: [140, 100],
    properties: {
      backgroundColor: 'red'
    }
  });
  var surf4 = new Surface({
    size: [150, 100],
    properties: {
      backgroundColor: 'black'
    }
  });

  var views = new ViewSequence({
    array: [surf1, surf2, surf3, surf4],
    index: 2
  });

  var mainCtx = Engine.createContext();

  mainCtx.add(views.getNext());

[Famo.us] Views 模組說明

2014-05-12T12:21:31+08:00

Views 模組，但是其實還是有跟 Views 無關的東西，大概有動畫特效的都可以算在這裡。只是有部分比較多功能的東西，放在 widgets 裡面去了。

Views 模組

views/* 的模組，與 core/View 核心部分有些許不同，他並不是都會提供 RenderNode 給你使用，我這裡簡易說明一下底下的模組，

views/Deck 提供一個 SequentialLayout 並且讓他有開啟以及關閉的動畫效果。
views/Flipper 提供一個滑動翻頁的動畫效果
views/GridLayout 提供一個 [x, y] 的版面配置
views/HeaderFooterLayout 提供一個 header, content, footer (由上到下) 的版面配置
views/Lightbox 提供一個燈箱的動畫效果
views/ScrollContainer 提供一個包含 Scrollview 的 ContainerSurface 元件
views/Scrollview 提供一個捲軸容器
views/SequentialLayout 提供一個縱向或是橫向的版面配置元件

動畫或行為類型的擴充模組

views/EdgeSwapper 提供一個 RenderController 控制元件處理邊界滑入元件
views/RenderController 提供一個 RenderNode 的控制器
views/Lightbox 提供一個燈箱行為的 RenderNode 控制器
views/Scroller 提供一個捲軸行為的 RenderNode 控制器

這樣的模組在 Famo.us 裡面還蠻常見的，官方也沒告訴你要怎麼用，實際的使用案例裡面也找不到相關的使用方式（大概只能自己從原始碼中猜測…

簡單的說，上述幾個模組，可能是拿來擴充，或是發展成其他的模組而存在的。如果你單純要拿來用，那麼他大概可以這麼去理解他，

提供一個 Transitionable 的元件，但是不是實體（也不是 DOM 實例
必須要提供一個 RenderNode 元件才能使用
本身必須加入一個已存在的實體或元件
除了 Scroller 以外，其他皆由 show 這個方法來控制

共通特性

擴充模組，除了 ScrollContainer 會提供一個 ContainerSurface 元件外，其他的皆不會真的提供你可使用（顯示）的元件，也就是說，如果你只是 new 上述幾個模組，把它加入 Engine，那麼你的 DOM 會是空的。

以下稍微說明一下各個模組的簡易使用方式，

Deck

由於 views/Deck 是由 views/SequentialLayout 擴充而來，所以設定方式相同，只是預設值有些許差異。他產出的排列方式也很奇特，各位可以自行實驗，

define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var View = require('famous/core/View');
  var Deck = require('famous/views/Deck');
  var Utility = require('famous/utilities/Utility');

  var mainCtx = Engine.createContext();

  var myDeck = [];
  var deck = new Deck({
    direction: Utility.Direction.X
  });
  deck.sequenceFrom(myDeck);

  for( var i = 0; i < 10; i++) {
    view = new View();
    surf = new Surface({
      size: [100, 100],
      content: i,
      properties: {
        backgroundColor: 'rgba(255, 0, 0, 0.7)'
      }
    });
    mod = new Modifier({
      origin: [0, 0],
      transform: Transform.translate(0, 0, 0)
    });

    view.add(mod).add(surf);
    myDeck.push(view);
  }

  mainCtx.add(deck);
});

EdgeSwapper

從右邊滑入元件，如果不斷的給他 .show() 並送元件給他，他就會交換（一個淡入，一個淡出

define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var View = require('famous/core/View');
  var EdgeSwapper = require('famous/views/EdgeSwapper');

  var mainCtx = Engine.createContext();

  var edgeSwapper = new EdgeSwapper();

  var surf1 = new Surface({
    size: [100, 100],
    content: 'This is a book.',
    properties: {
      backgroundColor: 'rgba(255, 0, 0, 0.7)'
    }
  });

  var surf2 = new Surface({
    size: [100, 100],
    content: 'This is a pen.',
    properties: {
      backgroundColor: 'rgba(0, 255, 0, 0.7)'
    }
  });

  edgeSwapper.show(surf1);

  setTimeout(function() {
    edgeSwapper.show(surf2);
  }, 2000);

  mainCtx.add(edgeSwapper);
});

Flipper

顧名思義，就是製作一個可以前後翻頁的元件，預設動畫翻起來頗醜的 Orz

define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var View = require('famous/core/View');
  var Flipper = require('famous/views/Flipper');
  var Utility = require('famous/utilities/Utility');

  var mainCtx = Engine.createContext();

  var flipper = new Flipper();

  for( var i = 0; i < 2; i++) {
    view = new View();
    surf = new Surface({
      size: [100, 100],
      content: i,
      properties: {
        backgroundColor: 'rgba(255, 0, 0, 0.7)'
      }
    });
    mod = new Modifier({
      origin: [0, 0],
      transform: Transform.translate(0, 0, 0)
    });

    view.add(mod).add(surf);
    if (i === 0) {
      flipper.setFront(view);
    } else {
      flipper.setBack(view);
    }
  }

  mainCtx.add(flipper);
});

Lightbox

燈箱控制元件，跟 EdgeSwapper 操作方法一樣，只是他多了 hide() 方法，可以讓你把燈箱藏起來。範例就不贅述了。

RenderController

這一個算是控制所有動作的核心，除了有 hide() 與 show() 之外，另外還有六個控制效果的方法，使用方式跟 Lightbox, EdgeSwapper 一樣，而六種方法分別是 inTransformFrom, outTransformFrom, inOriginFrom, outOriginFrom, inOriginFrom, outOriginFrom，全部都是必須傳入 Function 或是 Transitionable 來進行操作。

SequentialLayout

提供一個容器，讓你水平或是垂直放入元件，自身不會產生任何的實體 DOM 元素。

GridLayout

同 SequentialLayout 但是是以 [col, row] 的方式切割你的畫面（或是父元件，自身同樣不產生任何實體 DOM 元素。

HeaderFooterLayout

同 GridLayout 但是，只產生 header, content, footer 三組容器（由上至下，自身不會產生任何的實體 DOM 元素。這三組的範例待會一併說明。

Scroller

模擬一個捲軸，但是不監聽任何動作，單純將元件依照指定方向排列。使用 positionFrom 方法來控制捲軸的捲動。

Scrollview

同上，但是加入了滑鼠，觸控等動作的監聽，等同於原生捲軸的操作方式。但是，元件並不會產生系統的捲軸控制器。

ScrollContainer

同上，但是分別提供了一組 Scrollview 與 ContainerSurface 給你使用，你不需要額外做任何 pipe 或是 subscribe 的動作，就能產生一組捲軸控制元件，因為有 ContainerSurface 所以他會有一組實體的 DOM 元件。

[Famo.us] View 核心說明

2014-05-12T12:19:07+08:00

見山不是山，大概就是在說這個 View 模組。

View 核心

核心模組 core/View 是用於提供一個或是多個 RenderNode 的容器給框架引擎使用，它本身在輸出的時候並不會產生 DOM 實例，所以你在畫面上其實是看不到 View 這個模組的。

先解釋一下 RenderNode 這個東西，

整個框架系統中，只要是產出與畫面有關的模組，都算是一種 RenderNode
核心 core/RenderNode 只包含簡單的方法，一切由其他元件自行擴展
核心 core/View 就是由 RenderNode 擴展而來

View 的擴展包含有，

EventHandler
OptionsManager
RanderNode

那麼，哪一些東西算是 RenderNode 的容器或是會產生 RenderNode 的呢？

以下物件算是 RenderNode 的容器，

core/View, core/ViewSequence, views/* 核心與其模組
core/Surface, surfaces/* 核心與其模組
wigets/* 模組
core/RenderNode 自身或是自行延展的模組

以下物件會產生 RenderNode

core/Context
core/Engine
core/RenderNode
core/Scene
core/View
views/Flipper
views/GridLayout
views/HeaderFooterLayout
views/Lightbox
views/RenderController

請注意！上述物件所帶有的 RenderNode 並不是在相同的物件屬性上，舉例來說，你在 core/View 中能透過 _node 取得 RenderNode 物件（核心原件大部份都使用 _node），但是在 views/Flipper 裡，frontNode 與 backNode 才是 RenderNode。

所以，如果把 RenderNode 放進不是 RenderNode 的容器裡面會怎樣？

報告學長，沒有畫面

View 核心操作解說

先來看個例子，

define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var View = require('famous/core/View');

  var mainContext = Engine.createContext();

  var view = new View();

  var surf = new Surface({
    size: [200, 200],
    content: "test",
    properties: {
      backgroundColor: "red"
    }
  });

  view.add(surf);

  mainContext.add(view);
});

上述這個例子，你有沒有加入 View 輸出的結果都會一樣。原因在於，Engine 的 createContext 所提供的 Context 模組，自身就會提供 RenderNode，所以當然有沒有加上 View 差異就不大了。

既然有沒有 View 好像都無差別，那麼使用時機到底在哪裡？

當模組必須也只接受 RenderNode 或其容器的時候
使用 views/* 其下所有模組的時候
轉換、包裝或是擴充模組
自行開發的模組

上述頭兩項應該沒有異議，第三點提出來說明一下。或許你會問，包裝子元件我不也可以使用 ContainerSurface 嗎？其實可以（因為 ContainerSurface 也是 RenderNode（僅止於擴展方式不同

舉例來說，如果需要一個捲軸物件，

define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var View = require('famous/core/View');

  var ContainerSurface = require('famous/surfaces/ContainerSurface');
  var ScrollView = require('famous/views/ScrollView');

  var mainContext = Engine.createContext();

  var views = [];

  var view = new ScrollView();
  view.sequenceFrom(views);

  for (var i = 0; i < 50; i++) {
    var _container = _createContainer(view, i);

    views.push(_container);
  }

  function _createContainer(view, i) {
    var surface, view = view, i = i;

    surface = new Surface({
      size: [100, 100],
      content: 'box '+ i,
      properties: {
        backgroundColor: "red"
      }
    });

    surface.pipe(view);

    return surface;
  }

  mainContext.add(view);
});

我們就單獨看 _createContainer 這個 function，如果改寫成這樣，

function _createContainer(view, i) {
  var surface, _view, view = view, i = i;

  surface = new Surface({
    size: [100, 100],
    content: 'box '+ i,
    properties: {
      backgroundColor: "red"
    }
  });

  surface.pipe(view);

  _view = new View();

  _view.add(surface);

  return _view;
}

他還是可以運作，而且輸出的 HTML 與上述第一個例子完全一樣。或者，我們換成 ContainerSurface，

function _createContainer(view, i) {
  var surface, container, view = view, i = i;

  surface = new Surface({
    size: [100, 100],
    content: 'box '+ i,
    properties: {
      backgroundColor: "red"
    }
  });

  container = new ContainerSurface({
    size: [100, 100]
  });

  container.pipe(view);

  container.add(surface);

  return container;
}

畫面結果會跟上述兩個例子完全一樣，但是 HTML 會有不同（請參考 #1 所述關於 ContainerSurface 的部分

那什麼情況不行，例如，你把 View 扔給 Surface（注意！扔給 ContainerSurface 是合法的

  // 這樣做，你的畫面會是空的（而且也不會有錯誤訊息
  var view = new View();
  var surface = new Surface();

  surface.add(view);
  mainContext.add(surface);

擴展應用

由於 View 自身有 EventHandler 模組，所以在自行開發模組的時候，通常可以擴展這個核心來使用。而由於 View 本身與畫面呈現又有高度相關性，所以直接擴展使用其實是很方便的做法。

以下取自我的 500px 範例其中一段，

  // 上略

  function PhotosView() {
    View.apply(this, arguments);

    _createContent.call(this);
    this.createPhotoRowView = createPhotoRowView;
  }

  // 中略
  container.add(this.scrollView);
  this._add(mod).add(container);

  // 下略

自行擴展出一個 PhotosView 模組，自己把 container 加入，最後返回給 Engine 去做最後輸出。View 最大的用意在於，讓開發者自行去擴展所需要的輸出模組，或是做出更複雜（或龐大）的元件控制，最後收斂在 View 這個容器裡面，再輸出給 Engine 處理。

[Famo.us] Surface 核心說明

2014-05-12T12:16:09+08:00

簡單的核心說明，隨時會補充（因為不知道官方還會不會新增東西

Surface 核心模組

這個模組預設會產生一組

的 DOM 元素，然後再進行操作。初始化的參數可以有，

size 是個陣列 [width, height] 單位是 px，必須要是數字
classes 也是陣列，這裡的內容會是
元素的 class 屬性值
properties 必須是一個 Object，內容是 CSS 設定值
content 內容是 HTML 字串

可改變的設定

elementType 預設是 div，你也可以用 span 他就會建立一個的 DOM 元素
elementClass 預設是 famous-surface，你也可以改掉

模組方法

on, removeListener, emit, pipe, unpipe 與 EventHandler 有關，主要就是用於監聽事件，或是將自身事件傳遞給指定模組
setProperties, getProperties 設定與取出 properties 內容
addClass, removeClass 設定與移除單一 class
setClasses, getClassList 設定多組 class 與取得目前 classes 列表
setContent, getContent 設定與取得 content 內容
setOptions 改變 options 初始值
getSize, setSize 設定與取得 size

本文同步更新

https://github.com/hinablue/famous.tw/issues/9

[Famo.us] 安裝與 Surface, Modifier 基本操作

2014-05-12T11:48:35+08:00

Famo.us 原始碼可以在官方的 github 下載

如果你已經可以進入 Famo.us University，那這裡或許可以跳過。

基本使用

Famo.us 是基於 AMD 的架構來撰寫，且搭配使用 require.js，所以稍微了解一下這兩個東西會比較容易上手。

安裝

你可以從官方的 github 把專案抓下來直接使用，也可以用 nodeJS 來安裝，這裡介紹一下 nodeJS 的安裝方法，或者是參考官方的 Install

sudo npm install -g yo grunt-cli bower generator-famous
mkdir newProject && cd newProject
yo famous

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

You're using the fantastic Famo.us generator.
[?] Your project name: (newProject)   // 輸入專案的名稱（不打也行
[?] Your project description: e.g. Seed project to get started with Famo.us   // 輸入專案的描述（不打也行
[?] Would you mind telling me your username on Github?  // 輸入你的 github 名稱（不打也行

跑了一陣子之後，他會把需要的東西全部安裝完畢，最後用 grunt serve 來啟動服務。他會啟動瀏覽器連線到 localhost:1337，同時支援 livereload，所以你可以直接修改 js 檔案來看到效果。

檔案會放在 app/src/main.js 裡面。

顯示元件

建構一個畫面，我們需要 Engine, Surface 這兩個模組，所以，這樣就能夠在畫面上產生一段文字

define(function(require, export, module) {
  var Engine = require('famo/core/Engine');
  var Surface = require('fame/core/Surface');

  var mainContext = Engine.createContext();

  var surf = new Surface({
    // 這個 size 代表這個 Surface 是 200x200 的正方形
    size: [200, 200],
    content: "Hello World"
  });

  mainContext.add(surf);
});

然後，我們可以利用 Modifier 這個模組，來修改或是製作這個 Surface 的效果

define(function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var Transform = require('famous/core/Transform');

  var mainContext = Engine.createContext();

  var surf = new Surface({
    // 這個 size 代表這個 Surface 是 200x200 的正方形
    size: [200, 200],
    content: "Hello World"
  });

  var mod = new Modifier({
      // transform 表示套用一組 Tramsform 模組的效果
      transform: Transform.translate(100, 0, 0),
      // origin 表示把底下的元素放在螢幕某個位置，0.5, 0.5 代表正中央
      origin: [0.5, 0.5]
  });

  mainContext.add(mod).add(surf);
});

Surface 核心模組

它是屬於核心模組之一，原始碼在 core/Surface.js 可以查看。預設所使用的 Mockup 是

元素，預設的類別樣式名稱為 famous-surface，這兩項是無法被修改的。可以傳入的屬性有，

properties 用來設定 CSS 樣式
content 傳入的內容，允許使用 HTML
classes 傳入類別樣式名稱，必須使用陣列
size 傳入元件的尺寸，陣列，規格為 [ width, height ]，必須單純為數字（單位 px，比較特別的是，他可以傳入 undefined 這個關鍵字，代表意義是 100%

Modifier 核心模組

核心之一，原始碼在 core/Modifier.js 可以查看。它可以當作是一種效果的套用（或是下層元素的濾鏡）來看，樹狀結構以上面的例子來看，會長成這樣

mainContent
    |
 Modifier
    |
 Surface

這一個 Modifier 並不會產生任何的元素，相反的，它會是一種 CSS Style 屬性，套用在 Surface 的元素上面，以 HTML Mackup 來解釋就是這樣，

 class="famous-surface" style="/* Modifier 會在這裡發生 */">

它可以傳入的屬性有，

transform 這個傳入值必須要是 Transform 模組
opacity 這個傳入值是透明度，範圍在 0 ~ 1
origin 這是代表我要將所屬元素設定在畫面的哪個位置，它是一個陣列 [ 垂直位置, 水平位置 ]
size 這個尺寸跟 Surface 的尺寸設定相同，但是會覆蓋掉 Surface 所設定的尺寸

origin 是一種九宮格的形式，所代表的相對位置如下表，

	左	中	右
上	`[0, 0]`	`[0.5, 0]`	`[1, 0]` \|
中	`[0, 0.5]`	`[0.5, 0.5]`	`[1, 0.5]` \|
下	`[0, 1]`	`[0.5, 1]`	`[1, 1]` \|

模組	使用的 HTML Tag	可傳入屬性設定
Surface		同上述 Surface 部分
CanvasSurface		`canvasSize` 為一陣列 `[ width, height ]`
ContainerSurface		同 Surface
ImageSurface		`content` 必須為圖片的 URL
InputSurface		`placeholder`, `value`, `type`, `name`，同時 `content` 是無效的
VideoSurface		同 Surface 但是多了 `autoplay` 是布林值

小結

本文在我的 famous.tw 上面同步刊出。

[Famo.us] 新一代 HTML5 Web Application JavaScript Framework

2014-05-11T11:15:52+08:00

其實開始研究已經好一陣子了，只是想說 Blog 好久沒有文章，所以拿來灌水一下，免得乾旱過頭。我剛開始寫的時候，很多人都在問，到底 Famo.us 是什麼東西？

其實我本來也不理解，直到我聽到有人跟我說 Z>B…

Famo.us

這個 JavaScript Framework 是早在 2012 年發表展示的一個專案，一開始的 hello world 應用程式，可以看看這個影片，

這個影片當初造成轟動，但是等到 Famo.us 正式發表的時候，已經是今年四月的事情了。

Famo.us 是一套由 JavaScript 所撰寫的 HTML5 Web Application Framework，用意在於讓開發者更便利的去製作一個，更貼近於原生應用程式（Native App）的工具。當初在 Beta launch 的發表會時，有團隊用兩個禮拜，加上 Famo.us 做出類 DNA 的應用程式（已跪，可惜影片目前找不到了（因為當初是用 Hangout，而且好像只有開頭有錄影而已，後面的 Demo 都石沈大海了

效能

根據官方對於 Render Tree 的解釋，因為是用來做應用程式，所以整個 DOM 的架構，跟我們平常在做 Web 的概念不太一樣。他是很整齊的樹狀支，而且有很乾淨且嚴格的規範，亦即是把整個 DOM 給扁平化，所以在整個 Render Tree 的結構上，效能上就會有提升。

當然，如果你硬是要拿來跟原生應用程式比，我也沒有什麼意見，畢竟這取向不太相同。你可以看看這個利用 Famo.us 開發的 Facebook Pages 的範例，

開源

Famo.us 的原始碼，都可以在官方的 github 上面找到。原本他們好像不是要做成開源，不過後來改變策略了，全部都以 MPL 的方式開放原始碼。

所以目前官方都還有持續在更新，因為還是有許多地方持續在改進。像是我之前遇到的 Chrome 捲軸中風問題，後來就不藥而癒了，中間好像 Famo.us 的某些模組有更新（其實我也不確定是不是被修掉，不過起碼，之後再測試的時候就沒遇到問題了。

小結

Famo.us 還是很新的東西，目前註冊登入後的機制，好像也沒有完全開放。我只是不巧註冊 Famo.us 的時間比較早（Number in line 3406，所以比較早一點可以進去看到其他東西。

有興趣的人可以直接去 fork 官方的原始碼，再搭配我在 github 上面寫的簡單介紹，應該可以很快上手（我的文章都寫在 Issue 裡面，請不要跑錯地方，謝謝

目前也開了一個 FB 社團，希望有興趣的人可以一起進來研究。

[AWS] 使用 Uploadify 直接上傳 S3

2014-03-25T20:23:46+08:00

其實以前知道 S3 可以直接上傳檔案到 Bucket 上面去，只是都沒有專案需要這方面的實作，所以就放置 play 了好一陣子。

直到我夢到一個副本級專案。

AWS S3 Browser-based Uploads Using POST

官方有說，

但是，依照 Amazon AWS 文件的慣例就是，文件基本上只是參考用，實際上會遇到的小毛病，也得要遇到了才知道。

Note

MUST BE UTF-8 encoded（~~不解釋！~~ 由於是使用 Client Browser 的方式去傳遞，所以只要是 FormData 送出的資料都必須要是 UTF-8 encoded，即便像我用 node-browser 這類的東西傳送也是一樣
非檔案內容不得超過 20KB
如果要上傳檔案，file 必須是表單的 最後一項
可以使用特殊變數 ${filename}，當你上傳檔案時，這個變數會自動置換成你上傳的檔案名稱

Policy 的規則

除了必須要設定過期時間 expiration 與過濾條件 conditions 之外，過濾條件必須依循以下規則：

必須要有 acl, bucket, $key
除了特定標籤外，也可以任意使用欄位標籤
任何的 欄位標籤 必須使用 start-with 設定
預設的 success_action_status 會回傳 HTTP 201 要注意
如果使用 success_action_redirect 則你的主機需要設定 Access-Control-Allow-Origin
如果你要用 JavaScript 讀取 header，要設定 Access-Control-Expose-Headers

Uploadify HTML5 版本的問題

~~由於我不會寫 ROR 所以，~~以下以 PHP 來舉例

php
$aws_secret = 'amazon access secret';

$policy = base64_encode(
    '{'.
        '"expiration": "'.date("Y-m-d\TH:i:s\Z", time()+60*30).'",'.
        '"conditions": '.
        '['.
            '{"bucket": "myuploader"},'.
            '{"acl": "public-read"},'.
            '["starts-with", "$key", "static/"],'.
            '["starts-with", "$Content-Type", "image/"],'.
            '["starts-with", "$folder", "static/"],'.
            '["starts-with", "$filename", ""],'.
            '{"success_action_status": "200"},'.
            '["content-length-range", 0, '.(int) $this->AWS['size'].']'.
        ']'.
    '}'
);
$signature = base64_encode(hash_hmac(
    'sha1', str_replace(array("\n","\r"), '', $policy), $aws_secret, true
));

以上的東西請勿照抄！其中， $key 是 S3 檔案結構中上載的鍵值，簡單來說 http://myuploader.s3.amazonaws.com/xxxx 其中的 xxxx 就是 $key 值，它可以是資料夾加上檔案名稱，或是直接是檔案名稱。

然後我們比對一下前端的 JS 需要的部分，

formData           : {
                        'AWSAccessKeyId'            : 'amazon access key',
                        'key'                       : 'static/',
                        'acl'                       : 'public-read',
                        'policy'                    : '',
                        'signature'                 : '',
                        'folder'                    : 'static/',
                        'filename'                  : (new Date()).getTime(),
                        'success_action_status'     : '200'
                     },
fileObjName        : 'file',

以上是 Uploadify 的 HTML5 版本的部分設定（我有付費購買 HTML5 版本的，如果沒有買的人請自行購買！然後，因為 Uploadify 原始碼中，組合 FormData 的順序，是依照 formData 設定的順序來做，這個方法 並不符合 AWS S3 的規則（如果要上傳檔案，file 必須是表單的 最後一項

所以我 Hack 掉了 Uploadify 的原始碼，自己包了一個來用，至於免費的 Flash 版本，要改成 S3 直接上傳網路上有一堆，請自行 Google！

JavaScript 簡易實作程式碼

我們用簡易的 FormData 來說明，

PHP 運算 policy 與 signature 請參考上面的部分，

var __formData  = {
                'AWSAccessKeyId'            : 'amazon access key',
                'key'                       : 'static/'+(new Date()).getTime()+'.jpg',
                'acl'                       : 'public-read',
                'policy'                    : '',
                'signature'                 : '',
                'content-type'              : 'image/jpeg',
                'folder'                    : 'static/',
                'filename'                  : (new Date()).getTime(),
                'success_action_status'     : '200'
             };

var file = document.querySelector('input[type="file"]');
var xhr = file.xhr = new XMLHttpRequest();

var formData = new FormData();

for( x in __formData ) {
    formData.append(x, __formData[x]);
}

/* 檔案一定要在最後才加入 FormData，不然錯誤會噴到行政院！ */
formData.append('file', file);

xhr.open('post', 'http://myuploader.s3.amazon.com', true);

xhr.addEventListener('load', function(e) {
    if (this.readyState == 4) {
        if (this.status == 200) {
            if (file.xhr.responseText !== 'Invalid file type.') {
                // 到這裡全部完成
            } else {
                // 就是錯誤
            }
        } else if (this.status == 404) {
            // 找不到太陽餅
        } else if (this.status == 403) {
            // 利大於弊
        } else {
            // 謝謝指教
        }
    }
});

xhr.send(formData);

以上範例不保證實作得出來（誒

S3 bucket CORS Configuration

以下設定僅供參考，

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>Location</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

裡面的就是我剛剛提到的 Access-Control-Expose-Headers 這個部分，如果你想用 JavaScript 做什麼壞事的話，當然不保證安全就是了，因為 Header 這種東西，聽說也是可以偽造的（茶

小結

這個月 AWS 帳單又要爆了！

[LOMO] New Petzval Art Lens

2014-03-20T13:15:39+08:00

一開始是在 kickstarter 注意到這個專案，後來 flyingV 上面也出現了，所以就跑去贊助。

等了一年，終於來了！

關於這顆鏡頭

關於這顆鏡頭的來歷，可以去參考一下 Wiki，或是看看募資平台上面的介紹（老實說比 Wiki 寫的還詳細，這次的募資製作商也拍了一部關於這顆鏡頭的短片，

Lomography x Zenit New Petzval Lens: Now Available For Pre-Order! from Lomography on Vimeo.

現在你可以在 Lomography 的商店上面買到這顆鏡頭，當然，當初贊助的會有比較特別的服務，像是在鏡頭上刻字之類的。

外觀

首先，開頭是 LCA+ 20th special limited edition，這類似滿額禮，贊助金額超過某個門檻就會送你一台，不過我沒想到這個限量版這麼限量（貌似只有 1000 台，但是我看光在 kcikstarter 贊助的人就超過了說

正面！

背面！

限量是殘酷的！

接著就是重頭戲，Petzval Art Lens！

規格！生產號碼在最右邊。

打開來裡面是一本手冊。

鏡頭本尊！是銅製鏡身，連鏡頭蓋都是銅製的，只有鏡尾接環蓋子是塑膠。

插刀式光圈片，左邊第一片是全遮蔽，平常沒用的時候是插入這一片。不過，他專案裡面說會有四種特殊光圈插刀，可是我這次沒收到，不知道是為什麼？

這是正面，因為他最大光圈是 f/2.2 所以這顆眼睛很大顆！

接環，這是 Canon 接環，他的接環其實就是另外裝上去的（這樣也很合理，所以，其實他還是可以出其他接環的鏡頭，如果他願意量產的話。

古銅色真的很像藝術品！

這是附件之一，它是一個真皮皮套，專門用來放鏡頭的。

接下來就是細部照片，這次全部的照片都是由小米 3 拍攝，無修改，直接上傳 flickr。

外面這個其實是遮光罩，是用螺牙鎖在鏡身上面，客製化刻字也是刻在這上面的。

最後這是贊助版本，所以會有刻字服務，你可以刻上 50 個字上去。官方說，這些刻字都是請師父，每顆鏡頭一個一個刻上去的！真是超有心啊！

實拍

我才剛拿到，改天再補吧（誒，只是說，看到有刻字感覺頗爽，一定要丟上 blog 來充一下版面的啊！

Caline 我愛你啦！

[Web] Web Components 初探

2014-01-22T14:09:02+08:00

其實這好像不是新聞，只是因為他還在 Working Draft 階段，目前的支援度也不高，所以資源相對少。然後，@Paul 寫了一個超強模組，詳見：Module 開發 – illuTrans

所以好像也該來筆記一下。

前言

Google 當初在 Polymer 就是主打 Web Components 這個東西的應用。只是因為太新，所以目前能應用的層面還不算多。況且好像 AngularJS 太紅，所以感覺 Polymer 就有點乏人問津的感覺。

這邊有 Google IO 在去年的演講，有興趣的人可以先看看，

回題，今天要聊一下 Web Components 到底是在做什麼事情。參考資訊來自 W3C 的 Web Components 介紹。

Web Components?

通常，我們製作一個網頁元件，就是把 HTML/CSS/JS 寫在你的 html 檔案裡面，而，Web Components 簡單來說，它能夠將你所製作的元件封裝起來，讓你的網頁元件可以被封裝成一包，然後利用自定義的標簽來使用你的元件。當然，由於目前瀏覽器支援程度尚未完全，所以，還是建議你搭配 Chrome 來看這些事情，不過，有些東西請必須打開，在 chrome://flags 當中，

Experimental JavaScript
Experimental Web Platform Features
HTML Imports

這樣，你就能先行體驗一下 Web Components 所帶來的魔術。

Web Components 包含了這些項目，

Templates, 就是你可以定義一個樣板備用
Decorators, 裝飾樣式，其實主要的意思是，你可以使用 CSS 來表現你的樣板中的元素
Custom Elements, 可以使用自定義元件，自定義標籤或是屬性的擴充等等
Shadow DOM, 一種封裝過的 DOM，就是一種將界面元件封裝在自己的 DOM Tree 裡面的 DOM（好饒舌
Imports, 可以從外部載入打包過的 Web Components（上述的都可以（除了 CSS

Templates

樣板顧名思義，就是把你的 Markup 用

這個