IBM Mashup Center Dicas e Truques que Você Precisa Saber, Parte 2: Construindo mashups e alavancando widgets

Acelerando o uso do IBM Mashup Center versões 2 e 3

IBM® Mashup Center é uma ferramenta eficiente voltada para a obtenção de insight e o compartilhamento de informações por meio da rápida montagem e visualização dos dados. Este artigo mostra alguns dos truques e dicas essenciais de se saber, coletados em nossa experiência com o produto. Naa Parte 1 desta série, "IBM Mashup Center — Dicas e Truques que Você Precisa Saber, revisamos os componentes do IBM Mashup Center e parte da terminologia e, em seguida, fornecemos nove dicas práticas para trabalhar com feeds e desenvolver mashups de dados. Agora iremos abordar dicas e truques para criação de mashups e alavancamento de widgets. Este artigo se aplica ao Mashup Center V2 e V3.

Aaron Kasman, Advisory Software Engineer, IBM

 Aaron KasmanAaron Kasman é engenheiro consultor de software na equipe de engenharia da inovação no escritório do CIO da IBM, onde trabalha com ofertas internas de Platform-as-a-Service (PaaS), com interesse no suporte para inovadores e no desenvolvimento de aplicativos situacionais. Antes dessa função, fazia parte da equipe da IBM Software Services para o WebSphere, que desenvolvia a presença de e-commerce do site IBM.com. Seus interesses englobam WebSphere sMash, tecnologias de plataforma e de software como serviço, gerenciamento de conteúdo e comunidade com a Drupal e a CiviCRM, e design visual.



Klaus Roder, Solutions Architect, IBM Mashup Center, IBM

Klaus RoderKlaus Roder é arquiteto de soluções para o IBM Mashup Center no laboratório da IBM no Vale do Silício. Seu foco atual é o desenvolvimento e a implementação de mashups corporativos com clientes que usam o IBM Mashup Center. Antes da sua função atual, trabalhou no projeto IBM Web Interface for Content Management (WEBI) e na equipe de desenvolvimento do WebSphere Information Integrator Content Edition (IICE). Tem mestrado em ciência da computação pela Universidade de Ciências Aplicadas de Würzburg e é membro da divisão de San Francisco Bay Area do ACM.



14/Nov/2011

Visão Geral

O IBM Mashup Center é uma ferramenta eficiente que combina origens de dados rapidamente para obter insight e compartilhar informações visualizadas e em formato de feed. Pode ser usado para desenvolver interfaces da web ricas sem programação, por meio da reutilização de componentes flexíveis. Como alternativa, pode ser amplamente customizado por meio do desenvolvimento de componentes (temas e widgets) para cenários específicos. Este artigo se aproxima mais desse último caso de uso, ajudando você a aprofundar-se rapidamente no Mashup Center reutilizando os componentes já existentes. Partiremos do princípio de que você tem uma familiaridade básica com o produto. Para obter os links para um material introdutório, consulte a seção Recursos .

NaParte 1, revisamos os componentes do IBM Mashup Center e parte da terminologia e, em seguida, fornecemos nove dicas práticas para trabalhar com feeds e desenvolver mashups de dados. Agora, na Parte 2, nós abordamos o frontend, no qual projetamos a apresentação de dados em código usando o Construtor de Mashup.


O Construtor de Mashup

O componente Construtor de Mashup do Mashup Center permite exibir dados aos usuários compondo páginas que consistem em widgets, e conectando origens de dados a esses widgets. Os dados podem vir de origens dentro do Mashup Center, tais como os resultados de um mashup de dados no MashupHub, ou externas, como uma URL de terceiros - por exemplo, um feed do Twitter. Iremos examinar parte da terminologia que será usada antes de mergulharmos nas dicas e truques:

  • O Construtor de Mashup é o frontend do mashup, onde você projeta as páginas de apresentação de dados sem codificar. É o local onde você cria e hospeda páginas que contêm os widgets que exibem os dados que você deseja apresentar.
  • Espaços são coleções de páginas nas quais os mashups residem. Controle de acesso é definido no nível de espaço. Pense no espaço como um website para o projeto no Mashup Center, para o qual você convidará as pessoas.
  • Páginas moram em espaços. Cada página contém um ou mais widgets. É possível estabelecer o layout de uma página, assim como seu tema, para controlar sua aparência. Pense em uma página como sendo análoga a uma página da web.
  • Widgets são os componentes que formam páginas e que passam informações para os usuários. Pense neles como aplicativos pequenos ou pequenos conteúdos dinâmicos que podem ser facilmente colocados em uma página. Exemplos de widgets incluem Mapping Widget ou Charting Widget. Widgets são transferidos por upload por meio do catálogo do Mashup Center e depois publicados no Mashup Builder. No Mashup Builder, eles podem ser selecionados na paleta/caixa de ferramentas e colocados nas páginas. Ao configurar um widget, nós fornecemos dados a ele. Para fazer isso, configuramos o widget para que aponte para a URL na qual obtém o feed de dados. Teremos mais a dizer sobre widgets em breve.
  • Ligações ajudam a tornar os mashups interativos. Em vez de ter uma página de widgets independentes, ligações permitem relacionar o conteúdo de um widget ao de outro. Por exemplo, é possível projetar uma página para que, quando o usuário clique no segmento de um gráfico em um widget, uma tabela detalhada relacionada a esse segmento seja apresentada por outro widget. Ligações permitem configurar qual evento no widget de origem afeta um aspecto do widget de destino e quais dados devem ser passados de um widget para o outro.

Widgets: Usar um existente ou criar um novo?

Ao planejar um projeto de mashup, é útil pensar como você planeja apresentar seus dados. O Mashup Center fornece alguns widgets gerais prontos para uso que podem ser incluídos em páginas de mashup. Eles estão disponíveis na paleta/caixa de ferramentas e estão prontos para uso. Por exemplo, frequentemente usamos o widget visualizador de dados para exibir dados tabulares.

Além dos widgets prontos para uso, vários widgets úteis foram enviados pela comunidade do Mashup Center. Navegue pelo catálogo para ver os widgets disponíveis no Lotus® Greenhouse, o ambiente de simulação público da IBM para produtos Lotus. Há um link para o Greenhouse na seção Recursos. Se você encontrar um widget que considera útil no Greenhouse, pode fazer download desse widget e importá-lo para o catálogo na sua instalação do Mashup Center. Após importar o widget, para torná-lo disponível para ser colocado em uma página, é preciso escolher Add to Mashup Builder na página do widget no catálogo.

Às vezes, é necessário ter funcionalidade mais especializada de um widget que aquela que os widgets existentes oferecem. Por isso, é possível criar seus próprios widgets para atender as necessidades de seu projeto. O design e criação de novos widgets envolve a marcação de HTML, bem como programação usando linguagens como JavaScript e estruturas como Dojo, JQuery ou Prototype para exibir seus dados. Também pode ser útil usar visualizações que alavanquem Adobe® Flash®. Mashup Center suporta vários formatos de widget e é possível usar diversas ferramentas para criá-los, incluindo Eclipse ou IBM Rational® Application Developer. Na verdade, o Mashup Center inclui Widget Factory, um complemento Eclipse para ajudar a desenvolver e projetar widgets.

Como regra geral, nós consideramos útil, sempre que possível, economizar tempo reutilizando um widget existente se ele proporciona funcionalidade suficiente para a situação, em vez de tentar criar um widget exclusivo para a situação.

Descrevemos três abordagens para a seleção de widgets: usar widgets prontos para uso, usar aqueles criados pela comunidade ou desenvolver nossos próprios widgets. Embora seja atraente reutilizar widgets genéricos existentes, é possível encontrar cenários que exigem um pouco mais de customização de um widget existente. Há algumas abordagens que podem ser adotadas. Talvez você tenha um feed que exige filtragem um pouco mais avançada do que a oferecida com um widget Data Viewer padrão. Embora seja possível desenvolver um widget customizado para fazer isso, uma abordagem que vale a pena considerar é fazer essa filtragem em um mashup de dados. Com esse pré-processamento concluído em um mashup de dados, é possível obter a saída de dados desejada em um widget visualizador de dados padrão. Isso pode ajudar a eliminar a necessidade de widgets de código customizado. Outra abordagem, que se concentra mais na camada de apresentação, alavanca o Widget JavaScript Adapter para realizar pequenos ajustes. Daremos um exemplo de como e onde usá-lo mais tarde.

Com os conceitos principais do Mashup Builder em mente, vamos examinar algumas dicas para aproveitar ao máximo o trabalho no Mashup Center.

Dicas para desenvolver mashups e alavancar widgets


1. Dicas de ligação

Diálogo de ligação

Ligação permite definir os relacionamentos entre os widgets. Mais do que isso, é a funcionalidade que transforma uma página de mashup de uma simples coleção de widgets na mesma página em um aplicativo rico de widgets relacionados programaticamente. A melhor parte é que é possível conseguir isso sem escrever código.

Para ser mais claro, os widgets foram ligados uns aos outros para indicar o fluxo de dados quando um evento ocorre em um widget. Por exemplo, um evento é acionado quando um usuário clica em uma linha no widget Visualizador de Dados. Ao ligar essa instância do Data Viewer a outro widget na página, estamos configurando a conexão de modo que, quando usuários clicarem em uma linha no Data Viewer, alguns dados dessa linha clicada serão enviados para o widget que está recebendo a carga útil do evento pela ligação.

A configuração da ligação é feita no diálogo de ligação, que permite especificar não apenas qual widget receberá os dados, mas também o formato dos dados sendo enviados pela ligação. Figura 1 ilustra o diálogo de ligação. Lembre-se que o escopo da ligação é uma página de mashup: não é possível ligar para ou a partir de widgets em outra página.

Figura 1. Exemplo de um diálogo de ligação
Exemplo de um diálogo de ligação

Gráfico de ligação

Às vezes, especialmente quando um widget recebe ou envia diversos eventos, é útil ver uma visão geral de quais eventos foram ligados de e para esse widget em particular. É exatamente isso que o gráfico de ligação faz. Para ver o gráfico de ligação para um widget em particular, no menu de contexto desse widget, escolha Wiring Graph. Você verá uma visualização gráfica dos eventos conectados a esse widget.

Figura 2 ilustra um exemplo de gráfico de ligação para um widget visualizador de dados. Nesse caso, um visualizador de dados está ligado a alguns widgets de customizador de URL. A implicação é que, quando uma linha for selecionada no visualizador de dados, alguns dados serão atualizados em cada um dos customizadores de URL. Algumas coisas para se lembrar sobre esse exemplo: o formato dos dados enviados em cada ligação pode ser diferente. Por exemplo, o primeiro customizador de URL pode receber os dados de uma coluna do visualizador de dados, enquanto outro customizador de URL pode receber uma linha inteira de dados. Essas configurações são especificadas no diálogo de ligação (como mostra Figura 1). Além disso, é provável que cada customizador de URL esteja ligado a outro widget respectivo que exibe os dados na URL especificada. Nós não vemos esses widgets de acompanhamento nesse gráfico, pois o gráfico na figura é apenas para o Data Viewer Alert Info e o Gráfico de Ligação mostra apenas widgets conectados diretamente ao widget do gráfico.

Figura 2. Gráfico de Ligação
Gráfico de Ligação

2. Depure sua página de mashup com o widget Event Explorer

Como nós descrevemos, a página de mashup é sua tela para ligar rapidamente widgets. Para ajudar a depurar seu trabalho, pode ser útil saber exatamente quais dados estão sendo passados pela ligação entre dois widgets quando um evento é acionado. É aqui que entra o widget Event Explorer. O Event Explorer não é o tipo de widget para ser exibido para os usuários finais de mashup; é um utilitário para o criador da página de mashup, para usar na depuração.

Por exemplos, digamos que haja um Data Viewer preenchido com dados e que você quer descobrir quais dados são passados de um Data Viewer para um evento quando uma linha é selecionada. Arraste um widget Event Explorer para a tela e ligue um evento específico do Data Viewer ao Event Explorer. Isso é mostrado na Figura 3, na qual o Data Viewer está formatado para enviar uma Linha como Tabela.

Figura 3. Ligação de Event Explorer para um Data Viewer
Ligação de Event Explorer para um Data Viewer

A saída dos dados que passam pela ligação será mostrada no Event Explorer após o evento ser acionado. Nesse caso, o evento é a linha de tabela que detecta um clique do usuário. Isso é útil para verificar a saída de diferentes formatos de saída de um widget, e pode ser especialmente útil para depurar a saída do JavaScript Adapter. Figura 4 mostra os dados no widget Data Viewer e a saída da ligação Tabela como Linha no Event Explorer, com base na ligação descrita acima. Como você está usando o Event Explorer para fins de depuração, não se esqueça de excluir ou ocultá-lo antes de compartilhar suas páginas de mashup.

Figura 4. Event Explorer mostrando resultados de ligação do Data Viewer
Event Explorer mostrando resultados de ligação do Data Viewer

3. Injete funcionalidade com o widget JavaScript Adapter

Como observamos, o Mashup Center permite criar páginas de mashup e realizar manipulação de dados sem escrever código. Mas às vezes, especialmente se você for desenvolvedor, é possível ter vontade de escrever algumas linhas de código para ajudar a cumprir o que deseja. Mashup Center ajuda você fornecendo o widget JavaScript Adapter.

Digamos que você deseja usar um widget User Input, no qual o usuário pode especificar uma data, e você deseja que o widget mostre a data atual por padrão. É possível usar o JavaScript Adapter para gerar a data atual e passá-la para o widget User Input. Eis o que precisa ser feito: primeiro, inclua uma instância do widget JavaScript Adapter na página e forneça a ela o código listado na Lista 1.

Lista 1. JavaScript que retorna a data atual
if(payload==null)
{      
	var currentTime = new Date(); 
	var month = currentTime.getMonth() + 1; 
	var day = currentTime.getDate(); 
	var year = currentTime.getFullYear();  
	var currentDate = year + "-" + month + "-" + day; 
	var payload = currentDate;      
	this.iContext.iEvents.publishEvent ("Provide Edited Data",  payload);  
	//The last line is where the event is fired!! 
	//(See the Mashup Center Client Side API JavaDoc Reference 
	//- a link is in the Resource section - for more details)
}    
return currentDate;

Em seguida, inclua um widget User Input na página e configure-o para que tenha um campo de data (como mostra a Figura 6). Com os widgets JavaScript Adapter e User Input no lugar, ligue a saída do JavaScript Adapter ao campo "Start Date" do widget User Input, como mostra a Figura 5).

Figura 5. Ligando a saída de JavaScript Adapter ao widget User Input
Ligando a saída de JavaScript Adapter ao widget User Input

Agora, como o widget JavaScript Adapter é automaticamente acionado cada vez que a página é carregada, no carregamento de página o widget User Input exibirá a data atual no selecionador de datas Start Date. Figura 6 mostra a data atual no widget User Input como resultado da ligação de JavaScript Adapter.

Figura 6. A data atual exibida no widget User Input com a ajuda de JavaScript
A data atual exibida no widget User Input com a ajuda de JavaScript

No exemplo acima, ligamos a data atual a um widget User Input, mas também é possível enviar a data atual para qualquer outro widget que tome um parâmetro. Por exemplo, pode haver um feed de dados que tenha um parâmetro de campo de data. É possível usar a saída de data atual do JavaScript Adapter como entrada para um visualizador de dados que esteja exibindo o feed. Nesse caso, seria possível ligar a saída de JavaScript para um Customizador de URL que fornece sua origem ao Data Viewer. O Data Viewer exibiria assim dados baseados na data atual.

4. Inclua um widget em uma página da web

Pode haver uma situação na qual você quer integrar um widget do Mashup Center fora do Mashup Center. O Mashup Center pode gerar o código HTML para integrar um widget no código de origem de qualquer página da web. Eis como: ao selecionar um widget da paleta, é possível optar por incluí-lo em uma página externa em vez de uma página de mashup. Figura 7 ilustra a opção de incluir na página da web.

Figura 7. Inclua widget em página da web
Inclua widget em página da web

Após fazer essa seleção, você verá um diálogo no qual pode configurar as dimensões de seu widget. Também é possível editar as configurações do widget, tais como a origem de dados, assim como seria possível se você estivesse incluindo o widget em uma página no Mashup Center. Quando concluir a configuração do widget, atualize a marcação. Em seguida, copie e cole no código HTML na página customizada fora do Mashup Center. Figura 8 mostra o diálogo de configuração do widget. Observe o código de marcação que pode ser copiado para código HTML customizado em outros lugares.

Figura 8. Configure o widget
Configure o widget

5. Exiba um mashup em uma página da web

Na dica anterior, mostramos como é possível integrar facilmente um único widget em uma página da web fora do Mashup Center. Mas melhor que isso: é possível até mesmo tomar uma página de mashup completa e integrá-la em uma página da web. Isso seria extremamente útil se você quisesse integrar seu mashup, por exemplo, em uma página de intranet com tema. Dessa maneira, é possível convidar usuários para sua página de intranet na qual a página do Mashup Center está integrada perfeitamente, (sem a identificação do IBM Mashup Center) e fornecer uma experiência totalmente integrada — tanto em termos da aparência da página como de sua localização em relação a outras páginas no site da intranet. Se a página de mashup exigir autenticação, será solicitado aos usuários.

A técnica é semelhante à dica anterior, na qual incluímos um widget em uma página externa. Figura 9 mostra o menu da página do Mashup Center na qual recuperamos o código (tag de script) para integrar na página de mashup.

Optando por exibir um mashup em uma página externa

Figura 10 contém um diálogo simples. Selecione as dimensões e outras configurações para o mashup integrado. Em seguida, tome o fragmento de HTML gerado e integre-o na página da web fora do Mashup Center. E isso é tudo.

Figura 10. Configurando um mashup para exibição em uma página externa
Configurando um mashup para exibição em uma página externa

6. Compartilhando espaços e páginas

Para compartilhar uma página de mashup, clique no link de compartilhamento no menu Action da página. Observe que, para compartilhar uma página com alguém, é preciso dar a essa pessoa acesso ao espaço no qual a página reside. O compartilhamento de espaços é feito no Space Manager, enquanto o compartilhamento de páginas é gerenciado no menu da página.

Se você compartilhar um espaço com uma pessoa, ela terá, por padrão, acesso ao espaço inteiro. No nível de página, é possível optar por revogar o acesso a uma página em particular para uma pessoa que ainda pode acessar o espaço em geral no qual a página reside. Nos níveis de espaço e página, também é possível alterar o acesso de alguém de leitura/gravação para somente leitura.

Figura 11 mostra o diálogo de compartilhamento de uma página. Observe como, por padrão, a página herda as permissões de um espaço. Para desativar essa herança, nas configurações de espaço, desmarque as caixas chamadas Include viewers from parent ou Include editors from parent. A figura também mostra que estamos procurando um usuário chamado Klaus Roder para ser incluído nas regras de acesso dessa página. Após um usuário ser localizado no diretório, é possível arrastar seu nome da esquerda para a direita para a área Add to View ou Add to Edit.

Figura 11. Configurações de compartilhamento de uma página
Configurações de compartilhamento de uma página

7. Data Viewer com imagens em linha

O widget Data Viewer pronto para uso é uma maneira útil de mostrar dados tabulares em uma página de mashup. No entanto, pode às vezes ser útil dar aos usuários pistas visuais adicionais e indicações de que algo é importante ou novo.

Isso pode ser feito usando o Data Viewer em conjunto com um Mashup de Dados. Iremos alavancar a potência de Mashups de Dados para enriquecer o feed com elementos HTML; neste caso, uma tag img (imagem) será inserida para incluir imagens para itens recém-incluídos. A imagem incluída no feed precisa apenas ser endereçável por URL.

Nesse exemplo, os dados vêm de um banco de dados e são trazidos ao Mashup Center por meio do Conector JDBC Corporativo. Em um Mashup de Dados, nós comparamos a data em que o produto foi incluído no catálogo com a data atual. Para itens incluídos nos últimos 30 dias, incluímos um ícone NEW na linha.

Figura 12 mostra os resultados do Data Viewer exibindo o Mashup de Dados descrito.

Figura 12. Data Viewer com pistas visuais
Data Viewer com pistas visuais

mostra o Mashup de Dados que enriquece dinamicamente o feed de origem que vem do banco de dados e inclui o ícone NEW em linhas selecionadas. Como é possível ver, estamos filtrando os dados para itens incluídos nos últimos 30 dias e itens incluídos antes disso. Para os itens incluídos nos últimos 30 dias, usamos um operador de conversão para incluir o ícone NEW.

Figura 13. Mashup de dados para incluir pistas visuais
Mashup de dados para incluir pistas visuais

Vamos realizar drill down dos aspectos principais desse mashup de dados. Figura 14 mostra o operador do filtro que reúne todos os itens incluídos nos últimos 30 dias.

Figura 14. Mashup de Dados filtrando itens incluídos nos últimos 30 dias
Mashup de Dados filtrando itens incluídos nos últimos 30 dias

mostra como usar o operador de conversão para incluir o fragmento HTML para incluir o ícone NEW. Observe que não estamos integrando o ícone, mas apenas incluindo uma tag img com uma URL para carregar o ícone de um local de terceiros. Para incluir HTML na saída, criamos um elemento em nossa árvore de saída e inserimos marcação HTML como o valor de texto desse nó. O lado direito do operador de conversão renderiza a tag img para mostrar o novo ícone, e a dica de ferramenta mostra a tag img usada para integrar a imagem.

Figura 15. Operador de conversão em um Mashup de Dados é usado para incluir dinamicamente ícone em novos itens
Operador de conversão em um Mashup de Dados é usado para incluir dinamicamente ícone em novos itens

8. Atualização automática com Timer de Ação

Ao criar uma página de mashup, o conteúdo renderizado pela página é geralmente estático, exceto eventos gerados pelo usuário, como clicar em uma linha em um visualizador de dados ou atualizar um widget de gráfico. Em muitos casos, isso é suficiente. Mas, às vezes, pode-se desejar que um certo widget se atualize automaticamente em um intervalo predefinido, de modo que exiba continuamente dados novos ou atualizados na página de mashup. É aqui que entra o widget Timer de Ação.

Considere um exemplo no qual o Timer de Ação aciona um evento para um widget Customizador de URL a cada 10 segundos. O Customizador de URL contém uma URL que recupera os tweets mais recentes no Twitter que contenham o termo "IBM". O Customizador de URL está ligado ao widget leitor de feed, que exibe o feed.

Figura 16. O Timer de Ação aciona para exibir a cada 10 segundos
O Timer de Ação aciona para exibir a cada 10 segundos

Figura 17 mostra o diálogo Edit Settings do widget Timer de Ação, no qual pode ser especificada a frequência com que o timer deve ser acionado. Para esse tipo de exemplo, em cada acionador, reiniciamos o contador em 0. Figura 18 é o gráfico de ligação para o widget Customizador de URL, que visualiza a ligação entre os widgets Timer de Ação, Customizador de URL e leitor de feed.

Figura 17. Diálogo Edit Settings do Timer de Ação especificando intervalo de atualização
Diálogo Edit Settings do Timer de Ação especificando intervalo de atualização
Figura 18. Gráfico de ligação do Timer de Ação
Gráfico de ligação do Timer de Ação

9. Temas e aparências

O Mashup Center permite incluir widgets reutilizáveis em cada página, mas e quanto a mudar o visual das páginas de mashup? O visual de cada página de mashup é determinado por seu tema. Um tema diferente pode ser escolhido para cada página na caixa de diálogo Edit Page Properties. Temas podem afetar elementos nas páginas como cabeçalho, navegação, plano de fundo, fontes e estilos de widget, também conhecidos como aparências. É possível customizar temas para alterar completamente o visual de uma página de mashup, como mostram as duas figuras abaixo. Esses exemplos mostram os temas customizados chamados "Slick Black" e "Smarter Buildings" respectivamente.

Figura 19. Tema Slick Black usado para criar um visual moderno e visualmente atraente
Tema Slick Black usado para criar um visual moderno e visualmente atraente
Figura 20. Mashup Smarter Buildings com visual atraente e navegação customizada
Mashup Smarter Buildings com visual atraente e navegação customizada

Um tema também pode ser usado para mostrar a marca da empresa, como o "IBM Theme" ilustrado na Figura 21 que dá ao Mashup Center uma aparência semelhante ao website IBM.com.

Figura 21. Altera o visual da navegação e inclui a marca da empresa IBM
Altera o visual da navegação e inclui a marca da empresa IBM

Cada tema também pode fornecer um ou mais conjuntos de aparências de widget. Aparências são aplicadas em widgets e podem dar a cada widget um visual específico. Figura 22 mostra como o widget Data Viewer fica com a aparência "Frosted Glass" e com a aparência "Cap Blue".

Figura 22. Widget Data Viewer com a aparência "Frosted Glass" e com a aparência "Cap Blue"
Widget Data Viewer com a aparência

Para aplicar uma aparência diferente no widget, clique no menu de contexto do widget e escolha Select Skin, conforme mostrado na Figura 23.

Figura 23. Selecionar uma aparência diferente dá ao widget uma aparência diferente
Selecionar uma aparência diferente dá ao widget uma aparência diferente

A maneira mais fácil de criar temas e aparências customizados é copiar e modificar o CSS, HTML e imagens de um tema padrão. Após criar seu tema (que pode incluir aparências customizadas), é possível transferi-lo por upload para o Mashup Center usando um cliente WebDAV. Para ler mais sobre como criar seus temas customizados, consulte o Centro de Informações do Mashup Center (consulte Recursos).


Concluindo

NaParte 1 de nossa série de dicas e truques para usar o Mashup Center, nós compartilhamos alguns fragmentos úteis para usar a parte do Mashup Hub do produto. Nesta segunda e última parte, listamos algumas dicas sobre o uso da parte de frontend do produto, o Mashup Builder, para ajudar você a começar a criar páginas, usar widgets e compartilhar seus resultados com seus colegas. Juntando tudo, você agora tem um conjunto de dicas que irá ajudar a otimizar sua experiência com essa plataforma eficiente.

Esperamos ter mostrado como o kit de ferramentas robusto do Mashup Center permite desenvolver aplicativos movidos por dados em horas e dias, e não semanas e meses, como frequentemente é necessário no desenvolvimento convencional.

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=Lotus, Information Management, Desenvolvimento da Web
ArticleID=772785
ArticleTitle=IBM Mashup Center — Dicas e Truques que Você Precisa Saber, Parte 2: Construindo mashups e alavancando widgets
publish-date=11142011