ASP.NET MVC 4

O que há de novo em desenvolvimento móvel no ASP.NET MVC 4

Keith Burnell

Há muito tempo os desenvolvedores procuram seu objeto de desejo: uma ferramenta que permita que uma única base de códigos acesse todas as plataformas. Hoje, isso é mais importante do que nunca. Com a crescente popularidade e variedade dos smartphones e tablets em todo o mundo, é imprescindível que seu site tenha uma interface móvel agradável e funcional. Sem dúvida, você poderia seguir o caminho dos aplicativos nativos e criar aplicativos específicos para o iOS, Android, Windows Phone, BlackBerry e outros, mas, infelizmente, os aplicativos nativos exigem um conjunto de habilidades e códigos específicos para a plataforma.

Felizmente, o HTML5 e o CSS3 parecem ser o conjunto de ferramentas que finalmente permitirão "escrever uma vez, executar em qualquer lugar". Embora as especificações não estejam concluídas ainda, o HTML5 e o CSS3 estão rapidamente se tornando padrões do setor para sites multitarefas baseados em navegadores e com a maioria dos recursos já compatível com os principais navegadores. O melhor da união entre o HTML5 e CSS3 é que ela é uma marcação HTML simples e direta, que pode ser aproveitada por qualquer conjunto de ferramentas baseado em HTML - desde PHP até ASP.NET MVC.

Este artigo descreverá em detalhes os novos recursos do ASP.NET MVC 4, muitos dos quais aproveitam os recursos independentes do navegador de HTML5 e do CSS3 para facilitar o desenvolvimento de sites especificamente direcionados para navegadores móveis e para aqueles direcionados para navegadores móveis e para desktops.

Se você ainda não tiver o ASP.NET MVC 4 instalado e estiver executando o Visual Studio 2010, é possível baixá-lo do Web Platform Installer ou diretamente do site do ASP.NET MVC (asp.net/mvc/mvc4). O Visual Studio 11 inclui o ASP.NET MVC 4.

Renderização adaptável

Renderização adaptável é o processo de exibir um site de formas diferentes, dependendo dos recursos do dispositivo e do navegador de destino. Muitas técnicas de renderização adaptável estão disponíveis no ASP.NET MVC 4.

Marca Meta Viewport Por padrão, os navegadores, mesmo aqueles desenvolvidos para dispositivos móveis e tablets, assumem que estão renderizando as páginas em um desktop e exibem o conteúdo com uma largura de 980 pixels e reduzido. A Figura 1 mostra um site criado com o modelo padrão para sites da Internet do ASP.NET MVC 3. Observe que, embora o site esteja sendo exibido em um navegador de dispositivo móvel, o navegador ainda assume que está renderizando para um desktop. Embora um site renderizado dessa maneira seja utilizável, com certeza não é ideal.

Figura 1 Exibição padrão criada com o ASP.NET MVC 3

Em vez disso, é possível utilizar a marca meta viewport para dizer claramente ao navegador qual é a largura, altura e escala para renderizar o conteúdo. Você também pode configurar a marca meta viewport para renderizar de acordo com os recursos do dispositivo:

<meta name="viewport" content="width=device-width" />

A Figura 2 mostra a página após a inclusão da marca meta viewport no _Layout.cshtml. O site agora está dimensionado para a largura da tela do dispositivo. Se criar um novo projeto no ASP.NET MVC 4, utilizando qualquer um dos modelos de projeto (exceto o modelo de API da Web), você poderá abrir o arquivo _Layout.cshtml e visualizar a marca meta viewport na seção de cabeçalho da página. 

Figura 2 Dimensionamento para o dispositivo com o ASP.NET MVC 4

Consultas de mídia CSS  Ao desenvolver um site multiplataforma, você deseja que a visualização do site para os usuários de dispositivos móveis seja diferente dos usuários de desktops. Geralmente, a funcionalidade é quase a mesma, mas o estilo e a exibição do conteúdo são diferentes. Com as consultas de mídia CSS, dependendo das condições, você pode aplicar estilos CSS específicos com base nos recursos do navegador criando a solicitação ao seu site:

@media only screen and (max-width: 850px) {
    header{
      float: none;
    }
  }

Essa consulta de mídia aplicará os estilos contidos somente quando o tipo de mídia for tela, não impressão, e a largura máxima da área do site que está sendo renderizado for de 850 pixels ou menor. Essa técnica permite alterar o estilo do conteúdo de todas as formas possíveis com base nos recursos de renderização do navegador.

Ao lidar com navegadores de dispositivos móveis, você sempre terá que considerar a largura de banda. Geralmente, quando você utiliza um dispositivo móvel, não está conectado a uma rede Wi-Fi ou de alta velocidade. Portanto, quando você disponibiliza seu site para esses dispositivos, faz isso da forma mais eficiente possível. Por exemplo, se as imagens não forem necessárias para a funcionalidade do site, não as inclua nas exibições de dispositivos móveis. Se for preciso exibir imagens, disponibilize-as no tamanho correto, ou seja, envie somente imagens com as dimensões com que serão exibidas. Da mesma forma que você consegue especificar uma imagem com o CSS, é possível especificar imagens diferentes com base nos recursos do dispositivo e do navegador com as consultas de mídia CSS.

Todos os modelos de projeto padrão do ASP.NET MVC 4, exceto o modelo de API da Web, incluem alguns exemplos de consultas de mídia CSS. Para demonstrar isso, crie e execute um projeto novo do ASP.NET MVC 4 com o modelo de projeto de aplicativos da Internet. Maximize a janela do navegador e comece a reduzir lentamente o seu tamanho. Quando o tamanho da janela chegar a 850 pixels ou menos, você perceberá muitas alterações na exibição das páginas padrão. Para obter detalhes sobre as alterações, consulte o arquivo Site.css, a partir da linha 466.

Situações em que utilizar o CSS não é o bastante

Ás vezes, não basta modificar os estilos para renderizar um site que seja funcional para todos os tipos de dispositivo. Nesses casos, sua única opção é criar exibições adaptadas para os tipos de navegadores e dispositivos que você deseja atender.

Disponibilização de exibições específicas para dispositivos móveis A ideia de disponibilizar páginas específicas com base no navegador que faz a solicitação não é nova. Os desenvolvedores utilizam a técnica de detecção de navegadores há muito tempo. Com as primeiras versões do ASP.NET MVC, era possível criar uma implementação de um mecanismo de exibição personalizado, que "herda" dos mecanismos de exibição Razor ou Web Forms, substituir o método FindView, adicionar um pouco de detecção do navegador e retornar uma exibição específica para o navegador consumidor. Há dois novos recursos no ASP.NET MVC 4 que permitem que você realize essa tarefa em diferentes níveis, com muito menos esforço.

A nova funcionalidade no ASP.NET MVC 4 permite substituir globalmente as exibições para dispositivos móveis utilizando convenção em vez de configuração. Quando o ASP.NET MVC 4 está atendendo a uma solicitação de um navegador de dispositivo móvel e definindo o que exibir, ele procura primeiramente exibições com convenção de nomenclatura de [view].mobile.cshtml. Se uma exibição correspondente à convenção de nomenclatura for encontrada, o ASP.NET MVC a disponibilizará ou retornará à exibição padrão.

Como é possível observar na Figura 3, eu fiz uma cópia do _Layout.cshtml e o renomeei _Layout.mobile.cshtml, conforme a convenção. Eu realcei a linha de HTML que foi adicionada para deixar claro qual _Layout.cshtml está sendo utilizado para renderizar a página. Quando o site é renderizado no navegador de desktop, nada muda, mas quando eu renderizo o site no navegador de um dispositivo móvel, conforme a Figura 4, é possível ver que a versão do _Layout.cshtml para navegador de dispositivo móvel está sendo utilizada.

Figura 3 _Layout.cshtml para navegadores de dispositivos móveis

Figura 4 Exibição específica para dispositivos móveis

Disponibilização de exibições específicas para navegadores. Na maioria das vezes, não é necessário disponibilizar exibições específicas ou conteúdo para navegadores de desktops. Entretanto, se você desenvolve sites há algum tempo, é possível que já tenha escrito algum código ou CSS para ter com o que trabalhar em um navegador específico ou outro. Estamos nesse mesmo estágio com relação a navegadores de dispositivos móveis, mas o problema é complexo devido ao grande número de plataformas, cada uma com seu próprio navegador. Como se isso não bastasse, existe agora o conceito de sites "nativos". Não basta que o conteúdo do site seja corretamente renderizado em navegadores de dispositivos móveis; para ser notável, o site precisa ter a aparência dos aplicativos que são executados de forma nativa no dispositivo. É necessário que exibições específicas sejam disponibilizadas não apenas para navegadores de dispositivos móveis em geral, mas também para navegadores específicos para dispositivos móveis com definição de estilo que corresponda ao da plataforma.

Para fazer isso, o ASP.NET MVC 4 introduziu o recurso Modos de exibição. Esse novo recurso permite combinar a facilidade de uso de convenções em vez de configuração com a robustez do uso de detecção de navegador para disponibilizar exibições específicas para navegadores.

Para aproveitar as vantagens dos Modos de exibição, é preciso configurá-los no método Application_Start do Global.asax, da seguinte maneira: 

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
  ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

Esse Modo de exibição foi criado para o navegador do iPhone. A primeira instância de "iPhone" define o sufixo da exibição que o ASP.NET MVC procurará quando tiver que determinar qual exibição deve ser renderizada. A segunda instância de “iPhone” refere-se ao agente do usuário que faz a solicitação e define a condição que o ASP.NET MVC utilizará para fazer a correspondência com a convenção de nomenclatura [view].iPhone.cshtml. Basicamente, isso pode ser traduzido como: Quando um navegador de iPhone estiver fazendo uma solicitação, procure primeiro pelas exibições correspondentes ao sufixo "iPhone".

Para demonstrar o Modo de exibição do navegador do iPhone, fiz outra cópia do _Layout.cshtml e o renomeei _Layout.iPhone.cshtml, conforme a convenção de nomenclatura definida quando eu criei o modo de exibição. Em seguida, eu o modifiquei para deixar claro que o layout do iPhone está sendo utilizado quando eu navego no site com o iPhone. Se eu acesso o site no navegador do desktop ou do emulador do Windows Phone, não vejo minha modificação, mas quando eu abro o site no navegador do iPhone, como mostra a Figura 5, noto a modificação.

Figura 5 Exibição específica para o iPhone

A inclusão desses recursos no ASP.NET MVC 4 permite disponibilizar facilmente exibições específicas para navegadores de dispositivos móveis, com pouco ou nenhum trabalho. Com o uso de substituição e dos Modos de exibição no ASP.NET MVC 4, é possível disponibilizar exibições específicas para navegadores de dispositivos móveis, para que você possa personalizar completamente seu site para o dispositivo no qual ele será renderizado.

jQuery Mobile e jQuery.Mobile.MVC

O jQuery Mobile é uma biblioteca de código aberto para a criação de interface de usuário para dispositivos móveis baseados no jQuery Core. Como o jQuery Mobile é uma ferramenta bem documentada e sua implementação no ASP.NET MVC 4 é igual à sua implementação em qualquer outra linguagem ou estrutura, eu não vou abordar esse assunto; só vou mostrar como incorporá-lo ao ASP.NET MVC 4.

Por padrão, o jQuery Mobile não acompanha os modelos de projeto do ASP.NET MVC 4 (exceto o modelo de projeto de aplicativo móvel), mas não é difícil adicioná-lo a um aplicativo do ASP.NET MVC 4. Utilize o NuGet para instalar os scripts e os outros arquivos necessários e, em seguida, vá para o _Layout.cshtml e adicione manualmente as referências de script e CSS. Como alternativa, você pode instalar o pacote jQuery.Mobile.MVC NuGet, que instalará todos os scripts e outros arquivos necessários; criará um _Layout.Mobile.cshtml e adicionará referências a todos os arquivos de script e CSS do jQuery Mobile. O pacote jQuery.Mobile.MVC NuGet também oferece a funcionalidade de alternância entre exibições, permitindo que os usuários que estejam visualizando a versão do site para dispositivos móveis mudem para a exibição de desktop, como mostra a Figura 6.

Figura 6 jQuery Mobile com a funcionalidade de alternância entre exibições

Modelo de projeto

Se desejar criar um site autônomo para navegadores de dispositivos móveis, o ASP.NET MVC 4 fornece um modelo de projeto para essa finalidade específica. Ao criar um novo projeto no ASP.NET MVC 4, é possível escolher um modelo de projeto de "Aplicativo móvel". 

Crie um projeto com o ASP.NET MVC 4 Mobile Application e dê uma olhada na estrutura global do projeto. Você verá que nada mudou em comparação ao modelo de projeto de aplicativo padrão do ASP.NET MVC 4: são os mesmos modelos, as mesmas exibições e os mesmos controladores. Mas ao executar o aplicativo, você verá que o site foi adaptado especificamente para navegadores de dispositivos móveis.

Como mencionei há pouco, o modelo de projeto ASP.NET MVC 4 Mobile inclui o jQuery Mobile pronto para uso. Além disso, ele implementa o jQuery Mobile em todas as exibições padrão:

<h2>@ViewBag.Message</h2>
<p>
  To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc"
    title="ASP.NET MVC Website">https://asp.net/mvc</a>.
</p>
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Navigation</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Esse código é do Views/Home/Index.cshtml. Se não estiver familiarizado com o jQuery Mobile e com a forma como é implementado, a primeira coisa que você deve ter notado são os atributos "data-" (data dash). O jQuery Mobile utiliza esses atributos para configurar os controles na página.

O modelo de projeto ASP.NET MVC 4 Mobile Application é excelente para a criação de sites direcionados a navegadores de dispositivos móveis ou como referência na implementação de recursos específicos para navegadores de dispositivos móveis. Na maioria das vezes, você provavelmente criará sites para navegadores de desktops. Mesmo assim, você também deseja que seu site seja renderizado de forma funcional em navegadores de dispositivos móveis, sem ter que dedicar tempo e esforço extras em modificações de códigos específicos para navegadores de dispositivos móveis. Felizmente, o modelo de projeto ASP.NET MVC 4 Mobile Application pode ser utilizado neste caso e também como ponto de partida para a introdução de recursos específicos para dispositivos móveis em um aplicativo MVC baseado em navegadores de desktops.

Com a popularidade dos dispositivos móveis, não é surpresa nenhuma que o aprimoramento da experiência de desenvolvimento de sites para exibição em dispositivos móveis tenha sido o foco do ASP.NET MVC 4. Os novos recursos do ASP.NET 4 garantirão que os sites estendam-se ao público sem grandes codificações e duplicação na camada de interface do usuário.

Keith Burnell é engenheiro sênior de software da Skyline Technologies. Ele desenvolve software há mais de dez anos e é especialista em desenvolvimento de sites em ASP.NET e ASP.NET MVC de grande escala. Burnell é um membro ativo na comunidade de desenvolvedores. Ele tem um blog em (dotnetdevdude.com) e pode ser seguido no Twitter em twitter.com/keburnell.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: John Ptacek e Clark Sell