Surface render events in famo.us

Question

I'm looking for an event that tells me when a surface has been rendered so I can call methods like surface.focus().

If I call focus immediately after I create the surface it doesn't work. If I call it in a timer after some arbitrary time I expect it to be rendered, it works. So there must be an event I can use.

For example if I create a widget that builds a bunch of surfaces inside a view, how do I know when that widget has been fully built and more importantly, when is it being rendered so I can set focus on an input surface?

Thanks

Answer 1

This is another case of when subclassing may be your easiest and most straight forward approach. In this example, Surface is subclassed and I am sure to grab the deploy function of the Surface and bind it to the MySurface instance for later use. Then when we override deploy later on, we can call super for the surface and not have to worry about altering core code. eventHandler is a property built into Surface, so that is used to send the render event.

An interesting test happened while making this example. If you refresh the code, and grunt pushes the changes to an unopened tab.. You event will not be fired until you open the tab again. Makes sense, but it was nice to see!

Here is what I did..

Good Luck!

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var EventHandler      = require('famous/core/EventHandler')


function MySurface(options) {
    Surface.apply(this, arguments);
    this._superDeploy = Surface.prototype.deploy
}

MySurface.prototype = Object.create(Surface.prototype);
MySurface.prototype.constructor = MySurface;

MySurface.prototype.elementType = 'div';
MySurface.prototype.elementClass = 'famous-surface';


MySurface.prototype.deploy = function deploy(target) {
  this._superDeploy(target);
  this.eventHandler.trigger('surface-has-rendered', this);
};


var context = Engine.createContext();

var event_handler = new EventHandler();

event_handler.on('surface-has-rendered', function(data){
  console.log("Hello Render!");
  console.log(data);
})

var surface = new MySurface({
  size: [200,200],
  content: "Hello",
  properties: {
    color: 'white',
    textAlign: 'center',
    lineHeight: '200px',
    backgroundColor: 'green'
  }
});

surface.pipe(event_handler);

context.add(new StateModifier({origin:[0.5,0.5]})).add(surface);

Answer 2

I marked johntraver's response as the answer, but I also wanted to include a complete working example for the InputSurface for people like me just learning famous. This code subclasses InputSurface so that the focus method will work.

Once the InputSurface is rendered it gains focus.

TextBox.js

define(function(require, exports, module) {
    var InputSurface      = require('famous/surfaces/InputSurface');
    var EventHandler      = require('famous/core/EventHandler');
    function TextBox(options) {
        InputSurface.apply(this, arguments);
        this._superDeploy = InputSurface.prototype.deploy;
    }
    TextBox.prototype = Object.create(InputSurface.prototype);
    TextBox.prototype.constructor = TextBox;
    TextBox.prototype.deploy = function deploy(target) {
        this.eventHandler.trigger('surface-has-rendered', this);
        this._superDeploy(target);
    };
    module.exports = TextBox;
});

implementation

this.email = new TextBox({
    size: [300, 40],
    placeholder:'email'
});

var event_handler = new EventHandler();

event_handler.on('surface-has-rendered', function(control){
    control.focus();
});

this.email.pipe(event_handler);

Answer 3

I know this has been answered already, all be it a few months ago. I just thought that I would add that currently you can do this without subclassing as follows:

var textbox = new InputSurface({
    size: [true,true],
    placeholder: 'Text'
});

textbox.on('deploy', function() {
    textbox.focus();
});