Container Development: App Render

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/F2/1.3.3/f2.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="my_top">

</div>
<div id="my_bottom">

</div>

CSS

/** Boostrap CSS is an external reference */
body {
    margin: 20px;
}

h1 {
    font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    border-bottom: 1px solid #ccc;
    font-size: 22px;
}

.f2-app-container {
    margin: 15px 0;
}

.com_openf2_examples_javascript_helloworld p {
    font-weight: bold;
    font-size: 20px;
}

JavaScript

/*
 * F2 Docs 
 * http://docs.openf2.org
 *
 * Container Development: App Render
 *
 */
var _appConfig = [
    {
        appId: 'com_openf2_examples_javascript_helloworld',
        manifestUrl: 'http://docs.openf2.org/demos/apps/JavaScript/HelloWorld/manifest.js'
    },
    {
        appId: 'com_openf2_examples_javascript_chart',
        manifestUrl: 'http://docs.openf2.org/demos/apps/JavaScript/Chart/manifest.js'
    }
];

$(function(){
    var _token = F2.AppHandlers.getToken();
    var appRender = function(appConfig,appHtml){ 
        //add app HTML to 'root' element created in APP_CREATE_ROOT
        var $section = $(appConfig.root).append(appHtml);
        
        //place apps
       // if (appConfig.appId == 'com_openf2_examples_javascript_helloworld'){
        //    $('#my_top').append($section);
       // }
        
        if (appConfig.appId == 'com_openf2_examples_javascript_chart'){
            $('#my_bottom').append($section);
        }
    };
    
    F2.init();
    F2.AppHandlers.on(
        _token,
        F2.Constants.AppHandlers.APP_CREATE_ROOT,
        function(appConfig){
            appConfig.root = $('<section />').get(0);
        }
    );
    F2.AppHandlers.on(_token, F2.Constants.AppHandlers.APP_RENDER, appRender);
    F2.registerApps(_appConfig);
});