“Estou fazendo um sistema 
operacional gratuito (apenas 
um hobby, não será grande e 
profissional como GNU) para 
386/486...
OBJETO DEVICE 
• Possui atributos para descrever o hardware e o 
software do dispositivo; 
• É necessário ativar o plugin ...
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...
EVENTOS DO PHONEGAP(1) 
• deviceready 
• Essencial para qualquer aplicação; 
• API do Phonegap/Cordova carregada e pronta ...
EVENTOS DO PHONEGAP(2) 
• pause 
• Disparado quando a aplicação é colocada em 
segundo plano; 
• “Atachar” o evento a um e...
EVENTOS DO PHONEGAP(3) 
• resume 
• Ativado quando a aplicação é recuperada do 
segundo plano; 
• “Atachar” o evento a um ...
EVENTOS DO PHONEGAP(4) 
• online 
• Disparado quando a aplicação está conectada a 
internet; 
• “Atachar” o evento a um ev...
EVENTOS DO PHONEGAP(5) 
• offline 
• Disparado quando a aplicação é desconectada da 
internet; 
• “Atachar” o evento a um ...
EVENTOS DO PHONEGAP(6) 
• EXEMPLO 
10 
... 
<head> 
<title>Exemplo de eventos</title> 
<script type="text/javascript" char...
MENSAGENS COM O PHONEGAP 
• O Phonegap possui suporte a mensagens 
visuais e audíveis; 
• Essas mensagens, sejam alertas, ...
MENSAGEMS COM O PHONEGAP(1) 
• navigator.notification.alert 
• Exibe um alerta ou caixa de diálogo customizada. 
12
MENSAGEMS COM O PHONEGAP(2) 
• navigator.notification.confirm 
• Exibe uma caixa de diálogo de confirmação. 
13
MENSAGEMS COM O PHONEGAP(3) 
• navigator.notification.prompt 
• Exibe uma caixa de diálogo de entrada de dados. 
14
MENSAGEMS COM O PHONEGAP(4) 
• navigator.notification.beep 
• Emite som de um beep. 
15
MENSAGEMS COM O PHONEGAP(1) 
• 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 ...
SPLASH COM O PHONEGAP 
• SplashScreen 
• Permite exibir/esconder a tela de splash; 
• É necessário ativar o plugin 
org.ap...
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/javascrip...
Próximos SlideShares
Carregando em…5
×

Aula04 phonegap componentes

445 visualizações

Publicada em

Aula 04: Componentes do PhoneGAP.

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
445
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula04 phonegap componentes

  1. 1. “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
  2. 2. 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.
  3. 3. OBJETO NAVIGATOR • A maior parte das funcionalidades são acessadas pelo objeto navigator; • Exemplos: 3
  4. 4. 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
  5. 5. 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
  6. 6. EVENTOS DO PHONEGAP(2) • pause • Disparado quando a aplicação é colocada em segundo plano; • “Atachar” o evento a um event listener. 6
  7. 7. EVENTOS DO PHONEGAP(3) • resume • Ativado quando a aplicação é recuperada do segundo plano; • “Atachar” o evento a um event listener. 7
  8. 8. EVENTOS DO PHONEGAP(4) • online • Disparado quando a aplicação está conectada a internet; • “Atachar” o evento a um event listener. 8
  9. 9. EVENTOS DO PHONEGAP(5) • offline • Disparado quando a aplicação é desconectada da internet; • “Atachar” o evento a um event listener. 9
  10. 10. EVENTOS DO PHONEGAP(6) • 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> ...
  11. 11. 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
  12. 12. MENSAGEMS COM O PHONEGAP(1) • navigator.notification.alert • Exibe um alerta ou caixa de diálogo customizada. 12
  13. 13. MENSAGEMS COM O PHONEGAP(2) • navigator.notification.confirm • Exibe uma caixa de diálogo de confirmação. 13
  14. 14. MENSAGEMS COM O PHONEGAP(3) • navigator.notification.prompt • Exibe uma caixa de diálogo de entrada de dados. 14
  15. 15. MENSAGEMS COM O PHONEGAP(4) • navigator.notification.beep • Emite som de um beep. 15
  16. 16. MENSAGEMS COM O PHONEGAP(1) • navigator.notification.vibrate • Ativa a vibração do dispositivo por um certo tempo. 16
  17. 17. MENSAGENS NA CONSOLE • console.log(‘...’); • O Phonegap suporta o envio de mensagens para a console do dispositivo por meio do objeto console. 17
  18. 18. 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
  19. 19. SPLASH COM O PHONEGAP(1) • Setando a imagem da tela de splash(Android): 19
  20. 20. 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> ...

×