F2 Examples

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.

Intro

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.

App Registry

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 AppConfigs.

Registry API

You can view the App Registry used on this page by calling the Registry API.

Load Registry API

How Does This Work?

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);
    });
});

CodePen Demo

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.

Hello world