January 2010

While Flex uses bilinear resizing method when scaling images (event for Bitmap.smoothing() method), you won’t be able to get nice results when downscaling more than 2 times. Inspired by ImageResizer class I have also created SmoothImage Class. This object extends mx.Image and uses ImageResizer.bilinearIterative() class in order to generate smoother resized results.

In following example mx.Image, SmoothImage and sk.yoz.image.SmoothImage used to demonstrate resizing original 1024×679px image.

sk.yoz.image.SmoothImage class:

package sk.yoz.image
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Point;

    import mx.controls.Image;

    import sk.yoz.math.ResizeMath;

    public class SmoothImage extends Image
    {
        protected var _resizeFunction:String = "bilinearIterative";
        protected var _iterationMultiplier:Number = 2;
        protected var resizedBitmap:Bitmap;

        public function SmoothImage()
        {
            super();
        }

        [Bindable(event="resizeFunctionChanged")]
        [Inspectable(category="Other", defaultValue="bilinearIterative",
            enumeration="bilinear,bilinearIterative")]
        public function set resizeFunction(value:String):void
        {
            if(value == resizeFunction)
                return;
            _resizeFunction = value;
            resizeBitmap();
        }

        public function get resizeFunction():String
        {
            return _resizeFunction;
        }

        [Bindable(event="iterationMultiplierChanged")]
        public function set iterationMultiplier(value:Number):void
        {
            if(value == iterationMultiplier)
                return;

            _iterationMultiplier = value;
            resizeBitmap();
        }

        public function get iterationMultiplier():Number
        {
            return _iterationMultiplier;
        }

        override protected function updateDisplayList(unscaledWidth:Number,
            unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            resizeBitmap();
        }

        protected function resizeBitmap(... rest):void
        {
            if(!width || !height || !content || !(content is Bitmap))
                return;

            if(resizedBitmap && resizedBitmap.parent)
                resizedBitmap.parent.removeChild(resizedBitmap);

            resizedBitmap = new Bitmap(resizedBitmapData);
            addChild(resizedBitmap);
            content.visible = false;
        }

        protected function get resizeMethod():String
        {
            return maintainAspectRatio ? ResizeMath.METHOD_LETTERBOX
                : ResizeMath.METHOD_RAW;
        }

        protected function get resizedBitmapData():BitmapData
        {
            var bitmapData:BitmapData = Bitmap(content).bitmapData;
            var dimensions:Point = ResizeMath.newDimensions(
                new Point(bitmapData.width, bitmapData.height),
                new Point(width, height), resizeMethod, true);

            return ImageResizer[resizeFunction](bitmapData, dimensions.x,
                dimensions.y, resizeMethod, true, iterationMultiplier);
        }
    }
}

Update (Jan 27, 2010): in sk.yoz.image.SmoothImage

Zajímá vás jak prodat flexové aplikace do enterprise prostředí? Majitel firmy SiteOne, Jan Bezděk vám o tom bude povídat (a máte se nač těšit). Chcete vidět práce soutěžících, co by rádi Adobe software v hodnotě $2100? Každý kdo přijde bude rozhodovat o tom kdo vyhraje. Toto vše se odehraje v …

Facebook Query Language, or FQL, allows you to use a SQL-style interface to more easily query the same Facebook social data that you can access through other Facebook API methods (assuming your application has access!). Data returned for Facebook ActionScript Api are XML. You can access data via E4X after setting correct namespace. As for now (January 25, 2010), Facebook result defines xmlns=”http://api.facebook.com/1.0/” , but it may change in future, so lets make it dynamic…

Use e.g. extended FacebookLogger and add these lines

public function fql(query:String):void
{
	var call:FacebookCall = facebook.post(new FqlQuery(query));
	call.addEventListener(FacebookEvent.COMPLETE, fqlCallComplete);
}

private function fqlComplete(event:FacebookEvent):void
{
	var data:FacebookData = FacebookData(event.data);
	var xml:XML = XML(data.rawResult);
	var ns:Namespace = xml.namespace();
	default xml namespace = ns;

	var result:Array = [];
	for each(var user:XML in xml.user)
		result.push({uid:user.uid.toString(), name:user.name.toString()});

	default xml namespace = new Namespace("");
	dispatchEvent(new ResultEvent(ResultEvent.RESULT, false, true, result));
}

Notice xml.namespace() line. This method returns Namespace object used in main node (“http://api.facebook.com/1.0/”), so we can define it as default xml namespace. If you do not set empty default namespace after you finish parsing this XML, it may throw some errors later in parsing another XMLs.

this is our fql query:

FB.fql("SELECT uid, name FROM user WHERE uid = XXX")

and data.rawResult contains following XML object

<?xml version="1.0" encoding="UTF-8"?>
<fql_query_response xmlns="http://api.facebook.com/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" list="true">
  <user>
    <uid>12345678</uid>
    <name>Some John Smith</name>
  </user>
  <user>
    <uid>12345679</uid>
    <name>Another John Smith</name>
  </user>...

Notice xmlns attribute in main node.

Default facebook login page is usualy opened in new browser window or popup window, so user lose focus from your page. This application opens facebook login page within your flash application, so user will not lose your page. In fact little iframe trick is used.

This 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 elegant solution for facebook connect with your desktop application (means outside facebook iframe or fbml). I recomend to read all previous mentioned posts before trying to run this app.

Final application (view source enabled)

FB class. Read more about FacebookLogger class here.

package
{
    import flash.net.URLRequest;
    import flash.net.URLVariables;

    import mx.core.Application;

    import sk.yoz.events.FacebookLoggerEvent;
    import sk.yoz.net.FacebookLogger;

    public class FB extends FacebookLogger
    {
        private static const SINGLETON_LOCK:Object = {};
        private static const _instence:FB = new FB(SINGLETON_LOCK);

        protected var API_KEY:String = "bc55511efba53af7a3529ea9e7d1989b";
        protected var APP_SECRET:String = "727616ab7a9acb969e7cec3c7de04d79";

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

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

        override protected function login():void
        {
            session.login();
        }

        public function openPopup(login_url:String, auth_token:String):void
        {
            var request:URLRequest = new URLRequest(login_url);
            var variables:URLVariables = new URLVariables();

            variables.req_perms = 'publish_stream';
            variables.api_key = facebook.api_key;
            variables.v = facebook.api_version;
            variables.auth_token = auth_token;
            variables.fbconnect = "true";
            variables.connect_display = "popup";

            request.data = variables;

            FacebookPopup.open(request);
        }

        public function validateLogin():void
        {
            session.validateLogin();
        }
    }
}

DesktopSession class. Read more about Overriding Class in swc.

... some code ...

protected function onLogin(p_event:FacebookEvent):void {
	p_event.target.removeEventListener(FacebookEvent.COMPLETE, onLogin);

	if (p_event.success) {
		_auth_token = (p_event.data as StringResultData).value;

		FB.instance.openPopup(login_url, _auth_token);

		_waiting_for_login = true;
		dispatchEvent(new FacebookEvent(FacebookEvent.WAITING_FOR_LOGIN));
	} else {
		onConnectionError(p_event.error);
	}
}

... some code ...

FacebookPopup class. Read more about Flex IFrame.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    width="510" height="465" xmlns:html="sk.yoz.html.*" move="moveHandler()"
    title="Facebook login">
<mx:Script>
<![CDATA[
    import mx.core.Application;
    import mx.managers.PopUpManager;

    [Bindable]
    protected var url:String;

    [Bindable]
    protected var fb:FB = FB.instance;

    protected function moveHandler():void
    {
        iframe.positionChanged = true;
        iframe.invalidateProperties();
    }

    public function set request(value:URLRequest):void
    {
        var url:String = value.url;
        url += "?";
        for(var param:String in value.data)
            url += "&" + param + "=" + value.data[param];
        this.url = url;
    }

    public static function open(request:URLRequest):void
    {
        var window:FacebookPopup = new FacebookPopup();
        window.request = request;
        window.visible = true;
        PopUpManager.addPopUp(window, Application(Application.application));
        PopUpManager.centerPopUp(window);
    }

    protected function validateLogin():void
    {
        fb.validateLogin();
        close();
    }

    protected function close():void
    {
        visible = false;
        PopUpManager.removePopUp(this);
    }

    protected function refresh():void
    {
        iframe.url = url;
    }
]]>
</mx:Script>
<html:IFrame width="100%" height="100%" id="iframe" autoResize="true"
    url="{url}" visible="{visible}"/>
<mx:HBox width="100%">
    <mx:Text text="Clik Ok after you login to Facebook." />
    <mx:Spacer width="100%" />
    <mx:Label text="refresh" click="refresh()" textDecoration="underline"
        buttonMode="true"/>
</mx:HBox>
<mx:HBox width="100%" horizontalAlign="center" >
    <mx:Button label="Ok" click="validateLogin()"/>
    <mx:Button label="Cancel" click="close()"/>
</mx:HBox>
</mx:TitleWindow>

Application (do not forget to add facebook flex .swc, version 3.4 used in example)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
    import FB;

    [Bindable]
    private var fb:FB = FB.instance;
]]>
</mx:Script>
<mx:Button label="Facebook connect" click="fb.init2(this)"/>
<mx:Text text="{fb.connected ? 'connected' : 'not connected'}" />
</mx:Application>

Application html template. More about flexiframe.js here.

... some code ...
<script type="text/javascript" src="flexiframe.js"></script>
... some code ...