Usar componentes de IU no jQuery Mobile

Elementos padrão para websites atrativos e amigáveis

Muitos componentes de IU estão disponíveis na estrutura jQuery Mobile. Este artigo oferece uma visão geral de alto nível sobre cada elemento e como é possível usá-los em um website remoto. Ele aborda componentes de IU específicos, explica os motivos para usá-los e fornece exemplos de códigos de uso em um website remoto.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock é desenvolvedor e designer de web contratado desde 1996. Trabalhou em projetos para empresas comoSPIN Magazine, Phoenix Children's Hospital, United Airlines, JP Morgan Chase e 1-800-Recycling. é autor de Ajax for Web Application Developers (Sams) e de The ActionScript Migration Guide (New Riders), além de ser colunista e escritor convidado em diversos websites e revistas de design, incluindo IBM developerWorks, Peachpit.com, InformIT.com e Practical Web Design . Kris também é fundador e principal desenvolvedor/designer do Studio Sedition, um estúdio de desenvolvimento de software e web design especializado na integração de formatos e funções. Para saber mais sobre o Studio Sedition e os serviços oferecidos por eles, visite www.studiosedition.com.



11/Jun/2012

A biblioteca JavaScript do jQuery Mobile é uma forma eficiente de permitir que dispositivos tablets e móveis acessem aplicativos remotos permitindo que os usuários se conectem diretamente a aplicativos orientados a toque por meio de um navegador da web.

Para usar qualquer exemplo deste artigo, é necessário fazer download ou incluir os arquivos de estrutura jQuery Mobile hospedados remotamente. é possível encontrar um link para eles em Recursos.

Caixas de diálogo e janelas pop-up

A caixa de diálogo é um elemento importante de IU, avisando os usuários de uma resposta ou simplesmente exibindo uma informação. As caixas de diálogo são usadas normalmente para apresentar opções que executem algum tipo de comando com base na resposta do usuário. Geralmente, é possível apresentar as caixas de diálogo de duas maneiras:— como uma janela modal ou não modal (com o jQuery Mobile são apresentadas como uma caixa de diálogo modal). As caixas de diálogo modal bloqueiam a interação dos usuários com a página da web abaixo delas, solicitando uma resposta antes que possam prosseguir.

Para criar uma caixa de diálogo com o jQuery Mobile, é necessário usar o atributo data-rel no hiperlink que deseja abrir como uma janela de diálogo e designar a ele o valor de diálogo. O código abaixo mostra como converter um hiperlink simples para página da web em um hiperlink que abra a página associada como uma caixa de diálogo:

<a href="dialog.html" data-rel="dialog">Open dialog</a>

Por padrão, a estrutura jQuery Mobile adiciona cantos arredondados, uma margem e um plano de fundo escuro à página da web para torná-la semelhante a uma caixa de diálogo posicionada abaixo da página da web.

Há diversas formas de fechar uma caixa de diálogo. A primeira opção é simplesmente navegar para outra página, que pode estar relacionada à resposta do usuário. Essa é uma boa opção para qualquer tipo de processamento que precisa se iniciar. —Por exemplo, um botão Save pode vincular-se a uma página da web que salva informações em um banco de dados e depois retorna para a página da web pai original com uma mensagem de confirmação. A segunda opção é usar o atributo data-rel em um hiperlink na caixa de diálogo e definir o valor para back, como mostra o código abaixo. Essa é uma boa opção para incluir o botãoCancelar em uma caixa de diálogo.

<a href="parent.html" data-rel="back">Cancel</a>

Infelizmente, essa opção não funciona em dispositivos que não suportam JavaScript. A última opção é usar o JavaScript para chamar o método close da caixa de diálogo diretamente:

$('#my-dialog').dialog('close');

Também é possível usar uma variedade de transições para caixas de diálogo para adicionar tipos ao website remoto. é possível definir as transições incluindo um atributodata-transition ao hiperlink que você está convertendo em uma caixa de diálogo:

<a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

As transições de dados disponíveis atualmente são pop, slidedown e flip. Cada uma funciona exatamente como o esperado. A transição mais comum associada às caixas de diálogo é a pop, mas há alguns casos em que outras transições podem ser usadas.


Barras de ferramentas

A estrutura jQuery Mobile inclui cabeçalhos e rodapés como barras de ferramentas padrão. Entretanto, as barras de ferramentas também podem ser usadas para exibir a navegação, como na navbar. O uso padrão do cabeçalho no jQuery Mobile é para atuar como um título de página que estabiliza o topo da página da web. Geralmente, o rodapé é o elemento final de uma página da web e inclui conteúdo como informações de copyright e hiperlinks adicionais, entre outros.

Criar um cabeçalho ou rodapé é tão fácil quanto adicionar um atributo data-role a um elemento HTML. A Listagem 1 mostra como é fácil criar uma barra de ferramentas Cabeçalho e Rodapé.

Listagem 1. Criar uma barra de ferramentas de cabeçalho e de rodapé com a estrutura jQuery Mobile
<div data-role="header">
  <h1>My Page Title</h1>
</div>
	
<!-- Some page content... -->
	
<div data-role="footer">
  <p>Copyright notice</p>
</div>

é possível customizar cabeçalhos e rodapés usando CSS ou alguns atributosdata- disponíveis, como data-position, que define o comportamento de posicionamento de uma barra de ferramentas. O valor padrão para este atributo é inline, mas também é possível definir seu valor como corrigidos importante mencionar a posição fullscreen. O fullscreen é o mesmo que corrigidos, mas as barras de ferramentas não aparecem na página da web até que o usuário comece a interagir com a página. Quando um usuário interage com uma página da web, as barras de ferramentas aparecem, permitindo que o usuário interaja com elas e, depois, desaparecem quando o usuário para de interagir com a página (A Listagem 2). Esta opção é útil ao exibir um reprodutor de vídeo, uma galeria de fotos ou similares.

Listagem 2. Definir uma barra de ferramentas de cabeçalho e de rodapé para tela inteira com a estrutura jQuery Mobile
<div data-role="header" data-position="fullscreen">
	<h1>My Page Title</h1>
</div>

<!-- Some page content... -->

<div data-role="footer" data-position="fullscreen">
	<p>Copyright notice</p>
</div>

O navbar é usada para exibir até cinco botões ou itens de navegação em um cabeçalho ou rodapé. Dependendo da quantidade de botões adicionados à navbar, ela pode distribuí-los para que todos tenham o mesmo tamanho. Para criar uma navbar basta adicionar um atributo data-role a um elemento próximo à lista e definir seu valor como navbar (A Listagem 3). A lista é convertida dinamicamente em uma barra de navegação horizontal com estados ativos, estáticos e pop-up, que podem ser customizados com a estrutura tema do jQuery Mobile.

Listagem 3. Converter uma lista em uma barra de navegação usando navbar
	<div data-role="header" data-position="fullscreen">
		<div data-role="navbar">
			<ul>
				<li><a href="#">Nav item 1</a></li>
				<li><a href="#">Nav item 2</a></li>
			</ul>
		</div>
	</div>

Outro recurso interessante da navbar é a possibilidade de incluir ícones customizados em todos os botões. A estrutura jQuery Mobile inclui um conjunto de ícones móveis padrão que podem ser usados por meio do atributo data-icon Também é possível usar quaisquer ícones que você criar ou comprar.


Opções de layout

O conteúdo formatado é uma maneira importante de oferecer aos usuários um meio acessível para referenciar e reunir as informações fornecidas ao website. Com o crescimento do tráfego da web remoto e a necessidade de versões remotas para websites, o conteúdo formatado está se tornando cada vez mais importante. Já não podemos depender somente de nossos usuários fixos interagindo com os websites. Os usuários estão se deslocando, por isso, o conteúdo formatado simples e amigável é cada vez mais importante.

Ao formatar o conteúdo de uma página da web remota, é importante lembrar que a maioria dos dispositivos móveis possuem telas pequenas. Considerando isso, há inúmeras situações que exigem delimitação de colunas. O jQuery Mobile inclui uma grade de layout que pode ser facilmente usada para criar uma grade de dados por meio de uma classe CSS (A Listagem 4).

Listagem 4. Usar uma grade de layout para criar colunas
	<div class="ui-grid-a">
		<div class="ui-block-a">
			Left column
		</div>
		<div class="ui-block-b">
			Right column
		</div>
	</div>

A classe CSS usada por padrão para criar uma grade de um grupo de elementos HTML é a classe ui-grid-* . O asterisco (*) representa o tema escolhido para usar em sua grade. (Para mais informações sobre o sistema de temas, consulte Recursos.) é possível criar tantas colunas quanto quiser, mas é recomendável usar no máximo duas. Mais que isso, apenas quando necessário.

Outra maneira conveniente de formatar conteúdo é exibir apenas uma parte do conteúdo. Isso mostra ao usuário uma visão geral, oferecendo a opção de ler mais. Como a maioria dos dispositivos possui uma tela pequena, é importante manter o tamanho da página relativamente curto e conciso. Os bloqueios de conteúdo redutível oferecem uma ótima maneira para lidar com essa funcionalidade (A Listagem 5). A estrutura jQuery Mobile oferece um data-role para conteúdo redutível que, quando usado de forma adequada, converte um elementode cabeçalho e o conteúdo associado em um bloqueio redutível.

Listagem 5. Usar uma área de conteúdo redutível
	<div data-role="collapsible">
		<h2>My header</h2>
		<p>The full content would normally be longer than this, 
			which is why we would want to hide it by default and allow 
			the user to choose whether they wanted to read it by viewing 
			the title. Therefore the title plays an important role when 
			creating collapsible content blocks.</p>
	</div>

Por padrão, o bloqueio exibe o texto do cabeçalho como um botão com um ícone+ . Ao clicar no botão, o conteúdo completo é revelado, e o ícone+ muda para um ícone- indicando que o botão pode ser clicado novamente para fechar o conteúdo completo e retornar para o seu estado padrão.


Criar listas simples

As listas são elementos comuns em um website remoto. Com o jQuery Mobile, é possível criar diversos formatos de lista diferentes, como listas vinculadas básicas, aninhadas, numeradas, com botão de separação, com divisórias, com ícones, com miniaturas ou com bolhas com contadores, além de listas que incluem uma barra com filtro de busca. A lista vinculada básica é um tipo comum. Para criar uma lista vinculada básica, basta criar uma lista HTML não ordenada padrão, adicionar um atributo data-role e designar a ela um valor listview (A Listagem 6).

Listagem 6. Criar uma lista vinculada básica com a estrutura jQuery Mobile
	<ul data-role="listview">
		<li><a href="#">List item 1</a></li>
		<li><a href="#">List item 2</a></li>
	</ul>

Para criar uma lista numerada, use o mesmo código da Listagem 6, mudando apenasul paraol para convertê-la em uma lista ordenada.


Listas aprimoradas

Depois de entender como é simples criar listas básicas, você quer mais opções. Uma opção para oferecer funcionalidades adicionais a uma lista é a chamada lista com botões de separação. Uma lista com botão de separação permite duas opções selecionáveis no mesmo item. Essa funcionalidade é útil para itens da lista que incluem um link para, por exemplo, detalhes específicos sobre o item em particular, mas também precisam incluir outras ações relacionadas a este item, como um botão para comprá-lo ou compartilhá-lo em uma rede social. é simples criar uma lista com botão de separação: Adicione duas tags âncora, uma ao lado da outra, em um item da lista que use o listview data-role (A Listagem 7).

Listagem 7. Criar uma lista com botão de separação com a estrutura jQuery Mobile
	<ul data-role="listview" data-split-icon="gear"> 
		<li>
			<a href="item-detail.html"> 
				<h3>Item title</h3> 
				<p>Item overview</p> 
			</a>
			<a href="item-purchase.html" data-rel="dialog">Purchase item</a>
		</li> 
		<li>
			<a href="item-detail.html"> 
				<h3>Item title</h3> 
				<p>Item overview</p> 
			</a>
			<a href="item-purchase.html" data-rel="dialog">Purchase item</a>
		</li>
	</ul>

A lista com botão de separação da Listagem 7 oferece itens que incluem o título e uma visão geral, que podem ser visualizados pelos usuários por meio de um clique para exibir detalhes adicionais sobre o item. Os itens da lista também incluem um ícone usado como hiperlink para comprá-los em uma caixa de diálogo. Também é possível alterar o ícone padrão do botão de separação que aparece do lado direito do item da lista usando o atributo data-split-icon .

As divisórias também são adicionais úteis das listas básicas. As divisórias de lista oferecem uma maneira de categorizar os itens. Por exemplo, é possível colocar os itens da lista em ordem alfabética e usar as divisórias para dividi-los por letra, ou ainda, ter um grupo de itens da lista relacionados a músicas e categorizá-los com divisórias que correspondam a gêneros musicais diferentes. A Listagem 8 mostra um exemplo de uma lista simples aprimorada com divisórias.

Listagem 8. Adicionar divisórias de lista a uma visualização de lista
	<ul data-role="listview"> 
		<li data-role="list-divider">Alternative</li> 
		<li><a href="#">Nirvana</a></li>
		<li data-role="list-divider">Rock and Roll</li> 
		<li><a href="#">Jimi Hendrix</a></li>
		<li><a href="#">Led Zeppelin</a></li>
	</ul>

Usar o valor do atributo data-role para o list-divider oferece um estilo visual que diferencia esses itens de lista dos outros.

Também é possível criar estilos visuais diferentes usando ícones, miniaturas e bolhas com contadores. é possível usar bolhas com contadores em um item da lista usando a classe ul-li-count (A Listagem 9).

Listagem 9. Adicionar bolhas com contadores aos itens da lista jQuery Mobile
	<ul data-role="listview"> 
		<li>
			<a href="inbox.html">Inbox 
				<span class="ui-li-count">12</span>
			</a>
		</li>
	</ul>

é possível adicionar miniaturas da mesma forma que se adiciona uma imagem a uma página HTML. Basta adicionar um elemento âncora a um item da lista e uma imagem que atuará como uma miniatura. Então, adicione ao lado dela a cópia que deseja exibir. O jQuery Mobile lida com o restante do processo (A Listagem 10).

Listagem 10. Adicionar miniaturas aos itens da lista jQuery Mobile
	<ul data-role="listview"> 
		<li>
			<a href="zeppelin.html#thank-you"> 
				<img src="images/album-cover.jpg" /> 
				<h3>Led Zeppelin</h3> 
				<p>Thank You</p> 
			</a>
		</li>
		<li>
			<a href="zeppelin.html#ten-years"> 
				<img src="images/album-cover.jpg" /> 
				<h3>Led Zeppelin</h3> 
				<p>Ten Years</p>
			</a>
		</li> 
	</ul>

Adicione ícones de forma semelhante às miniaturas. A única diferença é que é usada a classe ui-li-icon como mostra aA Listagem 11.

Listagem 11. Adicionar ícones aos itens da lista jQuery Mobile
	<ul data-role="listview"> 
		<li>
			<a href="zeppelin.html"> 
				<img src="images/album-cover.jpg" class="ui-li-icon" /> 
				Led Zeppelin Album
			</a>
		</li>
		<li>
			<a href="hendrix.html"> 
				<img src="images/album-cover.jpg" class="ui-li-icon" /> 
				Jimi Hendrix Album
			</a>
		</li> 
	</ul>

O ul-li-icon limita o tamanho da imagem a uma largura e altura máxima de 40px e posiciona a imagem adequadamente no item de lista.


Filtro de busca

Além de todos os excelentes recursos de aprimoramento de lista abordados, um último aprimoramento oferece grandes melhorias de usabilidade para listas longas. Algumas vezes, simplesmente não é possível reduzir todo o conteúdo necessário para um website remoto. Nesse caso, a barra com filtro de busca é uma ótima maneira de lidar com o problema de uma lista longa, que parece pouco usável. Por sorte, não é necessário muito esforço para adicionar uma barra com filtro de busca a uma lista usando o jQuery Mobile. Basta adicionar o atributo data-filter à lista a atribuir a ele o valor de true (A Listagem 12).

Listagem 12. Adicionar uma barra com filtro de busca a uma lista jQuery Mobile
	<ul data-role="listview" data-filter="true">
		<li><a href="#">Chris A.</a></li>
		<li><a href="#">Cindy V.</a></li>
		<li><a href="#">John B.</a></li>
		<li><a href="#">Tammy D.</a></li>
	</ul>

A barra com filtro de busca adiciona uma entrada de texto que fornece aos usuários a funcionalidade de digitar o que se procura enquanto a lista é filtrada em tempo real com base na entrada. Por exemplo, se você tivesse uma lista com nomes de funcionários e adicionasse uma barra de filtro de busca a essa lista, os usuários poderiam filtrar e limitar os resultados exibidos na página ao inserir um ou mais caracteres na entrada de texto do filtro de busca.

é possível ir ainda mais além e adicionar divisórias à listview ao incluir a barra com filtro de busca (A Listagem 13).

Listagem 13. Adicionar uma barra com filtro de busca a uma lista jQuery Mobile que inclui divisórias de lista
	<ul data-role="listview" data-filter="true">
		<li data-role="list-divider">C</li> 
		<li><a href="#">Chris A.</a></li>
		<li><a href="#">Cindy V.</a></li>
		<li data-role="list-divider">J</li>
		<li><a href="#">John B.</a></li>
		<li data-role="list-divider">T</li>
		<li><a href="#">Tammy D.</a></li>
	</ul>

A combinação de divisórias de lista e barra com filtro de busca é um ótimo recurso e realmente melhora a usabilidade de listas longas e cansativas que, de outra forma, não seriam usáveis.


Elementos de formulário

Com o jQuery Mobile, os elementos de formulário nativos são todos convertidos em controles customizáveis, quando suportado pelo navegador. Esses controles customizáveis são versões aprimoradas de elementos de formulário nativos e de alguns elementos de formulário especiais, especificamente criados pela estrutura. Felizmente, todos os elementos de formulário fazem downgrade para navegadores que não os suportam, portanto, a usabilidade não é um problema. As entradas de texto com o jQuery Mobile são essencialmente as mesmas que as nativas, entretanto, é possível usar os novos tipos de entrada HTML5, comoemail, tel e número. Para criar qualquer um desses elementos de formulário, basta definir o tipo de entrada para um dos valores mencionados. Para uma lista completa de tipos de entrada HTML5, consulte Recursos.

Além dos tipos de entrada HTML5 suportados, é possível criar um controlador. Um controlador inclui um manipulador e uma margem sobre os quais ele desliza. O valor do controlador é armazenado à medida que o manipulador é movido. Então, o valor é submetido ao mesmo tempo que o formulário. Para criar um controlador, inicie com uma entrada HTML básica, mas defina o atributo tipo como intervalo. Em seguida, adicione os atributos mín., máx. e do ACORD e defina um valor padrão para o atributo do ACORD determinando onde o manipulador será posicionado no controlador. A Listagem 14 mostra um exemplo de um elemento controlador com um valor máx.10, um valor mín.0e um valor padrão do ACORD 2.

Listagem 14. Criar um elemento controlador usando a estrutura jQuery Mobile
<div data-role="fieldcontain">
	<label for="slider">My slider:</label>
	<input type="range" name="slider" id="slider" value="2" min="0" max="10"  />
</div>

O último tipo de entrada customizada é um comutador alternador, que já é bastante comum em dispositivos móveis. é um ótimo elemento para lidar com dados do tipo ligado/desligado ou verdadeiro/falso. Os usuários podem trabalhar com comutadores alternadores de diversas maneiras—ao tocar de um lado ou do outro do comutador ou arrastar o manipulador do alternador como um controlador. A criação de um comutador alternador é semelhante à de um controlador, entretanto, há algumas diferenças significativas. A entrada se torna um elemento select e são adicionadas duas opções. A Listagem 15 fornece um exemplo de um comutador alternador que pode ser usado para oferecer uma funcionalidade ligado/desligado.

Listagem 15. Criar um comutador alternador usando a estrutura jQuery Mobile
	<div data-role="fieldcontain">
		<label for="slider">Select slider:</label>
		<select name="slider" id="slider" data-role="slider">
			<option value="off">Off</option>
			<option value="on">On</option>
		</select> 
	</div>

Provavelmente, você também observou que há um atributo data-role com um valor slider. Esse valor de atributo converte uma lista selecionada remota jQuery customizada em um comutador alternador.


Conclusão

A estrutura jQuery Mobile oferece uma solução rápida para a criação de componentes de IU usáveis para websites remotos. Na maioria dos casos, é possível incluir um componente de IU que adiciona valor ao website remoto com apenas algumas linhas simples de HTML. Este artigo não aborda a lista completa de componentes fornecidos pela estrutura. Para saber mais sobre os componentes da estrutura e vê-los em ação, confira os links em Recursos.

Recursos

Aprender

Obter produtos e tecnologias

  • Faça o download de e consulte o arquivos JavaScript e CSS do jQuery Mobile.
  • Faça o download e experimente o IBM Mobile Technology Preview, um conjunto de amostras e serviços de código para ajudar a iniciar a criação de aplicativos remotos que se estendem e se integram à corporação. A visualização inclui um serviço de notificação RESTful, PhoneGap, uma estrutura de software livre para o desenvolvimento de aplicativos remotos híbridos, um tempo de execução leve do WebSphere Application Server e um código de amostra para mostrar como tudo isso funciona.
  • O IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile inclui o IBM Dojo 1.7 Toolkit, novos blocos de construção RIA (Rich Internet Application) e móveis, e um componente de diagrama com base em Dojo. Acompanhando as ferramentas Rational, o Feature Pack ajuda a adaptar os aplicativos WebSphere desenvolvidos originalmente para navegadores de área de trabalho para implementá-los em dispositivos móveis.
  • Avalie os produtos IBM da forma que melhor lhe convém: Faça download de uma avaliação de produto, teste um produto online, use um produto em um ambiente de nuvem ou passe algumas horas na Sandbox SOA para saber mais sobre como implementar arquitetura orientada a serviço (SOA) de maneira eficiente.

Discutir

  • Participe da comunidade 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=Software livre, Desenvolvimento móvel
ArticleID=820702
ArticleTitle=Usar componentes de IU no jQuery Mobile
publish-date=06112012