Views 模組說明

[hinablue]

#2 提到了 View 核心的部分，接下來繼續來看相關模組。

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 元件。

[hinablue]

新增 FlexibleLayout 與 ContextualView 兩個模組，當中 ContextualView 其實沒有功能，他是用來給開發者自行擴充使用的，所以目前官方也沒有什麼說明。

FlexibleLayout

唯一可惜的是，他並不是使用 CSS3 Flexible boxes 來做這件事情。他是一組類似 GridLayout 模組的工具，但是相對于 GridLayout 只能平均分割，FlexibleLayout 就可以做到依照比例分割。

初始值

• direction 定義分割方向，有兩組值 FlexibleLayout.DIRECTION_X, FlexibleLayout.DIRECTION_Y
• transition 當 FlexibleLayout 重新配置的時候，動態過場設定，必須是一組 Transition 設定
• ratios 分割區塊比例定義，必須是一組陣列，可以使用數字，undefined 與 true 三種關鍵字

所以，如果你要兩欄結構，然後左邊要 200px 的話，

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

    var mainContext = Engine.createContext();

    var flex = new FlexibleLayout({
        ratios : [true, 1]
    });

    var surfaces = [];
    for (var i = 0; i < 2; i++) {
        surfaces.push(new Surface(
            size: i === 0 ? [200, undefined] : [undefined : undefined],
            content: i === 0 ? 'Menu' : 'Content'
        ));
    }

    flex.sequenceFrom(surfaces);
    mainContext.add(flex);
});

true 是一組很特殊的關鍵字，他的用意在於符合內容物的尺寸，這在 Surface 與其他類似的模組中皆可使用。