And thank you to everyone who attended my tutorial presentation. I enjoyed it very much and would be happy to be of service to anyone who needs help developing their apps.

Here is a link to the code I went over. The code is derived from the Orkut Sample App linked to below. Download Here

Check out the list of links below that may be of interest.

Thanks again, and good luck with OpenSocial. Also, be in touch if you need help getting Flash/Flex deployed into your gadget.

-Ariel Jakobovits (arieljake at gmail dot com)

Useful Links:

hi5 hackathon PPT & Sample App

http://www.slideshare.net/lrm718/hi5-hackathon-presentation

Orkut Sample App

http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.7.html

Orkut Tutorial Video

http://youtube.com/view_play_list?p=AF95111FF081DBAC

OpenSocial API

http://code.google.com/apis/opensocial/docs/0.7/reference/

Happy Easter! We will be hosting Western Region OpenSocial Hackathon at Hurricane Electric “The Matrix” building. The city is listed as Fremont but it is actually on Milpitas border which is 2-3 miles north of 237 or less than 10miles from Mountain View.

We are not going to put any age limit. If you have a son or daughter want to hack codes with us or you haven’t even finish college or under 21, you can join us by bringing your laptop.

If you can’t do Javascript, just bring your laptop and we have enough hackers to explain how it works.

We are going to make this a hacker helping hacker event.

Bring your own pet projects or apps. If you don’t have any idea, you can join us on the learning project.

This is our last major effort to help those want to learn OpenSocial and solve some of your problems in hacking OpenSocial APIs.

Last hackathon we gave out hundreds of gifts from our sponsors. We’re going to give more out this time. We won’t be giving boxes and boxes every meeting. It takes a lot of work plus these boxes are extremely heavy to carry around. Come and learn while you’ll be getting something useful for your work.

Founder
SVWB

Date/Time
3/26/2008 Wed 7pm-12am

Location
Hurricane Electric Data Center

Address
48233 Warm Springs Blvd. Fremont, CA

RSVP
http://opensocialhackathoniii.eventbrite.com

Giveaway Prizes for participating hackers
Roxio:
- Easy Media Creator 10 Suite (Value $99) 3 licenses PC
- Toast 8 Titanium (Value $80) 3 licenses Mac

Google OpenSocial:
- Swags not specified

RockYou:
- Geek toys
- Stickers

Sun Microsystems:
- 3 T-Shirts (Value $20)
- 2 Books (Value $50)

Peachpit:
- 1 Book: Building a Web Site with Ajax: Visual Quick Project Guide by Larry Ullman (Value $20)
- 1 Book: Bulletproof Ajax by Jeremy Keith (Value $35)
- 1 Book: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS by Dan Cederholm (Value $40)

Dummies:
- 3 Books: JavaScript for Dummiesby Emily A. Vander Veer (Value $25)
- 1 Book: Web Analytics for Dummies by Pedro Sostre & Jennifer LeCalire (Value $25)

Download here

The code works like this:

1) the gadget.xml defines the plugin code and includes the necessary javascript files.

2) One of the included javascript files is gadget.js, which defines an onload handler that instantiates the flex app and provides a getFlexApp method for obtaining a reference to the Flex application when it is time to call functions on it.

3) In OpenSocial.mxml, the flex app instantiates the FABridge, registers “setFriends” as a function callable by Javascript in the init() function, and provides a handler for a button that will call “getFriends” in the Javascript using the ExternalInterface.

4) The “getFriends” javascript function is defined in bridge.js, which is a file that contains all of the functions that I want the Flex app to use and all the functions that will communicate back to Flex.

5)  The function “getFriends” in bridge.js calls the function “loadFriends” found in api.js, which is a file that contains all of the Open Social API specific code, including request handlers that will receive data back from the Open Social container.

6) When the “loadFriends” function in api.js is complete and is ready to return the requested friends data, it will call “setFriends” in the bridge.js file to have the data returned to Flex.

7) Instead of returning the raw data from the OpenSocial APIs, the “loadFriends” function in api.js will use the “addFriends” function in aggregate.js which in turn uses the “makeFriendObject” function in objectify.js to add translate the raw friends data into an array of simple objects for use in Flex. This is what is passed to “setFriends” in the bridge.js file for delivery to Flex.

Questions?

Date
Sat. February 23, 2008

Time
1:00-6:00pm

Host
University Of Phoenix

Location
University Of Phoenix – San Jose Campus

Address
3590 N 1st St # 100
San Jose, CA 95134

Map

Flyer PDF
http://attachments.wetpaintserv.us/5jQ2FbEkf92PQR%2Bn2uC5cw%3D%3D586028

Hackathon I Photo
http://picasaweb.google.com/thewebsig/OpenSocialHackathonEpisodeI

Hackathon I Video
http://www.youtube.com/watch?v=mGWwpz7OINc

OpenSocial Blog
http://opensocialapis.blogspot.com/2008/02/introducing-opensocial-codelab-with.html

I just got back from the OpenSocial Hackathon, Episode I, sponsored by Silicon Valley Web Builder, conducted at the Google Campus. It was a fun night. We learned a lot about the OpenSocial API and building applications impromptu-style. Thanks to SVWB for organizing the event, Google for having us, the OpenSocial Google Team for presenting and guiding us, and the Hi5 guys for their help.

I spent most of my time working on integrating Flex and the OpenSocial API because A) I love Flex, and B) the REST API is not available yet. So my self-assigned task was to get a Flex app to use the Flex-Javascript bridge provided by Adobe to work inside a gadget deployed in an OpenSocial container and be able to display data retrieved from my profile using the JavaScript API. With minutes left in the event, I succeeded in doing so within the Hi5 container. Here is what I did:

1) Src’ed the FABridge.js file in my gadget XML file.

2) Embedded the SWF directly in my gadget XML file using the object tag (found in your index.template.html file), rather than use gadgets.flash.embedFlash or _IG_EmbedFlash because they never worked for me.

3) Cached my swf on gmodules.com

To do this, visit this url: http://gmodules.com/ig/proxy?url=<place-swf-url-here>. This will cause gmodules.com to download the swf at the specified url and save it locally. Also, you will need to append “?id=X” to the url each time you update the swf (where X is a number that you increment each time you update the SWF) because once cached, gmodules does not replace the SWF at a particular address if you visit the same url again.

This is necessary because modules deployed on Hi5 get served from gmodules.com, which means the domain of your javascript file that you embedded in your gadget XML file will be gmodules.com, and the Flash player will throw a “Security sandbox violation” error when your SWF tries to call a function using ExternalInterface if it is being loaded from your server. By caching your SWF on gmodules.com, you can bypass this problem of crossdomain security. (I tried flash.system.Security.allowDomain but it didn’t work for me).

Also, when actually served, the gadget will not reside on just “gmodules.com” but rather will be on “0.gmodules.com” (zero dot gmodules.com) or some other subdomain. Thankfully, even though we cached using just “gmodules.com”, we can still access our SWF using “0.gmodules.com”. So once you realize which server your gadget is coming from, update the src attribute of your embed tag in your gadget XML file to use the same domain and subdomain when referencing your SWF.

When using this workaround, don’t forget to update the gadget XML file’s embed url each time you advance the SWF file id in the gmodules.com cache.

4) Other notes:

Don’t forget to add <Require feature=”flash” /> to the ModulePrefs section of your gadget file.

Don’t forget to call ExternalInterface.addCallback(“<function-name>”, <function-name>); in your Flex onCreationComplete function to expose your functions.

Don’t forget to make your Flex functions public (though I think that may not be necessary).

Be sure to assign an id in your object tag in your gadget XML file, and use this JavaScript function to reference it:

var flexApp = getFlexApp(<object-tag-id>) ;

function getFlexApp(appName)
{
if (navigator.appName.indexOf (“Microsoft”) !=-1) {
return window[appName];
} else {
return document[appName];
}
}

Then you can make calls like getFlexApp(<object-tag-id>).myFunction(<args>);

Also, you can’t use the getXXX() functions in Flex on the objects returned from the OpenSocial API as specified in the docs (like Person.getDisplayName()), and the objects returned from the various containers (Hi5, Orkut, etc) aren’t implemented the same way (Hi5: Person.fields_.name vs. Orkut: Person.obj_.Name), so you may have to construct objects on the JavaScript side using the getter functions so that Flex can work with the data.

Here is the Flex to JavaScript bridge I created:

Flex:

private function getFriends():void
{
ExternalInterface.call(“getFriends”);
}

JavaScript:

function getFriends()
{
var req = opensocial.newDataRequest();
req.add(req.newFetchPeopleRequest(‘VIEWER_FRIENDS’), ‘viewerFriends’);
req.send(onLoadFriends);
}

function onLoadFriends(data)
{
var viewerFriends = data.get(‘viewerFriends’).getData();

var vFriends = new Array();

viewerFriends.each(function(person) {
vFriends.push(person.getDisplayName());
});

getFlexApp(‘OpenSocial’).setFriends(vFriends);
}

5) Questions to the community:

What are my alternatives to the caching workaround to deal with the crossdomain issues?

Thanks, -Ariel Jakobovits (arieljake at gmail dot com)

Date
Wed. January 30, 2008

Time
5:00-10:30pm

Location
Google Campus

Address
1600 Amphitheatre Parkway, Mountain View, CA 94043
Map

Host
Google OpenSocial

Agenda
5:00pm OpenSocial Presentation & Mission X Introduction
5:30pm Code Lab
7:00pm Hackathon
10:00pm Closing
10:30pm Ending

Food and drinks will be served. Seats are limited. Require registration and approval.

Who Should Attend:

• developer Rock Stars,
• group leaders, and
• entrepreneurs from the Web 2.0 community

What You Will Learn:

• cover sample code,
• how to write a social application, and
• how to work in an OpenSocial developer sandbox.

How To Qualify:

• must bring your fully-charged laptop that support wireless with power charger
• able to program proficiently in JavaScript and a server-side language
• team player
• willing to participate in coding
• prepare to attend the entire hackathon