ASP.NET MVC Mobile: Programando para dispositivos touch

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.