aula de bioquímica bioquímica dos carboidratos.ppt
Aula Aula03 estrutura phone_gap
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:
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
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.