bebraw
2/11/2011 - 6:34 AM

app.html

widgets.js
content_copyfile_download
define(['./widgets/selectors', './widgets/slider', './widgets/button'],
        function(selectors, slider, button) {
    return {
        ToolSelector: selectors.ToolSelector,
        OptionSelector: selectors.OptionSelector,
        Slider: slider.Slider,
        Button: button.Button
    };
});
normal.build.json
content_copyfile_download
{
    appDir: <app name>,
    baseUrl: "src",
    dir: "build",
    optimize: "none",

    modules: [
        {
            "name": "main"
        }
    ]
}
module_examples.js
content_copyfile_download
// module for some app conf, items may contain funcs too
define({
    debug: true,
    logUndo: false,
});

// more complicated def (plugin example)
define({
    meta: {
        tooltip: 'My awesome tool',
        attributes: { // some default attrs
            width: 5
        }
    },
    execute: function(opts) {
        // do something cool now
    }
});

// even more complicated def, with dependencies this time
define(['utils/math'], function(math) {
    // you can include handy local utils here

    // ...

    // and define what to share here
    return {
        execute: function(opts) {
            // do something with the math module
            return math.sqrt(123);
        }
    };
});
main.js
content_copyfile_download
APP = {}; // my global stash, you might do without

require({
        // some nice aliases for easy imports
        // now we can refer to "math" utils
        // simply by "utils/math"
        paths: {
            configuration: 'configuration',
            ui: 'ui',
            utils: 'utils'
        }
    },
    ['application', 'utils/misc'],
        function(app, misc) {
    // I extend various libs at misc, hence this
    misc.initialize();
    
    // booyah, time to run
    app.run();
});
application.js
content_copyfile_download
define(['panels/panels'],
        function(panels) {
    var Application = new Class({
        initialize: function() {
            // stub console funcs to allow console.log ie. without errors
            this._stubConsole();

            // inject "app" div to document body
            $E('div').set('id', 'app').insertTo(document.body);

            // this gets the party started
            panels.initialize();
        },
        _stubConsole: function() {
            if(!defined(window.console)) {
                window.console = {};
            }

            ['error', 'log', 'warn'].each(function(name) {
                if(!(name in window.console)) {
                    window.console[name] = function() {};
                }
            });
        }
    });

    // no need to return actual Application, instead
    // we can return a nice func instantiating and
    // hence running it
    // btw you can eliminate the class if you really want to
    return {
        run: function() {
            new Application();
        }
    };
});
app.html
content_copyfile_download
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
    <head>
        <title>App name goes here</title>

        <!-- Load some CSS here. -->
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <!-- Optional part. Define some global opts. You can set these easily via PHP or so. -->
        <script type="text/javascript">
            APP_DEFAULTS = {
                width: 640,
                height: 480,
                color: 'white'
            }
        </script>

        <!-- Path to your RequireJS. Note the data-main thingy! -->
        <script data-main="src/main" src="src/require.js"></script>

        <!-- You can load CSS here too if you really need to. -->
        <link rel="stylesheet" type="text/css" href="css/other.css">
    </body>
</html>