Gerar Interfaces Dinâmicas da Web Móvel com o Dojo Toolkit

Criar aplicativos da web móvel e atualizar seu conteúdo de forma dinâmica com os dados solicitados a partir de um servidor

O uso de dispositivos móveis para navegar na web se tornou a regra. À medida que há um aumento no número de usuários de dispositivos móveis, há um aumento correspondente na taxa de desenvolvimento de aplicativos remotos e websites adequados para dispositivos móveis. Para o desenvolvedor de aplicativos remotos, a principal preocupação é como desenvolver um aplicativo que possa ser exibido na maioria dos dispositivos. Neste artigo, veja como o Dojo Toolkit pode ajudá-lo a criar widgets para seu aplicativo, que imita as interfaces de grande parte dos dispositivos móveis populares. O Dojo Toolkit oferece um mecanismo para criar aplicativos da web móvel utilizando Folhas de Estilo em Cascata, HTML e JavaScript.

Jose Luis Lopez, Software Engineer, IBM

Author bio photo - Jose Luis LopezJose 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.



01/Out/2012

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

WebSphere Application Server Feature Pack para Web 2.0 e Mobile V1.1.0

O WebSphere Application Server Feature Pack para Web 2.0 e Mobile inclui o IBM Dojo 1.7 Toolkit, novos blocos de construção rich Internet application (RIA) e remotos e um componente de diagrama com base em Dojo. Com o acompanhamento de ferramentas do Rational, o Feature Pack facilita bastante a criação de aplicativos ricos da web e remotos. De forma direta, é possível adaptar e implementar aplicativos WebSphere originalmente desenvolvidos para navegadores da área de trabalho em dispositivos móveis.

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:

Listagem 1. Modelo HTML de amostra para seu aplicativo
<!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.

Listagem 2. Corpo do modelo HTML de amostra
<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 .
Listagem 3. Obtendo dados do servidor
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.
Listagem 4. Salvando dados do servidor
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.

Listagem 5. Criando um recipiente de lista
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.

Listagem 6. Incluindo itens 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.

Listagem 7. Incluindo eventos clicáveis
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 .

Listagem 8. Incluindo um recipiente de lista à visualização
dijit.byId("appPatterns").addChild(appPatternListContainer);

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

Listagem 9. Código final para obter dados do servidor
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.

Listagem 10. Limpando o recipiente de lista
dijit.byId("patternInfoList").destroyDescendants();
  • Etapa 2: Criar uma lista de propriedades do padrão de aplicativo virtual.
Listagem 11. Criando 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.
Listagem 12. Obtendo 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 .

Listagem 13. Incluindo itens da lista ao recipiente
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:

Listagem 14. Código final para extrair propriedades sobre os padrões de aplicativo virtual
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.

Figura 1. Visualização Patterns
Patterns view listing virtual application pattern names

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

Figura 2. Visualização Pattern Information
Visualização Pattern Information

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çãoNomeTamanho
Sample HTML file for this articleIWDMobile.zip2KB

Recursos

Aprender

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.

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=Desenvolvimento móvel, Software livre, WebSphere
ArticleID=838014
ArticleTitle=Gerar Interfaces Dinâmicas da Web Móvel com o Dojo Toolkit
publish-date=10012012