These production-grade F2 example Apps are designed to demonstrate how simple it is to develop and assemble Apps in an F2 Container. The Apps display data from various sources and, using F2 Context, seamlessly communicate with one another.
These example F2 Apps feature content from Yahoo!, StockTwits, Markit and others. They're organized on this page to demonstrate simple App placement plus interoperability between Apps using F2 Context.
To see how the Container and Apps can communicate, click a ticker symbol in either the Watchlist or StockTwits App.
Questions? Contact us.
The F2 App Registry is a service Container Providers deliver as one part of an F2-enabled solution.
The App Registry can be either a static or databased collection of F2 AppConfig
s.
You can view the App Registry used on this page by calling the Registry API.
The javascript code to create this Container is not complicated and adheres to the F2 specification.
$(function(){
//get Events token
var _token = F2.AppHandlers.getToken();
//setup AppHandlers
//show loading spinner before Apps are loaded
F2.AppHandlers.on(_token, F2.Constants.AppHandlers.APP_RENDER_BEFORE, function(appConfig) {
F2.UI.showMask(appConfig.instanceId, appConfig.root);
});
//hide loading icon after Apps are loaded
F2.AppHandlers.on(_token, F2.Constants.AppHandlers.APP_RENDER_AFTER, function(appConfig){
F2.UI.hideMask(appConfig.instanceId, appConfig.root);
});
//assign App root element
F2.AppHandlers.on(_token, F2.Constants.AppHandlers.APP_CREATE_ROOT, function(appConfig) {
appConfig.root = $('div.f2-autoload[data-f2-appid="'+appConfig.appId+'"]').get(0);
});
//show loading icon before Apps are loaded
F2.AppHandlers.on(_token, F2.Constants.AppHandlers.APP_RENDER, function(appConfig, appHtml) {
var $root = $(appConfig.root);
//We've simplified this for demo purposes
//It is here where App "wrapper" HTML can be applied
$root.append('<div>'+appHtml+'</div>');
});
//init F2 with UI Mask (loading spinner)
F2.init({
UI: {
Mask: {
loadingIcon: '/img/spinner.gif',
backgroundColor: '#fff',
opacity: 0.7
}
}
});
//find App placeholders in DOM, extract F2 AppIDs from element attribute
var appIds = $('div.f2-autoload').map(function(i,el){
return $(el).data('f2Appid');
});
//call Registry & insert "AAPL" as default symbol Context
$.getJSON('/F2/registry', { appIds: appIds }, function(data) {
$.each(data,function(i,app){
app.context = $.extend(true,{},(app.context || {}),{
symbol: 'AAPL'
});
return app;
});
//register Apps
F2.registerApps(data);
});
});
Want to play with F2 code in your browser? We've setup a pen on CodePen which is shows some of these example Apps in action.