Nota do editor: Conhece muito sobre esse tópico? Deseja compartilhar seu conhecimento? Participe hoje do programa wiki do software IBM Lotus.

Introdução

IBM Lotus Connections 2.0 introduziu o conceito de widgets como uma maneira de ampliar e customizar o recurso de página inicial do produto. Um widget é uma pequena parte de código que pode executar dentro de um aplicativo da Web e exibir qualquer conteúdo customizado. Lotus Connections suporta widgets escritos de acordo com especificações iWidget definidas pela IBM. Liberado em 2009, o Lotus Connections 2.5 aperfeiçoa o suporte para widgets nos recursos de Página inicial, Comunidade e Perfis fornecendo áreas de posicionamento adicionais onde o administrador pode implementar widgets adquiridos de outros desenvolvedores.

Os widgets podem ser implementados usando práticas e linguagens de desenvolvimento da Web tradicionais. Assim, desenvolver um widget leva tempo e consome recursos e requer conhecimento de tecnologias de desenvolvimento da Web como HTML, CSS e JavaScript™. Este artigo detalha duas abordagens diferentes que podem ser usadas para acelerar e simplificar o desenvolvimento de novos widgets para Lotus Connections.

Na primeira seção, este artigo mostra como usar o Integrated Development Environment (IDE) do Lotus Widget Factory para criar widgets personalizados para Lotus Connections. Lotus Widget Factory é uma ferramenta que permite o desenvolvimento de widgets prontos para a corporação customizados de forma visual sem necessidade de escrever código. Embora o Lotus Widget Factory oficialmente suporte apenas IBM Lotus Mashups, este artigo demonstra que pode ser usado para desenvolver widgets para Lotus Connections. Este artigo o conduz pelas etapas de criar um widget que exibe uma lista de arquivos de áudio (podcasts) do IBM developerWorks® e permite aos usuários escutá-los diretamente do Lotus Connections.

A segunda seção detalha como colocar na superfície gadgets Google em Lotus Connections usando um wrapper. O wrapper é um iWidget padrão que age como uma interface entre o Lotus Connections e o gadget Google. Note que a abordagem do gadget Google já havia sido apresentada em um artigo anterior do developerWorks, "Implementing and deploying Google gadgets for the Lotus Connections home page," para o release do Lotus Connections 2.0. Enquanto o artigo anterior focava no aspecto de desenvolvimento do wrapper, esta seção vai diretamente ao assunto mostrando as etapas para implementar gadgets Google sem necessidade de escrever código.

As duas primeiras seções deste artigo são acessíveis a leitores que não possuem experiência anterior em programação, como administradores de sistema.

Na seção final, este artigo trata de detalhes de programação das especificações iWidget. Esta seção é voltada para desenvolvedores que possuem conhecimento anterior de tecnologias da Web. O objetivo é oferecer um ponto de partida do qual seja possível explorar as possibilidades de customização e apresentar os novos recursos do iWidget suportados no Lotus Connections 2.5.

Voltar para parte superior

Usando Lotus Widget Factory para desenvolver widgets para Lotus Connections

Esta seção descreve as etapas para criar um widget que exibe o conteúdo de um feed público como uma tabela e disponibilizá-lo aos usuários na página inicial do Lotus Connections. Esta seção cobre a versão 1.0.1 do Lotus Widget Factory.

O widget criado nesta seção busca uma lista de podcasts gravados por IBM developerWorks e disponível através de um RSS feed padrão. Encontre mais detalhes sobre os podcasts em http://www.ibm.com/developerworks/podcast/.

As entradas do RSS feed são uma lista de podcasts MP3 gravados por developerWorks. É possível criar esse widget em questão de minutos com Lotus Widget Factory e sem escrever uma única linha de código. No final desta seção, você aprenderá como aperfeiçoar o widget com um reprodutor de mídia embarcado que permite aos usuários reproduzir e escutar os podcasts diretamente a partir da interface do widget. A Figura 1 mostra como será a aparência do widget.

Lotus Widget Factory

Lotus Widget Factory é um Integrated Development Environment (IDE) para criar widgets customizados dinâmicos. A ferramenta permite alavancar ativos existentes como serviços REST para criar rapidamente widgets dinâmicos sem escrever código.

Uma versão de teste do Lotus Widget Factory está disponível como parte da oferta IBM Mashup Center. Consulte as referências no final do artigo para mais detalhes.

Lotus Widget Factory é baseado no conceito de modelos que são montados a partir de tijolos básicos chamados construtores. Os construtores são componentes genéricos que encapsulam um dado recurso. O Lotus Widget Factory vem com um grande número de construtores predefinidos que vão desde componentes de interface com o usuário, como botões, até componentes responsáveis por buscar dados de um serviço da Web remoto. Uma interface de assistente fácil e simples é associada a cada construtor e permite especificar as características, como as entradas, do construtor.

O Lotus Widget Factory automaticamente gera o código de origem do seu widget com base no modelo montado na ferramenta. O código de origem inclui o código Java™ dos serviços de backend do lado do servidor e o código do lado do cliente, como visualizações HTML, código JavaScript e o descritor XML do widget. O código e os recursos que constituem seu widget são empacotados como um arquivo Web Archive (WAR) padrão que pode ser implementado em um servidor J2EE, como o IBM WebSphere® Application Server.

Informações adicionais sobre Lotus Widget Factory podem ser encontradas nos recursos listados no final deste artigo.

Como mencionado anteriormente, o Lotus Widget Factory está intimamente relacionado a criar widgets para o produto Lotus Mashups. Porque o Lotus Connections e o Lotus Mashups compartilham o mesmo formato subjacente de widgets (especificações iWidget desenvolvidas pela IBM), é relativamente fácil reutilizar e implementar widgets criados por essa ferramenta no Lotus Connections.

Criando um widget de podcast developerWorks com Lotus Widget Factory

A primeira etapa é criar um modelo para gerar um widget capaz de buscar o RSS feed localizado em http://www.ibm.com/developerworks/podcast/channel-dwall.rss. Esse RSS feed público contém uma lista de podcasts recentes gravados pela equipe developerWorks (http://www.ibm.com/developerworks/podcast/).

O widget exibe informações sobre podcasts developerWorks recentes do feed como uma tabela paginada. Cada linha na tabela exibe os dados relacionados a um dado podcast: seu título, duração, descrição e link para o download do arquivo MP3.

Em uma subparte seguinte, o widget é aperfeiçoado com a biblioteca pública Yahoo MediaPlayer JavaScript (http://mediaplayer.yahoo.com/) para permitir aos usuários escutar o podcast diretamente do Lotus Connections, sem baixar o arquivo MP3 manualmente.

Primeiro, vamos começar criando um novo Projeto Lotus Widget Factory:

1. Abra Lotus Widget Factory e selecione File - New - Lotus Widget Factory Project.
2. Selecione um nome de projeto, por exemplo, developerWorksWidget. Deixe os outros campos em branco e clique em Next.
3. Na página Feature Set, mantenha as opções padrão e clique em Next.
4. Na opção Deployment Configuration, selecione a instância de servidor WebSphere Application Server Community Edition que vem com Lotus Widget Factory. Como verá, essa instância de servidor permite trabalhar no seu widget em uma página da Web de navegador independente antes de implementá-lo no Lotus Connections.

Lotus Widget Factory agora cria um novo projeto para você. O Lotus Widget Factory também o avisa para iniciar o servidor WebSphere Application Server Community Edition (se ainda não tiver sido iniciado) e implementar o projeto na instância WebSphere Application Server Community Edition. Clique em Yes para ambos os prompts para fazer isso.

Agora você está pronto para criar o modelo para seu widget. Neste ponto, é possível criar um modelo de widget em branco e adicionar diferentes construtores responsáveis por buscar o feed, formatá-lo e exibir uma tabela de dados. O Lotus Widget Factory possui alguns assistentes de modelo que auxiliam na criação de modelos pré-configurados para usos comuns. Você usará um dos assistentes de modelo integrados:

1. Selecione File - New - Lotus Widget Factory Model.
2. No formulário Choose Project, selecione o projeto criado no conjunto anterior de etapas (deve ter o nome de developerWorksWidget).
3. No formulário Select Model, selecione a opção View & Form com base em REST (na categoria "Quick Start") para instruir o Lotus Widget Factory a criar um modelo de widget pré-configurado com os construtores necessários para buscar um feed e exibi-lo como uma tabela.
4. Não selecione a opção Deploy this model as widget. Essa opção permite implementar o widget em uma instância de Lotus Mashups em execução. Como mencionado anteriormente, o Lotus Widget Factory é projetado principalmente para criar widgets para Lotus Mashups. Você não deve selecionar a opção agora, uma vez que irá implementar o widget para o Lotus Connections em uma etapa posterior.
5. No formulário REST Call Information, insira a URL para o RSS feed developerWorks: http://www.ibm.com/developerworks/podcast/channel-dwall.rss. Certifique-se de ter selecionado GET na opção HTTP Request Type, deixe as outras opções no formulário em branco, e clique em Next.
6. Deixe o formulário Schema Information em branco e clique em Next.
7. No formulário Final REST Service Information, selecione channel/items. Cada item no RSS feed contém informações sobre um dado podcast. Portanto, nesta etapa, informe o construtor REST a exibir nos diferentes itens (podcasts) desse feed.
8. No formulário a seguir, selecione a opção Paged Data Display, que configura seu modelo para exibir um pager para permitir aos usuários navegar através de itens do podcast na parte inferior do widget. Três linhas por página é um bom valor para um widget.
9. Selecione a opção Manage Columns no formulário Column Settings. O formulário permite gerenciar as colunas a exibir do feed na tabela. Tenha em mente que o widget tem estado real limitado na página, então você não deve exibir colunas demais. A Figura 2 mostra um exemplo das configurações que podem ser usadas.
   
   
   
   Figura 2. Formulário Column Settings
   
   
   

   Há um elemento importante nesse formulário: Certifique-se de que o campo status da coluna guid está definido como Counter Column como mostrado na Figura 2. A entrada guid no RSS feed contém o caminho para o arquivo MP3 do podcast. Definindo Counter Column, você especifica o construtor para exibir o conteúdo da coluna guid como um contador (iniciando em 1), em vez de do conteúdo do campo. No seguinte conjunto de etapas nesta subparte, serão colocados links para os arquivos MP3 nos contadores. Clique em Next.

10. Deixe a opção Create Link to Details limpa.
11. Insira um nome para o modelo, por exemplo, developerWorksModel.

A Figura 3 mostra a área de trabalho no Lotus Widget Factory depois de essas etapas terem sido concluídas. O painel Project Explorer à esquerda exibe os recursos do seu modelo developerWorksWidget. Os detalhes do modelo criado são exibidos no painel principal. Notadamente, esse painel mostra os diferentes construtores pré-configurados pelo assistente REST-Based View and Forms e que constituem o modelo.

Neste ponto, foi criado um modelo que já está configurado e pronto para gerar o código de um widget totalmente funcional exibindo a lista de podcasts do developerWorks.

O widget pode ser visualizado em uma página de navegador independente selecionando o modelo na janela Project Explorer (developerWorksModel.model como mostrado na Figura 3) e selecionando Run - Run As - Run As Active Model. Essa ação inicia uma instância embarcada do WebSphere Application Server Community Edition e executa o widget em uma página de navegador inteira como mostrado na Figura 4.

Por fim, foi adicionada a habilidade de permitir aos usuários baixar os arquivos MP3 do widget. Neste exemplo, você irá transformar os rótulos do contador na primeira coluna de cada linha (os números na primeira coluna na Figura 4) em links clicáveis apontando para o arquivo MP3 do podcast correspondente. Lembre que a primeira coluna da tabela está associada ao campo guid no RSS feed original, como configurado na etapa 9 das instruções para criar o modelo acima (veja Figura 2). O valor do campo guid no RSS feed original é o caminho para o arquivo MP3. Nesta etapa, será usado o construtor Link para criar os links usando o valor de guid:

1. No Lotus Widget Factory, selecione seu projeto e modelo criados nas etapas anteriores.
2. Clique em Add a builder call the current model como mostrado na Figura 5.
   
   
   
   Figura 5. Localização do botão Add builder no Lotus Widget Factory
   
   
   
3. Selecione o construtor Link na categoria Page Elements.
4. Nesta etapa, é configurado o construtor Link para criar um vínculo para cada elemento guid na tabela. Lembre, o campo guid no feed contém o caminho para o arquivo MP3. Complete o formulário do construtor, como mostrado na Figura 6, com as seguintes informações:
   
   • No campo Name, insira LinksGUID.
   • No campo Page, selecione REST_ViewPage.
   • No campo Tag, selecione guid.
   • No campo Action Type, selecione Link to a URL.
   • Para o campo URL, clique no botão "..." ao lado do campo e selecione Variables - itemLoopVar - item - guid. O valor gerado para o campo deve ser “${Variables/itemLoopVar/item/guid}”
   
   
   Figura 6. Configurações para o Link builder
   
   
   

É isso! Agora os usuários possuem a habilidade de baixar o arquivo MP3 de um podcast clicando nos números (contadores) na primeira coluna de cada linha. Na subparte final desta seção, é possível aprender como aperfeiçoar o widget com um media player embarcado, permitindo aos usuários escutar o podcast diretamente do widget sem precisar baixar manualmente o arquivo MP3.

Nesse estado, o widget é usável e valioso para os usuários. E a melhor parte é que você não escreveu uma única linha de código ainda.

Na próxima seção, você aprenderá (como um administrador) como é possível disponibilizar o widget aos usuários na página inicial do Lotus Connections.

Implementando widgets criados em Lotus Widget Factory na página inicial do Lotus Connections

Como mencionado anteriormente, Lotus Widget Factory 1.0.1 suporta oficialmente apenas Lotus Mashups. Assim, não é possível implementar widgets diretamente no Lotus Connections de IDE. Por esse motivo, é necessário passar por algumas etapas manuais, mas simples, para disponibilizar seu widget no Lotus Connections.

Para este exemplo, o widget é registrado no recurso da página inicial do Lotus Connections. É possível definir mais detalhes para as etapas de registro necessárias para os recursos Comunidades e Perfis na documentação IBM Lotus Connections 2.5 Information Center referida no final deste artigo.

Esta seção o conduz através das duas seguintes etapas:

• Extrair recursos e código do widget da Lotus Widget Factory como um arquivo Web Archive (WAR) padrão e implementar o arquivo WAR em uma instância de WebSphere Application Server como um aplicativo da Web.
• Registrar o widget implementado na página inicial do Lotus Connections. Observe que apenas pessoas na função de administrador podem disponibilizar novos widgets aos usuários.

Primeiro, exporte o código e os recursos do widget da Lotus Widget Factory como um arquivo WAR padrão e implemente-o em uma instância de WebSphere:

1. Em Lotus Widget Factory, clique com o botão da direita em seu projeto de widget no painel Project Explorer (developerWorksWidget).
2. Selecione Export - WAR file.
3. Selecione um local no seu disco para o arquivo WAR.
4. Implemente o arquivo WAR em uma instância do WebSphere Application Server. A maneira sugerida de proceder é usar a mesma instância do WebSphere Application Server que aquela executando o Lotus Connections. Implementar um arquivo WAR é uma etapa padrão; consulte a documentação IBM WebSphere Application Server 6.1 Information Center para mais detalhes.
   
   

   Anote a raiz de contexto escolhida durante a implementação (por exemplo, devWorksApp).

5. Inicie o aplicativo da Web após a implementação do console de administração do WebSphere.

Segundo, registre o widget na página inicial do Lotus Connections. Qualquer iWidget é descrito por um descritor XML. O arquivo WAR criado pela Lotus Widget Factory para seu widget contém um serviço que gera e retorna o descritor XML automaticamente. No caso do arquivo WAR implementado, o serviço está localizado em:

um <pathToWidgetModel> é o caminho para o modelo relativo ao diretório modelo na Lotus Widget Factory (veja Figura 7) sem a extensão de arquivo .model. No caso do modelo developerWorks, pathToWidgetModel seria developerWorksModel.

Aqui está um exemplo da URL para o descritor XML:

onde:

• homedev2.dyn.webahead.ibm.com é o nome de host do servidor
• 9080 é a porta
• devWorksApp é a raiz de contexto sob a qual o arquivo WAR foi implementado para o WebSphere Application Server

É possível verificar se a URL está correta tentando acessá-la com um navegador da Web. Deve ser possível ver o descritor XML do widget gerado pelo Lotus Widget Factory como mostrado na Figura 8.

OBSERVAÇÃO: O aplicativo gerado pelo Lotus Widget Factory usa classes carregadas dinamicamente, um processo que possui algumas limitações quando a configuração Java Security está ligada no WebSphere Application Server. É possível que seja exibida a mensagem "SRVE0207E: Uncaught initialization exception thrown by servlet" ao acessar o descritor XML acima. É possível desligar a opção Java Security no WebSphere Administration Console sob Security - Secure Administration, Application and infrastructure - Java 2 Security.

Alternativamente, se não desejar desligar Java 2 Security, é possível criar um arquivo was.policy sob WebConfig/META-INF para definir recursos específicos para acessar. Consulte IBM WebSphere Application Server 6.1 Information Center para mais detalhes sobre was.policy.

Agora registre o link ao descritor do widget XML na interface de administração da página inicial seguindo estas etapas:

1. Entre com uma conta de administrador na página inicial.
2. Selecione a guia Administration na página inicial como mostrado na Figura 9.
   
   
   
   Figura 9. Guia Administration na página inicial do Lotus Connections
   
   
   
3. Selecione a opção Add another widget na parte inferior direita da página.
4. Um formulário é exibido, no qual é possível registrar o widget. Insira o título do widget e a URL do descritor XML do iWidget (veja Figura 10).
   
   
   
   Figura 10. Formulário de administração para registrar um novo widget na página inicial do Lotus Connections
   
   
   
5. Selecione Display na guia My Page.
6. É possível manter os valores padrão para as outras opções no formulário. Informações adicionais sobre essas opções podem ser encontradas na documentação Lotus Connections 2.5 Information Center.
7. Clique em Save. Você é levado de volta à página inicial do Administrator; nessa página, habilite o widget developerWorks.

Depois de habilitar o widget, os usuários podem adicionar o widget developerWorks à guia My Page na página inicial através da paleta de widget (veja Figura 11). É possível abrir a paleta de widget clicando no botão Customize na parte superior direita da interface.

A Figura 12 mostra o widget inserido na página inicial depois de ser adicionado da paleta (guia MyPage).

OBSERVAÇÃO: Lotus Widget Factory gera widgets de altura fixa que podem resultar em uma barra de rolagem vertical na sua implementação. É possível eliminar a barra de rolagem editando o arquivo widget_definition.xml, localizado em WebContent/WEB-INF/factory/xml_templates/widget/ no IDE. Modifique o valor min-height no elemento iframe para aumentar a altura do widget e eliminar a barra de rolagem vertical. Na Figura 12, o atributo min-height foi ampliado de 200 px para 300 px.

Aperfeiçoando o widget de podcast com a biblioteca Yahoo! media player

Nas seções anteriores, você criou um widget capaz de exibir uma lista de podcasts de um RSS feed. No momento, a lista contém apenas links para arquivos MP3, o que requer que os usuários baixem o arquivo e abram um reprodutor de mídia de desktop como o Microsoft® Windows® Media Player, para escutar o podcast.

Um interessante aperfeiçoamento poderia ser permitir aos usuários escutar o podcast MP3 diretamente da interface do widget sem precisar executar etapas extras de baixar e abrir o arquivo MP3 manualmente.

Para habilitar esse recurso, será usada a biblioteca Yahoo! Media Player (http://mediaplayer.yahoo.com/) com o Lotus Widget Factory para gerar um widget com um reprodutor de mídia embarcado. Depois de concluir essas etapas, cada linha na tabela contém um botão Play que permite aos usuários escutar o podcast diretamente do widget, como mostrado na Figura 13.

Yahoo! Media Player vem na forma de uma biblioteca a JavaScript, que carrega um módulo Flash leve responsável por executar um arquivo de áudio. A biblioteca JavaScript analisa o HTML da página (ou, mais precisamente, do widget, neste caso) para procurar por links apontando para arquivos de áudio, como arquivos MP3.

Encontre mais detalhes sobre a biblioteca em http://mediaplayer.yahoo.com/.

Para habilitar esse recurso, use um construtor Lotus Widget Factory para incluir a biblioteca Yahoo! Media Player JavaScript no seu widget. A biblioteca Yahoo! automaticamente procura por elementos de link HTML (apontando para arquivos de mídia, como arquivos MP3) na página (por exemplo, First link) e coloca um botão Play ao lado.

Vamos incluir a biblioteca Yahoo! Media Player JavaScript no seu modelo de widget:

1. Selecione seu projeto e modelo e clique no botão Add a builder call the current model (o mesmo botão mostrado na Figura 5).
2. Selecione a opção Client JavaScript na categoria Actions And Events.
3. Preencha o formulário com os seguintes valores como mostrado na Figura 14:
   
   
   • No campo Name, insira YahooMediaPlayer.
   • No campo Location Type, selecione a opção In HEAD tag.
   • No campo Page, selecione REST_ViewPage.
   • No campo Script Source Type, selecione a opção Link to file/URL.
   • No campo Script URL or File Location, insira http://mediaplayer.yahoo.com/js.
   
   
   Figura 14. Formulário Client JavaScript
   
   
   

Em resumo, você está dizendo ao construtor para colocar um rótulo JavaScript padrão apontando para a biblioteca Yahoo! Media Player na parte superior do seu widget. A biblioteca é carregada de servidores Yahoo! toda vez que o widget for carregado na página.

É isso! Seu modelo e construtores estão agora configurados para gerar um widget com um reprodutor de mídia embarcado, permitindo aos usuários escutar podcasts developerWorks. Se você já implementou e registrou o widget na página inicial na seção anterior, você precisa apenas atualizar o arquivo WAR no WebSphere Application Server para disponibilizar essa versão aperfeiçoada do widget aos usuários.

Voltar para parte superior

Adicionando gadgets Google ao Lotus Connections 2.5

É possível usar gadgets Google para adicionar conteúdo novo e interessante com esforço mínimo ao Lotus Connections. Com um catálogo de aproximadamente 200.000 gadgets, as possibilidades de extensões são quase infinitas. Aqui estão apenas alguns exemplos:

• Trazer à superfície informações de outras plataformas de redes sociais populares, como Facebook e MySpace
• Exibir vídeos do YouTube
• Integrar ferramentas com gadgets Google Docs
• Integrar recursos de mapeamento, graças aos diversos gadgets que reutilizam o Google Map API

Lotus Connections suporta apenas widgets que seguem especificações de iWidget desenvolvidas pela IBM. Não há suporte pronto para uso para outros modelos de widget, como modelo de gadgets Google. O formato iWidget, porém, é flexível o bastante para permitir a exibição de qualquer conteúdo que possa ser encontrado em uma página da Web padrão. Por outro lado, o Google fornece uma maneira de trazer à superfície gadgets em qualquer página da Web usando um tag de script HTML. A técnica a seguir consiste em usar um iWidget agindo como um wrapper em torno do tag de script para exibir o gadget Google.

Um artigo anterior do developerWorks, "Implementing and deploying Google gadgets for the Lotus Connections home page," apresentou a técnica que pode ser usada para exibir gadgets Google no Lotus Connections 2.0 do ponto de vista de um desenvolvedor. O objetivo desta seção é oferecer um resumo e um esqueleto que um administrador pode usar para implementar um novo gadget Google no Lotus Connections sem precisar de qualquer conhecimento de programação. Os detalhes de programação são opcionais; são apresentados na seção final deste artigo para leitores interessados.

Etapas rápidas para adicionar gadgets Google ao Lotus Connections

Um esqueleto de iWidget agrupando um gadget Google é implementado e está disponível na seção de Download deste artigo. Nesta seção, você aprenderá como editar o esqueleto para exibir um gadget Google de sua escolha.

O esqueleto vem como um padrão de arquivo WAR de Java Platform, Enterprise Edition (Java EE) que pode ser implementado a quaisquer contêineres Java EE, como o WebSphere Application Server executando Lotus Connections, por exemplo. Neste ponto, o esqueleto é pré-configurado para agrupar um gadget Google Facebook como mostrado na Figura 15.

As seguintes etapas mostram como configurar o esqueleto para exibir um gadget Google de sua escolha do Google Gadget Catalog. Observe que é usado o IDE Eclipse 3.4 para editar os arquivos contidos no arquivo WAR de esqueleto. Um arquivo WAR é um arquivo compactado que segue algumas convenções. Como tal, também é possível usar qualquer aplicativo de compactação padrão para acessar e editar os arquivos dentro do archive se você desejar.

Mais detalhes sobre obter e instalar o Eclipse IDE podem ser encontrados no site oficial www.eclipse.org. Certifique-se de selecionar o Java EE edição do desenvolvedor.

Primeiro, vamos criar um projeto Eclipse com o conteúdo do arquivo WAR:

1. Baixe o arquivo WAR chamado googleWrapperSkeleton.war.
2. No Eclipse, acesse File – Import – Web – WAR file. Selecione Next e navegue para o arquivo WAR baixado no seu disco. Insira o nome de sua escolha para o projeto.
3. Preserve os valores padrão do formulário Web Import: Web Libraries, e clique em Finish. Um novo projeto Eclipse com os arquivos contidos no arquivo WAR foi criado.

Agora você está pronto para editar os arquivos do widget. Primeiro, porém, é necessário obter a URL para o descritor do gadget do Google Gadget Catalog:

1. Acesse o Google Gadget Catalog. Selecione um gadget e clique no botão Add to your webpage, que o direciona à página de descrição do widget. Nas etapas a seguir, será usado o gadget BBC News como exemplo.
2. Na página de descrição do widget, clique no botão Add to your webpage para ir à página de customização para o gadget mostrado na Figura 16. É possível customizar alguns atributos do gadget, como seu tamanho e título, a partir dessa página. Para boa interação com o visual do Lotus Connections, é aconselhável selecionar uma borda em branco e nenhum título (cadeia de caracteres vazia) para o gadget no formulário de customização como mostrado na Figura 16. O tempo de execução do Lotus Connections automaticamente constrói uma barra de título e borda em torno de cada widget.

   Quando tiver concluído as customizações, clique no botão Get the code.

   
   
   Figura 16. Formulário de customização do gadget Google
   
   
   
3. Da caixa de texto na parte inferior da página, copie e tome nota da parte da URL após a cadeia de caracteres ?url= no atributo src do tag de script. A cadeia de caracteres copiada-colada deve terminar com output=js.
   
   

   Por exemplo, para o gadget BBC, a URL é como segue:

   http://shazingo.com/lig/lg/178002.xml& up_extrafeed=http%3A%2F%2Fnewsrss.bbc.co.uk %2Frss%2Fnewsonline_uk_edition%2Fhealth%2Frss.xml& up_extratitle=Health&up_subject=&up_entries=6& &synd=open&w=320& h=360&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js

   
   

Agora vamos voltar ao Eclipse para customizar os arquivos de esqueleto para exibir o gadget Google selecionado. Siga estas etapas:

1. Localize e expanda o projeto criado anteriormente do arquivo WAR no Eclipse Project Explorer (pode ser necessário trocar para visualização Java EE).
2. Abra o arquivo gadgetWrapper.xml no diretório WebContent. Localize o nó iw:item cujo ID é gadgetUrl (veja Figura 17). Edite o atributo value para colocar a URL do gadget escolhido do Google Gadget Catalog.
   
   
   
   Figura 17. Nó a editar no gadgetWrapper.xml com o link do gadget Google
   
   
   

   Dica: Também é possível editar o item de altura set value para ajustar a altura total consumida pelo widget no Lotus Connections para evitar barras de rolagem verticais.

3. Clique com o botão da direita no projeto em Eclipse (o painel Project Explorer) e selecione Export - WAR file. Escolha um local no seu disco para o arquivo e clique em Finish.

Quanto ao widget criado com o Lotus Widget Factory na primeira seção deste artigo, é preciso apenas seguir estas etapas:

1. Implemente o arquivo WAR no WebSphere Application Server e inicie o aplicativo da Web correspondente. Na implementação, especifique a raiz de contexto do aplicativo da Web e tenha ela em mente para a etapa de registro no Lotus Connections. Essa etapa é padrão e não difere de etapas em outros aplicativos Java EE. Consulte IBM WebSphere Application Server 6.1 Information Center se precisar de mais detalhes.
2. Registre o novo widget na página inicial do Lotus Connections. A URL para o descritor XML do widget está localizada em:
   
   http://<server>:<port>/<contextRoot>/gadgetWrapper.xml

   onde server, port e contextRoot dependem de onde o arquivo WAR foi implementado.

   As etapas são as mesmas que para o widget criado com o Lotus Widget Factory anteriormente para a página inicial. Consulte também a documentação do Lotus Connections 2.5 Information Center para mais detalhes.

É isso! A Figura 18 mostra uma experiência de usuário completa com o widget BCC News, dois outros gadgets Google (Facebook, Currency Convertor), o widget DeveloperWorks criado com o Lotus Widget Factory e um widget fornecido com o Lotus Connections.

Voltar para parte superior

Aprendendo mais sobre iWidgets

As duas primeiras seções deste artigo apresentaram duas maneiras fáceis de criar widgets para Lotus Connections sem precisar escrever código. Esta seção é voltada a leitores que desejam se aprofundar e entender o que acontece "nos bastidores". O objetivo desta seção é fornecer um ponto de partida para desenvolvedores que desejam implementar widgets com um maior nível de customização do que aquele permitido por ferramentas como Lotus Widget Factory. Diferentemente do restante deste artigo, esta seção requer conhecimento sobre o desenvolvimento de aplicativos da Web.

Observe que há um paralelo entre esta seção e o artigo anterior do developerWorks "Implementing and deploying Google gadgets for the Lotus Connections home page", lançado para o Lotus Connections 2.0. Em vez de apresentar novamente todo o conjunto de especificações, esta seção destaca os principais recursos de iWidgets e indica exemplos no artigo anterior. Esta seção também apresenta os novos recursos relacionados a iWidgets no Lotus Connections 2.5.

Especificações resumidas do iWidget

O termo iWidgets refere-se a especificações desenvolvidas pela IBM para definir widgets. Diversos produtos IBM, como Lotus Connections e Lotus Mashups, embarcam um componente comum chamado de estrutura iWidget que é capaz de fazer widgets seguir as especificações iWidget.

Observe que as especificações iWidget definem somente os aspectos do lado do cliente de um widget, em outras palavras, a parte executando no navegador. Não há restrições com relação às tecnologias usadas para o código do lado do servidor do widget. Comunicação entre os componentes do lado do cliente e o lado do servidor de um widget normalmente é realizada através de tecnologias padrão, como solicitações assíncronas (Ajax), por exemplo.

Nesse nível básico, um iWidget é definido por um descritor XML escrito pelo desenvolvedor do widget. O descritor inclui o seguinte:

• Uma maneira de definir a marcação (código HTML) de uma ou mais visualizações suportadas pelo widget.
• A capacidade para apontar para recursos externos como JavaScript e arquivos CSS usados pelo widget. Os arquivos JavaScript normalmente contêm código escrito pelo desenvolvedor do widget e definindo o comportamento e a lógica do widget.
• Alguns atributos relacionados a encapsulação. Encapsulação é necessária para permitir que diversas instâncias do mesmo widget sejam abertas na página sem que o recurso entre em conflito. O principal aspecto desse mecanismo é o atributo iScope definido no descritor XML. O atributo iScope aponta para o nome da classe JavaScript definindo o comportamento do widget e é implementado em um dos arquivos externos JavaScript mencionados no item anterior.

Consulte o iWidget Hello World na primeira seção do artigo anterior, "Implementing and deploying Google gadgets for the Lotus Connections home page," http://www.ibm.com/developerworks/lotus/library/connections-gadgets/ para um exemplo concreto dos conceitos básicos de iWidget.

Adicionalmente, as especificações iWidget definem alguns serviços que podem ser usados pelos desenvolvedores de widget. Os serviços fornecidos pela estrutura iWidget podem ser usados chamando métodos em um objeto chamado iContext e configurado automaticamente na classe iScope da instância do widget. Aqui está uma breve visão geral dos serviços fornecidos pelas especificações iWidget:

• Loja de propriedades. A estrutura iWidget fornece a habilidade de gerenciar e persistir pares name-value chamados itemSets. itemSets podem ser declarados no descritor XML dos widgets e manipulados no código iScope JavaScript.
• Módulo IO permitindo ao widget buscar recursos de qualquer domínio redirecionando as solicitações através de um proxy Ajax.
• Um sistema de eventos permitindo aos widgets comunicarem-se uns com os outros na página publicando e capturando eventos. Observe que esse recurso é específico para ambientes Lotus Mashups e é limitado no Lotus Connections.

A segunda parte do artigo, "Implementing and deploying Google gadgets for the Lotus Connections home page," apresenta os diversos recursos fornecidos pela estrutura iWidget através de exemplos concretos da implementação do wrapper de gadget Google. Mais importante, o wrapper apresentado no artigo anterior vai mais longe permitindo aos usuários customizar o gadget da visualização de edição do widget, o que não é possível com a abordagem de esqueleto genérica.

É possível encontrar mais detalhes sobre a implementação de iWidget no Lotus Connections iWidget Development Guide.

É possível baixar o documento iWidget specification v1.0 completo.

iWidget specification v1.0 in Lotus Connections 2.5

Lotus Connections 2.0 foi baseado em uma versão pré-1.0 da especificação iWidget.

Lotus Connections 2.5 agora suporta a especificação iWidget escrita seguindo a versão final do documento especificação iWidget v1.0. De forma concreta, isso significa o seguinte para um desenvolvedor:

• Mecanismo de persistência aperfeiçoado. O Lotus Connections 2.5 suporta atributos nomeados itemSet gerenciados predefinidos que podem ser usados pelo desenvolvedor para persistência de pares name-value através de sessões do usuário. A principal diferença entre os atributos itemSet e um itemSet normal é a presença do método save(). Quando esse método é chamado do código do widget, os itens (pares name-value) persistem através da sessão do usuário. Uma referência aos atributos itemSet é retornada por uma chamada a iContext.getiWidgetAttributes().
  
  

  No artigo anterior, "Implementing and deploying Google gadgets for the Lotus Connections home page," http://www.ibm.com/developerworks/lotus/library/connections-gadgets/ , pode-se observar que Lotus Connections Home page 2.0 forneceu um mecanismo de persistência customizado com base em métodos named _save e _load. Esses métodos ainda são suportados para compatibilidade com versões anteriores no Lotus Connections 2.5, mas não devem ser usados para novos widgets. O mecanismo de persistência customizado foi usado no artigo developerWorks anterior e no exemplo do Google Date Time. É possível encontrar uma versão atualizada do exemplo Date Time usando o novo itemSet gerenciado por atributos anexado a este artigo (gadgetWrapperDateTime2_5.war).

• Forma consistente de obter detalhes sobre o usuário autenticado. Agora é possível usar o método getUserProfile() no objeto iContext para obter um itemSet contendo informações sobre o usuário autenticado. Por exemplo, this.iContext.getUserProfile().getItemValue(‘displayName’) retorna o nome do usuário autenticado. É possível encontrar mais detalhes na página wiki: http://www-10.lotus.com/ldd/lcwiki.nsf/dx/common-iwidget-support-in-the-lotus-connections-features sob “Obtaining information about the logged in user with UserProfile."

iWidgets em Página inicial, Comunidades e Perfis no Lotus Connections 2.5

Embora este artigo foque no recurso Página inicial do Lotus Connections, esteja ciente de que Comunidades e Perfis também podem ser ampliados com iWidgets no Lotus Connections 2.5. Página inicial, Comunidades e Perfis suportam a mesma versão das especificações iWidget (v1.0), e, portanto, widgets que estritamente seguem as especificações iWidget podem ser criados nesses três componentes sem nenhuma modificação. Esse é o caso de widgets criados pelo Lotus Widget Factory e pelo gadget Google usando as duas primeiras seções deste artigo.

Observe alguns pontos com relação a iWidgets em Comunidades e Perfis:

• Em Comunidades, widgets podem ser colocados pelo proprietário da comunidade em áreas de posicionamento predefinidas na página de Comunidade através da paleta de widget. Os detalhes da área predefinida podem ser encontrados no Lotus Connections iWidget Development Guide.
  
  

  Além disso, o administrador pode definir widgets obrigatórios, ou seja, widgets que são exibidos por padrão em qualquer página da Comunidade e que não podem ser removidos pelo proprietário da Comunidade.

• Perfis suporta apenas widgets obrigatórios; ou seja, o proprietário de Perfis não pode adicionar ou remover widgets de uma paleta como o proprietário pode fazer nos recursos Página inicial e Comunidades.
• A implementação de novos widgets em Comunidades e Perfis é feita editando arquivos de configuração XML no servidor, em vez de em uma interface com o usuário como na Página inicial. Consulte o IBM Lotus Connections 2.5 Information Center para mais detalhes.

Voltar para parte superior

Conclusão

Este artigo apresentou duas maneiras de criar widgets para Lotus Connections sem ter um profundo conhecimento de desenvolvimento da Web. A primeira seção apresentou o Lotus Widget Factory como a ferramenta de desenvolvimento para criar widgets complexos para Lotus Connections e o conduziu através de um exemplo concreto de um widget que exibe podcasts do developerWorks.

A segunda seção do artigo destacou as etapas que podem ser seguidas para alavancar o amplo Google Gadget Catalog para levar novos recursos para usuários Lotus Connections.

Por fim, a terceira seção foi um ponto de partida para desenvolvedores que desejam saber mais sobre as especificações iWidget e implementar seus próprios iWidgets usando ferramentas de desenvolvimento tradicionais.

Voltar para parte superior

Agradecimentos

O autor gostaria de agradecer a Luis Benitez e a Adrian Spender por dedicarem tempo para revisar este artigo e fazer sugestões construtivas para aperfeiçoamentos.

Voltar para parte superior

Downloads

Informações sobre métodos de download

Recursos

Aprender

• Leia o artigo developerWorks, "Implementing and deploying Google gadgets for the Lotus Connections home page."
  
  
• Consulte o IBM Lotus Connections 2.5 Information Center. Em especial, a seção "Administration" contém detalhes sobre implementar novos widgets em Página inicial, Comunidades e Perfis.
  
  
• Leia iWidget Development Guide no wiki do Lotus Connections.
  
  
• Consulte o IBM WebSphere Application Server 6.1 Information Center. Em especial, consulte o tópico "Installing application files with the console" para implementar os arquivos WAR usados neste artigo.
  
  
• Consulte o Open syndication Google Gadget Catalog.
  
  
• Leia mais sobre Lotus Widget Factory no wiki da Lotus Portlet Factory.
  
  
• Consulte a documentação do Lotus Widget Factory.
  
  

Obter produtos e tecnologias

• Baixe uma versão de teste da Lotus Widget Factory (parte do IBM Mashup Center).
  
  
• Teste Yahoo! Media Player.
  
  

Discutir

• Participar do fórum de discussão.
  
  

Sobre o autor

Classificar este artigo

Comentários

Voltar para parte superior

Índice

• Introdução
• Usando Lotus Widget Factory para desenvolver widgets para Lotus Connections
• Adicionando gadgets Google ao Lotus Connections 2.5
• Aprendendo mais sobre iWidgets
• Conclusão
• Agradecimentos
• Downloads
• Recursos
• Sobre o autor
• Comentários

Conheça a IBM da sua cidade

A IBM está mais perto do que você imagina!

---

Saiba mais