expertria.com

Introduction
For many Flex/Flash developers developing Facebook applications, development maybe daunting at first without a very detailed documentations, sample codes and blogs posting around to help. Most of time, many cannot grasp the general architecture of creating a Facebook application. While I am no expert in Facebook application development, I have picked up some useful tips and tricks along the way and I hope to share it around. Do take note the date of this posting. Facebook platform changes from time to time so 6 months down the road, this post might be obsolete.

Note that when I speak about Facebook development, it means having your Flash/Flex content inside Facebook profile and its canvas page. I do not mean connecting to Facebook using Actionscript. If you are looking to communicate with Facebook using Actionscript, please refer to this AS3 Facebook Library:
http://code.google.com/p/facebook-actionscript-api/

The Basic
Before you get started, I will suggest reading this blog posting by padraenl, titled 10 Things That Would Have Been Nice to Know When Starting My Facebook Application. Facebook Platform native documentation is good for referencing, but there isn’t instructions to teach new developers the “standard way” of approaching problems. This blog post answers to many common questions a developer will have.

How it works:
To understand how Facebook Applications work is very simple. Facebook does not provide you with any hosting service. You host your own application on your own server, and tell Facebook where to retrieve it. You churn out your own HTML / FBML / Javascript codes and Facebook parse it on its server, as simple as that. Essentially, you can develop in any language you like, as long as your codes render out the proper HTML / FBML / Javascript.

Things to note is that some of the examples you found on Facebook currently might be obsolete as Facebook now has a New Profile Design. To understand the new profile, you can read it’s documentation, or just scroll down to check the few screen shots I placed below:

New Profile

Instead of a one page profile now, there is now “Wall”, “Boxes”, and Application Tab. Therefore, you will need to plan at least 3 screens for your application.

Main Profile - Wall:

This is mostly visited page from the user’s friends. You have the real estate of a small column on the left hand side of the page. If you are using a Flash movie, it will only play after the user has clicked on a preview image due to Facebook restriction. This part is cached by Facebook and will refresh by using setFBML or the more scalable method fb:ref tag and fbml_refreshRefUrl method. I strongly recommend fbml_refreshRelUrl method. You can learn more about fb:ref here and view the code example here: http://wiki.developers.facebook.com/index.php/FBML_Dynamic_Setup.

Boxes

Boxes is the part where your application will be. Note that your application can EITHER be inside WALL or BOXES tab, and this is controlled by the user. (See the next Screenshot, where under the Video application, the user can choose to “Move to Wall Tab” or “Remove Box”). Also note that you can choose the left column (wide) or the right column (narrow) under your application settings.

Under Boxes tab, your Flash file will NOT show until the user clicks on a preview image.

All the Boxes content are cached and is refreshed by setFMBL or the more scalable method fb:ref tag and fbml_refreshRefUrl method.

Application Tab

This is the best privilege your application can have. A user loves your application so much that he/ she adds it to an application tab. In this case, your application has all the real estate of the entire page, and you can have a very customized UI / information like the below screenshot (Animoto application)

Note that this page is NOT cached by Facebook. So any content is taken directly from a URL you specified in the application settings. For example, you can set Facebook to take from http://expertria.com/myapp/profiletab.php. Facebook will load the page and display any HTML it loads from your server inside the Application Tab.

This also means you need to prepare your server for the load as this is no longer cached by Facebook. Also, if your server is slow is responding, Facebook will consider it as a timeout.

The Main Application.

This is the main application, outside the profile page. This is the part where user who have granted the application permission will see. Typically, it is under a url like http://apps.facebook.com/yourappname/yourapppageurl.

For example, if you set the base url of your application as http://expertria.com/myapp/. A page on Facebook “http://apps.facebook.com/appname/viewallmyfriends.php will be retreivng information from http://expertria.com/myapp/viewallmyfriends.php

You can have as many pages in your application as you want, as well as useful features like URL-rewriting for neater URL address, etc. Facebook does not care as long as they get a http 200 response for the page it request and the response contain valid HTML / FMBL, and that the response is not empty.

PHP development
You can develop Facebook application in any language on your server, but PHP has more code samples and examples around. I will chose PHP as the development language just for the reason of support. Note that as of the writing of this article, if you download the PHP library from Facebook developers site, you will get the old library (which does not has the full feature set for the New Profile Design).

To get the latest one, please download from their SVN:
http://svn.facebook.com/svnroot/platform/clients/php/branches/redesign-changes/

Where to keep my data
As mentioned, Facebook does not care what you do on your server, as long as your server response with valid HTML / FBML. Therefore, you can have data persistence in your own mySQL, or any database you want.

However, I will recommend using Facebook Datastore for a few reason. Firstly, you will not need to maintain another database. Secondly, you can do FQL to achieve something like  “Get those users who had installed this application,w ho are also the current user’s friends, who also are tagged in my application” , in a very direct  manner. Thirdly, there is a test console to help you test your FQL (Facebook Query Language).

Essentially, Facebook Datastore consist of Objects (like Tables) and Associations (like Foreign Key). I strongly suggestion anyone who is new to Facebook Datastore to check out this blog here [
Introduction to the Facebook Data Store API ->http://www.dereksantos.ca/?p=23]. It has far better explanation than Facebook documentation, and anyone with RDBMS knowledge will strike a chore instantly by reading the article.

Using FMBL and Javascripts
Learn FBML and Facebook’s Javascript FBJS before building your application! While many HTML tags are supported in Facebook, you cannot use an Object tag to render your swf directly in Facebook. You will need to use <fb:swf> tag. Using FBML will also gives you a consistent look to your application, so that it will looks like Facebook native application. For example, there is no need to build a custom tab as there is fb:tab. There is also no need to create a blue button that imitate facebook buttons as you can always use Facebook’s css class=”inputbutton” to change the style of your button to match Facebook’s.

As for Javascript , there are also restriction to Javascript. For example, there is no innerHTML to get the content of your HTML. Thus, you will need to learn how FBJS works on Facebook. You will also need FBJS to communicate between your SWF and the main Facebook page.

Flash FBML
Refer to this page to see how to embed Flash in Facebook page. The documentation is complete
http://wiki.developers.facebook.com/index.php/Fb:swf

Essential you need to use Fb:swf to render your swf file.

Flash - JS Bridge
The <fb:fbjs-bridge/>  is essential for your SWF to communicate with the Javascript on your HTML page. It works like External Inteface basically. How it works is that it creates another SWF on Facebook page and your SWF communicates to it via LocalConnection. The bridge will then use External Interface to communicate to the Facebook page on your behalf.

Refer to this documenation for code samples: http://wiki.developers.facebook.com/index.php/Fb:fbjs_bridge

Also, check out this library to call / receive functions in AS3

Creating Flash in Javascript
There are two ways to create a SWF dynamically using Javascript. One way is to use a fb:js-string, which is a pre-setted FBML, initially invisible, and then use document.getElementById(’name of div to insert’).setInnerFBML(myjstringname) to show it on the page.

An fb:js-string example:
<fb:js-string var=”myjsstringname”>
<fb:fbjs-bridge/>
<fb:swf swfbgcolor=”333333″ imgstyle=”border-width:3px; border-color:white;” swfsrc=”http://expertria.com/swf/fb.swf”   width=”300″ height=”280″   />
</fb:js-string>
Another way is to use document.createElement(”fb:swf”), which will dynamically create a new SWF object. You can then set its swfsrc , width and height using the below code:

var swf = document.createElement(’fb:swf’);
swf.setId(’my_swf_id’);
swf.setWidth(’100′);
swf.setHeight(’100′);
swf.setSWFSrc(’FULL_URL_TO_MY_SWF’);
document.getElementById(’swfContainer’).appendChild(swf);

Summary
I hope the above article helps developers with Flex/Flash background in having a better understanding on Facebook Application. Feel free to drop any tips you have under the comments. There are a few things like Mock AJAX and AJAX javascript which I did not cover, but the above should be sufficient to get someone started.

Keep coding!

Today, we have officially started the ticket sales for The Actionscript Conference.

The price for The Actionscript Conference is $60 until 1st October, which will include lunch, delegate bag and access to post-event party, and of course, many interesting sessions that the invited speakers will be talking about. 25 tickets has been sold in a day and that is very encouraging to us!

Whether you are in Singapore, or nearby countries like Malaysia , Thailand and Philippine, we welcome you to join us! Reserve your ticket today!

I will also be heading to SgDotNet Usergroup Meeting tomorrow to spread the event to the .NET users (in fact, the backend of the TAC registration runs on asp.net).

For those who wish to meet the organizers and the usergroup, learn about BlazeDS and Gaia Framework, feel free to join us at Yahoo! next week by RSVP here. There are just a few seats left at the time of this posting so do reserve one now.

Ciao~

A lot of times I am asked whether I do Flash games. Unfortunately, my drawing and animation talent is pretty limited and so I stick to application development. Flash games is a whole new realm altogether compared to application development.

Flash games consist of :
1. Manipulation of mouse and keyboards
2. Physics Engine
3. Character Animation and very cool Character Graphics
4. Concepts like Breadth-First Search for Character Movement and for Tile-based games

Directly translating the above, Flex Application development consist of
1. Manipulation of Views and databinding to your data
2. Frameworks like Cairngorm, PureMVC (although frameworks like PureMVC could be use in both area)
3. Transition between states, but also very cool buttons , skins and themes
4. Tools for Unit Testing. Different libraries to achieve for chat application, video application, photo application.
Technically they are not very much related to one another and experience in 1 field cannot be interchange to another.  For example, I will not be able to tell you what is the best way to calculate a polygon with multiple edge hitting another polygon with multiple edge. My answer will be “eh..try hitTest?”

However, it came to my knowledge that 2 developers in Singapore has started their own Games development studio in Singapore, Nob Studio, since 2005 and solidify into a full company in 2007.

Clients Nob Studio  worked for includes  www.shockwave.com,  www.kongregate.com, www.armorgames.com, www.smart-kit.com. They have many games under their flag too!

So if you are looking for Flash games developer in Singapore, they are the talents you go for!

This is so exciting !

Singapore Flex Usergroup - July Usergroup Meeting Special - FUG’ Out 01

FUG’ Out (pronounced as ‘fun-out’, or up anything in your own creativity) is a special usergroup event in which we held the usergroup meeting out of Adobe office, into the base of different companies, places. Accompanied with FUG’ Out is contest and free goodies.

For the very first FUG’Out, we will hold our usergroup meeting at the international award-winning company, Tequila\ (http://www.tequila.com). In this meeting, Andrii Olefirenko will speak about Papervision 3D. We also invited Nico, the founder of FDT, Germany, to give us a remote presentation on the FDT IDE and how it can improve your development workflow.

Venue
TBWA\Tequila
T\Junction Building, 5 Kadayanallur Street 069183
Seminar Room

Time
7pm to 9.30pm (Registration starts at 6.30pm)

Price: FREE

SproutBuilder is a Widget Builder in which you can create customizable widgets in which you can embed on different places like myspace and your blog. The wide number of component it has in its drag-and-drop interface means that there is a great variety of widgets you can built. A good example will be to build a customize banner for marketing purpose, that pulls in the latest blog posts or twitter feeds.

I have create a Sprout above. You can reply to me by clicking on the reply button!

AsWing is a set of UI components for Actionscript 3.0. Like Flex, it has its own series of components like VBox, Buttons, etc, and are skinnable with customizable look and feel. The good thing about AsWing is that you do not need to have a Flex project to use it. You can build it upon a pure AS3 project.

Since it is based from its Java sibling Swing, Java developers will find its API very familiar.

More on AsWing: http://www.aswing.org/


Below is a screenshot from aswing website


“Look mum, this is not in Flex!”

Ads
The hostgator as well as the ipowerweb offer quality web hosting services focusing on reasonably priced dedicated servers. The lunarpages also provides personal and business website hosting and VPS. You can read any webhosting review in order to discover the best image hosting service on affordable rates.

A short snippet to convert a uicomponent into base64 data which you can send to your database. I need to convert images into base64 data for AirTalkr as Openfire requires the avatar to be set in base64 format. Here is the snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import flash.display.BitmapData;
import com.adobe.images.JPGEncoder;
import mx.utils.Base64Encoder;
import flash.utils.ByteArray;
 
private static const QUALITY:Number =80
 
function getBase64FromComponent(photo:UIComponent) :String
{
 
var data1:BitmapData = new BitmapData(photo.width, photo.height); data1.draw(photo);
 
var en:JPGEncoder = new JPGEncoder(QUALITY);
var bArray:ByteArray=   en.encode(data1);
 
var encoder:Base64Encoder = new Base64Encoder();
encoder.encodeBytes(bArray, 0, bArray.length);
var base64data:String = encoder.flush();
return base64data;
 
}

PS: I am not sure if there is a shorter way to do the above, like using base64Encoder directly. If there is, and I am doing extra stuff, do let me know!

If you are working with XML class and e4x in AS3, take note that having namespaces in your xml will disable normal reading using the dot syntax unless you add the namespace to your code.

For example, if you have this:

1
2

var xml:XML = <root>
<photo><src>123.jpg</src></photo></root>trace(xml.photo.src)

will work correctly. However, something like this:

1
2

var xml:XML = <root>
<photo xmlns="photo:id"><src>123.jpg</src></photo></root>trace(xml.photo.src)

then xml.photo.src will return empty. To solve the problem, just add the namespace programmatically with

1
2

namespace ns="photo:id"
use namespace ns;

and the code will work

This solution is reference from Arul Prasad’s blog

Recently, I found an issue with ADT package of air files which I thought it will be good share around. When packaging AIR files using ADT tools, e.g

<path>\flex_sdk_3\bin\adt -package icicle.air application.xml Main.swf icons resources/icon resources/images

Do not include empty files (e.g., a txt file with no content inside). If you have an empty file, the installer will raise an error that the file cannot be found and the installation will fail. So..do not include an empty file. =)