/*
* 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);
});
<div id="my_top">
<h1>Top</h1>
</div>
<div id="my_bottom">
<h1>Bottom</h1>
</div>
/** 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;
}
External resources loaded into this fiddle: