Exibir dados corporativos como HTML dinâmico usando o IBM Mashup Center

Geração de conteúdos distintos a partir de origens de dados corporativos que podem ser usados em um mashup

O IBM® Mashup Center vem com widgets para exibir dados em diferentes formatos, por exemplo, em tabela, mapa ou gráfico. Esses widgets permitem a montagem muito rápida de uma página, mas normalmente fornecem um conjunto limitado de recursos de customização, incluindo tamanho de fonte, alinhamento e cor. Para ter maior controle, o IBM Mashup Center V3 suporta a geração de qualquer XML diretamente utilizando dados de origens de dados corporativas. Aprenda a gerar HTML (XHTML, visto que a alimentação é bem-formada) para uma apresentação mais distinta usando o construtor de mashup de dados. Além disso, este artigo descreve um widget simples que pode exibir HTML arbitrário e interceptar cliques do mouse para acionar eventos que podem ser conectados a outros widgets.

Louis Mau, Solution Architect, IBM

Louis Mau faz parte da equipe de desenvolvimento do InfoSphere MashupHub. Seu foco atual é ajudar os clientes a criarem aplicativos situacionais usando o IBM Mashup Center. Antes dessa função, ele foi arquiteto do DB2 Everyplace Sync Server, que ajuda a sincronizar dados de bancos de dados corporativos em um banco de dados de pequenas dimensões executado em dispositivos remotos.



Rajesh Kartha, Software Engineer, IBM Cloudscape Group

Rajesh Kartha trabalha no IBM Silicon Valley Lab em San Jose como Arquiteto de Soluções do IBM Mashup Center. Ele tem vasta experiência no desenvolvimento de software em vários produtos de IBM Information Management.



08/Jul/2011

Visão geral

O IBM Mashup Center vem com um conjunto de widgets para rápida visualização de dados. Esses widgets fornecem opções comuns de customização, como tamanho da fonte, alinhamento e cor. Para requisitos exclusivos de apresentação ou de interação, a expectativa é que os clientes desenvolvam widgets customizados. Desenvolver um widget customizado é uma tarefa de programação que requer conhecimentos de JavaScript, familiaridade com a API do cliente IBM Mashup Center Widget e, potencialmente, com Dojo ou outro pacote de JavaScript de terceiros. O esforço necessário talvez não seja justificável ou as habilidades necessárias talvez não estejam disponíveis. Para casos em que a apresentação única pode ser conseguida por meio de HTML estático e CSS sem o uso de JavaScript dinâmico, uma abordagem alternativa é gerar HTML diretamente a partir de origens de dados corporativos usando o construtor de mashup de dados do IBM Mashup Center.

O IBM Mashup Center inclui o InfoSphere MashupHub e Lotus® Mashups.

Neste artigo, aprenderemos a usar o construtor de mashup de dados para gerar HTML — HTML ajustado a XML — que poderia ser exibido usando o widget pronto Website Displayer ou um navegador. Com CSS, isso poderia produzir algumas apresentações distintas. Também descrevemos um widget simples, que pode exibir HTML arbitrário e interceptar cliques do mouse para acionar eventos que podem ser conectados a outros widgets.

Este artigo pressupõe familiaridade com o uso do IBM Mashup Center para desenvolver mashups e alimentações. Em especial para a primeira parte do artigo, é preciso ter experiência com o uso do construtor de mashup de dados do IBM Mashup Center. A seção Recursos contém um link para o artigo "Creating a feed from an enterprise database (JDBC)", que pode ajudá-lo a obter os conhecimentos básicos sobre como desenvolver mashups de dados. Para acompanhar a seção sobre a criação do widget especial, é preciso saber programar em JavaScript e ter conceitos básicos sobre como escrever um widget. Consulte Recursos para obter mais informações úteis.


Construtor de mashup de dados do IBM Mashup Center

A versão mais recente do construtor de mashup de dados do IBM Mashup Center V3 introduziu vários recursos importantes, incluindo:

  • Suporte à declaração de namespace — Namespace é usado com frequência em documentos XML para identificar vocabulário de marcação definido por diferentes organizações. A partir da Versão 3, o operador de transformação do construtor de mashup de dados suporta a manipulação de declaração de namespace. A declaração de namespace pode ser criada, modificada e excluída de qualquer elemento, e qualquer elemento pode ser atribuído a qualquer um dos namespaces válidos dentro do seu escopo.
  • Habilidade de manipular cabeçalho de alimentação — Declaração de namespace e atributos podem ser adicionados ao elemento-raiz. Elementos adicionais podem ser adicionados ao elemento-raiz como irmãos ou pai das entradas repetidas. Na verdade, um fragmento de XML completo para o cabeçalho e rodapé pode ser importado para o operador Publish a ser incorporado à saída.
  • Capacidade de especificar o tipo MIME no operador Publish — Os navegadores contam com o tipo MIME para determinar que programa usar e como exibir o conteúdo recebido. Por exemplo:text/xml, text/html, application/xml, application/rss+xml image/svg+xml, application/atom+xml, application/vnd.google-earth.kml+xml etc.

Gerando HTML usando o construtor de mashup de dados

O IBM Mashup Center tem um ótimo conjunto de geradores de alimentação que pode extrair informações de origens de dados corporativos para o formato ATOM. Com o uso do construtor de mashup de dados, essas alimentações podem ser convertidas em outras formas padrão como ATOM, JSON ou mesmo uma estrutura XML customizada com o seu tipo MIME correspondente. Em especial, os dados da empresa poderiam ser exibidos no widget pronto Website Displayer ao converter em HTML. O usuário pode usar a eficiência total de HTML e CSS para criar visualizações únicas sem se sentir limitado pelo layout ou aparência de qualquer widget em especial.

Ilustraremos a geração de HTML com um exemplo simples. Para facilitar o acompanhamento, usaremos a alimentação de amostra "MyCo Customer List" fornecida com o produto. Converteremos a alimentação ATOM em uma tabela HTML. A figura a seguir mostra como ela renderiza no widget WebsiteDisplayer.

Figura 1. MyCo Customer List como tabela HTML
MyCo Customer List como tabela HTML

O mashup de dados usado para criar o HTML acima é simples.

Figura 2. Mashup simples de dados para conversão de HTML
Mashup simples de dados para conversão de HTML

Vamos prosseguir. Usamos um operador de origem para carregar a alimentação de dados no editor. Em seguida, conectamos o operador de origem ao operador de transformação. Para converter cada entrada da alimentação da origem de entrada a fim de mostrar uma linha em uma tabela HTML:

  • Crie o elemento <tr> adequado para a linha como pai.
  • Crie todos os elementos <td> para os valores da coluna ou célula como elementos filho do elemento <tr> na árvore à direita do operador de transformação.
  • Para o primeiro elemento <td> correspondente ao nome da empresa, crie um elemento filho <a> com um atributo href e copie o valor do texto do elemento <URL> da árvore à esquerda para o atributo href . Isso permitirá que o nome da empresa tenha um hyperlink.
  • Copie os respectivos valores de texto da árvore à esquerdo para cada elemento <td> conforme necessário.
Figura 3. Operador de transformação em mashup de dados para conversão de HTML
Operador de transformação em mashup de dados para conversão de HTML

A saída da transformação é conectada ao operador Publish, onde a maior parte da customização é feita:

  • Selecione a opção Custom Header e em Feed type, escolha Custom MIME type no menu suspenso e selecione text/html como tipo de MIME.
  • Na seção Header Template , clique com o botão direito do mouse em root e selecione a configuração Set Template Tree para fornecer um modelo customizado.
Figura 4. Operador Publish no mashup de dados para conversão de HTML
Operador Publish no mashup de dados para conversão de HTML
  • Pode ser fornecido um modelo nesse operador Publish. O modelo pode ser gerado usando qualquer ferramenta padrão de autor para HTML. Consulte a seção Download para obter o modelo HTML usado no exemplo atual. O modelo a ser incluído será o indicado abaixo.
Lista 1. Modelo de cabeçalho para a geração de alimentação HTML
<html>
	<head>
		<style>
			table { 
				background:#FFFFFF;
				border:1px solid gray;
			...
			...
			.description{
				font:bold 11px verdana;
			} 
			p {
				white-space:normal;
			} 	
		</style>
	</head>
	<body>
	<div class="content">
	  MyCo Customer List:
	</div>
	<div class="description">Here is the transformed MyCo Customer list sample feed 
	presented in a CSS formatted HTML Table using a data mashup:
	</div>
		<table>
			<caption>My Customer List</caption>
			<th>Customer</th>
			...
		</table>
	</body>
</html>
  • Acrescente o modelo HTML acima na caixa Set Template Tree e clique em OK nas caixas de diálogo seguintes. O modelo HTML é renderizado em forma de árvore, o que permite outras modificações, como inclusão de novos elementos filho, atributos, namespaces, etc., e até mesmo a inclusão de elementos desejados a partir do operador de envio de dados.
  • Anexe os dados reais fornecidos pelo operador anterior sob o elemento <table> . Para isso, clique com o botão direito do mouse sobre o elemento <table> e selecione Attach repeating element.
Figura 5. Anexando o elemento repetido ao operador Publish
Anexando o elemento repetido ao operador Publish
  • Na caixa de diálogo Attach Repeating Element , selecione o elemento <tr> , que é a saída proveniente do operador de transformação anterior, e clique em Attach.
Figura 6. Selecionar o elemento <tr> para anexar como elemento repetido
Selecionar o elemento <tr> para anexar como elemento repetido
  • O elemento <tr> torna-se então o elemento filho do elemento <table> , como necessário.
  • Salve o mashup de dados e execute-o para confirmar se a saída é mostrada como esperado, uma tabela HTML bem formatada.

A alimentação de mashup de dados acima pode ser usada diretamente no widget Website Displayer. Basta ir até Edit Settings para encontrar o widget e especificar a URL. A tabela pode receber estilos para ter aparência diferente mudando o CSS no modelo HTML. É boa prática manter a separação entre apresentação e lógica de transformação de dados. Se os dados corporativos precisarem ser transformados, agrupados ou aumentados, essas operações deverão ser feitas em um mashup de dados separado. O resultado pode ser então convertido em HTML usando um mashup de dados diferente. Mantê-los separados torna mais fácil mudar a apresentação à medida que os requisitos mudam.


Um widget simples para adicionar suporte a eventos

O que fizemos até agora envolve apenas o construtor de mashup de dados. Isso está de bom tamanho se quisermos apenas criar visuais exclusivos. Se desejarmos que o conteúdo HTML gerado seja capaz de interagir com outros widgets em uma página, será preciso da ajuda de um widget especial. Nesta seção, vamos guiá-lo pelo processo de criação de um widget que:

  • Pode exibir fragmentos de HTML arbitrário assim como o widget de marcação HTML pronto
  • Por meio do uso de um atributo customizado, faça elementos HTML arbitrários gerarem eventos iWidget quando clicados.

Como mencionado na Visão geral, vamos considerar que você esteja familiarizado com o arquivo de definição de widget e os conceitos básicos necessários para escrever um iWidget. A seguir, faremos apenas uma breve descrição do nosso widget. Visto que nosso widget captura cliques do mouse e os converte em eventos de iWidget, chamamos o widget de "HTMLEvent". Começaremos dando uma olhada no nosso arquivo iWidget na Lista 2 abaixo.

Lista 2. Parte do arquivo iwidget.xml
<iw:iwidget name="sample.mashupcenter.HTMLEvent"
            xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
            allowInstanceContent="true"
            supportedModes="view edit"
            mode="view" 
            iScope="sample.mashupcenter.HTMLEvent">

<iw:resource uri="HTMLEvent.js" />

<iw:event id="HtmlUrl" eventDescName="HtmlUrlDesc"
           handled="true" onEvent="handleHtmlUrl" />  
   <iw:eventDescription  id="HtmlUrlDesc" payloadType="text"
                          description="Url to retrieve HTML fragment" lang="en" > 
</iw:eventDescription>

<iw:content mode="view">
<![CDATA[
    <div  id="_IWID_HtmlArea"></div>
]]>
</iw:content>

Algumas observações sobre o conteúdo de iwidget.xml :

  1. No elemento iWidget , o atributo iScope define o nome da classe da biblioteca Dojo JavaScript que implementa o widget.
  2. O elemento iresource especifica o arquivo JavaScript que contém a implementação JavaScript e deve ser carregado antes de o widget ser instanciado.
  3. Observe que definimos apenas um único evento de recepção para mudar a URL, mas nenhum evento de envio. Estes últimos são criados dinamicamente e especificados no fragmento de HTML. Discutiremos isso em detalhes mais adiante.
  4. O elemento content com o atributo mode configurado como view define o HTML para ser exibido no modo de visualização. É muito simples e consiste em um vazio div. Note que ele tem um atributo ID que consiste da cadeia de caractere _IWID_HtmlArea. O prefixo especial _IWID_ será substituído pelo ID de instância de widget real gerado pela estrutura quando o widget é instanciado. O conteúdo real exibido virá da alimentação de entrada, que se supõe conter o fragmento de HTML.

Para dizer ao widget onde capturar eventos de clique do mouse, acrescente um atributo MCEVENTonclick="eventName" a qualquer elemento do fragmento de HTML que deseje tornar clicável. Aqui, eventName deve ser substituído pelo valor de texto desejado para uso ao gerar nomes de evento que aparecem na caixa de diálogo de conexão do widget. Como mostrado Lista 3 abaixo, a função de retorno _cbHtmlReceived no widget pré-processará o fragmento de HTML e procurará todas as ocorrências desses atributos. Os valores de tais atributos são extraídos e salvos em um objeto newEvents usado para registrar dinamicamente os Send events. Esses eventos, depois de registrados, aparecerão na guia Send da caixa de diálogo de conexão. Depois, a função _insertOnclick será chamada com o fragmento de entrada de HTML, a cadeia de caractere de atributo completa e o nome de evento. (A letra é redundante, visto que já está incluída na cadeia de caractere de atributo completa).

Lista 3. _cbHtmlReceived - corpo da função
var  newEvents = {};
var  beg = strHtml.indexOf( "MCEVENTonclick=" );
var  len = 14 + 1; // length of "MCEVENTonclick="
while ( beg > 0 ) {
    var  quote = strHtml.charAt( beg + len );
    var  end   = strHtml.indexOf( quote, beg + len + 1 );
    var  name  = strHtml.substring( beg + len + 1, end );
    newEvents[ name ] = true;
    strHtml = this._insertOnclick( strHtml, strHtml.substring(beg,end+1), name );

    beg = strHtml.indexOf( "MCEVENTonclick=" );
}

this.updateDynamicEvents( newEvents );

this.htmlFragment = strHtml;
var node = dojo.byId(this.uid + "HtmlArea" );
node.innerHTML = this.htmlFragment;

A função _insertOnclick é muito simples e é reproduzida na sua totalidade na Lista 4 abaixo. Para determinado eventName, ela usa o suporte a expressão regular JavaScript para substituir todas as ocorrências de MCEVENTonclick="eventName" pelo atributo DOM onclick que especifica o script a ser executado quando o elemento HTML for clicado. O script deve chamar nossa função handleOnclick com eventName como parâmetro, de modo que nosso widget possa gerar um evento iWidget para o nome especificado. Mais precisamente, já que é possível haver várias instâncias desse widget em uma única página da Web, é preciso chamar a função handleOnclick a partir desta instância. Para localizar essa instância de iWidget, pré-anexe o ID de widget contido na variável this.uid para iContext e chame a função iScope . O ID de widget é inicializado na função onLoad . Para esse e outros detalhes, consulte o arquivo JavaScript de implementação de widget na seção Download .

Lista 4. Corpo da função _insertOnclick
_insertOnclick: function( strHtml, srchString, eventName )
{
    this.debugTrace( "_insertOnclick srchString,event=" + srchString + "," + eventName ); 

    var rexp  = new RegExp(srchString, "g");  // global
    // Beware: flipping between using single and double quote for wrapping strings.
    var sTo   = " onclick='JavaScript: "
              + this.uid + 'iContext.iScope().handleOnclick( "'
              + eventName
              + '", this );'
              + "return false;' ";
    var result = strHtml.replace( rexp, sTo );
    return result;
},

Depois que o pré-processamento de HTML estiver concluído, localizamos o nó DOM com o ID _IWID_HtmlArea definido na seção do modo de visualização do arquivo de definição de iWidget. O widget exibe o fragmento de HTML simplesmente designando-o ao elemento DOM innerHTML. Quando um elemento HTML clicável é clicado, um evento de iWidget é acionado. Se o elemento HTML for um link de âncora, o valor href será usado como dado de evento. Para todos os outros elementos, é o conteúdo de texto do elemento.

O widget suporta outros recursos, como segundo plano transparente e inserção dinâmica de CSS para estilos. Para quem estiver interessado, basta consultar o arquivo JavaScript de implementação de widget. Agora, vamos ver o widget em ação.


Ative o widget HTMLEvent

Na seção anterior, tratamos da criação do widget HTMLEvent simples. Nesta seção, veremos como ele pode ser conectado a outros widgets e usado em uma página dinâmica de mashup.

Para começar a usar qualquer widget customizado em um construtor de mashup, o arquivo ZIP (widgets leves) ou WAR (para iWidgets) precisa ser primeiro carregado para o catálogo, seguido pela ação Add to Mashup Builder nele. O mesmo processo se aplica ao widget HTMLEvent criado acima.

A seguir, precisamos de uma alimentação que tenha o atributo de evento MCEVENTonclick acrescentado aos seus elementos, o que pode ser útil no widget HTMLEvent para a geração de evento. Para isso, usaremos o mesmo mashup de dados criado na seção Gerando HTML usando o construtor de mashup de dados para acrescentar o atributo de evento MCEVENTonclick . Abra o mashup de dados para edição e, no operador de transformação, clique com o botão direito do mouse no elemento <a> e acrescente o atributo de evento MCEVENTonclick=mytest como mostrado abaixo. O valor do atributo para MCEVENTonclick indica o nome do evento que será mytest e ativará a passagem do valor do atributo href sob o elemento <a> depois de adequadamente conectado.

Figura 7. Acrescentar o atributo MCEVENTonclick
Acrescentar o atributo MCEVENTonclick

Salve o mashup e execute a alimentação para confirmar que não existam erros.

Crie uma nova página no construtor de mashup e adicione o widget HTMLEvent a ela. Clique em Edit settings e, para a URL HTML, forneça a URL para o mashup de dados que foi editado na etapa anterior. Note que o widget HTMLEvent também fornece uma seção para acrescentar CSS customizado para formatar a alimentação de HTML. Como o fragmento de HTML é inserido, nem todos os navegadores suportam a inclusão de tags de estilo HTML sequenciais. No exemplo atual, extraia o corpo da tag de estilo do modelo de cabeçalho HTML mostrado na Lista 1 e cole-o na área de texto de CSS. Clique em Save para salvar as configurações do widget. (Note que não há necessidade de incluir a tag de estilo no modelo HTML ao construir o mashup de dados para o widget HTMLEvent. De fato, não há necessidade de gerar tags html e body . Visto que essas tags extras são ignoradas, não é necessário removê-las do mashup de dados).

Acrescente um widget Website Displayer à mesma página e clique em Edit Wiring para ativar a conexão entre o widget HTMLEvent e o widget Website Displayer. Na caixa de diálogo de conexão, selecione a opção URL using Text para o Website Displayer e, depois, selecione o widget HTMLEvent como widget ao qual enviar o contexto. Note que o widget HTMLEvent expõe o valor mytest que vem do atributo MCEVENTonclick=mytest . Selecione-o como conteúdo a enviar, como mostrado abaixo. Clique em Done para salvar a conexão do widget.

Figura 8. Conectando o widget HTMLEvent
Conectando o widget HTMLEvent

Os dois widgets — HTMLEvent e Website Displayer — agora estão conectados. Isso pode ser testado clicando no link de cliente dentro da tabela HTML. Ela agora deve abrir a URL subjacente, que corresponde ao cliente selecionado no widget Website Display.

Figura 9. Widgets HTMLEvent e Website Displayer conectados e em funcionamento
Widgets HTMLEvent e Website Displayer conectados e em funcionamento

Outros usos

A maioria dos widgets do IBM Mashup Center é otimizada para exibir dados dentro da restrição do tamanho da janela do navegador. Se houver mais elementos de dados do que é possível ficar visível de uma só vez, a paginação e a rolagem costumam ser utilizadas para mostrar os dados ocultos. Mais especificamente, considere uma página simples com um widget visualizador de dados conectado a um widget de entrada do usuário, onde podem ser inseridos valores de procura. Se o visualizador de dados estiver configurado para exibir apenas 20 linhas, e forem retornadas 100, a impressão da tela só capturará as 20 linhas visíveis. Como fazer uma cópia impressa de todas as linhas? Uma abordagem é utilizar o construtor de mashup de dados para reformatar o conteúdo de alimentação em HTML e acrescentar um ícone de impressão na página para exibi-la em uma página separada do navegador, onde a função de impressão padrão pode ser utilizada para imprimir o conteúdo. Usando a mesma amostra de alimentação anterior, usamos outro mashup de dados para gerar a marcação HTML que pode ser exibida em uma página do navegador e dimensionada adequadamente para impressão.

Figura 10. Amostra de conteúdo da tabela formatado para impressão
Amostra de conteúdo da tabela formatado para impressão

Observação: Depois que o conteúdo de alimentação estiver em formato de tabela HTML, aplicativos padrão de desktop, como o Microsoft® Excel® podem importá-lo facilmente.


Conclusão

Este artigo mostrou como usar o construtor de mashup de dados do IBM Mashup Center para gerar conteúdo de exibição diretamente a partir de origens de dados corporativas. Para fins ilustrativos, os exemplos escolhidos foram bem simples. É possível gerar apresentações visualmente ricas usando toda a eficiência de HTML e CSS. Mais importante ainda, através do uso de uma convenção especial, um atributo inserido nos dados gerados, é possível desenvolver um widget que pode exibir a apresentação gerada e interagir com outros widgets. Esperamos que um leitor introduza outra convenção e amplie ainda mais o widget para fornecer comportamentos adicionais.


Download

DescriçãoNomeTamanho
Format examplegenHtmlDownloadPkg.zip8KB

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Information Management, Lotus
ArticleID=711028
ArticleTitle=Exibir dados corporativos como HTML dinâmico usando o IBM Mashup Center
publish-date=07082011