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.
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
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/jquery.mobile-1.1.0.css")" rel="stylesheet" type="text/css" title="default"/>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script charset="utf-8" src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script charset="utf-8" src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
<script charset="utf-8" src="@Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
@RenderBody()
</div>
</div>
</body>
</html>
- Neste passo criei uma simples lista na nossa página inicial ~/view/home/índex.cshtml
@{
ViewBag.Title = "Lista de Nomes";
}
<h2>Lista de Nomes</h2>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">A</li>
<li><a href="javascript:;">Anderson Lopes</a></li>
<li><a href="javascript:;">Ana Maria</a></li>
<li data-role="list-divider">B</li>
<li><a href="javascript:;">Bruno Souza</a></li>
<li data-role="list-divider">C</li>
<li><a href="javascript:;">Cleyton Ferrari</a></li>
<li><a href="javascript:;">Cesar Augusto</a></li>
<li><a href="javascript:;">Cassia Rodrigues</a></li>
</ul>
</div>
Executando o nosso código temos esta saída no navegador.
- Agora vamos adicionar o jQuery Mobile Metro, utilizando um pacote existente no NuGet.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title</title>
<!-- <link href="@Url.Content("~/Content/jquery.mobile-1.1.0.css")" rel="stylesheet" type="text/css" title="default"/> -->
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/www/css/metro/jquery.mobile.metro.theme.css")" rel="stylesheet" type="text/css" />
<script charset="utf-8" src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script charset="utf-8" src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
<script charset="utf-8" src="@Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
@RenderBody()
</div>
</div>
</body>
</html>
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:
- http://jquerymobile.com/blog/2011/03/31/jquery-mobile-alpha-4-released/
- http://www.scottlogic.co.uk/blog/colin/2012/04/introducing-the-jquery-mobile-metro-theme/
- https://www.nuget.org/packages/jQMMetroTheme
- http://blogs.msdn.com/b/interoperability/archive/2012/04/26/more-news-from-ms-open-tech-announcing-the-open-source-metro-style-theme.aspx
