• Follow us on Twitter
  • Join our Facebook Group
  • Join me on Google Plus
  • Add me on Linkedin
  • RSS

  • Home
  • Séries
    • Entity Framework
    • Minhas Palestras
    • ASP .NET MVC
  • Meus Repositórios
    • CodePlex
    • GitHub

Blog - Latest News

jQuery Mobile Metro

0 Comments/ in Desenvolvimento / by Cleyton Ferrari
23 de maio de 2012

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
Tags: jQuery, metro, wp7
← Você ainda não escreve teste unítários, ou melhor testes de unidade?
A complexidade no código pode te matar! →
Related Posts
Validação de Data e Moeda (ASP.Net MVC + JQuery Validation) em Português

Google+

376Follower
Popular
  • Vídeo-Aula ASP.Net MVC na prática – Parte 1junho 18, 2012, 9:13 pm
  • Validação de Data e Moeda (ASP.Net MVC + JQuery Validation)...janeiro 31, 2013, 11:27 am
  • Vídeo-Aula ASP.Net MVC na prática – Parte 6janeiro 12, 2013, 3:50 pm
  • Rotativa W7 gerando relatórios em PDF no ASP.Net MVCdezembro 26, 2012, 5:53 pm
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-1setembro 27, 2013, 6:00 pm
Recent
  • Visual StudioVisual Studio 2015julho 20, 2015, 7:57 pm
  • MySQL com ASP.Net MVCmaio 6, 2015, 4:16 pm
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-3março 29, 2014, 3:14 pm
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-2janeiro 26, 2014, 9:56 am
  • Vídeo-Aula ASP.Net MVC na prática – Parte 9-1setembro 27, 2013, 6:00 pm
Comments
  • ótimo, agora concidera vírgula como decimal, porém a...janeiro 31, 11:27 am by gilmar
  • Parabéns pelo artigo Cleyton, para utilizar a sua solução...janeiro 31, 11:27 am by Braytiner Heggendorn
  • Certo Danilo! Muito obrigado pela dica!!janeiro 31, 11:27 am by José Furtado
  • Olá José, tudo bem? Então, trabalhando em um projeto...janeiro 31, 11:27 am by Danilo Miranda
  • Olá Danilo! Hoje enfrento o mesmo problema que você, já...janeiro 31, 11:27 am by José Furtado
Tags
.net alsummit asp.net clean code complexidade comunidade CSharp EF evento hyper-v IISExpress jQuery metro MVC MySQL nuget razor Rotativa W7 SignalR SQL TDD TechEd Testes Unitários TFS11 TFS2012 Visual Studio VS2012 Vídeo-Aula windows8 wp7

Series

  • ASP.Net MVC (16)
  • Entity Framework (4)
  • Minhas Palestras (1)

Interesting links

Besides are some interesting links for you! Enjoy your stay :)

Últimos Comentários

  • gilmar em Validação de Data e Moeda (ASP.Net MVC + JQuery Validation) em Português
  • Braytiner Heggendorn em Validação de Data e Moeda (ASP.Net MVC + JQuery Validation) em Português
© Copyright - Cleyton Ferrari - Wordpress Theme by Kriesi.at