Каков наилучший шаблон для адаптивных приложений в famo.us?

Question

Например, в приложении, основанном на начальной загрузке, я мог бы написать разметку, чтобы сделать сетку шириной 8 столбцов для больших экранов и шириной 2 столбца для маленьких.

Размер экрана, безусловно, влияет на дизайн экрана, и я хочу знать, каков будет достойный образец, прежде чем я начну пробовать что-то в famo.us. Учитывая, что famo.us является "оцененным", здесь действительно должен быть только один ответ:)

Я целиком и полностью за дизайн для мобильных устройств, но я не хочу, чтобы приложение для настольных компьютеров было просто мобильным приложением, которое растянулось на 400%.

Спасибо,

Эндрю

Answer 1

Основано на примере в Famo.us Примеры на Github.

https://github.com/Famous/examples/blob/master/src/examples/views/GridLayout/example.js

Вы могли бы очень легко сделать что-то вроде этого..

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var GridLayout = require("famous/views/GridLayout");

var mainContext = Engine.createContext();

var contextSize = mainContext.getSize()

var dimensions;

if (contextSize[0] < 480 || contextSize[1] < 480) {
    dimensions = [2,8];
} else {
    dimensions = [8,2];
};

var grid = new GridLayout({
    dimensions: dimensions
});

var surfaces = [];
grid.sequenceFrom(surfaces);

for(var i = 0; i < 16; i++) {
    surfaces.push(new Surface({
        content: "I am panel " + (i + 1),
        size: [undefined, contextSize[1] / 2.0],
        properties: {
            backgroundColor: "hsl(" + (i * 360 / 16) + ", 100%, 50%)",
            color: "black",
            lineHeight: window.innerHeight / 2 + 'px',
            textAlign: 'center'
        }
    }));
}

mainContext.add(grid);

РЕДАКТИРОВАТЬ:

Конечной целью является то, что Javascript является единственным языком разработки для современных веб-приложений. Иногда вам просто нужно самим что-то делать.

Это особенно актуально для фреймворка, такого как Famo.us, который сильно зависит от абсолютного позиционирования. Все просто не так гладко, как в блочной модели

Для обработки всех тонких различий я создаю класс StateHash, который управляет состоянием и возвращает разные значения для одних и тех же ключей в зависимости от текущего состояния.

var DESKTOP, MOBILE, StateHash, screen_state, sh;

StateHash = (function() {

  function StateHash(states) {
    this.set_state = __bind(this.set_state, this);

    this.get_state = __bind(this.get_state, this);

    this.set = __bind(this.set, this);

    this.get = __bind(this.get, this);

    var i, _i, _ref;
    if (!states) {
      states = 2;
    }
    this.state = 0;
    this.hash = {};
    for (i = _i = 0, _ref = states - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
      this.hash[i] = {};
    }
  }

  StateHash.prototype.get = function(key) {
    return this.hash[this.state][key];
  };

  StateHash.prototype.set = function(state, key, val) {
    return this.hash[state][key] = val;
  };

  StateHash.prototype.get_state = function() {
    return this.state;
  };

  StateHash.prototype.set_state = function(state) {
    return this.state = state;
  };

  return StateHash;

})();

// Usage

MOBILE = 0;
DESKTOP = 1;

screen_state = some_check_mobile_function() ? MOBILE : DESKTOP;

sh = new StateHash();
sh.set_state(screen_state);

sh.set(MOBILE, "top-margin", "10px");
sh.set(DESKTOP, "top-margin", "20px");

sh.get("top-margin");

Я дам вам знать, если узнаю о каком-либо другом лучшем способе!

Удачи!

Answer 2

Подход представляет собой импровизированную версию использования сеток в зависимости от размера окна. Просто добавили слушателя изменения размера, чтобы наблюдать за событиями изменения размера.

function ResponsiveGridView() {

    View.apply(this, arguments);

    this.rootModifier = new StateModifier({
        align: [.5, .5],
        origin: [.5, .5]
    });

    this.mainNode = this.add(this.rootModifier);

    this.slides = [];

    _createGrid.call(this);
    _createSlides.call(this);

    Engine.on('resize', function(){
        _reflowGrid.call(this);
    }.bind(this));
}
function _createGrid(){
    this.grid = new GridLayout({
         dimensions: window.innerWidth < 490?[1,8]:[4, 2],
         transition: {curve: 'easeInOut',duration: 200}
        });
    this.grid.sequenceFrom(this.slides);
    this.mainNode.add(this.grid);
}
function _reflowGrid(){
    this.grid.setOptions({dimensions: window.innerWidth < 490?[1,8]:[4, 2]});
}