Aula 03: Estrutura do PhoneGAP.

1. “Todo mundo tem cliente.
Só traficante e analista de
sistemas é que tem
usuário.” (Bill Gates)
1
ESTRUTURA E FUNCIONAMENTO
DO PHONEGAP

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. 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. 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. 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. 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. 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. 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. CONFIGURAÇÃO PHONEGAP
• Arquivo assets/www/config.xml
• O arquivo possui elementos de configuração global para o
PhoneGap Build
9

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. 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. 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. CONFIGURAÇÃO PHONEGAP(5)
13
• Elemento <feature>
• Utilizado para ativar/configurar plug-ins
• Permite mapear acessos a API Nativa

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. PROJETO CONTATOS
15
• Classe de atividade estende CordovaActivity
• Tem suporte embarcado a uma WebView

16. PROJETO CONTATOS(1)
16
• Estendendo as funcionalidades do projeto

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. 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.