FacebookLogger

facebook-small-logo

In a last couple of weeks I have been working on a lot of facebook applications. It did not took long to realize that there is always the same logic behind logging/connecting to facebook. So I came to FacebookLogger abstraction class that handles these basic steps. It only contains login/connection logic, so its pretty much the core that is usable only after extending.

FacebookLogger class look like this:

package sk.yoz.net
{
    import com.facebook.Facebook;
    import com.facebook.events.FacebookEvent;
    import com.facebook.utils.FacebookSessionUtil;
    
    import flash.display.LoaderInfo;
    import flash.events.EventDispatcher;
    
    import sk.yoz.events.FacebookLoggerEvent;
    
    public class FacebookLogger extends EventDispatcher
    {
        protected var facebook:Facebook;
        protected var session:FacebookSessionUtil;
        
        private var _connected:Boolean = false;
        
        public function FacebookLogger()
        {
            super();
        }
        
        [Bindable(event="FacebookLoggerEventCONNECTED")]
        public function get connected():Boolean
        {
            return _connected;
        }
        
        protected function set connected(value:Boolean):void
        {
            _connected = value;
            var type:String = FacebookLoggerEvent.CONNECTED;
            dispatchEvent(new FacebookLoggerEvent(type));
        }
        
        public function init(apiKey:String, appSecret:String, 
            loaderInfo:LoaderInfo):void
        {
            session = new FacebookSessionUtil(apiKey, appSecret, loaderInfo);
            session.addEventListener(FacebookEvent.CONNECT, connectHandler);
            facebook = session.facebook;
            
            if(loaderInfo.parameters.fb_sig_session_key)
                 session.verifySession();
            else
                login();
        }
        
        protected function login():void
        {
            session.login();
        }
        
        public function validate():void
        {
            session.validateLogin();
        }
        
        protected function connectHandler(event:FacebookEvent):void
        {
            if(!event.success) 
                return login();
            
            protected::connected = true;
        }
    }
}

… and you also gonna require FacebookLoggerEvent class …

package sk.yoz.events
{
    import flash.events.Event;
    
    public class FacebookLoggerEvent extends Event
    {
        public static const CONNECTED:String = "FacebookLoggerEventCONNECTED";
        
        public function FacebookLoggerEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
        
    }
}

Now, lets extend the core class. This class should hold all the required logic and communication with facebook, its fine to make it singleton:

package
{
    import mx.controls.Alert;
    import mx.core.Application;
    import mx.events.CloseEvent;
    
    import sk.yoz.events.FacebookLoggerEvent;
    import sk.yoz.net.FacebookLogger;
    
    public class FB extends FacebookLogger
    {
        public static const NOT_LOGGED:String = "Seems like not logged, click when logged!";

        private static const SINGLETON_LOCK:Object = {};
        private static const _instence:FB = new FB(SINGLETON_LOCK);
        
        protected var API_KEY:String = "***";
        protected var APP_SECRET:String = "***";
        
		private var initCallback:Function;
		
        public function FB(lock:Object)
        {
            super();
            
            if(lock != SINGLETON_LOCK)
                throw new Error("Use FB.instance!");
            
            addEventListener(FacebookLoggerEvent.CONNECTED, loggerConnectedHandler)
        }
        
        public static function get instance():FB
        {
            return _instence;
        }
        
        public function init2(application:Application):void
        {
			if(public::connected)
                return;
            init(API_KEY, APP_SECRET, application.loaderInfo, application.parameters);
        }
	
        public function initWithCallback(application:Application, callback:Function):void
        {
            initCallback = callback;
            init2(application);
        }

        override protected function login():void
        {
            super.login();
            Alert.show(NOT_LOGGED, null, 4, null, loggedClose);
        }
        
        protected function loggedClose(event:CloseEvent):void
        {
            validate();
        }

        private function loggerConnectedHandler(event:FacebookLoggerEvent):void
        {
			if(initCallback != null)
                initCallback();
			initCallback = null;
            // now we are connected, your code may go here
        }
    }
}

Update (Jan 6, 2009): Suggested initWithCallback() function where you can define callback function that is called after successful connect.

… so we can use in application as simple as possible:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    addedToStage="addedToStageHandler()">
<mx:Script>
<![CDATA[
    import FB;
    
    [Bindable]
    private var fb:FB = FB.instance;
    
    private function addedToStageHandler():void
    {
        fb.init2(this);
    }
]]>
</mx:Script>
<mx:Text text="{fb.connected ? 'connected' : 'connecting'}" />
</mx:Application>

5 comments so far

  1. JRobbins January 9, 2010 00:07

    Thanks for sharing all your hard work. I was trying the code that you provided, but there seems to be a typo in the FacebookLogger class.

    line 66 protected::connected = true;

    should be

    public::connected = true;

  2. Jozef Chúťka January 9, 2010 20:59

    hi JRobbins, thanks for your feedback, well, there is protected setter defined on line 36:
    protected function set connected…
    so setting must be via protected namespace just like it is:
    protected::connected = true;

    these classes are created and tested for flex 3, using facebook flex api v3.3. did you have any problems using it?

  3. […] post connects my 3 previous posts: Flex IFrame – Web browser in flash, FacebookLogger and Facebook Extended Permissions With Authorization by Overriding Class in swc in order to create […]

  4. […] e.g. extended FacebookLogger and add these […]

  5. […] been working with Twitter API, trying to make the api usable for flash in browser the same way as FacebookLogger (Facebook API extension) is. Guess what, I did it! I created TwitterLogger. TwitterLogger class […]

Leave a comment

Please be polite and on topic. Your e-mail will never be published.