famo.us: Can I use "DeviceView" in my own app?

Question

I am building a simple POC using famo.us. I would like to use the device view from the famo.us University lessons but when I write this code (slightly modified from what I found in the tutorials) nothing renders:

/*globals define*/
define(function(require, exports, module) {
    // import dependencies
    var Engine = require('famous/core/Engine');
    var ImageSurface = require('famous/surfaces/ImageSurface');
    var StateModifier = require('famous/modifiers/StateModifier');
    var DeviceView = require('./DeviceView');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var logo = new ImageSurface({
        size: [267, 102],
        content: '/content/images/t-logo-black.png'
    });

    var logoModifier = new StateModifier({
        origin: [0.5, 0.5]
    });
    var logoNode = mainContext.add(logoModifier);

    logoNode.add(logo);
});

It appears that just adding the line var DeviceView = require('./DeviceView'); is what is causing the problem because just adding that one line to a working app seems to make everything not work that was working before. So I have 2 questions:

1. How do I make the require for DeviceView work
2. Is there a place I can go to find this sort error? Right now a blank screen is not very helpful. :)

Thank you!

Answer 1

Device view is not a currently an open source view. I have heard they are ridding a few bugs but it will be released soon.

Next time you see something not loading, be sure to check the directory, to ensure the file actually exists.

I have found debugging a bit tricky thus far using famous. Really for your problem, only the console would give you what you are looking for. In the case of a view, if it is not showing up how I expect, I often drop an id or class into the view, so it because searchable in the DOM.

Creating better debugging tools would add to the the long list of things famo.us is looking to build in the coming months. As an early adopter, it's a bit of a tough road.

Good Luck!

Answer 2

to make it work add this code: //var DeviceView = require('DeviceView'); var View = require("famous/core/View");

in createDevice() function change :

device = new View(deviceOptions);

var deviceModifier = new StateModifier({
    size: [300,400],
    origin: [0.5, 0.5]
});

comment out any GlobalEvents.

Answer 3

That is a custom view made for the lessons which is not provided with the famous package for download. You could inspect the source code of the lessons page and try to discover the URL from that JS file... But I think it is not going to be so easy.

Answer 4

https://github.com/hinablue/famous.tw/tree/master/deviceView

That part is because of error.. take a look at the link above That is a custom view made for the lessons which is not provided with the famous package for download. You could inspect the source code of the lessons page and try to discover the URL from that JS file... But I think it is not going to be so easy.