Modify GridLayout in famo.us

Question

i would like to modify each of the grid to my own content. my question is how do i modify the grid to show individual surfaces? for example instead of the array items just have surface1, surface2, surface3 etc..

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

var mainContext = Engine.createContext();

var layout;

createLayout();
addHeader();
addContent();
addFooter();

    function createLayout() {
      layout = new HeaderFooterLayout({
        headerSize: 100,
        footerSize: 50
      });

      mainContext.add(layout);
    }

    function addHeader() {
      layout.header.add(new Surface({
        content: "Header",
        classes: ["grey-bg"],
        properties: {
          lineHeight: "100px",
          textAlign: "center"
        }
      }));
    }

    function addContent() {
      layout.content.add(createGrid( 'content', [2, 1] ));
    }

    function addFooter() {
      layout.footer.add(createGrid( 'footer', [3, 1] ));
    }

    function createGrid( section, dimensions ) {
      var grid = new GridLayout({
        dimensions: dimensions
      });

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

      for(var i = 0; i < dimensions[0]; i++) {
        surfaces.push(new Surface({
          content: section + ' ' + (i + 1),
          size: [undefined, undefined],
          properties: {
            backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
            color: "#404040",
            textAlign: 'center'
          }
        }));
      }

      return grid;
    }

Answer 1

You will always need the array of surfaces to use the generic GridLayout class. I may be missing something, but it seems you are just looking to not use a loop and define the surfaces individually.

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

var mainContext = Engine.createContext();

var layout;
var surface1;
var surface2;

createLayout();
addHeader();
addContent();
addFooter();

function createLayout() {
  layout = new HeaderFooterLayout({
    headerSize: 100,
    footerSize: 50
  });

  mainContext.add(layout);
}

function addHeader() {
  layout.header.add(new Surface({
    content: "Header",
    classes: ["grey-bg"],
    properties: {
      lineHeight: "100px",
      textAlign: "center"
    }
  }));
}

function addContent() {
  layout.content.add(createGrid( 'content', [2, 1] ));
}

function addFooter() {
  layout.footer.add(createGrid( 'footer', [3, 1] ));
}

function createGrid( section, dimensions ) {
  var grid = new GridLayout({
    dimensions: dimensions
  });

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


  surface1 = new Surface({
      content: "surface 1 content",
      size: [undefined, undefined],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
        color: "#404040",
        textAlign: 'center'
      }
   });

  surfaces.push(surface1);

  surface2 = new Surface({
      content: "surface 2 content",
      size: [undefined, undefined],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
        color: "#404040",
        textAlign: 'center'
      }
   });

  surfaces.push(surface2);

  // etc

  return grid;
}