How do they do the live content updating in the famo.us demos?

Question

If you check out any of the demos on the famo.us web site, they all let you type in code, and the output on the right updates in real time. I've looked everywhere, but I can't seem to find any documentation on how this was achieved.

Example: http://famo.us/examples/0.2.0/core/context/example

johntraver · Answer 1 · 2014-06-11T20:57:43.710

I by no means know if this is how that specific example was achieved, but I was able to throw something together pretty quick that could at least hopefully give you some guidance.

In the following example, I am using a FlexibleLayout to divide the page. I then add a TextareaSurface to create an editor and a Container surface to render the results to. I add a RenderNode as well to ContainerSurface so that I can keep the same container, and rinse and reuse the RenderNode.

Now how this may be improved..

1) The Famo.us demos make you create your own context and add to it. In my example 'outputNode' is your outlet to the output display. Again this is for simplicity in my case, but to achieve what they have achieved, I would parse the code myself and replace the main context with what I know to be the node I wish to render to.

2) The names I use in my own code should be much more unique using some kind of prefixing. Right now the names of the code in the editor could easily conflict with variable names I am using to write the editor.

Anyway, here is what I did, Hope it helps!

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

var FlexibleLayout      = require("famous/views/FlexibleLayout");

var ContainerSurface    = require("famous/surfaces/ContainerSurface");
var TextareaSurface     = require("famous/surfaces/TextareaSurface");

var context             = Engine.createContext();

var layout = new FlexibleLayout({ratios:[0.5,0.5]});

var layoutCells = [];
layout.sequenceFrom(layoutCells);

var editor = new TextareaSurface({
  size:[undefined,undefined],
  properties:{
    fontSize:'18px',
    fontFamily:'courier',
    padding:'10px'
  }
});

var code = ""
code += "var surface = new Surface({      " + "\n";
code += "  size:[200,200],                " + "\n";
code += "  content:'Hello',               " + "\n";
code += "  properties:{                   " + "\n";
code += "    backgroundColor:'green',     " + "\n";
code += "    lineHeight:'200px',          " + "\n";
code += "    textAlign:'center'           " + "\n";
code += "  }                              " + "\n";
code += "});                              " + "\n";
code += "                                 " + "\n";
code += "outputNode.add(surface);         " + "\n";

editor.setValue(code);

var outputNode;

var evalCode = function(code){
  try {
    outputNode.render = function(){return null};
    makeOutput();
    outputContainer.add(outputNode);
    eval(code);
  }
  catch (err) {
    console.log("Error: "+err);
  }
}

editor.on('keyup',function(){
  var code = editor.getValue();
  evalCode(code);
})

layoutCells.push(editor);

var makeOutput = function(){
  outputNode = new RenderNode({
    size:[undefined,undefined],
    backgroundColor:'white'
  })
}

outputContainer = new ContainerSurface({
  size:[undefined,undefined],
  backgroundColor:'white'
})

outputContainer.add(outputNode);

makeOutput();
evalCode(code);

layoutCells.push(outputContainer);

context.add(layout);

How do they do the live content updating in the famo.us demos?

1 Answers1