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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Aula04 phonegap componentes

Ähnlich wie Aula04 phonegap componentes (20)

Mehr von Roberson Alves

Mehr von Roberson Alves (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Aula04 phonegap componentes