Páginas

segunda-feira, maio 19, 2008

GOOGLE GADGET, GWT, ORKUT, OPENSOCIAL

Vou colocar aqui algumas das minhas experiências com o GOOGLE GADGET, incluindo experiências para adiciona-los como aplicações opensocial do ORKUT.

Lembre-se de alterar as URLs para que as mesmas sejam direcionadas para as suas aplicações.

IGOOGLE

Exemplo1: Código XML para uma aplicação GWT no iGoogle.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="DMS Google Gadget Test" description="Teste do Google Gadget.">
</ModulePrefs>
<Content type="html">
<![CDATA[
<html>
<head>
<title>DMS Google Gadget !!</title>
</head>
<body>
<script src="http://www.neoage.com.br/gwt/web/org.dms.Main/org.dms.Main-xs.nocache.js"></script>
</body>
</html>
]]>

</Content>
</Module>
Exemplo2: Código XML para uma aplicação FLEX no iGoogle.

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="Flex Teste" height="300" scrolling="true">
<Require feature="flash" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<div id="flashcontainer" style="text-align: center;"></div>
<script type="text/javascript">
// The URL for the .swf file that shows the specified trick.
var url = "http://www.neoage.com.br/gwt/flex/FlickrRIA.swf";
// Play .swf file.
_IG_EmbedFlash(url, "flashcontainer", {
swf_version: 6,
id: "flashid",
width: 250,
height: 250
})
</script>
<br />
]]>

</Content>
</Module>

ORKUT / OPENSOCIAL

Para que os gadgets funcionem no orkut / opensocial, no XML você deve fazer o seguinte:

1 - Adicionar o texto: <Require feature="opensocial-0.7"/>

2 - O local de hospedagem do xml deve ser o mesmo local onde você hospedou o seu javascript criado pelo GWT. Caso seu XML esteja hospedado dentro do Google Gmodules. Você deve utilizar um proxy. Para isto coloque em suas urls externas o seguinte comando: http://gmodules.com/ig/proxy?url=<SUA URL>
No caso de você alterar sua aplicação, você deve alterar o proxy, pois o gmodules não consegue perceber isto de forma automática. Para isto você deve adicionar &x=1, &x=2...
http://gmodules.com/ig/proxy?url=<SUA URL>&x=1

OBS: Ainda não consegui fazer com que o GWT consiga interagir com a API de dados do Opensocial.


Exemplo3: Código XML para uma aplicação GWT no ORKUT.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="DMS ORKUT Gadget Test PROXY"
description="Teste do ORKUT Gadget PROXY."
author="DS"
author_email="xxx@google.com"
author_location="GYN,GO,BR"
width="300"
height="250"
thumbnail=""
>
<Require feature="opensocial-0.7"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<html>
<head>
<title>DMS ORKUT Gadget !!</title>
</head>
<body>
<script src="http://gmodules.com/ig/proxy?url=http://www.neoage.com.br/gwt/web/org.dms.Main/org.dms.Main-xs.nocache.js"></script>
</body>
</html>
]]>

</Content>

</Module>
Exemplo4: Código XML para uma aplicação FLEX no ORKUT

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Open Social App FLEX"
author_email="">
<Require feature="opensocial-0.7" />
<Require feature="flash" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript">
_IG_RegisterOnloadHandler(init);
var flexAppId = "OpenSocial";
function init() {
loadFlash();
}
function loadFlash()
{
var swfUrl = "http://www.neoage.com.br/gwt/flex/FlickrRIA.swf";
gadgets.flash.embedCachedFlash(swfUrl, "flashcontainer", {id: flexAppId, width: 500, height: 500 });
}
function getFlexApp(appName)
{
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[appName];
} else {
return document[appName];
}
}
</script>
<div id="flashcontainer" style="text-align: center;" width="500" height="500″></div>
]]>
</Content>
</Module>


Exemplo5: Código XML para exibir seus amigos no orkut
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Gifts part 1 - Friends">
<Require feature="opensocial-0.7"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<script src="http://opensocial-resources.googlecode.com/svn/samples/tutorial/tags/api-0.7/gifts_1_friends.js"></script>
<script>
gadgets.util.registerOnLoadHandler(init);
</script>
<div id='main'>
Your friends:
<div id='friends'></div>
</div>
]]>

</Content>
</Module>

Nenhum comentário:

Postar um comentário