DEVELICIOUS

Developing jummy new media!
24
Mar

Hyves OpenSocial – Swf can’t connect with javascript

Okay, so I’m starting a project soon where the OpenSocial standard comes into play. To give it a little test-run, I’ve created a little gadget for hyves, which does nothing more than display a flash-animation while showing the thumbnails of my 10 last active friends over it. Just a little test to see if I understand the concept of creating a gadget.

So, an OpenSocial swf gadget sort of consists of 3 layers… at least, those are the ones I’m interested in. Swf <–> javascript <–> OpenSocial. In the Swf you use the ExternalInterface to communicate with Javascript, and Javascript makes the calls to OpenSocial. Retreiving data from a javascript is of course a piece of cake. The problem I ran into was when asynchronous calls came in play. For some reason the javascript couldn’t communicate the data back to my Swf, whatever I did… after a bit of digging, it turned out the problem was that, since my Swf gadget is hosted on my own domain instead of on the Hyves domain, I needed to add:

1
2

Security.allowDomain("*");
Security.allowInsecureDomain("*");

After that, things worked like a charm :)

AS3 ExternalInterface code:

1
2
3
4
5
6
7
8
9

import flash.external.ExternalInterface;
 
ExternalInterface.addCallback("loadDataResponse", loadDataResponse);
var r:Object = ExternalInterface.call("loadData");
 
public function loadDataResponse(xmlString:String):void {
	var myxml:XML = new XML(xmlString);
	// Do whatever you want with the xml
}

The Hyves OpenSocial gadget / Javascript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Develicious Hyves TestGadget" summary="" description="" author="" author_email="" thumbnail="" screenshot="" height="260">
<Require feature="opensocial-0.7"/>
<Require feature="flash" />
</ModulePrefs>
 
<Content type="html">
<![CDATA[
	<style>
	html, body {
		margin: 0; /* set the iframed page margin to zero */
		background-color: transparent; /* set the gadget background to transparent */
	}
	</style>
	<div id="flashcontent" name="EvenTesten">
	</div>
 
	<script type="text/javascript">
		var swfVer = "10";
		var flashVersion = gadgets.flash.getMajorVersion();
		var swfUrl = "http://www.develicious.nl/projects/opensocial/testgadget/develicious_testgadget.swf";
 
		function getFlashMovie(movieName) { 
			var isIE = navigator.appName.indexOf("Microsoft") != -1;
			return (isIE) ? window[movieName] : document[movieName];
		}
 
		function loadData() {
			var req = opensocial.newDataRequest();
			req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
			req.add(req.newFetchPersonRequest('OWNER'), 'owner');
 
			var params = {};
			params[opensocial.DataRequest.PeopleRequestFields.FIRST] = 0;
			params[opensocial.DataRequest.PeopleRequestFields.MAX] = 10;
			params[opensocial.DataRequest.PeopleRequestFields.SORT_ORDER] = opensocial.DataRequest.SortOrder.TOP_FRIENDS;
 
			// disabled example on how to filter your result on people who have the app installed
			//params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;
 
			// disabled example with multiple userid's        
			//var hyverIds = ["XXXXXXXXX","YYYYYYYYYYY"];
			//req.add(req.newFetchPeopleRequest(hyverIds, params), 'hyvers');
 
			// example owner_friends
			req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.OWNER_FRIENDS, params), 'ownerfriends');
 
			// example viewer_friends
			req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, params), 'viewerfriends');
 
			req.send(onLoadData);
		}
 
		function onLoadData(data) {
			//var viewer = data.get('viewer').getData();
			//var owner = data.get('owner').getData();
			//var ownerfriends = data.get('ownerfriends').getData();
			//var viewerfriends = data.get('viewerfriends').getData();
 
			//var viewerId = viewer.getField(opensocial.Person.Field.ID);
			//var ownerId = owner.getField(opensocial.Person.Field.ID);
			//var sViewerThumbnail = viewer.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);
			//var sOwnerThumbnail = owner.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE);
 
 
			//ownerfriends.each(function(person) {
 
			var rXml = "<hyvesdata>";
 
			var person =  data.get('owner').getData();
			rXml += "<owner>";
			rXml += "<id>" + person.getId() + "</id>";
			rXml += "<gname>" + person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.GIVEN_NAME) + "</gname>";
			rXml += "<fname>" + person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.FAMILY_NAME) + "</fname>";
			rXml += "<uname>" + person.getField(opensocial.Person.Field.NAME).getField(opensocial.Name.Field.UNSTRUCTURED) + "</uname>";
			var gender = person.getField(opensocial.Person.Field.GENDER);
			rXml += "<gender>" + (gender ? gender.getDisplayValue() : 'unknown') + "</gender>";
			rXml += "<dname>" + person.getDisplayName() + "</dname>";
			rXml += "<nname>" + person.getField(opensocial.Person.Field.NICKNAME) + "</nname>";
			var firstAddress = person.getField(opensocial.Person.Field.ADDRESSES)[0];
			rXml += "<addresstype>" + firstAddress.getField(opensocial.Address.Field.TYPE) + "</addresstype>";
			rXml += "<uaddress>" + firstAddress.getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS) + "</uaddress>";
			rXml += "<addresslocality>" + firstAddress.getField(opensocial.Address.Field.LOCALITY) + "</addresslocality>";
			rXml += "<country>" + firstAddress.getField(opensocial.Address.Field.COUNTRY) + "</country>";
			rXml += "<birthdate>" + person.getField(opensocial.Person.Field.DATE_OF_BIRTH) + "</birthdate>";
			rXml += "<profileurl>" + person.getField(opensocial.Person.Field.PROFILE_URL) + "</profileurl>";
			rXml += "<thumbnail>" + person.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE) + "</thumbnail>";
			rXml += "</owner>";
 
			var ownerfriends = data.get('ownerfriends').getData();
 
			rXml += "<friends>";
			ownerfriends.each(function(person) {
					rXml += "<friend>";
					rXml += "<dname>" + person.getDisplayName() + "</dname>";
					rXml += "<nname>" + person.getField(opensocial.Person.Field.NICKNAME) + "</nname>";
					rXml += "<thumbnail>" + person.getField(Hyves.Person.Field.THUMBNAIL_URL_SQUARE_LARGE) + "</thumbnail>";
					rXml += "</friend>";
			});  
			rXml += "</friends>";
 
			rXml += "</hyvesdata>";
 
			var fm = getFlashMovie("swfgadget");
			fm.loadDataResponse(rXml);
		}
 
 
 
		function init() {
			// use the embedCachedFlash function with the wmode set to transparent so you flashmovie does not fall behind the Hyves presencebar in the footer and behind the main menu items of the Hyves website
			// if you don't want your flashmovie to be proxied you should use gadgets.flash.embedFlash()
 
			if (flashVersion >= swfVer) {
				gadgets.flash.embedFlash(swfUrl, "flashcontent", swfVer, {base: document.location.host, id: 'swfgadget', width: '100%', height: '260', allowScriptAccess: 'always', wmode: 'transparent', flashVars: ''});
 
				//gadgets.flash.embedCachedFlash(swfUrl, "flashcontent", swfVer, {base: document.location.host, id: 'swfgadget', width: '100%', height: '380', allowScriptAccess: 'always', wmode: 'transparent', flashVars: ''});
			} else {
				//link to the latest flash player, if required
				document.getElementById("flashcontent").innerHTML = 'Get the latest Adobe Flash player <a href="http://get.adobe.com/flashplayer/" target="_blank">here</a> to see this content.';
			}
			//gadgets.window.adjustHeight();
 
		}
		gadgets.util.registerOnLoadHandler(init);
	</script>
 
]]>
</Content>
 
</Module>
posted by eric in Digging and have No Comments
Tags: , , , , ,
21
Mar

All your base are belong to us!

Well, “Hello world!” just doesn’t do the trick anymore, and since I can’t come up with a normal title for this first post, I guess something nerdy will always do the trick ;)

So, why this website?

Firstly, I haven’t got anything else to put up here, the last 2 years my website consisted of nothing more than a (in my ‘coding’ eyes) pretty okay attempt at typography and design… or, more clearly said… the word ‘Develicious’ and a half eaten strawberry (see exhibit A).

Secondly, and probably the more important and valid reason, during my programming I sometimes run into problems, but I always manage to find the solution. Sometimes fast, after using my good friend google and finding what I need instantly… sometimes it takes me a few hours, when I have to start digging myself because I can’t find anything on google. So the idea is to save other people the trouble of doing the same digging as me :)

posted by eric in Rambling and have No Comments
© DEVELICIOUS 2009 | Created by Jay Hafling.
Powered by WordPress