Aula04 phonegap componentes

“Estou fazendo um sistema
operacional gratuito (apenas
um hobby, não será grande e
profissional como GNU) para
386/486 AT.” Linus Torvalds
1
COMPONENTES DO
PHONEGAP

OBJETO DEVICE
• Possui atributos para descrever o hardware e o
software do dispositivo;
• É necessário ativar o plugin
org.apache.cordova.device.
2
Atributo Função
device.name Nome do modelo do dispositivo. Definido pelo fabricante.
device.phonegap
Versão do Phonegap/Cordova rodando.
ou device.cordova
device.platform Nome do sistema operacional.
device.uuid Universally Unique Identifier(UUID). Definido pelo fabricante.
device.version Versão do sistema operacional.
device.model Equivalente a utilizar o device.name. Depende da plataforma.

OBJETO NAVIGATOR
• A maior parte das funcionalidades são acessadas
pelo objeto navigator;
• Exemplos:
3

EVENTOS DO PHONEGAP
• Fazem parte do ciclo de vida do
Cordova/Phonegap;
• O evento “deviceready”, por exemplo,
precisa ser recebido antes de acessar as
funcionalidades do dispositivo.
4

EVENTOS DO PHONEGAP(1)
• deviceready
• Essencial para qualquer aplicação;
• API do Phonegap/Cordova carregada e pronta para
uso;
• “Atachar” o evento a um event listener.
5

• pause
• Disparado quando a aplicação é colocada em
segundo plano;
6

• resume
• Ativado quando a aplicação é recuperada do
segundo plano;
7

• online
• Disparado quando a aplicação está conectada a
internet;
8

• offline
• Disparado quando a aplicação é desconectada da
internet;
9

• EXEMPLO
10
...
<head>
<title>Exemplo de eventos</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener(“pause", onPause, false);
}
function onDeviceReady() {
console.log(“onDeviceReady()”);
}
function onPause() {
console.log(“onPause()”);
}
</script>
</head>
...

MENSAGENS COM O PHONEGAP
• O Phonegap possui suporte a mensagens
visuais e audíveis;
• Essas mensagens, sejam alertas,
confirmações, prompts, beeps e vibrações
podem ser emitidas por meio do objeto
notification;
• É necessário ativar os plugins chamados de
org.apache.cordova.dialogs e
org.apache.cordova.vibration;
11

MENSAGEMS COM O PHONEGAP(1)
• navigator.notification.alert
• Exibe um alerta ou caixa de diálogo customizada.
12

• navigator.notification.confirm
• Exibe uma caixa de diálogo de confirmação.
13

• navigator.notification.prompt
• Exibe uma caixa de diálogo de entrada de dados.
14

• navigator.notification.beep
• Emite som de um beep.
15

• navigator.notification.vibrate
• Ativa a vibração do dispositivo por um certo
tempo.
16

MENSAGENS NA CONSOLE
• console.log(‘...’);
• O Phonegap suporta o envio de mensagens
para a console do dispositivo por meio do
objeto console.
17

SPLASH COM O PHONEGAP
• SplashScreen
• Permite exibir/esconder a tela de splash;
• É necessário ativar o plugin
org.apache.cordova.splashscreen.
• navigator.splashscreen.show(): exibe a tela de
splash da aplicação;
• navigator.splashscreen.hide(): esconde a tela de
splash da aplicação.
18

SPLASH COM O PHONEGAP(1)
• Setando a imagem da tela de
splash(Android):
19

SPLASH COM O PHONEGAP(2)
• EXEMPLO
20
...
<head>
<title>Exemplo de SplashScreen</title>
<script type="text/javascript" charset="utf-8"
src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
navigator.splashscreen.hide();
}
</script>
</head>
...

Aula04 phonegap componentes

Mais conteúdo relacionado

Semelhante a Aula04 phonegap componentes (20)

Mais de Roberson Alves (15)

Último (20)

Aula04 phonegap componentes