“Todo mundo tem cliente. 
Só traficante e analista de 
sistemas é que tem 
usuário.” (Bill Gates) 
1 
ESTRUTURA E FUNCIONA...
O QUE É O APACHE CORDOVA? 
• No processo de aprendizado do PhoneGap 
encontramos o nome Cordova; 
• O Cordova pode ser con...
OPÇÕES DE COMANDO 
create <path> create a phonegap project 
build <platform> build a specific platform 
install <platform>...
OPÇÕES DE COMANDO(2) 
4 
• Opções de plataforma: 
Platforms: 
keyword | local environment | remote environment 
----------...
PROJETO PHONEGAP 
Diretório com as plataformas geradas 
5 
• Projeto ListaContatos Diretório com configurações do 
Apache ...
PROJETO PHONEGAP(2) 
6 
• Diretório ListaContatos/www 
Arquivos web como JS, CSS e 
imagens. 
Arquivo de configuração do p...
PROJETO PHONEGAP(3) 
7 
• Diretório ListaContatos/platforms/android 
O que tem a mais: cordova, 
CordovaLib, platform_www,...
PROJETO PHONEGAP(4) 
8 
• Diretório ListaContatos/platforms/android/assets/www 
Arquivos web como JS, CSS e 
imagens. 
Div...
CONFIGURAÇÃO PHONEGAP 
• Arquivo assets/www/config.xml 
• O arquivo possui elementos de configuração global para o 
PhoneG...
CONFIGURAÇÃO PHONEGAP(2) 
10 
• Principais elementos de configuração 
Elemento Função 
widget Possui os atributos id e ver...
CONFIGURAÇÃO PHONEGAP(3) 
• Elementos globais de configuração 
Elemento Função 
Fullscreen Permite ocultar a barra de stat...
CONFIGURAÇÃO PHONEGAP(4) 
12 
• Elementos multiplataforma 
Elemento Função 
DisallowOverscroll Apresentar feedback de rola...
CONFIGURAÇÃO PHONEGAP(5) 
13 
• Elemento <feature> 
• Utilizado para ativar/configurar plug-ins 
• Permite mapear acessos ...
CONFIGURAÇÃO PHONEGAP(5) 
14 
• Mudanças no AndroidManifest.xml 
<supports-screens 
android:largeScreens="true" 
android:n...
PROJETO CONTATOS 
15 
• Classe de atividade estende CordovaActivity 
• Tem suporte embarcado a uma WebView
PROJETO CONTATOS(1) 
16 
• Estendendo as funcionalidades do projeto
PROJETO CONTATOS(2) 
17 
• Implementando pesquisa/filtro de contatos 
function onDeviceReady() { 
var filtro = document.ge...
PROJETO CONTATOS(3) 
18 
• Cadastro de Contatos 
–Adicionar link de “Novo” na lista de 
contatos; 
–Adicionar uma nova pág...
Próximos SlideShares
Carregando em…5
×

Aula Aula03 estrutura phone_gap

186 visualizações

Publicada em

Aula 03: Estrutura do PhoneGAP.

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

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

Nenhuma nota no slide

Aula Aula03 estrutura phone_gap

  1. 1. “Todo mundo tem cliente. Só traficante e analista de sistemas é que tem usuário.” (Bill Gates) 1 ESTRUTURA E FUNCIONAMENTO DO PHONEGAP
  2. 2. O QUE É O APACHE CORDOVA? • No processo de aprendizado do PhoneGap encontramos o nome Cordova; • O Cordova pode ser considerado o “motor” do PhoneGap e desde 2011 seu código é mantido pela Apache Software Foundation; • Encontramos também o PhoneGap Build; • O PhoneGap Build permite o upload do arquivos HTML, JavaScript e CSS para a nuvem de serviços da Adobe. 2
  3. 3. OPÇÕES DE COMANDO create <path> create a phonegap project build <platform> build a specific platform install <platform> install a specific platform run <platform> build and install a specific platform local [command] development on local system remote [command] development in cloud with phonegap/build platform [command] update a platform version plugin [command] add, remove, and list plugins help [command] output usage information version output version number 3 • Opções de linha de comando do PhoneGap:
  4. 4. OPÇÕES DE COMANDO(2) 4 • Opções de plataforma: Platforms: keyword | local environment | remote environment -------------------|---------------------|------------------- android | Yes | Yes blackberry | Yes (BlackBerry 10) | Yes (BlackBerry 6) ios | Yes | Yes symbian | No | Yes webos | No | Yes wp7 | Yes | Yes wp8 | Yes | Coming Soon
  5. 5. PROJETO PHONEGAP Diretório com as plataformas geradas 5 • Projeto ListaContatos Diretório com configurações do Apache Cordova. Permite introduzir modificações específicas para uma determinada plataforma. para o projeto. Diretório com os plugins instalados no projeto. Diretório com a estrutura web geral do projeto.
  6. 6. PROJETO PHONEGAP(2) 6 • Diretório ListaContatos/www Arquivos web como JS, CSS e imagens. Arquivo de configuração do projeto necessário para o PhoneGap. Página inicial.
  7. 7. PROJETO PHONEGAP(3) 7 • Diretório ListaContatos/platforms/android O que tem a mais: cordova, CordovaLib, platform_www, local.properties e o assets muda. Estrutura padrão de um projeto Android.
  8. 8. PROJETO PHONEGAP(4) 8 • Diretório ListaContatos/platforms/android/assets/www Arquivos web como JS, CSS e imagens. Diversos arquivos incluindo JS e o arquivo de configuração para o PhoneGap Build.
  9. 9. CONFIGURAÇÃO PHONEGAP • Arquivo assets/www/config.xml • O arquivo possui elementos de configuração global para o PhoneGap Build 9
  10. 10. CONFIGURAÇÃO PHONEGAP(2) 10 • Principais elementos de configuração Elemento Função widget Possui os atributos id e versão da aplicação. name Nome da aplicação na tela Home. description Descrição geral da aplicação. author Dados de autoria da aplicação content Elemento opcional que define a página inicial. Padrão: index.html. access Controle de acesso a domínios externos. preference Permite setar preferências utilizando o padrão chave = valor.
  11. 11. CONFIGURAÇÃO PHONEGAP(3) • Elementos globais de configuração Elemento Função Fullscreen Permite ocultar a barra de status e o topo da tela. Padrão é false. Orientation Permite fixar a direção da tela. Não responderá as mudanças percebidas pelos 11 sensores.
  12. 12. CONFIGURAÇÃO PHONEGAP(4) 12 • Elementos multiplataforma Elemento Função DisallowOverscroll Apresentar feedback de rolagem no conteúdo. Padrão é false. BackgroundColor Setar cor de fundo. 4 bytes hexadecimais. HideKeyboardFormAccessoryBar Esconder barra sobre teclado virtual. Padrão false.
  13. 13. CONFIGURAÇÃO PHONEGAP(5) 13 • Elemento <feature> • Utilizado para ativar/configurar plug-ins • Permite mapear acessos a API Nativa
  14. 14. CONFIGURAÇÃO PHONEGAP(5) 14 • Mudanças no AndroidManifest.xml <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission. ACCESS_LOCATION_EXTRA_COMMANDS"/> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
  15. 15. PROJETO CONTATOS 15 • Classe de atividade estende CordovaActivity • Tem suporte embarcado a uma WebView
  16. 16. PROJETO CONTATOS(1) 16 • Estendendo as funcionalidades do projeto
  17. 17. PROJETO CONTATOS(2) 17 • Implementando pesquisa/filtro de contatos function onDeviceReady() { var filtro = document.getElementById("nome").value; console.log("Filtro:::::: " + filtro); var options = new ContactFindOptions(); options.filter=filtro; options.multiple=true; var fields = ["displayName", "name"]; navigator.contacts.find(fields, onSuccess, onError, options); } function onSuccess(contacts) { var lista = document.getElementById("lista"); lista.innerHTML = ""; console.log("Qde::::" + contacts.length); for (var i = 0; i < contacts.length; i++) { var item = document.createElement('li'); item.innerHTML = contacts[i].displayName; lista.appendChild(item); console.log("Display Name = " + contacts[i].displayName); } } function onError(contactError) { alert(“Error”); }
  18. 18. PROJETO CONTATOS(3) 18 • Cadastro de Contatos –Adicionar link de “Novo” na lista de contatos; –Adicionar uma nova página HTML para cadastro de contatos com: foto, nome, e-mail e celular; –Adicionar os botões Salvar e Voltar ao cadastro de contatos.

×