Artigos .NET ASP.NET MVC Mobile: Programando para dispositivos touch

Por que eu devo ler este artigo:Atualmente, temos inúmeros dispositivos móveis disputando o mercado web com os desktops. Às vezes, é mais comum os usuários acessarem nosso website a partir de um dispositivo móvel do que de um PC propriamente dito.

Sendo assim, precisamos preparar nossos websites, e uma parte essencial disso diz respeito aos toques na tela, criando gestos ou qualquer coisa que o usuário desejar.

Ao longo desse artigo, traremos algumas formas comuns de criar elementos voltados para o toque dentro de nossa aplicação. Veremos como realizar a utilização dos eventos touch dos navegadores e também como criar os nossos customizados para oferecer uma experiência de usuário otimizada.

A programação voltada para toque tem sido um dos pontos mais focados pelos desenvolvedores nos últimos anos. Isso porque o número de dispositivos com esse tipo de monitor tem aumentado exponencialmente, sejam tablets, smartphones ou mesmo laptops ou desktops com esse tipo de recurso.

Pensando nisso, o desenvolvimento web também não pode ficar para trás e possui alguns meios de fazermos uso desse recurso para criarmos experiências interessantes para nossos usuários.

Nesse contexto, podemos falar de eventos. Os eventos estão presentes em todos os tipos de programação com interação com o usuário. Eles vão desde um simples clique de mouse até o fato de o mouse ter ficado um determinado tempo sobre um controle, ou ainda o fato de a página ter sido carregada.

O desenvolvimento web não é diferente, e possui alguns eventos especialmente preparados para esse tipo de desenvolvimento. Com relação aos eventos voltados ao toque, temos alguns especiais, uma vez que o clique do mouse não é a mesma que o toque na tela, além de existir a possibilidade de gestos do usuário.

Ao longo desse artigo, traremos a utilização desses eventos dentro do contexto do ASP.NET MVC para sermos capazes de criar experiências diferentes para o usuário que possuir esse tipo de recursos em seus dispositivos.

A ideia é que tenhamos um conhecimento dos eventos que podem ser utilizados para isso, criando uma caixa de desenho dentro de uma aplicação ASP.NET MVC.

Além disso, veremos como é possível criarmos eventos customizados para lidarmos com algum determinado movimento que o usuário pode fazer na tela: o swipe, que consiste em um gesto simples da direita para a esquerda ou vice-versa.

Eventos comuns no desenvolvimento web mobile

O desenvolvimento web, assim como o desenvolvimento desktop, trabalha com o conceito de eventos. Esses eventos lidam com inúmeros elementos que podem acontecer durante a execução de uma aplicação, desde o mais simples toque de botão até uma página sendo maximizada, por exemplo.

A ideia por trás deles é que possamos programar exatamente o que acontecerá no momento que um evento desse tipo ocorre, o que nos permite controlar o envio de dados de um formulário no clique de um botão ou o carregamento de dados essenciais durante o carregamento de uma página.

Existem vários eventos com os quais podemos lidar e precisamos entender quais deles são úteis para o desenvolvimento web móvel, que é o que desejamos.

Nesse caso, há vários problemas de incompatibilidade e precisamos entender quais são as opções e quais os dispositivos que podemos ter como alvo.

Atualmente, a maior parte dos dispositivos possuem esse tipo de suporte, de um jeito ou outro, mas é interessante ressaltarmos o Windows Phone 7, que possui suporte touch rudimentar, não passando muito da emulação dos eventos de clique do mouse.

Vamos começar trazendo algumas APIs e o que elas suportam. Note que as APIs são suportadas por apenas alguns dispositivos, o que pode nos forçar a lidar com mais de uma delas para que nossa aplicação funcione da mesma forma em vários dispositivos. A Tabela 1 traz os principais eventos suportados nessas APIs.

Aqui, precisamos comentar a respeito das duas primeiras APIs da tabela (click e mouse*). Esses eventos não são utilizados para o desenvolvimento de experiências touch, ainda que forneçam uma boa opção para compatibilidade entre desktop e mobile. Por isso, não daremos atenção a eles nesse artigo. Nessa tabela o caractere “*” representa várias opções, como em “Eventos do tipo Mouse*”, que engloba eventos como mouseup e mousedown.

API

Descrição

Plataforma-alvo

Eventos de Clique (Click)

A emulação de eventos de clique está presente em todos os browsers para dispositivos móveis. O motivo é óbvio: sem essa emulação, não haveria possibilidade de um website originalmente desenhado para desktop funcionar em um smartphone ou similar.

TODAS

Eventos do tipo Mouse*

Outro conjunto de eventos de mouse que são emulados em dispositivos móveis. A ideia é muito similar aos eventos de clique: garantir compatibilidade entre mobile e desktop.

TODAS

Eventos do tipo Touch*

Eventos que fazem parte do mecanismo padrão para o desenvolvimento touch. Esses eventos estão presentes em todos os browsers do webkit (BOX 1), o que significa que estão presentes para a grande maioria dos usuários. Os eventos de destaque são touchstart, touchmove, touchend e touchcancel.

Browsers do webkit, mais o Mozilla Firefox

Eventos do tipo Gesture*

Possuem pequenas diferenças com relação aos eventos Touch* e, portanto, não são muito utilizados.

iOS 2 e superiores

Eventos do tipo MSPointer*

Eventos utilizados nos dispositivos da Microsoft (Windows Phone 8 e Windows 8). São, inerentemente, mais complexos que os eventos Touch*, embora tenham o mesmo fim. Eles encapsulam eventos de mouse, canetas de toque e toque em um tipo de evento. Podem ser destacados os eventos MSPointerDown e Up, MSPointerEnter e Leave e MSPointerMove.

A partir do Internet Explorer 10 (Windows 8 e Windows Phone 8)

Eventos do tipo MSGesture*

São extensões dos eventos do tipo MSPointer*, mas tem capacidade para lidar com gestos mais complexos.

A ...

Quer ler esse conteúdo completo? Tenha acesso completo