How i can add two surfaces to famo.us Scrollview?

Question

I want to create Scrollview with two surfaces, one for the background and the other one for text vertically and horizontal aligned, but i just dont figure it out. Tried with ContainerSurface but seems no to be the best perfomance option. any thoughts?

Answer 1

There are multiple ways. Here are a few examples:

1. Add a single surface and as a content add a div for the text:

   var surface = new Surface({
       size: [undefined, 50],
       classes: ['mysurface'],
       content: '<div>my text</div>'
   });
   surfaces.push(surface); // add to surfaces array
   

in the css, add your styling:

    .mysurface {
        background: 'red'
    }

    .mysurface div {
        text-alignment: center;
        line-height: 50px;
    }

2. Create multiple surfaces and put them in a RenderNode:

   var renderNode = new RenderNode(new Modifier({
       size: [undefined, 50]
   }));
   
   // Add background surface to rendernode
   var backSurface = new Surface({
       classes: ['mysurface']
   });
   renderNode.add(backSurface);
   
   // Add text surface and translate it in z-space 1 unit so it lies in front of backSurface
   var textSurface = new Surface({
       content: 'this is the text'
   });
   renderNode.add(new Modifier({
       transform: Transform.translate(0, 0, 1) 
   })).add(textSurface);
   
   // Add to scrollview
   surfaces.push(renderNode);
   

3. Create an actual view and add that to the scrollview (see famo.us university)

4. Use a layout view/solution like famous-flex:

   var item = new LayoutController({
       layout: function(context, options) {
          var dock = new LayoutDockHelper(context, options);
          dock.fill('back'); // size back to fill whole content
          dock.margins(5); // indent 5 pixel margins all around
          dock.fill('text'); // fill text to remaining inner space
       },
       dataSource: {
          back: new Surface({...}),
          text: new Surface({...}),
       }    
   });
   surfaces.push(item);
   

https://github.com/IjzerenHein/famous-flex

Answer 2

You can add it with Sequential Layout like this:

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

var mainContext = Engine.createContext();

var sequentialLayout = new SequentialLayout({
    direction: 1
});
var surfaces = [];

sequentialLayout.sequenceFrom(surfaces);

for (var i = 0; i < 10; i++) {
    surfaces.push(new Surface({
         content: "Surface: " + (i + 1),
         size: [undefined, window.innerHeight/10],
         properties: {
             backgroundColor: "hsl(" + (i * 360 / 10) + ", 100%, 50%)",
             lineHeight: window.innerHeight/10 + "px",
             textAlign: "center"
         }
    }));
}

mainContext.add(sequentialLayout);

});