Implementing Famo.us

Question

I'm trying to learn how to use the Famo.us library. For starters I just want to present a surface in my <body> . So I tried this:

<html>
<head>
<script>

    var Engine = require('js/famous/core/Engine');
    var Surface = require('js/famous/core/Surface');

    var mainContext = Engine.createContext();

    var firstSurface = new Surface({
      size: [100, 100],
      properties: {
        backgroundColor: '#FA5C4F'
      }
    });

    mainContext.add(firstSurface);
</script>

</head>

<body>
</body>
</html>

However I'm getting the following error:

Uncaught ReferenceError: require is not defined

So I tried to add the scripts to <head> :

<script type="text/javascript" src="js/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="js/lib/classList.js"></script>
<script type="text/javascript" src="js/lib/requestAnimationFrame.js"></script>
<script type="text/javascript" src="js/lib/require.js"></script>

And now I'm getting this error:

Uncaught Error: Module name "js/famous/core/Engine" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

What am I doing wrong and how can I present this Surface in the <body> ?

Answer 1

Here is what you are missing using Require.js :

Need to have require loaded prior to using require.js
Wrap your code in a module (define)
Require the module
Could put some content into your surface (optional)

Note: See below for the standard global build without require.js

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="description" content="Famo.us 0.3.4" />  
    <meta charset="utf-8">  
    <title>Famous App</title>  
    <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />  
    <meta name="mobile-web-app-capable" content="yes" />  
    <meta name="apple-mobile-web-app-capable" content="yes" />  
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>  
    <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>  
    <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>  
    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>  

    <!-- famous -->
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" />  
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.4/famous.min.js"></script>  
    <script type="text/javascript">
      define('main', function (require, exports, module) {
        var Engine = require('famous/core/Engine');
        var Surface = require('famous/core/Surface');

        var mainContext = Engine.createContext();

        var firstSurface = new Surface({
          content:'My First Surface',
          size: [100, 100],
          properties: {
            backgroundColor: '#FA5C4F'
          }
        });

        mainContext.add(firstSurface);
      });

      require(['main']);
      console.log('------------start------------')

    </script>
  </head>
  <body class='famous-root'>
  </body>
</html>

Remember: You do not have to use require.js for Famo.us . There is a standard global javascript build also. The library just happens to be written for require.js

<!DOCTYPE HTML>
<html>
  <head>
    <title>Famo.us App</title>
    <meta name="description" content="Famo.us 0.3.1 global-seed" />
    <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <!-- shims for backwards compatibility -->
    <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
    <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
    <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>

    <!-- famous -->
    <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.4/famous.css" />
    <script type="text/javascript" src="http://code.famo.us/famous/0.3.4/famous-global.min.js"></script>
    <script type="text/javascript">
      var Engine = famous.core.Engine;
      var Surface = famous.core.Surface;

      var mainContext = Engine.createContext();

      var firstSurface = new Surface({
        content:'My First Surface',
        size: [100, 100],
        properties: {
          backgroundColor: '#FA5C4F'
        }
      });

      mainContext.add(firstSurface);

    </script>
  </head>
  <body></body>
</html>

Implementing Famo.us

Question

1 answers

solution1
2 ACCPTED 2014-12-28 18:52:11

Implementing Famo.us

Question

1 answers

solution1 2 ACCPTED 2014-12-28 18:52:11

solution1
2 ACCPTED 2014-12-28 18:52:11