iwtraining

Trabalhando com Eventos Mobile

Trabalhando com Eventos

A API de eventos dos PhoneGap provê a capacidade de registrar listeners (ouvidores) para diferentes eventos que ocorrem em um SmartPhone. Abaixo segue uma lista dos tipos de eventos suportados pelo PhoneGap:

  • Evento de quando os dispositivo está pronto
  • Eventos de status de aplicativos
  • Eventos de rede
  • Eventos de botão

Criando um listener de eventos

Para criar um listener de eventos execute o seguinte código:
document.addEventListener(“eventName”, functionName, useCapture);

Os parâmetros passados no addEventListener são:

  • eventName: Um texto com  o nome do evento a ser escutado.
  • functionName: A função que será executada quando o evento for disparado
  • useCapture: Especifica qual o scopo do evento; determina se o Phonegap irá capturar um evento de sistema ou um evento dos objetos JavaScript, em todo o nosso curso vamos usar apenas o parâmetro false para essa opção.
    Para remover um evento o método removeEventListener.

Evento DeviceReady

O DeviceReady é um evento fundamental para todo o desenvolvimento com o Phonegap, pois ele indica que não só os recursos foram carregados, mas que toda a API do Phonegap já está disponívelpara uso, e que todas as comunicações com o dispositivo foram realizadas, ou seja, está tudo pronto para ser utilizado.

Todos os nossos programas serão executados dentro de um evento deviceready.

document.addEventListener("DOMContentLoaded", onBodyLoad);

function onBodyLoad(ev) {
    document.addEventListener("deviceready", onDeviceReady);
}

function onDeviceReady( ev ) {
    msg.innerHTML = "O PhoneGap está pronto!";
}

Eventos de status do aplicativo

A maioria dos SmartPhones modernos permitem ao usuário alternar entre os aplicativos. Quando uma aplicação passar do estado de “executando” para “pausada” ,o Phonegap disparará um evento de pause. Quando uma aplicação suspensa voltar ao estado de ativa, será disparado um evento de resume.

A maioria das plataformas de smartphones alternar automaticamente um aplicativo em segundo plano sempre que outro aplicativo é iniciado ou quando o usuário muda para outro aplicativo. Isso permite que o aplicativo possam continuar a processar em segundo plano, e recuperar de dados de um servidor, por exemplo. No iOS, a Apple decidiu que somente algumas determinadas aplicações têm o direito de ser executado em segundo plano, para a sua aplicação PhoneGap será automaticamente suspensa sempre que o usuário muda para outro aplicativo.

Como usar:

Adicione o ouvidor de eventos e defina uma função conforme mostrado abaixo:

var msg;
var pauseTime;
var resumeTime;

document.addEventListener("DOMContentLoaded", onBodyLoad);

function onBodyLoad(ev) {
    document.addEventListener("deviceready", onDeviceReady);
}

function onDeviceReady( ev ) {
    msg = document.querySelector("#mensagem");
    msg.innerHTML = "O PhoneGap está pronto!";

    document.addEventListener("pause", onPause, false);
    document.addEventListener("resume", onResume, false);
}

function onPause() {
    msg.innerHTML += "<br>Aplicação Pausada";
    pauseTime = new Date();
}

function onResume() {
    resumeTime = new Date();
    var diferenca = (resumeTime - pauseTime);
    msg.innerHTML += "<br>Aplicação Pausada por " + diferenca + " segundos.";
}

Eventos de Bateria

É importante ficar atendo a como está bateria do dispositivo, para dar informações ao usuário ou se precaver com algumas ações.

Plugin:

Lembre-se de importar o plugin antes de usar.

$ cordova plugin add org.apache.cordova.battery-status

Como usar:

Adicione o ouvidor de eventos e defina uma função conforme mostrado abaixo:

window.addEventListener("batterystatus", onBatteryStatus, false);
window.addEventListener("batterylow", onBatteryLow, false);
window.addEventListener("batterycritical", onBatteryCritical, false);

function onBatteryStatus(info) {
    msg.innerHTML += '<br>Battery Status - Percentage:' + info.level + ' isPlugged:' + info.isPlugged + '<br />';
}

function onBatteryLow(info) {
    msg.innerHTML += '<br>Battery Low - Percentage:' + info.level + ' isPlugged:' + info.isPlugged + '<br />';
}

function onBatteryCritical(info) {
    msg.innerHTML += '<br>Battery Critical - Percentage:' + info.level + ' isPlugged:' + info.isPlugged + '<br />';
}

Eventos de botões

É bastante comum que Smartphones tenham botões físicos para permitir aos usuários interagir mais diretamente com o OS. Dispositivos iOS têm apenas um único botão (sem contar o volume) , que , dependendo de como ele é usado, ou permite que o usuário retornar para a tela inicial ou abre uma lista de aplicativos em pausa. Dispositivos Android e BlackBerry,  por outro lado , oferecem vários botões ao usuário.

Para permitir aplicações PhoneGap responder a estes botões utilizaremos os seguintes eventos sempre que os botões correspondentes são pressionadas:

  • backbutton: Disparado quando o usuário pressiona o botão “voltar” em um dispositivo.
    Suportado por: Amazon Fire OS, Android, BlackBerry 10, Windows Phone 8
  • menubutton: Disparado quando o usuário pressiona o botão de menu do dispositivo.
    Suportado por: Amazon Fire OS, Android, BlackBerry 10.
  • searchbutton: Disparado quando o usuário pressiona o botão dedicado de pesquisa em um dispositivo Android.
  • startcallbutton: Disparado quando um usuário do BlackBerry pressiona o botão de chamada (localizado à esquerda do botão de menu BlackBerry).
  • endcallbutton: Dispara quando um usuário do BlackBerry pressiona o botão de fim de chamada (localizado à direita do botão de escape BlackBerry) .
  • volumedownbutton: Dispara quando um usuário do BlackBerry pressiona o botão de volume do dispositivo para baixo.
  • volumeupbutton: Dispara quando um usuário do BlackBerry pressiona o botão de volume para cima do dispositivo.

Como usar:

Adicione o ouvidor de eventos e defina uma função conforme mostrado abaixo:

document.addEventListener("backbutton", onBackButton, false); 
document.addEventListener("menubutton", onMenuButton, false); 
document.addEventListener("searchbutton", onSearchButton, false); 

function onBackButton() {
    msg.innerHTML += '<br>Botão Back pressionado<br />';
}

function onMenuButton() {
    msg.innerHTML += '<br>Botão Menu pressionado<br />';
}
            
function onSearchButton() {
    msg.innerHTML += '<br>Botão Search pressionado<br />';
}

Está com dúvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

 

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário