Jozef Chúťka's blog » JavaScript

Quick Tip: How to run Android application from browser?

Jozef Chúťka — Wed, 24 Nov 2010 10:57:52 +0000

For now I succeeded with general approach – Android market application. If you go through Publishing Your Applications you will notice there is a url (with market:// scheme) that can be used to navigate user to your application in Android market. Sadly this url works only from Android device not from desktop (404 not found)! So I came up with this code:

var isAndroid = navigator.userAgent.toLowerCase().search("android") > -1;
if(isAndroid && confirm("Do you want to run onBoard Android application?"))
    window.location = "market://details?id=air.onBoard2Android";

What it does is:

it first test user agent if it is an Android device, if so
it asks user to decide wheter to use Android and than
it redirects user into Android market application showing details of your application

From here user can install or open the application. You may try it on http://onboard.yoz.sk (run from Android device).

I was also playing with the idea about how to run my Android AIR application from browser, well normaly for AIR apps you would use install badge or its customized version in order to check if the application is installed already and then run or install it. But I hit a major problem with air.swf not dispatching Event.INIT on Android flash player … I will surely get back into this to discover more.

Authorizing Iframe Facebook Applications For Graph API

Jozef Chúťka — Thu, 03 Jun 2010 11:48:09 +0000

This article continues my exploration of best facebook graph api integration into your flash app. Before continue reading, make sure you understand the previous article. Due to huge interest, I am adding codes that makes your flash app working with graph api within facebook iframe. Try this app live on http://apps.facebook.com/blogoauthgraph/, notice once you get there, you are redirected to grant permissions (if not authorized or granted already) and then redirected back to the app, where you are connected and ready to use graph api.

What I did was changing one line of ActionScript, I added autoConnect() methods that sends app flashvars directly into FacebookOAuthGraph object.

var facebook:FacebookOAuthGraph = new FacebookOAuthGraph();
...
facebook.autoConnect(parameters); // passing flashvars

See full ActionScript code for details.

Now there is a different html wrapper for facebook iframe – facebook.php:




    
    
    FacebookOAuthGraphTest

There are few lines of code to be mentioned:

~~getRequestParameter(name) – returns GET parameter from iframe url, you can use your own functions~~
allRequestParameters() – returns object consisting of all iframe GET parameters, used to pass flashvars into our flash
php code to define javascript signed_request variable containing valid token
window.top.location – if there is no token parameter found (not authorized yet), you are redirected to the facebook authorization. Do not forget to change client_id and redirect_uri when using for your app.

Facebook settings:

App ID: 268718683475
Site URL: http://blog.yoz.sk/examples/FacebookOAuthGraph/
Site Domain: yoz.sk
Canvas Page: http://apps.facebook.com/blogoauthgraph/
Canvas URL: http://blog.yoz.sk/examples/FacebookOAuthGraph/facebook.php?a=b
Canvas FBML/iframe: iframe

Disable Deprecated Auth Methods: Enabled
Stream post URL security: Disabled
OAuth 2.0 for Canvas: Enabled
POST for Canvas: Enabled
Canvas Session Parameter (Deprecated): Disabled
November 2010 Rollup: Enabled
Timezone-less events: Enabled
Upgrade to Requests 2.0: Enabled
JSON Encoding Empty Arrays: Enabled

Here is the final facebook app http://apps.facebook.com/blogoauthgraph/

~~updated Jul 21, 2010: Quickfix for late facebook changes:~~

updated Jul 22, 2010: Facebook rollbacked the change and added “Canvas Session Parameter” parameter in facebook app settings / Migrations tab. With this setting enabled, your apps should work normally as they previously did.

updated Mar 16, 2011: Catching token from POST parameter.

Inviting Friends into Facebook Application (update)

Jozef Chúťka — Tue, 09 Mar 2010 11:51:26 +0000

Those are hard times. Facebook discontinued support for Notifications.send method March 1, 2010. Calling this method returns error code 3 (Unknown method). Instead, developers are directed to use other communication channels. From those some are not yet even a part of facebook-actionscript-api yet (dashboard) other not published from facebook (invites) and those that may work via api are experimental and may change any day (activities).

Excluding streams as communication channel, the only usable way, these days, to acquire some new facebook application users is using (part of FBML). When your application is IFrame, you may find interesting that you are able to use FBML within your HTML files. In order to make this happen, you have to use (renders the FBML on a Facebook server inside an iframe). Now, lets see how to open request form in your Facebook Iframe application:

First thing you need is Cross Domain Communication Channel file . It is simple static file, you should name it xd_receiver.htm




    Cross-Domain Receiver Page

now your application index.html file with request form:

Place both files in the same folder (or specify xd_receiver.htm path correctly in FB.Facebook.init() function). Now make sure you setup your application correctly:

Canvas Callback URL: http://facebook.yoz.sk/Test/
Connect URL: http://facebook.yoz.sk/Test/
Base Domain: yoz.sk
Canvas URL: http://apps.facebook.com/facebookyoztest/
FBML/iframe: iframe
Application Type: Website

Now request form should be generated when you visit canvas url.

Important:

Your application must be iframe type
URLs used in this article are not to be used in your apps
This article was written and is valid on March 9, 2010

Using Invitations in light popup (iframe)

If you need to show invitation module over your application, you can use this procedure. If you plan to open iframe over flash app make sure your flash is in wmode transparent or opaque so iframe can overlay it… index.html

...

...

invite.html

invite_callback.html

Continue reading:

Inline Images

Jozef Chúťka — Tue, 16 Feb 2010 14:59:44 +0000

Have you ever heard about inline images? Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as “immediate” data, as if they were referenced externally. This basicaly means, you can insert base64 encoded byte code of any image directly into html file. Using inline images saves HTTP requests over externally referenced objects. Data URIs can potentially store any type of data, not just images!

This example creates snapshot of flash application (on left side) and dynamicly (using javascript) creates inline image (right side) with base64 encoded bytes in src attribute. (right side is html )

Application source:

Data URLs save HTTP requests. When combined with CSS sprites, data URLs can save numerous HTTP requests. It would be interesting to see if data URLs can be combined with USEMAPS or make a data URL CSS sprite. Data URLs are a convenient way to create self-enclosed web pages that don’t rely on external objects to render.

Save HTTP requests, avoids adding to object overhead
Save concurrent thread – browsers default to two simultaneous connections per hostname
HTTPS requests are simplified and performance improved

Well, for now I have no idea how can flash benefit from data urls but if I come to something I let you know.

Quick tip: ExternalInterface.call is synchronous!

Jozef Chúťka — Fri, 12 Feb 2010 16:21:01 +0000

It is a little wonder to me how flash player communicates with JavaScript. Calls are fully synchronous, it works as those (fp and js) were fully integrated into each other. To simulate this lets test some simple flow:

Flash Player calls JavaScript
    JavaScript calls FlashPlayer
        FlashPlayer do some stuff and finishes
    JavaScript finishes
FlashPlayer continues

Following flex application runs simple JavaScript:

document.getElementById("flash").universalCallback();
return "synchronous return";

and results are logged into TextArea:

universalCallback
synchronous return

This means that ExternalInterface.call() is synchronous and waits until called JavaScript finishes. Just after that, flash player moves on the next line. This interesting behaviour makes flash player to hold (but not to freeze) on one line while it is able to continue on different execution (universalCallback()).

Notice, JavaScript to ActionScript data can be sent via ExternalInterface.addCallback() or simple by synchronous return:

var result:String = ExternalInterface.call("function(){" + script + "}");

however, you can not use eval method this way!

var result:String = ExternalInterface.call("eval", script);

Full JavaScript Access From ActionScript (update)

Jozef Chúťka — Wed, 10 Feb 2010 10:10:55 +0000

Have you ever tought about accessing DOM from ActionScript? In fact, you can do it and even far more. You can create and call JavaScript methods and objects, access cookies, change styles… All you need is correct AllowScriptAccess parameter within your flash object. No framework needed here, no hacks, ExternalInterface takes care.

Following application runs JavaScript from textarea:

Application. Line 16 does all the fun

HTML template




    Full Javascript Access

No additional nothing here just:

line 20: allowscriptaccess: “always” (“sameDomain” may also be used)
line 24: tip – add name attribute with swfobject so ExternalInterface.objectID will get correct value

Considerations of using eval:

Improper use of eval opens up your code for injection attacks
Debugging can be more challenging (no line numbers, etc.)
eval’d code executes more slowly (no opportunity to compile/cache eval’d code)

Update (Feb 11, 2010): You can use either eval call:

ExternalInterface.call("eval", script.text);

or wrap your script into anonymous function:

ExternalInterface.call("function(){" + script.text + "}");

Personally, I do not see any difference in execution, it seems to be the same, maybe some performance testing would clarify it. What do you think?

Where to go from here:

Update: Facebook application missing session key on first visit

Jozef Chúťka — Thu, 26 Nov 2009 11:39:40 +0000

There are still some issues with facebook flash api vs. facebook communication. Some of them, you as an application developer, will never get into, but general user will. For example, when new user comes into your facebook iframe flash application for a first time, the first thing he see is “Allow Access?” window:

After clicking “Allow”, you should serve user your flash app. But, notice there is no fb_sig_session_key parameter in facebook iframe src. So you wount be able to verify user session with:

if(parameters.fb_sig_session_key)
    session.verifySession();
else
    session.login()

… and new window is opened instead (that handles the session) so users get confused…

Solution 1

After some thinking I came to this idea. Once user allowed your app, it is enough to refresh page and the session parameter is available, this can be done in javascript:

FB.Bootstrap.requireFeatures(["Connect"], function(){
    FB.Facebook.init(api_key, xd_receiver);

    // open facebook "Allow Access" window:
    FB.Connect.requireSession(function() {
        // user clicked on "Allow"
        // ask for fb_sig_session_key parameter if not found
        if(!getRequestParameter("fb_sig_session_key")){
            // lets ask for it with simple refresh
            top.location =  "http://apps.facebook.com/MYAPPNAME/";
        }else{
            // we have fb_sig_session_key, ready for flash app
        }
    });
}

// support function, you can use your own test
function getRequestParameter(name){
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    var results = regex.exec(window.location.href);
    return results == null ? "" : results[1];
}

Solution 2

Update: I just discovereded, there is a cleaner solution, as the authorizing application spec says. It states there that:

Facebook passes the following parameters to your application when a user interacts with your application:
fb_sig_added: If set to true, then the user has authorized your application.
…

Facebook passes the following parameters only if fb_sig_added is true (that is, if the user has authorized your application):
fb_sig_session_key: …

Facebook offers server side or client side login request (read section How Users Can Authorize an Application) in combination with Post-Authorize Redirect URL. Solutions works this way:

new user comes to your app
your app (client side or server side) redirects user to original facebook page where user can authorize your application (see image)
after authorization user is redirected to your app again (Post-Authorize Redirect URL used, typically, you want to make this URL your canvas page)
BEHOLD user is back on your app with fb_sig_session_key

Here is some code for server side redirect:

require_login();

… or use client side (FBML) code to redirect:

FB.Connect.showPermissionDialog

Jozef Chúťka — Mon, 19 Oct 2009 13:01:08 +0000

If your facebook iframe applications need extra permissions granted, you can use Facebook JavaScript Api to generate modal window over your content to request permissions from users. For this purpose I created a simple FB_test_perm() function. It takes 4 arguments:

api_key – your application api key
xd_receiver – path to xd_receiver.htm file (Cross-Domain Receiver Page)
permission – publish_stream, read_stream …
callback – your function with boolean return (true if permission granted, false if not granted)

facebook_permission_test.js

function FB_test_perm(api_key, xd_receiver, permission, callback)
{
	FB.Bootstrap.requireFeatures(["Connect"], function()
	{
		FB.Facebook.init(api_key, xd_receiver);
		FB.Connect.requireSession(function()
		{
			FB.Facebook.apiClient.users_hasAppPermission(permission, function(result)
			{
				if (result != 0)
					return callback(true);

				FB.Connect.showPermissionDialog(permission, function(result)
				{
					return callback(result == null ? false : (result.indexOf(permission) != -1));
				}, true, null);
			});
		});
	});
}

index.html

xd_receiver.htm




    Cross-Domain Receiver Page

If you can not get your facebook showPermissionDialog popup opened, make sure you set Canvas Callback URL, Connect URL, Base domain, Connect Preview URL correctly:

Make sure you embed flash in transparent / opaque wmode and iframe size (width, height) is enough to display facebook modal window.

Flex IFrame – Web browser in flash (update)

Jozef Chúťka — Mon, 19 Oct 2009 10:45:21 +0000

You can not have a web browser inside your web flash applications right? Well, you can! This solution uses html iframe to generate fake build in browser. So the behaviour of the browser in flash is the same as the one you are previewing this flash in (it is the same one). The best part of it is, you can manipulate with the position and size of this browser directly from flash. sk.yoz.html.IFrame solution was inspired by Alistair Rutherford, www.netthreads.co.uk.

sk.yoz.html.IFrame
FlexIFrame.js
Application
Application html

Flex Iframe application

Core of this thing is sk.yoz.html.IFrame class. It extends Canvas that is used to inherit properties and methods for positioning and sizing. There is one in order to make it work – every IFrame element must have id!

package sk.yoz.html
{
    import flash.events.Event;
    import flash.external.ExternalInterface;
    import flash.geom.Point;

    import mx.containers.Canvas;

    public class IFrame extends Canvas
    {
        public var methodResize:String = "FlexIFrame.resize";
        public var methodMove:String = "FlexIFrame.move";
        public var methodNavigate:String = "FlexIFrame.navigate";
        public var methodVisibility:String = "FlexIFrame.visibility";

        public var positionChanged:Boolean = false;
        public var sizeChanged:Boolean = false;

        private var _autoResize:Boolean = false;
        private var _url:String = '';

        public function IFrame()
        {
            super();
            addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler)
        }

        override public function set id(value:String):void
        {
            super.id = value;
        }

        protected function addedToStageHandler(event:Event):void
        {
            positionChanged = true;
            sizeChanged = true;
            invalidateProperties();
        }

        public function set autoResize(value:Boolean):void
        {
            _autoResize = value;
            if(value)
                addEventListener(Event.RESIZE, autoResizeHandler);
            else
                removeEventListener(Event.RESIZE, autoResizeHandler);
        }

        public function get autoResize():Boolean
        {
            return _autoResize;
        }

        protected function autoResizeHandler(event:Event):void
        {
            positionChanged = true;
            sizeChanged = true;
            invalidateProperties();
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if(positionChanged)
            {
                var point:Point = localToGlobal(new Point(0, 0));
                callJS(methodMove, point.x, point.y);
                positionChanged = false;
            }

            if(sizeChanged)
            {
                callJS(methodResize, width, height);
                sizeChanged = false;
            }
        }

        public function set url(value:String):void
        {
            _url = value;
            callJS(methodNavigate, value)
        }

        public function get url():String
        {
            return _url;
        }

        protected function callJS(method:String, ... values):void
        {
            if(!id)
                throw new Error("IFrame id is not defined");
            var args:Array = [method, id];
            try
            {
                ExternalInterface.call.apply(ExternalInterface, args.concat(values));
            }
            catch(error:Error)
            {
                trace(error.message);
            }
        }

        override public function set visible(value:Boolean):void
        {
            super.visible = value;
            callJS(methodVisibility, value);
        }

        override public function set width(value:Number):void
        {
            super.width = value;
            callJS(methodResize, value, height);
        }

        override public function set height(value:Number):void
        {
            super.height = value;
            callJS(methodResize, width, value);
        }

        override public function set x(value:Number):void
        {
            super.x = value;
            var point:Point = localToGlobal(new Point(0, 0));
            callJS(methodMove, point.x, point.y);
        }

        override public function set y(value:Number):void
        {
            super.y = value;
            var point:Point = localToGlobal(new Point(0, 0));
            callJS(methodMove, point.x, point.y);
        }
    }
}

FlexIFrame.js is JavaScript file. It uses your flex IFrame id from to create (html iframe) or use html element (any element) with the same id (id in flash = id in html). So you can use your prefabricated html elements (banners etc).

var FlexIFrame = {
    get: function(id)
    {
        var iframe = document.getElementById(id);
        if(!iframe)
            return FlexIFrame.create(id);
        return iframe;
    },

    create: function(id)
    {
        var iframe = document.createElement('iframe');
        iframe.id = id;
        iframe.frameborder = 0;
        iframe.style.position = "absolute";
        iframe.style.zIndex = 1;
        iframe.style.border = "none";
        document.body.insertBefore(iframe, document.body.firstChild);
        return iframe;
    },

    resize: function(id, width, height)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
    },

    move: function(id, x, y)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.left = x + "px";
        iframe.style.top = y + "px";
    },

    navigate: function(id, url)
    {
        var iframe = FlexIFrame.get(id);
        iframe.src = url;
    },

    visibility: function(id, visible)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.display = visible ? "block" : "none";
    }
}

This is simple applicationion presenting draggable TitleWindow with “web browser” inside:

Finally do not forget to add flexiframe.js into your .html file:

...

Update (Feb 8, 2010): flexiframe.js resize() method uses style property for width and height (instead of original html element width, height)

Code optimization

Jozef Chúťka — Sat, 17 Oct 2009 12:25:36 +0000

First, my golden rule: method with more than 12 rows is too long. Methods should be short, simple, clean and reusable. In most cases your methods fits into 5-12 rows. If not, you should consider rewriting your methods.

Look at the next code. There is too much nested tests. Soon you get lost with more and more nested levels:

function gimmeResult(a, b, c)
{
    var result;
    if(a)
    {
        if(b || c)
        {
            if(b && c < 0)
            {
                result = 1;
            }
            else
            {
                result = 2;
                // where am I?
            }
        }
        else
        {
            result = 3;
        }
    }
    else
    {
        result = 4;
    }
    return result;
}

Try to linearize code, it is much more cleaner for reading when no multiple nesting used:

function gimmeResult(a, b, c)
{
    if(!a)
        return 4;
    if(!b && !c)
        return 3;
    if(b && c < 0)
        return 1;
    return 2;
}

Sometimes your function does more things than it should. In this case, it chooses item and operate over it. But is it really good to use it this way?

function doSomething(key)
{
    for(i in list)
    {
        if(i == key)
        {
            if(item[i].value > 0)
            {
                item[i].value2 = 1;
            }
            else
            {
                item[i].value2 = 2;
            }
            if(item[i].value3 == 100)
            {
                while(item[i].value3 > 0)
                {
                    // where the hell I am now
                    item[i].value3--;
                }
            }
        }
    }
}

Split your code into separated functions. One selects your item, other operates over item. Result code is more cleaner and reusable.

function doSomething(key)
{
    item = getItem(key);
    if(!item)
        return;
    item.value2 = item.value > 0 ? 1 : 2;
    if(item.value3 != 100)
        return;
    while(item.value3 > 0)
        item.value3--;
}

function getItem(key)
{
    for(i in list)
        if(i == key)
            return list[i];
    return null;
}

Using continue in while cycle causes the current iteration to skip and go to the next one. Sometimes you do not need more processing from current iteration:

while(someIterator)
{
    // some processes here
    if(someIterator != "someValue")
    {
        // some processes here
        // and here
        // and here
    }
}

Using continue removes nesting, code is cleaner:

while(someIterator)
{
    // some processes here
    if(someIterator == "someValue")
        continue;
    // some processes here
    // and here
    // and here
}

When you do not need more iterations…

i = 100;
j = 0;
while(i)
{
    if(i > 90)
        j++;
    i--;
}
// 100 iterations means 100 "i > 50" tests

… you can use break to stop current while cycle and save unnecessary processing:

i = 100;
j = 0;
while(i)
{
    if(i <= 90)
        break;
    j++;
    i--;
}
// 10 iterations means 10 "i <= 50" tests

Where to go from here: