Gerar interfaces dinâmicas da web móvel com o Dojo Toolkit

O uso de um dispositivo móvel é uma das formas mais populares de navegar na web. À medida que há um aumento nos usuários de dispositivos móveis, há uma chamada para desenvolver mais aplicativos remotos e websites apropriados para dispositivos móveis. A criação de aplicativos remotos nativos direcionados a plataformas diferentes (como iOS, Android e Blackberry OS) é difícil; o código que funciona em um dispositivo pode não funcionar em outro, mesmo para dispositivos com a mesma implementação de S.O., mas fabricantes diferentes.

Com o Dojo Toolkit (dojox.mobile), é possível criar widgets que imitam a interface de grande parte dos dispositivos móveis populares. Neste artigo, veremos como utilizar o Dojo Toolkit para criar aplicativos remotos da web e atualizar seu conteúdo de forma dinâmica com dados solicitados de um servidor. A interface de programação do aplicativo (API) de representational state transfer (REST) do IBM® Workload Deployer (IWD) é utilizada para buscar propriedades do aplicativo e também é discutida neste artigo.

Introdução

Neste artigo, criaremos um aplicativo remoto da web denominado IWDMobile. O aplicativo possui um requisito simples: listar e exibir informações sobre dados buscados do servidor.

Ele consiste em um arquivo HTML, IWDMobile.html, que é seu núcleo. O arquivo utiliza:

O Dojo para criar widgets que imitam interfaces com o usuário remoto
Métodos HTTP para consultar o servidor

API de REST do IBM Workload Deployer

A API de REST do IBM Workload Deployer oferece chamadas de REST para gerenciar dispositivos do Workload Deployer. Este artigo utiliza GET /resources/applicationPatterns, que é uma chamada de REST para buscar informações sobre padrões de aplicativo virtual. Os padrões de aplicativo virtual mantêm propriedades, como nome, id e criador.

Estrutura do projeto

Para este artigo, IWDMobile.html é colocado na pasta pública de um servidor que compartilha a rede com o IBM Workload Deployer.

Dojo 1.7

Seu arquivo HTML pode acessar o Dojo de qualquer uma das formas. Ele pode acessar o Dojo disponível a partir de uma rede de entrega de conteúdo (ou CDN; como Google e AOL) pública ou busca o Dojo a partir de seu próprio website. Este artigo se refere aos recursos do Dojo 1.7, mas como ele ainda não foi liberado e ainda não está disponível para CDNs públicas, faça o download de uma cópia do Dojo 1.7 mais recente a partir da página da web do Dojo Toolkit e descompacte-o em directory/public. Consulte Recursos para um link para download do Dojo Toolkit.

É preciso ter a seguinte estrutura de diretório:

/public/IWDMobile.html
/public/dojo1.7/

Desenvolvendo o IWDMobile

Considere o modelo HTML abaixo para iniciar seu aplicativo remoto da web:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1,
maximum-scale=1,
minimum-scale=1,
user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>IWDMobile</title>
<link
href="dojo1.7/dojox/mobile/themes/iphone/iphone.css"
rel="stylesheet" />
<script type="text/javascript"
src="dojo1.7/dojo/dojo.js"
djConfig="isDebug:true, parseOnLoad:true">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
</script>
</head>
<body>
</body>
</html>

As instruções do Dojo fazem parte da seção do título do arquivo HTML. Essas instruções carregam a biblioteca do Dojo e suas classes necessárias para analisar as informações. Os temas do CSS e as META tags específicas de dispositivo móvel também são definidos. Para mais informações sobre META tags específicas de dispositivo móvel, consulte o item “Meta tags móveis específicas da Apple” listado em Recursos abaixo.

Esqueleto da interface com o usuário

O IWDMobile requer uma nova visualização para listar padrões de aplicativo virtual buscados do servidor. Neste artigo, duas visualizações são utilizadas.

A primeira, terá os nomes dos padrões de aplicativo virtual;
A segunda, terá as propriedades dos padrões de aplicativo virtual.

Quando um nome do padrão de aplicativo virtual for selecionado, suas propriedades devem ser exibidas.

O Dojo fornece widgets e métodos que cumprem com os requisitos do IWDMobile. Os widgets necessários para esse aplicativo são:

Dojox.mobile.ScrollableView (recipiente que representa a tela do dispositivo móvel);
Dojox.mobile.Heading (representa uma barra de navegação);
Dojox.mobile.RoundRectList (recipiente para itens);
Dojox.mobile.ListItem (representa um item da lista).

A seção do corpo é atualizada para acomodar esses widgets.

<body>
<!-- Application pattern view -->
<div id="appPatterns" dojotype="dojox.mobile.ScrollableView">
<h1 dojotype="dojox.mobile.Heading" label="Patterns"></h1>
</div>

<!-- Application pattern info view -->
<div id="appPatternsInfo" dojotype="dojox.mobile.ScrollableView">
<h1 dojotype="dojox.mobile.Heading"
label="Pattern Information"
back="Patterns"
moveto="appPatterns"></h1>
<ul id="patternInfoList" dojotype="dojox.mobile.RoundRectList">
</ul>
</div>
</body>

Funções do JavaScript

As funções do JavaScript necessárias:

A primeira obtém os dados do servidor;
A segunda extrai as propriedades sobre os padrões de aplicativo virtual.

A primeira, getApplicationPatterns(), precisa enviar uma solicitação GET ao servidor, analisar a resposta do servidor, criar um recipiente de lista, preenchê-lo com itens da lista que possuírem nomes do padrão de aplicativo virtual, incluir um evento clicável em cada item da lista e incluir o recipiente de lista à visualização appPatterns .

A segunda, getPatternInfo(virtAppPatternObject), toma um objeto do padrão de aplicativo virtual como argumento. A função precisa extrair as propriedades para o objeto do padrão de aplicativo virtual, criar itens da lista que possuírem os valores das propriedades dos padrões de aplicativo virtual e incluí-los ao recipiente de lista patternInfoList .

getApplicationPatterns()

Os segmentos do código abaixo refletem a ideia por trás dessa função.

Etapa 1: Solicitação GET /resources/applicationPatterns .

dojo.xhrGet({
	url :"https://iwd.server.com/resources/applicationPatterns",
	handleAs : "json",

	headers : {
			'X-Deployer-API-Version': '3.0',
			'Content-Type': 'application/json',
			'Accept': 'application/json' 				
			},

	load : function(response) { },
	error : function(e) { }
});,

Etapa 2: Salve os dados da resposta do servidor em uma nova variável.

var sdata = response;

Etapa 3: Crie um recipiente de lista que terá os nomes do aplicativo.

dojo.mobile.RoundRectList cria um novo recipiente de lista denominado applicationPatternsList.

var appPatternListContainer = new 
dojox.mobile.RoundRectList({id:"applicationPatternsList"});

Etapa 4: Inclua itens ao recipiente de lista na Etapa 3 para cada elemento na resposta.

dojox.mobile.ListItem cria elementos do item da lista. Cada elemento é atribuído um rótulo e uma propriedade moveTo . O rótulo é exibido em seguida pelo item da lista, nesse caso, o nome do padrão de aplicativo virtual. A propriedade moveTo Informa ao aplicativo qual visualização deve ser aberta se esse item for selecionado. Nesse caso, ele abrirá a visualização appPatternsInfo .

addChild inclui cada item da lista ao recipiente de lista appPatternsListItem .

O for-loop assegura que cada item da lista seja incluído ao recipiente de lista.

for(var i in sdata){

  var name = sdata[i].app_name
  var appPatternListItem = new dojox.mobile.ListItem({
					 label: name,
					 moveTo: "appPatternsInfo"
				    });

  appPatternListContainer.addChild(appPatternListItem);

}

Etapa 5: Inclua um evento clicável em cada item na lista. Quando for clicado, o item exibirá suas informações na visualização appPatternsInfo .

dojo.connect conecta um evento clicável aos itens da lista.

dojo.hitch executa a função getPatternInfo com o argumento sdata[i].

O for-loop assegura que cada item da lista seja atribuído um evento clicável.

for(var i in sdata){

  dojo.connect(appPatternListItem,
               "onclick",
               dojo.hitch(null,
               getPatternInfo, sdata[i]));

}

Etapa 6: Inclua um recipiente de lista à visualização appPatterns .

dijit.byId procura pelo widget de visualização appPatterns .

addChild inclui o widget appPatterListContainer à visualização appPatterns .

dijit.byId("appPatterns").addChild(appPatternListContainer);

O código final para a função getApplicationPatterns do JavaScript se parece com:

function getApplicationPatterns(){
  // Send a request to the server
  dojo.xhrGet({
      url : "https://iwd.server.com/resources/applicationPatterns",
	handleAs : "json",
	headers : {
			'X-Deployer-API-Version': '3.0',
			'Content-Type': 'application/json',
			'Accept': 'application/json'

			},

	load : function(response) {
	    // Server responds with information in json format
          var sdata = response;

	    // Create the list container that will hold application names
	    var appPatternListContainer = new  
          dojox.mobile.RoundRectList({id:"applicationPatternsList"});

          // Add a new item to the list container for each element
	    for (var i in sdata){

		  // Create and populate the list container (app names)
		  var name = sdata[i].app_name
		  var appPatternListItem = new dojox.mobile.ListItem({
							label: name,
							moveTo: "appPatternsInfo"});

		  // Add the newly created item to the list container
		  appPatternListContainer.addChild(appPatternListItem);

              // Attach an "onclick" event for each item on the list.   
              // When the item is clicked, it will display information
              // about it on a new view (in this case appPatternsInfo)
		  dojo.connect(appPatternListItem,
                           "onclick",
                           dojo.hitch(null,  
                           getPatternInfo, sdata[i]));

		}

            // Add list container to the appPatterns view
		dijit.byId("appPatterns").addChild(appPatternListContainer);

	},
	error : function(e) {}
  });
}

getPatternInfo(virtAppPatternObject)

Os segmentos do código abaixo refletem a ideia por trás dessa função.

Etapa 1: Limpar o recipiente de lista.

destroyDescendants destrói os filhos e descendentes do widget especificado. Você deve se certificar de limpar e remover quaisquer dados previamente armazenados nesse elemento DOM.

dijit.byId("patternInfoList").destroyDescendants();

Etapa 2: Criar uma lista de propriedades do padrão de aplicativo virtual.

var listItemLabels= ["Application name",
                     "Application id",
                     "Application type",
                     "Content MD5",
                     "Content type",
                     "Creation time",
                     "Creator",
                     "Last modified",
                     "Last modifier",
                     "Collection"];

Etapa 3: Obtenha valores da propriedade do objeto do padrão de aplicativo virtual.

var listItemInfo = [virtAppPatternObject.app_name,
			  virtAppPatternObject.app_id,
			  virtAppPatternObject.app_type,
			  virtAppPatternObject.content_md5,
			  virtAppPatternObject.content_type,
			  virtAppPatternObject.create_time,
			  virtAppPatternObject.creator,
 			  virtAppPatternObject.last_modified,
			  virtAppPatternObject.last_modifier,
			  virtAppPatternObject.Collection];

Etapa 4: Criar itens da lista e incluí-los ao recipiente patternInfoList .

dijit.byId procura pelo widget de visualização patternInfoList .

dojox.mobile.ListItem cria elementos do item da lista. Cada elemento é atribuído um rótulo e uma propriedade rightText . O rótulo é o texto exibido à esquerda do item da lista, nesse caso, os nomes das propriedades. A propriedade rightText é o texto exibido à direita do item da lista, nesse caso, os valores das propriedades.

addChild inclui os itens da lista à visualização patternInfoList .

for(var j in listItemLabels){

  // Populate list container with application properties and values
  var list = dijit.byId("patternInfoList");
  var appPatternInfo = new dojox.mobile.ListItem({
      				label: listItemLabels[j] ,
	      			rightText: listItemInfo[j]
				});
  list.addChild(appPatternInfo);
}

O código final para a função getPatternInfo(virtAppPatternObject) do JavaScript se parece com:

function getPatternInfo(virtAppPatternObject){

  // Clear list container before attaching information to it.
  dijit.byId("patternInfoList").destroyDescendants();  

  // List of application's information
  var listItemLabels= ["Application name",
                       "Application id",
                       "Application type",
                       "Content MD5",
                       "Content type",
                       "Creation time",
                       "Creator",
                       "Last modified",
                       "Last modifier",
                       "Collection"];

  // List of application's values
  var listItemInfo = [virtAppPatternObject.app_name,
			    virtAppPatternObject.app_id,
			    virtAppPatternObject.app_type,
			    virtAppPatternObject.content_md5,
		          virtAppPatternObject.content_type,
			    virtAppPatternObject.create_time,
			    virtAppPatternObject.creator,
			    virtAppPatternObject.last_modified,
	     		    virtAppPatternObject.last_modifier,
	                virtAppPatternObject.Collection];

  // Create and populate application's information
  for(var j in listItemLabels){

    // Populate list container with application properties and values
    var list = dijit.byId("patternInfoList");
    var appPatternInfo = new dojox.mobile.ListItem({
					label: listItemLabels[j] ,
					rightText: listItemInfo[j]
				});
    list.addChild(appPatternInfo);
  }
}

IWDMobile.html

Como mencionado anteriormente, IWDMobile.html é o núcleo do aplicativo. Ele retém o código HTML, as instruções do Dojo e as classes do JavaScript necessários para criar o aplicativo IWDMobile. É possível fazer o download da versão final do IWDMobile.html.

Demonstração

Abra o arquivo IWDMobile.html por sua URL. Por exemplo, https://iwd.server.com/IWDMobile.html

A Figura 1 mostra a visualização inicial, a visualização Patterns. Essa visualização lista nomes do padrão de aplicativo virtual. Ao clicar em qualquer item listado, você será redirecionado à visualização das informações do padrão, exibindo informações detalhadas sobre o item selecionado.

A Figura 2 mostra informações detalhadas sobre o padrão de aplicativo virtual “Blank application”.

Conclusão

Neste artigo, vimos como utilizar o Dojo Toolkit para criar um aplicativo remoto da web que imita interfaces com o usuário remoto. Vimos como atualizar o conteúdo do aplicativo de forma dinâmica com os dados solicitados do servidor. As possibilidades são infinitas. Agora, é a sua vez de decidir como seu aplicativo deve se comportar. Boa sorte!

Agradecimentos

Agradeço a Andy Dingsor e Yoshiroh Kamiyama por seu feedback durante a composição deste artigo.

Download

Descrição	Nome	Tamanho	Método de download
Sample HTML file for this article	IWDMobile.zip	2KB	HTTP

Informações sobre métodos de download

***

Faça o download de uma versão experimental gratuita do IBM® Tivoli® Storage Manager FastBack™ V5.5, a solução de software de proteção contínua de dados e recuperação quase instantânea da próxima geração para servidores Windows essenciais para os negócios, escritórios remotos e empresas de pequeno e médio portes.

Recursos

Aprender

Para mais plano de fundo, leia “Get started with Dojo Mobile 1.7” (developerWorks, agosto de 2011).
Saiba mais sobre o Dojo e o IBM Workload Deployer no developerWorks.
Conheça as meta tags móveis específicas da Apple.
No assistente Zona de desenvolvimento da web no developerWorks, encontre vários arquivos e tutoriais, além de downloads, fóruns de discussão e diversos outros recursos para desenvolvedores da web.
Fique atualizado com os eventos técnicos e webcasts do eventos técnicos e webcasts do developerWorks com ênfase em uma variedade de produtos IBM e assuntos do segmento de mercado de TI.
Participe de um resumo de instruções gratuito no briefing ao vivo e gratuito do developerWorks Live! para inteirar-se sobre os produtos e ferramentas IBM, além das tendências do mercado de TI.
Acompanhe as demos sob demanda do developerWorks , que abrangem desde demos de instalação e configuração de produtos para iniciantes até funcionalidades avançadas para desenvolvedores experientes.
Siga os tweets do developerWorks no Twitter.

Obter produtos e tecnologias

Faça o download do Dojo 1.7 mais recente na página da web do Dojo Toolkit .
IBM Workload Deployer permite a extensão de middleware e serviços de SOA inteligentes em uma nuvem privada.
Feature Pack do IBM WebSphere Application Server para Web 2.0 e Móvel inclui o IBM Dojo 1.7 Toolkit, novos blocos de construção rich Internet application (RIA) e remoto e um componente de diagrama com base em Dojo. Com as ferramentas acompanhantes do Rational, o Feature Pack o ajuda e adaptar e implantar aplicativos WebSphere desenvolvidos originalmente para navegadores desktop em dispositivos móveis. Saiba mais.
Avalie os produtos IBM da maneira que for melhor para você: faça download da versão de teste de um produto, avalie um produto online, use-o em um ambiente de nuvem ou passe algumas horas no no Ambiente de Simulação da SOA aprendendo a implementar Arquitetura Orientada a Serviços de modo eficiente.

Discutir

Participe da comunidade do My developerWorks. Entre em contato com outros usuários do developerWorks, enquanto explora blogs, fóruns, grupos e wikis orientados a desenvolvedores.

***

Sobre o autor: José Luis Lopez é Software Engineer na IBM. Atualmente trabalha no IBM Workload Deployer ajudando os clientes a acelerarem a implementação do aplicativo em nuvens privadas e ambientes de virtualização. Trabalhou no WebSphere Application Server Proxy, DMZ Proxy, DRS, Dynacache e Dependency Injection para Java (CDI). Possui patentes de Sistemas de Reconhecimento da Íris e Interfaces de Usuário Remoto.

***

Artigo original disponível em: http://www.ibm.com/developerworks/br/library/mo-dojo-mobile-interface/index.html

Categorias

Colunistas

Explorar

Newsletter

Ecossistema

Gerar interfaces dinâmicas da web móvel com o Dojo Toolkit

Introdução

API de REST do IBM Workload Deployer

Estrutura do projeto

Dojo 1.7

Desenvolvendo o IWDMobile

Esqueleto da interface com o usuário

Funções do JavaScript

IWDMobile.html

Demonstração

Conclusão

Agradecimentos

Download

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Mais de developerWorks Brasil

Fios

Introdução

API de REST do IBM Workload Deployer

Estrutura do projeto

Dojo 1.7

Desenvolvendo o IWDMobile

Esqueleto da interface com o usuário

Funções do JavaScript

IWDMobile.html

Demonstração

Conclusão

Agradecimentos

Download

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Mais de developerWorks Brasil

Fios

O melhor do dev brasileiro, no seu e-mail