Modify GridLayout in famo.us - 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;
}