Famo.us Diasplaying Content/Positioning Elements

前言：

构建Famo.us JavaScript平台的团队计划在2013年12月5号发布他们的第一个应用层代码预览版，作为发布平台客户端的一个铺垫。Famo.us完全是使用JavaScript编写的，它已经吸引了超过7万名开发者，但是依然是alpha预览版；它诱惑人的原因是承诺不需要插件就能够在浏览器中实现本地应用性能。作为自渲染的js框架，famo.us优异的性能与酷炫的视觉效果在未来的发展潜能不可限量！

Displaying Content

在这个部分，我们将学习在famo.us如何展示和自定义自己的要展示的内容。首先介绍两个对象：

renderable：表示对应我们能在屏幕上看到的一个真实的元素，最原始的renderable元素就是surface，它对应dom中的div元素。

Context ：表示独立的可渲染环境，我们可以拥有多个Context对象，但通常拥有一个就够了，尤其是在移动应用或全屏的web应用中。

var Engine = require('famous/core/Engine');//用于创建Context对象
var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var firstSurface = new Surface({
  content: 'hello world'
});

mainContext.add(firstSurface);//渲染

Adding Content

展示的内容可以是字符串、一段html代码或一个dom元素。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var firstSurface = new Surface({
  content: 'hello world'//初始化内容
});

firstSurface.setContent('<h1>HELLO WORLD</h1>');//修改内容

mainContext.add(firstSurface);

Styling

和css的写法差不多，区别在于用的是骆驼拼写法，而不是破折号’-‘

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var firstSurface = new Surface({
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

mainContext.add(firstSurface);

Sizing

size的定义有多种写法，不写默认是与父同大小(match-parent)。其他方式包括

指定像素 [x, y]
指定一个像素[undefined, y] 或 [x, undefined]，undefined的效果表示的是default。
自适应大小[true, true]

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');

var mainContext = Engine.createContext();

var firstSurface = new Surface({
  size: [true, undefined],
  content: 'hello world',
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

mainContext.add(firstSurface);

Positioning Elements

最常见的做法就是使用StateModifier，在StateModifier的transform 属性中指明偏移的x、y。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');

var mainContext = Engine.createContext();

var stateModifier = new StateModifier({
  transform: Transform.translate(150, 100, 0)
});

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

mainContext.add(stateModifier).add(surface);//在渲染之前

Transforms

Transform.translate()返回的变换后的矩形区域。

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var StateModifier = require('famous/modifiers/StateModifier');
var Transform = require('famous/core/Transform');

var mainContext = Engine.createContext();

var translateModifierOne = new StateModifier({
  transform: Transform.translate(200, 0, 0)
});

var translateModifierTwo = new StateModifier({
  transform: Transform.translate(200, 0, 0)
});

var rotateModifierOne = new StateModifier({
  transform: Transform.rotateZ(Math.PI/4)
});

var rotateModifierTwo = new StateModifier({
  transform: Transform.rotateZ(Math.PI/4)
});

var redSurface = new Surface({
  size: [100, 100],
  classes: ['red-bg']
});

var greySurface = new Surface({
  size: [100, 100],
  classes: ['grey-bg']
});

mainContext
  .add(translateModifierOne)
  .add(rotateModifierOne)
  .add(redSurface);

mainContext
  .add(rotateModifierTwo)
  .add(translateModifierTwo)
  .add(greySurface);

Align and Origin

指定位置的另外一种方法是使用StateModifier的StateModifier属性，用法与transform类似。

var view = new View({

});

view.add(new Surface({
  properties: {
    backgroundColor: '#FA5C4F'
  }
}));

var viewModifier = new StateModifier({
  size: [200, 200],
  origin: origin,
  align: align
});

var positions = [
  [0, 0],
  [0, 1],
  [1, 0],
  [1, 1]
];

for (var i = 0; i < positions.length; i++) {
  var surface = new Surface({
    size: [true, true],
     properties: {
    backgroundColor: 'blue'
  },
    content: 'origin:<br>' + positions[i]
  });
  
  var modifier = new StateModifier({
    origin: positions[i],
    align: positions[i]
  });
  
  view.add(modifier).add(surface);
}

mainContext.add(viewModifier).add(view);//