Header/Footer/Scroll/Scene example

HeaderFooter with Scroll, using a scene

by Mabuti

HTML

<script src="http://positivenull.net/famous/fiddle/famousBox.js"></script>

JavaScript

define('main', function (require, exports, module) {
    var Engine = require('famous/core/Engine');
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var HeaderFooter = require('famous/views/HeaderFooterLayout');
    var RenderController = require('famous/views/RenderController');
    var Scrollview = require("famous/views/Scrollview");
    var RenderNode = require('famous/core/RenderNode');
    var Scene = require('famous/core/Scene');

    function ContentView() {
        View.apply(this, arguments);

        _createLayout.call(this);
        _createHeaderAndFooter.call(this);
        _createBody.call(this);
    }

    ContentView.prototype = Object.create(View.prototype);
    ContentView.prototype.constructor = ContentView;


    function _createLayout() {
        var height = {
            header: 30,
            content: window.innerHeight - 60,
            footer: 30
        };

        var scene = new Scene({
            size: [undefined, height.header + height.content + height.footer],
            target: [{
                origin: [0.5, 0],
                size: [undefined, height.header],
                target: [{
                        id:"header.background",
                    
                        transform: Transform.behind
                    },{
                        id: "header.text",
                        align: [0.5, 0.5],
                        origin: [0.5, 0.5],
                        size: [100, height.header]
                    }]
             }, {
                id: "content",
                origin: [0.5, 0.5],
                size: [undefined, height.content],
                target: [{
                        id: "content.background",
                        translate: [0,0,-50]
                    },{
                        id: "content.scrollview",
   ...