gadgets.utils.getUrlParameters()["containerVersion"]; ou

gadgets.utils.getUrlParameters()["gadgetWidth"];

Post complexo (em inglês) - ver thread:

We now support two cool new features for gadgets in canvas view:

• Container version detection
• Flexible application width

A quick introduction follows. We hope you enjoy them! They're enabled on sandbox and should reach production soon. If you have any feedback, please let us know!

Container Version Detection

The Container Version is supplied to your gadget in a new iframe parameter (containerVersion) in canvas view, so it can be retrieved like this:

var containerVersion = gadgets.util.getUrlParameters()["containerVersion"];

Its value is 1 for the canvas view container in the old orkut UI and 2 for the canvas view container in the new orkut UI. You can read this to determine which container your application is running inside of. Please be aware, however, that "container version" is not the same as "orkut UI version"... for now, there is a 1-to-1 correspondence (1 for old orkut, 2 for new orkut) but this may come out of sync when we launch new container versions or new UIs.

Configurable App Width

That's right, we now support configurable width for applications in canvas view!

You can specify a "preferred width" to orkut in your applications XML by means of the preferred_width attribute of the Content tag:

<?xml version="1.0" encoding="UTF-8"?>

<Module>

<ModulePrefs title="Yourtitlehere"

author="authorhere"

author_email="email_here@......com"

description="Description here...."

screenshot="http://url/of/a/screenshot/of/your/app"

thumbnail="http://url/of/the/thumbnail/for/your/app">

<Require feature="opensocial-0.8" />

<Locale lang="en" country="us" />

</ModulePrefs>

<Content type="html" preferred_width="900">

<![CDATA[

...

</Content>

</Module>

The container will try to allocate your indicated width but might have to crop it if it's too big and expand it if it's too small. The actual width will be reported to you in the "gadgetWidth" iframe parameter.

Some points to take into account are:

• The preferred_width parameter will only be taken into account when rendering your application on container version 2, but will be ignored in container version 1.
• The container might or might not honor your preferred width depending on the available space.
• The gadgetWidth iframe parameter is only available to your application in container version 2 and above. This is the "slight catch" we were talking about above.

Therefore, the correct way to determine your application's actual width is first testing the container version and then, if the version is 2 or above, reading the gadgetWidth parameter. Otherwise (container version 1), the width of the gadget is fixed at 835px. So an example of Javascript code would be:

// Determines the actual width of the application

function getActualWidth() {

return (gadgets.util.getUrlParameters()["containerVersion"] >= 2) ?

gadgets.util.getUrlParameters()["gadgetWidth"] : 835;

}

Basicamente, o que foi alegado é que um bug estava presente em alguma das ferramentas opensource usadas pelo Orkut (provavelmente o Shindig ), e que afetou gravemente uma série de funcionalidades.

Venho acompanhando os status enviados na lista, mas o fato é que o problema já se arrasta por praticamente um mês. Assim que as novidades aparecerem, escrevo um post por aqui.

Lembrando que o problema afeta basicamente a versão "profile" dos gadgets e a publicação de "activities".

Dúvidas ? Entre em contato.

Pode ser algo bobo, ou até inútil, mas obter reconhecimento é sempre bom. E receber um reconhecimento vindo da Google é melhor ainda.

Isso demonstra que apesar de ser uma empresa grande, valoriza muito as pessoas que ajudam na evangelização dos produtos e/ou APIs.

um abraço.

Faça download dos arquivos de exemplo usando Opensocial.

Uma breve explicação sobre os arquivos contidos no zip acima:

- Pasta robson: contém os arquivos que simulam o iGoogle. Para funcionar, é necessário instalar o shindig (recomendo a versão php que é mais fácil). Instalado o shindig, copiar a pasta robson para o diretório \shindig\javascript e chame via browser http://shindig/gadgets/files/robson/test-robson.html

- Pasta exemplo: contém um arquivo xml usado para funcionar um aplicativo no orkut, tanto visão canvas, quanto profile. Além disso, tem alguns exemplos de requests de dados em javascript. É necessário fazer upload para um hosting e ter acesso via sandbox, caso queira modificar e mexer.

Caso você não possua um hosting, pode usar a versão do Opensocial-BR, disponível em http://www.opensocial-br.org/exemplo/opensocialbr.xml . Acessando o sandbox do Orkut, clique no botão editar na esquerda (menu de aplicativos); vai habilitar uma caixa de texto para que você digite a url do aplicativo.

Outras informações:

• Inscrição para o ambiente de sandbox do Orkut ( testes ) - Clique aqui ;
• Opensocial plugin para Firebug (requer Firefox e Firebug);
• OSDE - Plugin para eclipse, muito útil para desenvolver aplicativos sem precisar de um container;
• Partuza - rede social de exemplo que pode ser usada para desenvolver aplicativos;

Para finalizar, há o grupo de discussão Opensocial-GTUG, Brasil que conta com um grupo de pessoas que trabalham com a tecnologia e podem ajudar em caso de dúvidas.

Até a próxima!

Com o intuito de disseminar mais conteúdo sobre a plataforma, resolvi abrir o blog, em conjunto com a Wiki, para que todos possam colaborar. Caso tenha interesse em colaborar, basta fazer contato.

No artigo de hoje, vamos ver a instalação do PHP-Shindig dentro do ambiente Windows, para que possamos na próxima etapa, criar uma versão parecida com o iGoogle. Essa versão é a tradução, com algumas melhorias, do artigos original de Chris Chabot.

O Shindig é um projeto de código aberto, que funciona basicamente como o servidor de aplicações Opensocial. Em outras palavras, ele é responsável por renderizar o gadget e fornecer todo o conjunto de api´s necessárias para que o Opensocial funcione. Veja a definição do que ele é, extraída do próprio site do projeto:

Apache Shindig is a container for hosting social application consisting of four parts:

• Gadget Container JavaScript: core JavaScript foundation for general gadget functionality (read more about gadget functionality). This JavaScript manages security, communication, UI layout, and feature extensions, such as the OpenSocial API.
• Gadget Rendering Server: used to render the gadget XML into JavaScript and HTML for the container to expose via the container JavaScript.
• OpenSocial Container JavaScript: JavaScript environment that sits on top of the Gadget Container JavaScript and provides OpenSocial specific functionality (profiles, friends, activities, datastore).
• OpenSocial Data Server: an implementation of the server interface to container-specific information, including the OpenSocial REST APIs, with clear extension points so others can connect it to their own backends.

Instalando o Shindig no Windows

Este guia mostra os passos necessários para deixar o Shindig funcionando na plataforma Windows.

Instalando o 'WAMP'

O Wamp é um pacote de aplicativos, e significa Apache, MySQL e PHP para Windows, necessário para que o Shindig funcione.

Primeiramente, baixe o wampserver do endereço: http://www.en.wampserver.com/

Clique no link de download, salve no seu computador e então execute-o.

No instalador, clique em "next" em cada passo, já que as configurações padrão são suficientes para o que será usado neste guia.

Após a instalação, provavelmente você receberá um alerta do Windows, como a imagem abaixo. Clique em "desbloquear" para que seu servidor Apache possa escutar requisições na porta 80.

Configurando o Apache e as extensões do PHP

Após a instalação do wampserver, é hora de configurarmos os módulos que o Shindig precisa. Com o wampserver iniciado, você terá um ícone no systray (ao lado do relógio), e clicando com o botão esquerdo do mouse, você verá várias opções de configuração.

Para o Shindig, precisamos de poucas coisas - mod_rewrite para Apache, que pode ser ativado no item Apache -> Apache Modules, clicando na opção  'rewrite_module'. O "v" indica que o módulo está ativo.

Para o PHP, precisamos de algumas extensões, que podem ser visualizadas através da opção PHP -> PHP Extentions . Para ativá-las, basta clicar na extensão, da mesma forma que fizemos com o mod_rewrite.

As extensões requeridas são:

• json
• mcrypt
• simplexml
• libxml
• curl
• openssl
• mysqli

Instalando um cliente SVN

Seguindo o tutorial, precisamos de um cliente SVN para podermos baixar o módulo do Shindig do repositório. Tortoise possui uma excelente interface gráfica, e é por isso que decidimos usá-lo. Faça o download de http://tortoisesvn.tigris.org/

Execute o instalador, e mais uma vez, as opções padrão são suficientes. Vá clicando em next até o fim.

Quando finalizada a instalação, será necessário reiniciar, já que o Tortoise instala extensões integradas ao Windows, que são visualizadas com o clique do botão direito do mouse em qualquer parte da tela.

Realizando checkout do código fonte

Depois de reiniciar, vamos fazer checkout do código fonte do Shindig. Checkout significa baixar todo o conteúdo do repositório onde está armazenado.

Vá ao diretório root do servidor web (c:\wamp\www) e crie um diretório chamado shindig:

Entre no diretório criado, clique com o botão direito na tela e selecione a opção SVN Checkout (item que o Tortoise adicionou):

No campo Url of repository, digite o seguinte endereço: http://svn.apache.org/repos/asf/incubator/shindig/trunk/ e confira com a imagem abaixo.

Clique em ok, e o resultado será uma tela igual a que está logo abaixo:

Assim que estiver pronto, a estrutura dos diretórios deverá se parecer com a abaixo. Os "v" em verde, significam que o fonte que você tem local, não tem nenhuma alteração em relação ao repositório.

Um passo importante nesse momento é configurar o diretório onde o Shindig fará cache dos gadgets, e que não está coberto no tutorial do site. Siga os seguintes passos:

• Crie um diretório temp, na raiz do shindig - c:\wamp\www\shindig\temp;
• Edite o arquivo de configuração C:\wamp\www\shindig\php\config\container.php , editando na linha 160 a chave 'cache_root', que deverá ficar 'cache_root' => 'c:/wamp/www/shindig/temp'',

Configurando o Apache para o Shindig

Primeiramente, localize o arquivo de configuração do apache  (chamado de httpd.conf). Esse arquivo estará no diretório c:\wamp\bin\apache\apache2.2.8\conf.  Lembre-se que a versão do apache do seu wamp pode ser diferente do tutorial, portanto, vá navegando pela estrutura raiz do diretório wamp.

Não vamos mexer nele por enquanto. Precisamos criar apenas uma entrada no virtual host, para apontar para o diretório do Shindig. Acesse o diretório "extra" que está localizado dentro dessa pasta, no meu caso c:\wamp\bin\apache\apache2.2.8\conf\extra e edite o arquivo httpd-vhosts.conf

Edite esse arquivo, removendo os 2 exemplos de configuração (são exemplos e não funcionam) e depois adicione as 2 instruções - uma para o localhost e outra para o Shindig.

<VirtualHost *:80>
ServerAdmin webmaster@dummy-host.localhost
DocumentRoot "C:\wamp\www"
ServerName localhost
ServerAlias localhost
</VirtualHost>

<VirtualHost *:80>
ServerName shindig
DocumentRoot "C:\wamp\www\shindig\php"
ErrorLog "logs/shindig-error.log"
Customlog "logs/shindig-access.log" common
</VirtualHost>

Próximo, precisamos fazer com que o Windows "entenda" o nome do host "shindig". Usaremos uma técnica de editar o arquivo de host, localizado em: c:\WINDOWS\system32\drivers\etc\hosts :

E adicionamos o "shindig" (sem as aspas), conforme abaixo:

Depois de feito tudo isso, reinicie seu wampserver, clicando com o botão esquerdo do mouse no ícone ao lado do relatório e selecionando 'Restart All Services':

Testando!

Aponte seu browser para o endereço: http://shindig/gadgets/ifr?url=http://www.dxs.com.br/mundojava/olamundo.xml

Você deverá visualizar o gadget renderizado na tela, e isso significa que tudo funcionou corretamente e que seu Shindig está ok. Faça testes, passando como parâmetro na url outros gadgets.

Hello World Opensocial Shindig

Terminamos assim a primeira parte do nosso artigo. No próximo veremos como criar nossa estrutura para parecer com o iGoogle. Dúvidas ou sugestões ? Deixe seu comentário.

Robson Dantas
Opensocial Guru