jQuery Mobile Metro

Olá pessoal, post de hoje é motivado pelo Simulador de Windows Phone 7.5 que a Microsoft criou para que usuários do Android e do IOS pudessem testar a interface metro, achei o simulador super bacana e resolvi fazer umas buscas na internet e acabei descobrindo o jQuery Mobile Metro.

Este post foi escrito originalmente em http://cleytonferrari.com/jquery-mobile-metro/

Voltado ao ponto deste post pude perceber que o simulador era todo feito em HTML 5 e Javascrit, ai resolvi pesquisar mais e achei alguns links (abaixo nas referencias) e descobrir que existe um projeto legal chamado jQuery Mobile (jQM) Metro, que é uma nova skin para o já conhecido jQuery Mobile, que tenta, eu disse tenta, deixar o jQuery Mobile com cara de Windows Phone 7.5, achei super bacana, uma vez que o jQuery Mobile segue muito o padrão do IOS, uma sacada legal por parte do pessoal que desenvolve o jQuery Mobile, agora so falta a equipe do Android criar sua skin (css).

Um dos pontos aqui é que o HTML5 está se tornando uma tecnologia cada vez mais popular para a criação de aplicações móveis, permitindo aos desenvolvedores usar suas experiências em JavaScript e CSS, independente dos requisitos da linguagem de programação nativa da plataforma móvel (WP7, iOS, Android, etc …).

Um dos maiores desafios para nós desenvolvedores é a criação de interfaces de usuário que imitam a skin nativa e é aqui que entra o jQuery Mobile uma vez que ele fornece um conjunto de padrões de estilos e de marcação para criar uma ampla gama de layouts de celulares, controles e transições e o que é mais legal, é que a equipe do jQuery Mobile já anunciou o suporte para o Metro.

Código deste exemplo pode ser baixado no meu GitHub: https://github.com/cleytonferrari/jQueryMobileMetro

Baseado na minha rápida pesquisa criei o seguinte exemplo para estudo.

  • Criar um novo projeto Asp.NET MVC3, escolhendo o tipo do projeto com Empyt.

  • Adicionei um novo controller chamado Home e sua respectiva View.

  • Foi instalado o jQuery Mobile via NuGet
1

PM> Install-Package jquery.mobile
  • Neste passo foi alterado o layout padrão do Asp.NET MVC3 que fica em ~/view/shareds/_layout.cshtml para que corresponda ao seguinte código:
1

<script charset="utf-8" type="text/javascript" src="@Url.Content("></script><script charset="utf-8" type="text/javascript" src="@Url.Content("></script><script charset="utf-8" type="text/javascript" src="@Url.Content("></script>

jQuery Mobile

@RenderBody()
  • Neste passo criei uma simples lista na nossa página inicial ~/view/home/índex.cshtml
1
2
3

@{
    ViewBag.Title = "Lista de Nomes";
}

Lista de Nomes

Executando o nosso código temos esta saída no navegador.

  • Agora vamos adicionar o jQuery Mobile Metro, utilizando um pacote existente no NuGet.
1

PM> Install-Package jQMMetroTheme

Esse cara instala um novo css para o tema do jQuery Mobile. Ele cria uma pasta ~/www e coloca todos os recursos do tema dentro dela, inclusive o nosso css ~/www/css/metro/jquery.mobile.metro.theme.css

  • Uma vez baixado basta trocar o tema do jQuery Mobile, para esse novo css, veja o código completo agora de nosso _layout.cshtml
1

    <!-- 		<link href="@Url.Content("~/Content/jquery.mobile-1.1.0.css")" rel="stylesheet" type="text/css" title="default"/> --><script charset="utf-8" type="text/javascript" src="@Url.Content("></script><script charset="utf-8" type="text/javascript" src="@Url.Content("></script><script charset="utf-8" type="text/javascript" src="@Url.Content("></script>

jQuery Mobile

@RenderBody()

E a saida no navegador agora mostra a interface metro.

Bom pessoal, ainda estou testando algumas coisas sobre isso, mas já pude perceber como é simples a utilização do jQuery Mobile Metro, ainda mais nas próximas versões que ele estará vindo já no mesmo pacote do jQuery Mobile, agora nos resta esperar para que eles também incluam o tema padrão do Android.

Para saber mais:

Comentarios

comentarios