8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 1/81
Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit desobrevivncia
Se alguma coisa puder dar errado, dará! Então, para solucionar possíveis problemas, temos esse
"Kit de sobrevivência", com algumas dicas para os problemas mais comuns com a plataforma
Phoneap ordova#
Kit de primeiros socorros da plataforma Android
Cleuton Sampaio
$ comunica%ão do $ndroid S&K com o dispositivo $ndroid 'ou o emulador(, ) comple*a e depende
de vários componentes para poder funcionar corretamente#
+uita coisa pode acontecer, e vou tentar mostrar a vocês como se safar de alguns desses sufocos-#
Android !"K Mana#er. programa $ndroid S&K +anager gerencia as plataformas e ferramentas $ndroid instaladas em
seu perfil de conta, na sua esta%ão de trabalho#
$ instala%ão das plataformas e ferramentas do $ndroid S&K ) feita por PE/012! Então, casa
usuário 3ue se loga na esta%ão de trabalho, deve reali4ar o procedimento de instala%ão#
Procure colocar no 5P$67 'ou 8P$678( a locali4a%ão das pastas9 :android;sd<=sd<tools 'ou
:android;sd<=tools, para linu*( e :android;sd<=sd<platform;tools 'ou :android;sd<platform;
tools, para linu*(!
Para e*ecutar o $ndroid S&K +anager, você tem duas op%>es9 via Eclipse '?indo?-( ou
chamando diretamente9
• @indo?s9 &uplo;cli3ue no ar3uivo S&K +anager#e*e-, na pasta rai4 do $ndroid S&KA
• +ac2inu*9 $bra um terminal, navegue para a pasta tools-, dentro da pasta do $ndroid
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 2/81
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 3/81
(mulatorGocê pode subir uma instFncia do Emulador $ndroid usando o programa emulator- 'dentro de
tools-, na pasta do Android !"K(#
2an%ar o emulador atrav)s da linha de comando, nos permite controlar melhor suas op%>es, e podeser a Hnica maneira, caso você venha enfrentando problemas para iniciá;lo do Eclipse ou do S&K
+anager#
Eis as op%>es da linha de comando9
emulator -avd <avd_name> [-<option> [<value>]] ... [-<qemu args>]
• ;avd :avdIname=-9 . nome do emulador 3ue você criouA
• $lgumas op%>es especiais ';:option=(9
• ;shell-9 $bre o emulador e cria uma console 'shell( com root no mesmo terminalA
• ;scale :fator=-9 Permite escalar a Janela do emulador 'valor de a L(A
• ;force;LMbit-9 1nicia o emulador na versão de LM bits#
(rro )(**+*, .-bit /inu0 Android emulator binaries are "(P*(CA1("2,
Se você estiver rodando o $ndroid S&K em um sistema operacional de LM Cits, provavelmente
receberá essa mensagem# 1sso 3uer di4er 3ue o emulador roda melhor em ambiente de NO Cits# Gocê
pode for%ar o emulador a rodar em LM Cits usando a op%ão -3orce-.bit- ao iniciar o emuladorcom o programa emulator-#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 4/81
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 5/81
Verificando os dispositivos AndroidPodemos verificar 3uais dispositivos $ndroid estão conectados com o comando9 adb devices-# Por
e*emplo, vamos supor 3ue eu tenha um emulador rodando e um dispositivo $ndroid conectado via
QSC, logo, o comando adb devices- deve mostrar algo assim9
$ adb devices
List of devices attached
4dfd!"c#d4cf device
emulator-"""4 device
Eu tenho um dispositivo $ndroid, cuJo id- )9 OdfUdLTcVdOUcfNU, e um emulador, rodando na porta
TTTO 'cada instFncia de emulador usa uma porta diferente, come%ando de TTTO(#
Problemas,1) Tenho um emulador rodando, mas ele não aparece no Eclipse e nem no ADB Devices!
. problema a3ui pode ser com o Servidor $&C# este caso, abra um 6erminal, pare e reinicie o
Servidor $&C# 1sso resolve em W8 dos casos9
• adb <ill;server
• adb start;server
Gai dar erro no eclipse 3uando você parar o Servidor $&C, mas ele some assim 3ue você o reiniciar#
2) Tenho um dispositivo rodando, mas não aparece no Eclipse e nem no ADB Devices!
Gocê Já conseguiu ligar seu dispositivo no seu PB Então, tente parar e reiniciar o Servidor $&C#
Se não funcionou, pode ser um problema de &river QSC# o caso de +á3uinas @indo?s, )
recomendável 3ue você instale o oogle QSC &river-, no S&K +anager, pois ele funciona com
3uase todos os dispositivos $ndroid#
Se o seu dispositivo for Samsung, então ) necessário instalar o K1ES'http9???#samsung#combrsupportusefulsoft?areK1ES(, 3ue Já tem o driver QSC para o seu
dispositivo $ndroid#
$gora, se você está rodando no Qbuntu###
• Gerifi3ue se você tem o pacote mtpfs instalado, caso contrário, instale;o9 sudo apt;get
install mtpfs-A
• Se não funcionou, você pode tentar atuali4ar o pacote9
•
sudo add;apt;repositorD ppa9langdaleplgvfs;mtp• sudo apt;get update
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 6/81
$o conectar o dispositivo, abra as op%>es de desenvolvedor dele 'no menu de configura%>es do seu
$ndroid(, e permita &epura%ão QSC-#
3) Tenho um dispositivo rodando, mas ele aparece como unauthoried"!
Em certos casos, você poderá ter essa resposta do adb devices-9List of devices attached
4dfd!"c#d4cf unauthorized
emulator-"""4 offline
1sso significa 3ue o dispositivo não está permitindo a depura%ão QSC, necessária para e*ecutar
programas do Eclipse nele# este caso, tente9V# o dispositivo, abra o menu configura%>es- e procure &esenvolvedor-# +ar3ue a op%ão
&epura%ão de QSC-, e dê permissão 'devem abrir duas Janelas perguntando isso(A
M# Se a op%ão Já estava marcada, tente desmarcá;la e marcá;la novamenteA
L# Pare e inicie o Servidor $&C#
Se nada disso funcionar, tente usar o protocolo +6P9 +edia 6ransfer Protocol em seu tablet
smartphone9
Para isto, ) necessário 3ue o seu P esteJa configurado para trabalhar com dispositivos +6P# o
caso do Qbuntu, ) necessário 3ue o pacote mtpfs- esteJa instalado#
(clipseo eclipse, alguns problemas podem acontecer9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 7/81
1) A#ri a $or%space e travou tudo&&& 'ica em Android content loader", com (&&&
X normal### $bra a sua pasta home, procure a pasta oculta #android- e9
• &elete a subpasta cache-A
• &elete o ar3uivo ddms#cfg-A
2) *mportei o pro+eto Android e ele não eecuta no Emulador& D- Class.ot'oundEception"&&&
. ordova 'e o Phoneap( geram dois proJetos sempre9 **** e ****;ordova2ib# . segundo ) um
2ibrarD ProJect-, e não deve ser colocado no Cuild Path-, dentro do Eclipse, como proJect-# Se
você fi4er isso, vai ocasionar esse erro#
Se você acabou de criar os proJetos com o ordova e o Phoneap, então deve fa4er o seguinte9
V# 0ile 1mport $ndroid E*isting $ndroid ode###
M# Selecione a pasta android-, 3ue fica dentro de platforms-A
L# ertifi3ue;se 3ue os dois proJetos esteJam marcados 'YYYY e YYYY;ordova2ib(A
O# 1mporte os doisA
T# Se der erro no proJeto principal, geralmente, basta dar um ProJect lean-# Se não resolver,
então selecione o proJeto principal, e, com o botão direito, abra properties-# Selecione
android- e verifi3ue se o proJeto secundário 'ordova2ib( está marcado# Se estiver, remova
e adicione novamente# Então, feche tudo, e fa%a outro ProJect lean-#
ota9 Se você e*portou o proJeto a partir do Eclipse '0ile E*port eneral $rchive file(, então
não deve importar como E*isting $ndroid ode###-, fa%a como 0ile 1mport eneral E*isting
proJects into ?or<space-#
Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - !etup
.<, você vai aprender a criar apps mveis multiplataforma, usando o Phoneap ordova e o
JuerD +obile# Por)m, antes de mais nada, precisa preparar a plataforma para acompanhar o curso#
GeJa agora como fa4er isso###
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 8/81
O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaiode /elo 0r est licenciado com uma icena Creative Commons Atri#uiãoCompartilha*4ual
5&( *nternacional! sso inclui# $e%tos& p'inas& 'r(icos e códi'o)(onte!
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 9/81
Material e e0emplos$pesar do curso ser multiplataforma, daremos maior ênfase Z e*ecu%ão em plataforma $ndroid#
6odos os e*emplos funcionam em i.S tamb)m#
6odo o material do curso está publicado no Com Programador# .s ar3uivos de e*emplo e os
e*ercícios podem ser acessados no 2in<9
https,<<===>dropbo0>com<sh<ur?ed.cs?@o=iy0<AA%jh:nys$i7mv74C!n6s1madl8B
Para cada li%ão, há alguns ar3uivos de e*emplos e e*ercícios# Casta bai*ar e descompactar o
ar3uivo relativo Z li%ão#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 10/81
*e?uisitos de hard=are e so3t=areQsando o Phoneap ordova, você pode criar apps mveis para várias plataformas, entre elas9
$ndroid, i.S e @indo?s Phone# este curso, focaremos basicamente nas aplica%>es $ndroid,
dando uma "pincelada" rápida no i.S#
Aplicaçes Android• PQ compatível com 1ntel iT, com O nHcleosA
• Pelo menos M#O 74A
• +emria /$+ de O CA
• Espa%o em &isco 2ivre9 T CA
• Sistema .peracional9
•
@indo?s YP 'LM;bit(, Gista 'LM; or NO;bit(, or @indo?s U 'LM; or NO;bit(• 2inu*9 'Qbuntu(9 Q 2ibrarD 'glibc( M#U ou superiorA Qbuntu V#O ou superiorA
• +ac .SY9 V#T#[ ou mais recenteA
• Qsuário tem 3ue ser administrador local da má3uina 'sudoer-, no caso de 2inu*(A
• $ndroid S&K9
• Phoneap, JuerD, JuerD +obileA
• Eclipse \ $&6 plugin \ $pp2aud pluginA
• $ndroid S&K 6oolsA
• $ndroid Platform;toolsA
• Pelo menos uma versão da $ndroid platformA
• Pelo menos uma versão da $ndroid SDstem 1mageA
• Soft?are para criar servidores de notifica%ão9 ]ava N ]&K \ $pache &erbD \ +aven LA
• &ispositivos $ndroid, com cabos QSC, no mínimo $ndroid O#*A
Aplicaçes Apple i+!• i+ac, +ac+ini ou +acCoo< Pro, no mínimo iT com O C /$+A
• onta no i.S &eveloper Program, com certificado em dia 'pelo menos uma(A
• Ycode T#V#V \ i.S S&K U 'talve4 o [(A
• Soft?are para criar servidores de notifica%ão9 ]ava U ]&K \ $pache &erbD \ +aven LA
• &ispositivos i.S 'iPhone, iPad( com cabosA
5nstalação Android
(clipse• 1nstale a Hltima versão do eclipse '2una, no momento da prepara%ão deste guia(#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 11/81
• X possível usar uma versão mais antigaB Sim, mas no má*imo a antepenHltima versão#
• ão instale eclipse com outros frame?or<s, incluindo &emoiselle#
Dava
1nstale o Dava D"K E da +racle e o Apache A41# $bra um terminal e veJa se o comando Javac ^ version- está apontando para a versão correta#
o $buntu9 certifi3ue;se 3ue o pacote openjd:-E-jd: esteJa instalado!
Android !"KCai*e a Hltima versão do Android !"K e instale, de acordo com as instruçes# Se usar Qbuntu,
leia essas instruçes e não se es?ueça de colocar no PA1F as pastas android-adt<sd:<tools
e android-adt<sd:<plat3orm-toolsH
$ps a instala%ão, ) necessário instalar a plataforma $ndroid e as SDstem 1mages# Gocê precisará no
mínimo de9
V# $ndroid S&K 6ools
M# $ndroid S&K Platform;tools
L# $ndroid S&K Cuild;tools 'highest version(
O# Pelo menos uma S&K PlatformAT# Pelo menos uma sDstem image para o emulator, por e*emplo9 $/+ E$C1 vUa SDstem
1mageA
$bra o aplicativo !"K Mana#er-9
• Iindo=s9 &uplo;cli3ue no ar3uivo S&K +anager#e*e-, na pasta rai4 do $ndroid S&KA
• Mac</inu09 $bra um terminal, navegue para a pasta tools-, dentro da pasta do $ndroid
S&K, e e*ecute9 #android sd<-A
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 12/81
+ar3ue9
• $ndroid !"K 1ools 'Se não estiver instalado(A
• $ndroid %uild 1ools 'Se não estiver instalado(A
• $ndroid Plat3orm-tools 'Se não estiver instalado(A
Escolha uma plataforma $ndroid 'O#O#M( e instale9
• !"K Plat3ormJ
• A*M (A%5 !ystem 5ma#eJ
• Goo#le AP5 A*MLJ
Atenção, Para o PhoneGap 3uncionar& a AP5 N Android O>O>.L 1(M Q$( (!1A*
54!1A/A"AH
!ó para Iindo=s, +ar3ue tamb)m o oogle QSC &river-, no final de tudo 'dentro de E*tras-(!
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 13/81
(clipse A"1 plu#inSe você pretende utili4ar a 1&E Eclipse, então tem 3ue instalar o plugin para controle do $ndroid,
3ue ) o A"1 '$ndroid &eveloper 6ools(#
$gora, ) o momento de configurar o ambiente Eclipse bai*ando o plu#in A"1# $bra a Janela
help install ne? soft?are- e adicione o repositrio9
• https,<<dl-ssl>#oo#le>com<android<eclipse<2
+ar3ue tudo e instale9
&epois, configure o $ndroid S&K dentro do eclipse9
• $bra o menu9 @indo? Preferences $ndroid - e configure o path do $ndroid S&KA
•
Crie um A'" e rode o emulador AndroidPodemos desenvolver e testar apps $ndroid rodando em um Emulador, tamb)m chamado de9
$ndroid Girtual &evice ; $G&# Gamos criar uma configura%ão de $G& para podermos rodar#
/ode o S&K +anager- e crie um $G&9
• Selecione o menu tools- e +anage $G&s-# li3ue no botão "reate" e configure seu
$G&, como esse e*emplo9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 14/81
• $G& name9 muito importante# Escolha um nome significativo, sem espa%os, nem caracteres
especiaisA
• &evice9 escolha 3ual3uer uma# Eu uso o e*us O por3ue a tela não ) muito grandeA
• 6arget9 escolha $ndroid VW 'O#O#M(A
. resto, fa%a igual Z imagem#
/ode o emulador! a tela do S&K +anager, selecione "tools" e "+anage $G&s"# . Seu $G&
rec)m criado deve aparecer lá# Selecione;o e cli3ue no botão "Start"# Gai demorar um pouco, mas o
emulador vai abrir e carregar o $ndroid# 1sso demora bastante### eralmente, entre L e T minutos,
dependendo da 3uantidade de /$+ disponível#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 15/81
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 16/81
5nstalação do PhoneGap e do Apache Cordova. Phoneap usa o $pache ordova# Precisamos instalar ambos# $ntes de instalar o Phoneap, )
necessário instalar o ode#Js 'e o P+(9
node>js e npm 4o /inu0 $buntu,4ão instale o nodejs do pacote do $buntuHHHH
• sudo apt;get install ;;Des ant build;essential curl git
• sudo apt;get install ;;Des pDthon;soft?are;properties pDthon g\\ ma<e
• sudo add;apt;repositorD ;;Des ppa9chris;leanode#Js
• sudo apt;get update
• sudo apt;get install ;;Des nodeJs
6este com os comandos9
• node ;;version 'tem 3ue ser pelo menos #V#*(
• npm ;;version 'tem 3ue ser pelo menos V#O#*(
node>js e npm 4o Mac +!,
7á um instalador '_#p<g( do +ac no lin<9 http,<<nodejs>or#<dist<vB>B><node-vB>B>>p:#
X s bai*ar e instalar#
node>js e npm 4o Microso3t Iindo=s,
1nstale o ode#Js a partir do site 'bai*e o msi(9
• http9nodeJs#orgdistv#V#LVnode;v#V#LV;*[N#msi 'LM bits(A
• http9nodeJs#orgdistv#V#LV*NOnode;v#V#LV;*NO#msi 'NO bits(A
X s bai*ar e instalar, e ele Já inclui o "npm"#
PhoneGap e Cordova& nas trs plata3ormas,
$bra um 6erminal ou Prompt de omandos e digite9
• npm install ;g phonegap
• npm install ;g cordova
Crie duas vari-veis de am#iente, para inu6
rie as variáveis $&/.1&I7.+E- e ]$G$I7.+E-, de preferência dentro do ar3uivoetcbash#bashrc- 'Hltimas duas linhas(9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 17/81
• e*port $&/.1&I7.+ERoptandroid;sd<;linu*
• e*port ]$G$I7.+ERusrlibJvmJava;V#N#;openJd<;iL[N
Como testar se tudo 3uncionou
. Emulador $ndroid funciona melhor em má3uinas com S. de NO bits# Ele pode dar problema commensagem de erro se sua má3uina for LM bits#
Gocê deve ter pelo menos V emulador criado '$G&(!
V# $bra um 6erminal e vá para sua pasta home9 cd `-, o +S @indo?s, basta abrir um
prompt de comando 3ue você Já estará em sua pasta "home"A
M# rie um proJeto9 cordova create teste com#e*emplo#teste teste-A
L# $dicione a plataforma $ndroid9 cd teste- e cordova platform add android-A
O# /ode o aplicativo9 cordova android run-A
&epois de algum tempo, você deverá ver o emulador com uma tela branca com o símbolo do
Phoneap no meio, escrito9 "&evice /eadD"#
g( Está 3uase terminando### a Pallete-, abra novamente a pasta 0orm ?idgets- e arraste umCutton- para a tela, posicionando;o abai*o do campo num)rico9
f( Salve o ar3uivo#
3) Criar o event handler" do cli7ue do #otãoinho
a( Gamos associar o evento .nlic<- do botão a um nome de m)todo ]ava# Selecione o botão, como botão direito do mouse, e escolha .ther properties- e depois $ll bD name-# /ole para bai*o at)achar .nlic<- 'tem uma pe3uena seta para bai*o, no canto inferior es3uerdo do menu(Ab( a Janela 3ue abriu, digite calcular- e tecle .K-Ac( $gora, precisamos criar o m)todo calcular'(- na classe ]ava da $ctivitD# $bra o ar3uivosrcorg#thecodeba<ers#fatoracao+ain$ctivitD#Java- e crie o seguinte m)todo9
public void calcular%&ie' vie'( )*
d( Gai dar erro no tipo Gie?-, resolva com uic< fi*-, importanto a classe android#vie?#Gie?-Ae( $gora, precisamos referenciar o campo num)rico no laDout, de modo a pegar seu conteHdo9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 18/81
+dit,et ttumero / %+dit,et( this.find&ie'012d%3.id.edit,et#(
• omo foi 3ue eu descobri o nome do campo no laDoutB $bra o laDout, mude para
activitDImain#*ml-, na aba inferior da Janela, e procure o tag :Edit6e*t=, pegando a
propriedade id-A
f( ]á temos uma referência para a Edit6e*t, ou seJa, o campo num)rico, agora, precisamos pegar seu
conteHdo9
long numero / Long.value5f%ttumero.get,et%(.to6tring%((
g( $rraste o ar3uivo 0atoracaoC.#Java- para dentro do pacote onde está o ar3uivo
+ain$ctivitD#Java-# .u então, selecione import file sDstem- e selecione o ar3uivo
0atoracaoC.#Java-A
h( E podemos invocar o m)todo fatorar'(- da nossa classe 0atoracaoC.-96tring resultado / 7atoracao05.fatorar%numero(
i( $gora, precisamos mostrar um alerta com esse String 3ue recebemos9
ne' 8lert9ialog.0uilder%this(.set:essage%;3esultado ; = resultado(
.seteutral0utton%;5;? ne' 9ialog2nterface.5n@licAListener%( )
public void on@licA%9ialog2nterface dialog? int 'hich( )
* *(.sho'%(
Gerifi3ue se o seu m)todo está assim9
public void calcular%&ie' vie'( )
+dit,et ttumero / %+dit,et( this.find&ie'012d%3.id.edit,et#(
long numero / Long.value5f%ttumero.get,et%(.to6tring%((
6tring resultado / 7atoracao05.fatorar%numero(
ne' 8lert9ialog.0uilder%this(.set:essage%;3esultado ; = resultado(
.seteutral0utton%;5;? ne' 9ialog2nterface.5n@licAListener%( ) public void on@licA%9ialog2nterface dialog? int 'hich( )
**(.sho'%(
*
5) Eecute o pro+eto
Gocê Já deve ter um Emulador criado# $bra o e*ecutável $ndroid S&K +anager- 'veJa no guia de
instala%ão do curso( e certifi3ue;se 3ue e*ista pelo menos um Emulador criado#
Selecione o proJeto e, com o botão direito, selecione9 /un as $ndroid $pplication-# Ele poderá
perguntar se deseJa iniciar um Emulador, diga 3ue sim#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 19/81
P*+41+H&oeuB ãoB Pode parecer 3ue você não entendeu nada, mas isso não ) verdade! Gocê aprendeu
rapidamente tudo o 3ue precisa saber sobre plataformas mveis e, ainda por cima, criou uma
aplica%ão do 4ero#
Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /ição
Cem vindo ao curso de ria%ão de apps mveis com Phoneap e JuerD +obile# Se ainda não o
fe4, leia atentamente o !(1$P do curso#
Cai*e os ar3uivos correspondentes a esta aula# $ pasta completa está em9
https,<<===>dropbo0>com<sh<ur?ed.cs?@o=iy0<AA%jh:nys$i7mv74C!n6s1madl8B
O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaio
de /elo 0r est licenciado com uma icena Creative Commons Atri#uiãoCompartilha*4ual
5&( *nternacional! sso inclui# $e%tos& p'inas& 'r(icos e códi'o)(onte!
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 20/81
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 21/81
*onte# +et Mar,et -hare . http#//000!netmar,etshare!com/ 1
o mundo inteiro, temos i.S e $ndroid dividindo 3uase meio a meio os usuários de dispositivos
mveis# +as, e no CrasilB X a mesma coisaB
*onte# -tatista!com
otamos 3ue, no Crasil, a 3uantidade de dispositivos $ndroid ) muito maior 3ue os outros,
incluindo o i.S# Qma das ra4>es ) o pre%o, pois os dispositivos i.S são mais caros 3ue os
dispositivos $ndroid#
2ogo, vamos concentrar nossos estudos nessa plataforma, apesar de falarmos tamb)m um pouco
sobre i.S#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 22/81
'erses do Android. $ndroid possui várias vers>es, sendo 3ue algumas são concorrentes9
*onte# 2ndroid!com
o Crasil, acredita;se 3ue a maioria dos dispositivos rodem $ndroid ]ellD Cean 'O#V#* a O#L(,seguido pelo ingerCread 'M#L#*(#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 23/81
CaracterSsticas de dispositivos móveisSelecionamos alguns dispositivos mveis mais populares no +ercado, para lhe mostrar suas
principais características9
• 6ablet iPad Air9 Processador dual;core '$U(, com V#L h4A /esolu%ão9 VTLN * MO[ pi*els,com MNO pi*els por polegadaA +emria9 V C /$+ &&/L e VN, LM ou NO C flashA M
Fmeras 'uma de T +ega pi*els(A i.S U#*A
• 6ablet Samsung Gala0y 4ote B> 'MVO Edition(9 Processador 3uad;core Krait O 'M#L
h4(A /esolu%ão9 MTN * VN pi*els com MWW pi*els por polegadaA M Fmeras9 frontal com
[ +egapi*els e tra4eira com M +egapi*elsA +emria9 L C /$+A $ndroid O#LA
• Smartphone iPhone T!9 Processador9 dual;core $[ com V#L h4A +emria9 V C /$+A
/esolu%ão9 NO * VVLN pi*els com LMN pi*els por polegadaA i.S U#*A
• Smartphone iPhone E9 Processador9 dual;core $[ com V#O 74A +emria9 V C /$+A
/esolu%ão9 UT * VLLO pi*els com LMN pi*els por polegadaA i.S [A
• Smartphone 2 4e0us T9 Processador uad;core M#L 74 Krait OA +emria9 M C
/$+A /esolu%ão9 V[ * VWM pi*els com OOT pi*els por polegadaA $ndroid O#O 'Kit Kat(A
• Smartphone Samsung Gala0y !T9 Processador9 uad;core M#T 74 Krait OA +emria9 M
C /$+A /esolu%ão9 V[ * VWM pi*els com OOT pi*els por polegadaA $ndroid O#O#M 'Kit
Kat(A
• Smartphone o<ia /umia @B &ual S1+9 Processador9 uad;core V#M 74 orte*;$UA
+emria9 V C /$+A /esolu%ão9 UM * VM[ pi*els com LVN pi*els por polegadaA
+icrosoft @indo?s Phone [#VA
Ar?uitetura moderna de aplicaçes móveis&urante muito tempo, pensou;se em criar aplica%>es mveis da mesma maneira 3ue as aplica%>es
&es<top-, com as mesmas linguagens ']ava- para $ndroid e .bJective - para i.S(# Por)m, o
mercado de aplica%>es mveis ) muito volátil, com um ciclo curtíssimo de vida# Por e*emplo, )
comum vermos atuali4a%>es de apps mveis a cada semana#
E como manter mHltiplas vers>es de uma aplica%ão '$ndroid, i.S, @indo?s Phone(, com esseciclo de vida ultra rápidoB . desenvolvimento em plataforma nativa se torna impraticável
']ava&alvi<$/6- ; para $ndroid, .bJective ^ ocoa 6ouch- ; para i.S, e #E6- ; para
@indo?s Phone(#
$ tendência moderna ) utili4ar aplica%>es @ebvie?-, 3ue e*ibem páginas 76+2 T ]avascript, e
consomem informa%>es a partir de $P1s /ES6 ou S.$P# . arma4enamento interno de Canco de
&ados ) minimi4ado, servindo apenas para cache temporário e preferências# X aí 3ue entram
frame?or<s como o Phoneap ordova9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 24/81
• 76+2 T e ]avascript9 Plataforma de desenvolvimento de camada de $presenta%ão e de
lgica de negciosA• JuerD, JuerD +obile e $ngular#Js9 $u*iliares para lidar com páginas dinFmicasA
• Phoneap9 E*ecuta a aplica%ão 76+2 T em uma @ebvie? e se comunica com os recursos
do aparelho e com plugins, feitos na plataforma nativa#
Gamos ver um pouco da ar3uitetura das principais plataformas mveis do +ercado#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 25/81
Android. $ndroid utili4a dois tipos de má3uinas virtuais para e*ecutar suas aplica%>es9 &alvi< e, mais
recentemente, $/6 ̂ $ndroid /un6ime#
Gamos ver a ar3uitetura do $ndroid9
*onte# http#//commons!0i,imedia!or'/0i,i/*ile#2ndroid)-ystem)2rchitecture!sv'
. $ndroid ) divido em T camadas, conforme e*plica%ão a seguir9
• $pplications9 +nde sua aplicação rodaA
• $pplication 0rame?or<A
• 2ibrariesA
• $ndroid /untimeA
• 2inu* Kernel#
Gocê desenvolve sua aplica%ão em ]ava, utili4ando um conJunto de ferramentas para transformar
seu CDtecode em formato &alvi< $ndroid /untime, e empacotar em um ar3uivo "ap<"#
eralmente, usamos o Eclipse para desenvolver aplica%>es $ndroid, embora várias outras 1&Espossam ser utili4adas#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 26/81
"istribuição da aplicação Android
Qma aplica%ão $ndroid 'ap<( pode ser distribuída das seguintes formas9
V# $trav)s do utilitário adb-, plugando;se o dispositivo em um computador com o $ndroid
S&K instaladoA
M# Cai*ando o ar3uivo ap<- e instalando em um dispositivoA
L# Cai*ando a partir de um repositrio privado 'Por e*emplo9 $ptoide(A
O# Cai*ando a partir da oogle PlaD StoreA
T# Cai*ando a partir da $ma4on $ppStoreA
$ vantagem de usar um repositrio como o $ptoide ou uma Store 'oogle PlaD ou $ma4on( ) a
atuali4a%ão automática das aplica%>es no dispositivo#
Para colocar uma aplica%ão na oogle PlaD Store ) necessário criar uma conta e pagar QS5 MT,
para se registrar como desenvolvedor $ndroid
'http9developer#android#comdistributegoogleplaDstart#html(
i+!i.S ) derivado do +ac .S Y, 3ue ) um sistema operacional proprietário baseado no <ernel do Qni*
'&ar?in ; http9en#?i<ipedia#org?i<i&ar?inI'operatingIsDstem((#
*onte# https#//developer!apple!com/library/Os/re(erencelibrary/Gettin'-tarted/G-3-ecurity3iPhon
e/2rt/security)layers!jp'
o i.S, E*istem 3uatro camadas de abstra%ão9
• ore .SA
• ore ServicesA
• +edia ServicesA• ocoa 6ouch#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 27/81
Gocê desenvolve sua aplica%ão utili4ando uma linguagem 3ue compila em cdigo nativo $/+,
atrav)s de um processo de ross;ompile# $tualmente, você pode criar aplica%>es usando9
+bjective C ou !=i3t#
Gocê s pode criar aplica%>es i+! utili4ando o code, em um computador $pple, rodando o Mac
+!# ão e*iste outro meio 2E$2 de fa4er isso#
Qma alternativa ) usar um servi%o como o +ac1nloud, 3ue aluga computadores +ac para uso via
rede9 http9???#macincloud#com
$ principal diferen%a para as aplica%>es $ndroid ) 3ue não e0iste uma 'M& ou seJa, sua aplicação
U compilada em códi#o nativo do dispositivo e e0ecutada como ?ual?uer outro pro#rama>
Qma aplica%ão i.S ) um ar3uivo ipa- 3ue cont)m a aplica%ão e todos os seus recursos necessários#
$ 1&E Ycode inclui um Simulador i.S, 3ue permite testar a aplica%ão#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 28/81
"istribuição da aplicação
$o contrário do $ndroid, não ) possível e*ecutar uma aplica%ão i.S em um dispositivo mvel real,
sem ter um ertificado e um Provisionin# Pro3ile- emitido pela $pple#
+esmo 3ue o aparelho seJa de sua propriedade, você não conseguirá e*ecutar sua aplica%ão nele#
ão adianta plugá;lo no seu +ac#
Gocê tem as seguintes op%>es para distribuir aplica%>es i.S9
• AdFoc ; 1nstalando manualmente em at) V dispositivos ^ i.S &eveloper Program 'QS5
WW, por ano(A
• $trav)s da App!tore ^ i.S &eveloper Program 'QS5 WW, por ano(A
• Corporativamente ^ 1nstalando a partir de uma rede interna, em dispositivos da suaEmpresa ^ i.S &eveloper Enterprise Program 'QS5 MWW, por ano(A
Se você 3uiser distribuir suas aplica%>es para o pHblico em geral, deve optar pelo i.S &eveloper
Program 'QS5 WW, por ano( e submeter suas apps para publica%ão na $ppStore#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 29/81
Aplicaçes AndroidQma aplica%ão $ndroid ) um conJunto de componentes, 3ue podem ser9
• $ctivities
• Services• ontent Providers
• Croadcast /eceivers
eralmente, uma aplica%ão $ndroid possui uma ou mais "telas", 3ue são chamadas de "$ctivities"9
Qma $ctivitD ) composta por elementos gráficos, como9 ai*as de 6e*to e bot>es, por e*emplo#
Esses elementos gráficos são conhecidos como "Gie?s", e o seu arranJo visual na $ctivitD )
comandado por um ar3uivo Y+2# Então, uma $ctivitD ) composta por9
• Qma classe ]ava, 3ue cont)m o tratamento de todos os eventos 3ue podem acontecer 'carga,
cli3ue de botão etc(A
• Qm ar3uivo de laDout Y+2, 3ue determina 3uais Gie?s estão disponíveis e como estãoarrumadas#
6oda $ctivitD tem um iclo de Gida, cuJos Eventos podemos interceptar9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 30/81
*onte# http#//developer!android!com/re(erence/android/app/2ctivity!html42ctivity5i(ecycle
uando ocorre uma transi%ão de estado na $ctivitD, um m)todo "allbac<" ) invocado na classe
]ava# Se você 3uiser, poderá sobrescrever o m)todo, respondendo, desta forma, ao Evento# Eis os
principais m)todos de "allbac<" de eventos do ciclo de vida9
• onreate ; 3uando a actitivD está para se tornar "/unning"A
• onStart ; a activitD está para se tornar visívelA
• on/estart ; a activitD estava "Stopped" e foi ativada novamenteA• on/esume ; a activitD vai come%ar a interagir com o usuário, recebendo input e eventosA
• onPause ; a activitD está parcialmente oculta# este m)todo, você pode fa4er "commit" de
altera%>es ou parar anima%>es, de modo a poupar recursos do sistemaA
• onStop ; a activitD está totalmente oculta por outra activitD e esta fun%ão ) chamadaA
• on&estroD ; a activitD está para ser eliminada da memria#
Analisando uma aplicação real
Gamos carregar uma aplica%ão $ndroid, o Cio+ago- e analisar como foi construída# Para isto,abra a Gie? SG ; /epositories '"@indo? Sho? Gie? SG /epositores"( e adicione a Q/29
"http9biomago#googlecode#comsvn", conforme a figura9
0a%a "chec<out" do proJeto "Cio+ago"# &eve dar erro no ProJeto, devido Z versão antiga da
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 31/81
plataforma $ndroid# Para corrigir, abra o ar3uivo "proJect#properties", mudando a plataforma para
"android;VW" 'ou então 3ual3uer uma 3ue você tenha instalada#
Para e*ecutar a aplica%ão, selecione o proJeto e, no menu de conte*to, selecione9 "/un $s $ndroid
$pplication"# Qma instFncia de Emulador será iniciada para você#
Se tudo der certo, você verá o emulador# adastre um novo nome e data de nascimento e comande a
gera%ão do gráfico de biorritmo#
$nalise a aplica%ão com calma#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 32/81
Mão na massaGamos criar uma aplica%ão mvel $ndroid#
Gocê criará uma aplica%ão simples, 3ue calcula o fatorial de um nHmero informado e e*ibe oresultado como um alerta# Eis a imagem da aplica%ão9
Gocê vai digitar um nHmero inteiro, clicar no botão e o resultado da sua fatora%ão aparecerá como
um alerta#
4os ar?uivos do curso& dentro da sessão , tem uma classe ]ava9 0atoracaoC.#Java-, 3ue possui
o m)todo9 fatorar-# Este m)todo recebe um nHmero inteiro longo e retorna um String, com a
multiplica%ão dos fatores primos#
Gocês usarão essa classe para criar a aplica%ão#
1) Crie um pro+eto de aplicaão Android no Eclipse6
a# +enu 0ile ne? ProJect- e depois9 $ndroid $ndroid $pplication proJect-A
b# Preencha os campos9
• $pplication name9 0atorar-A
• ProJect name9 0atorarProJ-A
•
Pac<age name9 org#thecodeba<ers#fatoracao-A• +inimum re3uired S&K9 Selecione $P1 V ^ $ndroid M#L#L ^ ingerbreadA
• 6arget S&K9 Selecione $P1 VU ^ $ndroid O#M ^ ]ellD beanA
• ompile ?ith9 &ei*e como estáA
• 6heme9 Selecione none-A
• li3ue em ne*t-, depois ne*t-, depois ne*t- e por Hltimo9 finish-A
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 33/81
. proJeto appcompatIvU- foi criado pelo $&6 e deve ser mantido aberto na @or<space!
2) /odi8i7ue o la9out da Activit9
$umente o 4oom da Janela 'botão lupa \-, na barra da Janela gráfica da activitDA
a( eritifi3ue;se de usar a $P1 correta para renderi4ar o laDout 'N no seu caso(9
b( &elete a 6e*tGie?- 3ue está com o te*to 7ello ?orld-#
c( $rraste uma nova 6e*tGie?, da Pallete- '0orm ?idgets( para a tela e posicione9
d( li3ue com o botão direito sobre a nova 6e*tGie?- e selecione Edit te*t-A
e( +odifi3ue o te*to para &igite o nHmero9-A
f( a Pallete-, selecione a pasta 0orm fields-# $rraste um campo num)rico para debai*o da
legenda# X o campo com um nHmero 'OM( nele9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 34/81
Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /icão
Gocê Já viu o Phoneap ordova e o 3ue ele pode fa4er por você# $gora, ) hora de dar uma
"melhorada" na cara dessas páginas com o jQuery Mobile!
Cai*e os ar3uivos correspondentes a esta aula# $ pasta completa está em9
https,<<===>dropbo0>com<sh<ur?ed.cs?@o=iy0<AA%jh:nys$i7mv74C!n6s1madl8B
O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaio
de /elo 0r est licenciado com uma icena Creative Commons Atri#uiãoCompartilha*4ual
5&( *nternacional! sso inclui# $e%tos& p'inas& 'r(icos e códi'o)(onte!
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 35/81
jQuery Mobile
. JuerD Já ) conhecido da maioria dos desenvolvedores, sendo um frame?or< para lidar com o
&.+ da página e para fa4er re3uests assíncronos#
. JuerD +obile ) um frame?or< de Q1 76+2 T, otimi4ado para dispositivos de to3ue na tela, e
criado para desenvolver ?eb sites e aplica%>es mveis responsivas, 3ue são acessadas por 3ual3uer
smartphone, tablet ou mesmo des<top#
E por 7ue eu o utiliaria:
Cem, vamos dei*ar as evidências falarem por si s# Gamos pegar o Hltimo e*ercício 3ue fi4emos#Eis a tela do emulador9
$gora, vamos ver a tela do emulador do mesmo e*ercício, feito com o au*ílio do JuerD +obile9
$gora, vamos ver a tela do emulador do mesmo e*ercício, feito com o au*ílio do JuerD +obile9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 36/81
6em uma grande diferen%a, nãoB GeJa como o laDout se adaptou bem ao tamanho da tela do
dispositivo### 1sso ) responsividade, e sem o menor esfor%o meu#
Para rodar esse e*ercício, substitua a página inde*#html-, 3ue está dentro de assets???- no
proJeto e*ercício-, pelo ar3uivo inde*#html- 3ue está na pasta sessaoL-#
Eis o cdigo da página inde*#html- nova9
<B95@,CD+ html>
<html>
<head>
<meta charset/;utf-E; F>
<meta name/;format-detection; content/;telephone/no; F>
<meta name/;vie'port; content/;'idth/device-'idth? initial-scale/#;>
<meta name/;msapplication-tap-highlight; content/;no; F>
<linA rel/;st1lesheet;
href/;httpFFcode.Gquer1.comFmobileF#.4.4FGquer1.mobile-#.4.4.min.css; F>
<script src/;httpFFcode.Gquer1.comFGquer1-H.#.#.min.Gs;><Fscript>
<script
src/;httpFFcode.Gquer1.comFmobileF#.4.4FGquer1.mobile-#.4.4.min.Gs;><Fscript>
<script t1pe/;tetFGavascript; src/;cordova.Gs;><Fscript>
<script t1pe/;tetFGavascript; src/;GsFinde.Gs;><Fscript>
<script t1pe/;tetFGavascript;>
app.initialiIe%(
<Fscript>
<title>Jello Korld<Ftitle>
<Fhead>
<bod1>
<div data-role/;page;>
<div data-role/;header;>...<Fdiv><div role/;main; class/;ui-content;>
<h#>2nsira registros<Fh#>
<brF>29 <input t1pe/;number; id/;id; min/;#; F>
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 37/81
<brF>,eto <input t1pe/;tet; id/;data; F>
<brF><input t1pe/;button; id/;btnincluir; value/;2ncluir;
onclicA/;inserir%(; F>
<div id/;saida;>
<Fdiv>
<Fdiv>
<div data-role/;footer;>...<Fdiv>
<Fdiv>
<Fbod1>
<Fhtml>
$3ui, s arranhamos- a superfície do JuerD +obile###
Para usar o JuerD mobile, temos 3ue incluir L elementos em nosso 76+29
V# Qm SS compatível com o JuerD mobile, 3ue pode ser o distribuído via &9<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.4/jquery.mobile1.4.4.min.css" /!
M# . Script do JuerD, 3ue pode ser tamb)m o distribuído via &9<script src="http://code.jquery.com/jquery.1.1.min.js"!</script!
L# . Script do JuerD +obile, idem9<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile1.4.4.min.js "!
</script!
Gocê tamb)m pode bai*ar os ar3uivos e instalar em sua aplica%ão# opie os ar3uivos 3ue estão
dentro de J3uerD;mobile- para dentro de9 assets???Js-, e altere os lin<s na página inde*#html-
para o caminho relativo9 Js###-#
$ma pV#ina jQuery MobileQma página no JuerD +obile consiste de um elemento com o atributo9 data;roleR"page"# &entrode um container page-, 3ual3uer cdigo 76+2 válido pode ser utili4ado# Por e*emplo9
<body!
<di# datarole="pa$e"!
<h%!&om dia</h%!
</di#!
</body!
. JuerD +obile inclui um sistema de navega%ão, 3ue se3uestra- os cli3ues em lin<s e submissão
de formulários, transformando;os em re3uests $Ja*#
Sempre 3ue o usuário clica em um lin< ou submete um formulário, isso ) imediatamente
interceptado pelo sistema de navega%ão $Ja*, e ) usado para criar um re3uest assíncrono, baseado
na Q/2 do formulário ou do lin<, ao inv)s de carregar a página toda, como seria o comportamento
normal#
uando o re3uest termina e a resposta ) recebida, o JuerD +obile busca no documento um
elemento com o atributo9 data;roleR"page", inserido o cdigo da resposta no &.+ da páginaoriginal# Em seguida, 3uais3uer ?idgets- contidos na resposta recebem o comportamento e os
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 38/81
estilos da página# . resto da resposta ) descartado, incluindo9 Scripts e estilos# X uma maneira
simples e elegante de implementar a ar3uitetura SP$ ^ Single Page $pplication#
&epois 3ue a resposta foi incorporada no &.+ da página original, ) apresentada atrav)s de uma
anima%ão, controlada por uma transi%ão-# Por default, ) aplicada a fade transition-, na 3ual a
página esvanece e a outra aparece#
Gamos ver um e*emplo no proJeto J3V-, dentro da sessão L#
E*aminando o cdigo fonte da página inde*#html-, temos o seguinte trecho9
:!&.6PE html=
:html=
:head=
:meta charsetR"utf;[" = :meta nameR"format;detection" contentR"telephoneRno" =
:meta nameR"vie?port" contentR"?idthRdevice;?idth, initial;scaleRV"=
:meta nameR"msapplication;tap;highlight" contentR"no" =
:lin< relR"stDlesheet" hrefR"JsJ3uerD#mobile;V#O#O#min#css" =
:script srcR"JsJ3uerD;M#V#V#min#Js"=:script=
:script srcR"JsJ3uerD#mobile;V#O#O#min#Js"=:script=
:script tDpeR"te*tJavascript" srcR"cordova#Js"=:script=
:script tDpeR"te*tJavascript" srcR"Jsinde*#Js"=:script=
:script tDpeR"te*tJavascript"= app#initiali4e'(A
:script=
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 39/81
:title=Pg V:title=
:head=
:bodD=
:div data;roleR"page" idR"inicial"=
:div data;roleR"header"=###:div=
:div roleR"main" classR"ui;content"= :hV=Página original:hV=
:ul=
:li=:a hrefR"paginaM#html" data;transitionR"flip"=
Página M ; outro ar3uivo:a=:li=
:li=:a hrefR"pgMsegunda" data;transitionR"pop"=
segunda página interna:a=:li=
:li=:a hrefR"pgMpopup" data;transitionR"pop"
data;relR"dialog"=Popup interno:a=:li=
:ul=:div=
:div data;roleR"footer"=###:div=
:div=
6emos uma página, com idR-incial-, e nela, temos um lin< para outro ar3uivo 'paginaM#html-(# $o
navegar, o 3ue aconteceB
• X feito um re3uest $Ja* para a páginaM#htmlA
• uando a resposta chegar, o JuerD +obile analisará o conteHdo, buscando por uma page-#
$o encontrar, ele sobreporá o seu conteHdo dentro do conteHdo da page- com id inicial-A• Qma transi%ão será iniciada 'anima%ão(, neste caso ) um flip- 'data;transitionR"flip"(A
GeJa mais sobre transi%>es em9 http9demos#J3uerDmobile#comV#O#OtransitionsA
PV#inas internasSe você não 3uiser criar páginas separadas, pode colocar tudo dentro de inde*#html-, separando as
várias pages-# GeJa a continua%ão do ar3uivo inde*#html-9
<div data-role/;page; id/;inicial;>
<div data-role/;header;>...<Fdiv>
<div role/;main; class/;ui-content;>
<h#>Dgina original<Fh#> <ul>
<li><a href/;paginaH.html; data-transition/;flip;>
Dgina H - outro arquivo<Fa><Fli>
<li><a href/;MpgHsegunda; data-transition/;pop;>
segunda pgina interna<Fa><Fli>
<li><a href/;MpgHpopup; data-transition/;pop;
data-rel/;dialog;>Dopup interno<Fa><Fli>
<Ful>
<Fdiv>
<div data-role/;footer;>...<Fdiv>
<Fdiv>
<div data-role/;page; id/;pgHsegunda;>
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 40/81
<div data-role/;header;>...<Fdiv>
<div role/;main; class/;ui-content;>
<h#>6egunda pgina interna<Fh#>
<a href/;Minicial; data-transition/;slidefade;>
voltar a primeira<Fa>
<Fdiv>
<div data-role/;footer;>...<Fdiv><Fdiv>
<div data-role/;page; id/;pgHpopup;>
<div data-role/;header;><h#>9ialog<Fh#><Fdiv>
<div role/;main; class/;ui-content;>
<h#>Dopup interno<Fh#>
<a href/;Minicial; data-transition/;slidefade;>7echar<Fa>
<Fdiv>
<div data-role/;footer;><hrF><Fdiv>
<Fdiv>
ote 3ue temos várias pages- dentro de inde*#html-# $o clicarmos em um lin< com href
iniciando por -, o JuerD +obile vai procurar a page- dentro do mesmo ar3uivo#
ote 3ue temos uma page- 3ue funciona como um popup- 'data;relR"dialog"(#
E*perimente com os lin<s#
+ ?ue temos dentro de uma )pa#e26emos L elementos9
• Qm cabe%alho9 div com data;roleRheader-A
• Qm miolo de conteHdo9 div com roleR"main" e classR"ui;content"A
• Qm rodap)9 div com data;roleRfooter-A
Iid#ets Atenão9 Os 0id'ets nem sempre (uncionam da mesma (orma no nave'ador do des,top e no do
6mulador7 $este sempre no 6mulador do 2ndroid& no -imulador do iO- e nos dispositivos móveis7
. JuerD +obile inclui uma s)rie de plugins 3ue melhoram os elementos normais do 76+2 T# Eles
tentam dar uma cara de mobile- para uma aplica%ão @eb, imitando os @idgets presentes nas
plataformas nativas '$ndroid, i.S etc(#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 41/81
Para usar um @idget, geralmente basta acrescentar um atributo data;role-# Para ver um e*emplo,
substitua os ar3uivos inde*#html- e paginaM#html-, pelos 3ue estão dentro da sessão L, na pasta
?idgets-9
6emos alguns @idgets sendo utili4ados nos dois ar3uivos# Gamos come%ar pela página
inde*#html-9
:ul data;roleR"listvie?"=
:li=:a hrefR"paginaM#html" data;transitionR"flip"=
Página M ; outro ar3uivo:a=:li=:li=:a hrefR"pgMsegunda" data;transitionR"pop"=
segunda página interna:a=:li=
:li=:a hrefR"pgMpopup" data;transitionR"pop" data;relR"dialog"=
Popup interno:a=:li=
:ul=
$o acrescentarmos o atributo data;roleRlistvie?- , transformamos a renderi4a%ão do tag :ul= em
um @idget# E, como ele tem lin<s internos, serão e*ibidos ícones com setas no canto direito, para
indicar ao usuário 3ue a3uela op%ão ) clicável e representa um lin<#
o ar3uivo paginaM#html-, temos um botão com o te*to Goltar inde*#html-# ote como ele foi
renderi4ado9 um retFngulo, 3uase da largura da tela, com cantos arredondados# 1sso ) o @idget
button-# . JuerD +obile transforma automaticamente os tags input-, com tDpe button-,
submit- e reset- em ?idgets do tipo button, sem necessidade de colocar o atribito data;
roleRbutton-#
Por)m, ) possível alterar os tags :a= e :button= em ?idgets do tipo button, mudando sua classe#
Por e*emplo, dentro do ar3uivo inde*#html-, se invocarmos o lin< para a segunda página
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 42/81
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 43/81
Eis o cdigo9
:div data;roleR"collapsible"
data;iconposR"right"
data;insetR"false"
data;content;themeR"b"=
:hM=.p%>es:hM=
:ul data;roleR"listvie?"=
:li=:a hrefR""=$vião:a=:li=
:li=:a hrefR""=6rem:a=:li=
:li=:a hrefR""=arro:a=:li=
:ul=
:div=
Gamos e*plicar as mudan%as### Para come%ar, estamos usando o ?idget collapsible-, 3ue oculta
tudo o 3ue estiver dentro do container 'neste caso, uma :div=(# Para 3ue possa ser e*pandido
novamente, ) necessário 3ue o primeiro elemento do container seJa um header ':hV= at) :hN=(,
pois esse será o elemento no 3ual o usuário terá 3ue clicar para e*pandir o container#
ote 3ue temos outro item dentro do container colapsível9 .utros-# $o e*pandi;lo, você verá 3ue
e*iste um formulário inteiro dentro dele9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 44/81
.u seJa, 3ual3uer conteHdo 3ue estiver dentro do container será oculto#
7orms Acrescente o ar7uivo +7uer9&validate&min&+s", 7ue est- dentro da sessão 3, pasta +7uer9mo#ile"
; pasta +s" dentro de assets<$$$"& em#rese de su#stituir os ar7uivos inde&html" e
pa4ina2&html", pelos 7ue estão dentro da sessão 3, na pasta $id4ets"!
Qm elemento importante de intera%ão com o usuário são os forms-# Em aplica%>es mveis, nsnão temos esse conceito# Simplesmente, posicionamos vie?s- no laDout de nossa activitD- e
pronto! Em 76+2, ) melhor utili4ar forms para isto#
&entro do ar3uivo inde*#html- novo, do proJeto J3V 'a3uele 3ue você substituiu no tpico
anterior(, tem uma page- popup# Ela cont)m uma :div= colapsível, cuJo segundo item ) um form#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 45/81
. form ) maior 3ue a tela, logo, para ver a parte inferior, você tem 3ue arrastar para cima 'cli3ue
com o mouse sobre a área livre do popup e arraste para cima(#
6emos vários elementos nesse form# Gamos ver como os configuramos#
Cai0a de te0to
o 76+2 T, as cai*as de te*to podem ter tipos de acordo com seu conteHdo# Para ver todos esses
tipos, eu recomendo o tutorial de 76+2 T do @LSchools9
• http9???#?Lschools#comhtmlhtmlTIformIinputItDpes#asp
o form, ns criamos duas cai*as de te*to9
:label forR"nome"=ome9:label=
:input tDpeR"te*t" nameR"nome" idR"nome" valueR"" re3uired titleR"1nforme seu nome!" =
:label forR"email"=Email9:label=
:input tDpeR"email" nameR"email" idR"email" valueR"" re3uired
titleR"1nforme um email válido!" =
$ntes de mais nada, estamos utili4ando vários recursos do 76+2 T# Se você não está familiari4ado
com esta versão, sugiro consultar o tutorial do @LSchools9
•
http9???#?Lschools#comhtmlhtmlTIintro#asp
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 46/81
Estamos usando o tag :label= para acrescentar um rtulo para os campos# Ele e*iste desde o 76+2
O#V# Seu atributo for- tem o id- do elemento ao 3ual se refere# 6amb)m estamos usando algumas
coisinhas para poder validar os campos9
• re?uired9 1ndica 3ue o campo ) obrigatrio e deve ser preenchido pelo usuárioA
• title9 1ndica a mensagem de erro 3ue deve ser e*ibida, caso o campo seJa reJeitado navalida%ãoA
Em um navegador compatível com 76+2 T, a valida%ão ) feita 3uando o formulário ) submetido#
Para 3ue isto aconte%a na @ebvie?, temos 3ue carregar um plugin de valida%ão, 3ue pode ser o
J3uerD;validate#Js# Por isto, a página inde*#html- nova fa4 referência a esse plugin9
:script srcR"JsJ3uerD;M#V#V#min#Js"=:script=
:script srcR"JsJ3uerD#mobile;V#O#O#min#Js"=:script=
:script srcR"JsJ3uerD#validate#min#Js"=:script=
$ novidade a3ui ) o tDpeRemail-, 3ue no 76+2 T significa validar o conteHdo de um campo de
acordo com as regras de um e;mail#
. atributo title- indica a mensagem de erro 3ue deve ser mostrada, caso o campo não passe na
valida%ão#
'alidação
X possível validar os campos do form sem escrever cdigo ]avascript para isto# om alguns
atributos 76+2 T e um plugin de valida%ão, podemos validar 3uase tudo, de forma simples e
prática#
Para ativar a valida%ão do form, temos 3ue e*ecutar um script logo aps o formulário ter sido
carregado9
###
:input tDpeR"submit" valueR"Enviar" =:form=
:script=
5'"meuform"(#validate'(A
:script=
!elect
Qma :select= ) uma lista de escolha, cuJo padrão ) permitir escolher apenas um elemento# Ela )
implementada desta forma9
:label forR"cidade" classR"select"=idade9:label=
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 47/81
:select nameR"cidade" idR"cidade" re3uired
titleR"Selecione uma cidade!"=
:option valueR"" selected=selecione:option=
:option valueR"rio" =/io de ]aneiro:option=
:option valueR"sp"=São Paulo:option=
:option valueR"bh"=Celo 7ori4onte:option=:select=
0i4emos um pe3ueno tru3ue- para for%ar o usuário a selecionar uma cidade# Poderíamos ter
simplesmente escolhido uma das cidades e colocado o atributo selected- dentro do seu tag
:option=, mas isto poderia gerar erros, pois o usuário não seria obrigado a escolher 3ual a cidade
deseJada# Então, criamos uma op%ão com valor va4io 'valueR-( e, se ele não escolher uma cidade,
a valida%ão vai pegar 'temos o atributo re3uired- no :select=(#
Chec:bo0
em dá para reconhecer como uma hec<bo*, nãoB +as )# Gocê pode selecionar os dois turnos
'3ue ficarão com fundo a4ul(# 1sto ) devido Z formata%ão do @idget hec<bo*, do JuerD +obile#
Eis o 76+29
:fieldset data;roleR"controlgroup"data;tDpeR"hori4ontal"=
:legend=6urnos9:legend=
:input tDpeR"chec<bo*" nameR"turnos" idR"turno;manha" chec<ed=
:label forR"turno;manha"=+anhã:label=
:input tDpeR"chec<bo*" nameR"turnos" idR"turno;tarde" =
:label forR"turno;tarde"=6arde:label=
:fieldset=
$ op%ão data;tDpeR-hori4ontal- fa4 com 3ue as várias hec<bo*es apare%am em uma mesmalinha na tela# Se mudarmos para vertical-, será uma coluna, com os rtulos Z es3uerda#
Pergunta9 E se eu 3uiser for%ar o usuário a selecionar pelo menos uma cai*aB este caso, vamos ter
3ue criar uma regra de valida%ão9
:form=
:script=
5'"meuform"(#validate'
rules9
turnos9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 48/81
re3uired9 true,
messages9
turnos9
re3uired9 "Selecione pelo menos V turno"
(A
:script=
riamos uma regra para validar o vetor turnos-# . usuário terá 3ue selecionar pelo menos V turno#
*adio
riamos um radio group-, com bot>es 3ue se e*cluem mutuamente9
Eis o cdigo 76+29
:fieldset data;roleR"controlgroup"=
:legend=Escolaridade:legend=
:input tDpeR"radio" nameR"escolaridade" idR"escolaridadeV" valueR"em" =
:label forR"escolaridadeV"=Ensino m)dio:label= :input tDpeR"radio" nameR"escolaridade" idR"escolaridadeM" valueR"sp"=
:label forR"escolaridadeM"=Superior completo:label=
:input tDpeR"radio" nameR"escolaridade" idR"escolaridadeL" valueR"m"=
:label forR"escolaridadeL"=+estrado:label=
:input tDpeR"radio" nameR"escolaridade" idR"escolaridadeO" valueR"d"=
:label forR"escolaridadeO"=&outorado:label=
:fieldset=
omo não informamos o atributo data;tDpe , o comportamento default ) mostrar como vertical, emuma coluna#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 49/81
Para validar elementos repetitivos, como hec<bo*es e radio buttons, geralmente usamos regras de
valida%ão, criadas e passadas para o validador dentro do script9
:form=
:script=5'"meuform"(#validate'
rules9
turnos9
re3uired9 true
,
escolaridade9
re3uired9 true
,
messages9
turnos9
re3uired9 "Selecione pelo menos V turno"
,
escolaridade9
re3uired9 "Selecione uma escolaridade"
(A
riamos duas regras de valida%ão para os campos turnos- e escolaridade-, obrigando 3ue o
usuário selecione pelo menos uma op%ão de cada um deles#
!lider
Slider ) uma novidade do 76+2 T e permite selecionar um valor deslocando um botão#
Eis o 76+29
:label forR"slider"=/enda:label=:input tDpeR"range" nameR"renda" idR"renda" valueR"V" minR"V" ma*R"M"=
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 50/81
Como pe#ar os campos de um 7ormSe você estiver submetendo o formulário para fora da aplica%ão, por e*emplo, para um servidor
e*terno, então ) tudo resolvido por 766P /e3uest#
Por)m, se está usando o form como uma activitD-, ) possível interceptar o evento submit- e pegar
os dados 3ue o usuário digitou# Para isso, usamos o JuerD9
5' "meuform" (#submit'function' event (
if'5'meuform-(#valid'((
var campos R "ome9 "
\ 5'"nome"(#val'(
\ "jrjnEmail9 "
\ 5'"email"(#val'(
\ "jrjnidade9 "
\ 5'"cidade"(#val'( \ "jrjn6urnos9 "A
5'inputnameR"turnos"9chec<ed(#each'function'(
campos \R " " \ 5'this(#val'(A
(A
campos \R "jrjnEscolaridade9 "A
campos \R 5'inputnameR"escolaridade"(#val'(A
campos \R "jrjn/enda9 "A
campos \R 5'"renda"(#val'(A
alert'campos(A event#prevent&efault'(A
5'"meuform"(#get'(#reset'(A
5#mobile#navigate' "inicial" (A
(A
:script=
Estamos pendurando- um callbac<- no evento submit- do form# uando o usuário clicar no
botão Enviar- 'input tDpeR-submit-(, este callbac<- será invocado# ote 3ue estamos verificando
se o form ) válido! .s campos Simples, como cai*as de te*to, select e slider, podemos pegar apenas
usando o seletor de id- do JuerD, e o m)todo val'(-9
$%;Mnome;(.val%(
.s campos de sele%ão mHltipla, podemos pegar atrav)s do atributo name-, de seus tags9
$%Ninput[name/;escolaridade;]N(.val%(
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 51/81
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 52/81
Ela conterá um botão para adicionar novos registros e apresentará uma :ul= listvie?, com os
registros 3ue Já estão no banco de dados#
$o clicar no botão adicionar-, deverá navegar para a página popup, 3ue mostrará o form de
inclusão de registros# .s campos deverão ser9
• id- 9 num)rico e obrigatrio, com mensagem de valida%ãoA
• data- 9 te*to e obrigatrio, com mensagem de valida%ãoA
"icasV( +ova os scripts de valida%ão do form e do evento submit, para o ar3uivo inde*#Js-, dei*ando a
página html mais limpa#
M( 6ente usar um ?idget listvie? ':ul=( como o local onde serão acrescentados os registros pr);
e*istentes9
var registro R ""A
for 'var iRA i:lenA i\\(
registro \R ":li="\ results#ro?s#item'i(#id
\ " "
\ results#ro?s#item'i(#data
\ ":li="A
5'"saida"(#html'registro(A
5'"saida"(#listvie?'"refresh"(A
ão entre em pFnico! Procure no 4ip desta aula, dentro da Pasta do Curso# $ resposta Já está lá###
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 53/81
6oda aplica%ão 3ue usa notifica%>es de push- deve ter pelo menos O partes9
• $plica%ão mvelA
• $plica%ão servidora 'Servidor de $plica%ão(A
• Canco de dados com o registro dos usuáriosA
•
Servidor de otifica%ão '0eito pela oogle, $pple ou +icrosoft(#$ se3uência seria mais ou menos esta9
V# Qsuário instala a aplica%ãoA
M# $plica%ão se registra com o Servidor de otifica%>es 'do provedor escolhido9 +, $Ps
ou @PPS(A
L# $plica%ão envia ao Servidor de $plica%ão a sua identifica%ão, 3ue ) arma4enada no banco
de dadosA
O# Em um dado momento, o Servidor de $plica%ão decide enviar notifica%ão para um dos
lientes# Ele obt)m a identifica%ão do Canco de dados de registroAT# . Servidor de $plica%ão contacta o Servidor de otifica%>es e solicita o envio de
notifica%ão para um ou mais registros de usuárioA
N# . Servidor de otifica%ão contata o dispositivo do usuário e envia a notifica%ãoA
U# Qm callbac<- no dispositivo mvel registra a notifica%ão e e*ibe na lista de notifica%>esA
[# uando o usuário toca em uma notifica%ão, a aplica%ão apropriada ) acionada, e um
callbac<- ) e*ecutado#
&ependendo do re3uisito, a aplica%ão pode fa4er diversas coisas ao receber uma notifica%ão9
•
$pagar o Cadge number-, se for o casoA• Enviar uma confirma%ão ao Servidor de $plica%ão, para 3ue este evite notificá;la
novamenteA
4oti3icaçes para aparelhos Android
Para enviar notifica%>es para aparelhos $ndroid, ) necessário criar um proJeto e se registrar no
servi%o oogle loud +essaging#
Primeiro passo, Criar um projeto de uso de AP5 Goo#le
$cesse a oogle &evelopers onsole e crie um novo proJeto9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 54/81
$note os campos proJect 1&- e proJect umber-#
a barra Z es3uerda, selecione $P1s k auth-#
a lista de $P1s, ligue a op%ão correspondente a oogle loud +essaging for $ndroid-9
!e#undo passo, Criar uma chave de AP5 AP5 KeyL
V# o painel es3uerdo, selecione9 $P1s k auth- e redentials-A
M# &entro de Public $P1 access-, selecione reate ne? <eD-A
L# o diálogo reate a ne? <eD-, selecione9 Server <eD-A
O# o diálogo seguinte, informe o Endere%o 1P onde seu Servidor de $plica%ão vai rodar# Para
testar, dei*e como9 #### ATE.=>?6 [email protected] C??@E E/ ?D@=>? ASS*/!
T# Selecione9 reate-A
N# a página a seguir, copie a $P1 <eD-# Gocê necessitará dela para autenticar seu Servidor de$plica%ão com o oogle loud +essaging#
1erceiro passo, Criar uma aplicação preparada para GCM
Este e*emplo ) baseado neste 1$1+*5A/#
V# rie uma aplica%ão Phoneap 'pode ser com os utilitários do ordova(A
M# $dicione o PushPlugin-9
a# phonegap local plugin add https9github#comphonegap;buildPushPluginA
b# opie o ar3uivo Pushotification#Js-, 3ue fica na pasta do proJeto, dentro deplugins-, para a pasta rai4 do proJeto '3ue vai virar assets???-(A
c# 1nsira uma referência para o Pushotification#Js- dentro da sua página inde*#html-9
• :script tDpeR"te*tJavascript" srcR"Pushotification#Js"=:script=
L# /egistre a aplica%ão com o oogle loud +essagingA
O# odifi3ue o callbac<- de sucesso no regisro da appA
T# odifi3ue o callbac<- de erro no registro da appA
N# odifi3ue o callbac<- a ser invocado 3uando chegarem mensagens para a appA
1mporte o proJeto Pushotification$pp- para o eclipse#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 55/81
*e3erncia para o plu#in ar?uivo )inde0>html2L,
<script t1pe/;tetFGavascript; src/;cordova.Gs;><Fscript>
<script t1pe/;tetFGavascript; src/;GsFinde.Gs;><Fscript>
<script type="te't/ja#ascript" src="(ush)otification.js"!</script!
<script t1pe/;tetFGavascript;>
app.initialiIe%(
<Fscript>
Códi#o ?ue re#istra a app no GCM ar?uivo )inde0>js2L,
receivedEvent9 function'id(
var pushotification R ?indo?#plugins#pushotificationA
pushotification#register'
app#success7andler,app#error7andler,
"sender1&"9"WTOV[MOMLNMW",
"ecb"9"app#onotification+"(A
Gocê não precisa registrar sua app a todo momento no +# Pode fa4er isso e arma4enar em um
Canco local, testando sempre se a tabela está va4ia#
.s argumentos são9• app#success7andler 9 callbac<- de sucesso no registro com o +A
• app#error7andler 9 callbac<- de erro no registro com o +A
• "sender1&"9"WTOV[MOMLNMW","ecb"9"app#onotification+"9 . Sender1&- ) o seu
ProJect1&-, recebido 3uando você criou o proJeto na oogle &evelopers onsole, e o ecb-
) o callbac<- 3ue será invocado 3uando chegar uma mensagemA
Processamento de mensa#ens
. cdigo 3ue processa mensagens ) bem simples9
onotification+9 function'e(
s?itch' e#event (
case registered9
if ' e#regid#length = (
console#log'"/egid " \ e#regid(A alert'registration id R \e#regid(A
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 56/81
brea<A
case message9
this is the actual push notification# its format depends on the
data model from the push server
alert'message R \e#message\ msgcnt R \e#msgcnt(A brea<A
case error9
alert'+ error R \e#msg(A
brea<A
default9
alert'$n un<no?n + event has occurred(A
brea<A
Gários eventos podem ocorrer 3uando chega uma mensagem9
• registered-9 uando a aplica%ão se registrou com o +A
• message-9 uando uma mensagem foi recebidaA
• error-9 uando ocorreu um erro#
. 3ue vem dentro da mensagem e o 3ue a sua aplica%ão vai fa4er com ela, depende muito da suafuncionalidade# . normal ) abrir uma tela com os dados da mensagem nova#
+ !ervidor de Aplicação
Para este tutorial, usamos um servidor ode#Js 'ar3uivo notifD#Js-(9
notifD#Js
var gcm R re3uire'node;gcm(Avar message R ne? gcm#+essage'(A
$P1 Server KeD
var sender R ne? gcm#Sender'____ $P1 KE + ____(A
var registration1ds R A
Galue the paDload data to send###
message#add&ata'message,"juMU Peace, 2ove juMUNO and Phoneap juMUN!"(A
message#add&ata'title,Push otification Sample (Amessage#add&ata'msgcnt,L(A Sho?s up in the notification in the status bar
message#add&ata'soundname,beep#?av(A Sound to plaD upon notification receipt ; put in the
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 57/81
??? folder in app
message#collapseKeD R demoA
message#delaD@hile1dle R trueA &efault is false
message#time6o2ive R LA &uration in seconds to hold in + and retrD before timing out#
&efault O ?ee<s 'M,OVW,M seconds( if not specified#
$t least one reg id re3uired
registration1ds#push'"$P$WVbI@2gQm[UMe4Ot.&LCcUt1i1]rN&o7h6M2K.1g&*3.$
Lhnr&rCOm1TLP@fuu@fol$vM$fPTh6Cb/1TYNd&WY[mGatP[dO2I@n@ID;
I@MsorfUYlG$Gn;$.coO@O&4toGplbu1UvJT4N&KG*urtnOWGEc"(A
__
_ Parameters9 message;literal, registration1ds;arraD, o# of retries, callbac<;function
_
sender#send'message, registration1ds, O, function 'err, result( if'err(
console#log'Erro9 \ err(A
if 'result(
console#log'/esult9 \ ]S.#stringifD'result((A
else
console#log'/esult nulo(A
(A
. ideal ) termos um @ebservice 3ue a aplica%ão invo3ue para informar seu /egistration 1d-
'obtido 3uando ela se registra no +(# Então, arma4enamos esse /egistration 1d em um banco de
dados#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 58/81
'amos criar outra appGamos criar uma app 3ue permita ao usuário selecionar uma cidade e mostre o clima atual# Para
isto, vamos usar o @ebservice S.$PY+2 lobal @eather-, para listar o clima da cidade
deseJada# 'resposta em e*ercicioM#4ip-(#
X importante 3ue você tente seguir e*atamente todos os passos e teste a aplica%ão!
Eis as duas telas da aplica%ão9
$bra o site do @ebservice e veJa como ele funciona#
@S&29 http9???#?ebservice*#netstoc<3uote#asm*B@S&2
Site9 http9???#?ebservice*#com?s@S&etails#asp*B$61&RVMk@S1&RTN
Qsando o soapui-, fi4 um re3uest para a opera%ão et@eather-# Eis o re3uest e o response9
*e?uest,
D56, httpFF'''.'ebservice.comFglobal'eather.asm J,,DF#.#
8ccept-+ncoding gIip?deflate
@ontent-,1pe tetFmlcharset/P,7-E
*+,(,ction: "http://---.-ebser#ice.)0/et2eather"
@ontent-Length 4O
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 59/81
Jost '''.'ebservice.com
@onnection eep-8live
Pser-8gent 8pache-Jttp@lientF4.#.# %Gava #."(
!+AP (nvelope,
:soapenv9Envelope *mlns9soapenvR"http9schemas#*mlsoap#orgsoapenvelope"
*mlns9?ebR"http9???#?ebserviceY#E6"=
:soapenv97eader=
:soapenv9CodD=
:?eb9et@eather=
:!;;.ptional9;;=
:?eb9itDame=/io de ]aneiro:?eb9itDame=
:!;;.ptional9;;= :?eb9ountrDame=Cra4il:?eb9ountrDame=
:?eb9et@eather=
:soapenv9CodD=
:soapenv9Envelope=
*esponse !+AP (nvelopeL,
:soap9Envelope *mlns9soapR"http9schemas#*mlsoap#orgsoapenvelope"
*mlns9*siR"http9???#?L#orgMVY+2Schema;instance"*mlns9*sdR"http9???#?L#orgMVY+2Schema"=
:soap9CodD=
:et@eather/esponse *mlnsR"http9???#?ebserviceY#E6"=
:et@eather/esult=:!&$6$:B*ml versionR"V#" encodingR"utf;VN"B=
:urrent@eather=
:2ocation=/io &e ]aneiro $eroporto , Cra4il 'SC/]( MM;TOS OL;V@:2ocation=
:6ime=Sep ML, MVO ; N9 $+ E&6 MVO#W#ML V Q6:6ime=
:@ind= from the 'LT degrees( at T +P7 'O K6(9:@ind=
:GisibilitD= greater than U mile's(9:GisibilitD= :6emperature= NN 0 'VW (:6emperature=
:&e?Point= NM 0 'VU (:&e?Point=
:/elative7umiditD= [[8:/elative7umiditD=
:Pressure= L#VT in# 7g 'VMV hPa(:Pressure=
:Status=Success:Status=
:urrent@eather==:et@eather/esult=
:et@eather/esponse=
:soap9CodD=
:soap9Envelope=
. elemento :et@eather/esult= ) um &$6$, logo, ) apenas um string- e não um documento
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 60/81
Y+2, apesar de estar formatado como tal# Ele será recebido com kltA- e kgtA- ao inv)s dos
caracteres9 :- e =-# GeJa o e*emplo ra?-9
J,,DF#.# HOO 5
@ache-@ontrol private? ma-age/O
@ontent-,1pe tetFml charset/utf-E6erver :icrosoft-226F.O
Q-8spet-&ersion 4.O.!O!#R
Q-Do'ered-01 86D.+,
9ate ,ue? H! 6ep HO#4 #O"H#" S:,
@ontent-Length #OH!
@onnection Aeep-alive
<Tml version/;#.O; encoding/;utf-E;T><soap+nvelope
mlnssoap/;httpFFschemas.mlsoap.orgFsoapFenvelopeF;
mlnssi/;httpFF'''.'!.orgFHOO#FQ:L6chema-instance;
mlnssd/;httpFF'''.'!.orgFHOO#FQ:L6chema;><soap0od1><SetKeather3esponse
mlns/;httpFF'''.'ebserviceQ.+,;> <et2eather3esult!lt56'ml #ersion="1.7"
encodin$="utf18"6$t5
lt59urrent2eather$t5
lt5ocation$t53io ;e aneiro ,eroporto &razil >*&3? @4* 74%
172lt5/ocation$t5
lt50ime$t5*ep % 714 78:77 ,A ;0 / 714.7B.% 1777
C09lt5/0ime$t5
lt52ind$t5 from the ) >%@7 de$rees? at @ A(D >4 E0?:7lt5/2ind$t5
lt5Fisibility$t5 $reater than G mile>s?:7lt5/Fisibility$t5
lt50emperature$t5 88 H >1B 9?lt5/0emperature$t5lt5;e-(oint$t5 8 H >1G 9?lt5/;e-(oint$t5
lt53elati#eDumidity$t5 IIJlt5/3elati#eDumidity$t5
lt5(ressure$t5 %7.1@ in. D$ >171 h(a?lt5/(ressure$t5
lt5*tatus$t5*uccesslt5/*tatus$t5
lt5/9urrent2eather$t5</et2eather3esult!<FSetKeather3esponse><Fsoap0od1><
Fsoap+nvelope>
J,,DF#.# HOO 5@ache-@ontrol private? ma-age/O
@ontent-,1pe tetFml charset/utf-E
6erver :icrosoft-226F.O
Q-8spet-&ersion 4.O.!O!#R
Q-Do'ered-01 86D.+,
9ate ,ue? H! 6ep HO#4 #O"H#" S:,
@ontent-Length #OH!
@onnection Aeep-alive
<Tml version/;#.O; encoding/;utf-E;T><soap+nvelope
mlnssoap/;httpFFschemas.mlsoap.orgFsoapFenvelopeF;mlnssi/;httpFF'''.'!.orgFHOO#FQ:L6chema-instance;
mlnssd/;httpFF'''.'!.orgFHOO#FQ:L6chema;><soap0od1><SetKeather3esponse
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 61/81
mlns/;httpFF'''.'ebserviceQ.+,;> <et2eather3esult!lt56'ml #ersion="1.7"
encodin$="utf18"6$t5
lt59urrent2eather$t5
lt5ocation$t53io ;e aneiro ,eroporto &razil >*&3? @4* 74%
172lt5/ocation$t5
lt50ime$t5*ep % 714 78:77 ,A ;0 / 714.7B.% 1777
C09lt5/0ime$t5
lt52ind$t5 from the ) >%@7 de$rees? at @ A(D >4 E0?:7lt5/2ind$t5
lt5Fisibility$t5 $reater than G mile>s?:7lt5/Fisibility$t5
lt50emperature$t5 88 H >1B 9?lt5/0emperature$t5
lt5;e-(oint$t5 8 H >1G 9?lt5/;e-(oint$t5
lt53elati#eDumidity$t5 IIJlt5/3elati#eDumidity$t5
lt5(ressure$t5 %7.1@ in. D$ >171 h(a?lt5/(ressure$t5
lt5*tatus$t5*uccesslt5/*tatus$t5
lt5/9urrent2eather$t5</et2eather3esult!<FSetKeather3esponse><Fsoap0od1><
Fsoap+nvelope>
Então, podemos pegar o conteHdo te*tual do tag et@eather/esult- e transformar em Y+29
• Substituímos os kltA- e kgtA- por :- e =-, respectivamenteA
• onvertemos o string resultante em Y+2A
• Pegamos os elementos dentro de :2ocation=-#
Passo , Crie uma aplicação e importe para o eclipseJ
Passo ., Adapte o )inde0>js2 e o )inde0>html2,
&evem ficar como o e*emplo da página T da sessão L# S 3ue copie os scripts de J3uerD;
mobile- para dentro de assets???Js- e modifi3ue a referência dentro de inde*#html- para
usar as cpias locais#
Passo , Crie as )pa#es2 do e0ercScio,
Página inicial-, com um form9
:div data;roleR"page" idR"inicial"=
:div data;roleR"header"=lima global:div=
:div roleR"main" classR"ui;content"=
:hV=Selecione a cidade:hV=
:form idR"formcidade" actionR""=
:label forR"cidade" classR"select"=idade9:label=:select nameR"cidade" idR"cidade" re3uired
titleR"Selecione uma cidade!"=
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 62/81
:option valueR"" selected=selecione:option=
:option valueR"/io de ]aneiro" =/io de
]aneiro:option=
:option valueR"Sao Paulo"=São Paulo:option=
:option valueR"Celo 7ori4onte"=Celo
7ori4onte:option= :option valueR"Crasilia"=Crasília:option=
:option valueR"Porto $legre"=Porto $legre:option=
:option valueR"0ortale4a"=0ortale4a:option=
:select=
:input tDpeR"submit" valueR".bter" =
:form=
:div=
:div data;roleR"footer"=:div=
:div=
6eremos valida%ão nesse form, logo, o script J3uerD#validate#min#Js- deve ser incluído no
ar3uivo inde*#html-#
$gora, uma página resultado- para e*ibir uma listvie?9
:div data;roleR"page" idR"resultado"=
:div data;roleR"header"=:hV=/esultado:hV=:div=
:div roleR"main" classR"ui;content"=
:div=
:ul idR"saida" data;roleR"listvie?"=
:ul=
:div=
:div=
:div data;roleR"footer"=:hr=:div=:a hrefR"inicial" data;transitionR"slidefade"
classR"ui;btn"=0echar:a=
:div=
Passo O, Crie& no ar?uivo )inde0>js2& os códi#os de validação e submit,
1ntercepte o evento readD- do documento9
• $%document(.read1%function%( )U*(
$ primeira coisa a fa4er no callbac<- ) validar o form9• $%;Mformcidade;(.validate%(
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 63/81
$gora, temos 3ue interceptar o evento submit- do form9
• $% ;Mformcidade; (.submit%function% event ( )
$ primeira coisa 3ue faremos dentro do submit- ) verificar se o form está válido9
• event.prevent9efault%(
• if%$%;Mformcidade;(.valid%(( )
. prevent&evault'(- ) para impedir o comportamento normal de subissão do formulário, Já
3ue vamos tratar tudo ns mesmos#
$t) agora, temos isso9
5'document(#readD'function'(
5'"formcidade"(#validate'(A
5' "formcidade" (#submit'function' event ( event#prevent&efault'(A
if'5'"formcidade"(#valid'((
(A
(A
Passo T, Monte o )!+AP(nvelope2 para invocar o serviço,
var soap+nv /
;<soap+nvelope mlnssi/NhttpFF'''.'!.orgFHOO#FQ:L6chema-instanceN ;
= ; mlnssd/NhttpFF'''.'!.orgFHOO#FQ:L6chemaN ;
= ; mlnssoap/NhttpFFschemas.mlsoap.orgFsoapFenvelopeFN>;
= ;<soap0od1>;
= ;<SetKeather mlns/NhttpFF'''.'ebserviceQ.+,N>;
= ;<@it1ame>;
= $%;Mcidade;(.val%(
= ;<F@it1ame>;
= ;<@ountr1ame>0raIil<F@ountr1ame>;
= ;<FSetKeather>;
= ;<Fsoap0od1>;
= ;<Fsoap+nvelope>;
Passso E, Monte a estrutura do comando W>aja0& para poder obter os dados do clima,
$.aGa%)
t1pe ;D56,;?
url "http://---.-ebser#ice'.net/$lobal-eather.asm'"?
headers ) N658D8ctionN
NhttpFF'''.'ebserviceQ.+,FSetKeatherN *?content,1pe ;tetFmlcharset/P,7-E;?
data,1pe ;ml;?
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 64/81
data: soapn#?
before*end function%( )
*?
complete function%( )V
*?
success function%data? status? req( )
*?
error function%request? status? error( )
*(
• $ Q/2 do @ebservice ) obtida do soapui-# 6emos 3ue acrescentar o 7E$&E/ 766P9
S.$P$ction-, conforme indicado no soapui-A
• &epois, temos 3ue enviar o soapEnv- 3ue formatamos, dentro da propriedade data-A
• $ propriedade beforeSend- ) um callbac<- 3ue será invocado imediatamente $6ES do
re3uest ser enviado# Podemos usar para e*ibir uma mensagem do tipo9 aguarde###-A• $ propriedade complete- ) um callbac<- 3ue será invocado 3uando o re3uest terminar#
Podemos usá;la para fechar a mensagem aguarde##-A
• $ propriedade success- ) um callbac<- 3ue será invocado 3uando o re3uest terminar e os
dados chegarem# $3ui, temos 3ue trabalhar o Y+2 e inserí;lo na :Q2= da página
resultado-A
• $ propriedade error- ) um callbac<- 3ue será invocado em caso de erroA
Passo @, Mensa#em de )a#uarde>>>2
Podemos usar o @idget loading-, do JuerD +obile, para e*ibir uma mensagem9
before*end function%( )
K.mobile.loadin$% Nsho-N? )
tet Ncarregando...N?
tet&isible true?
tetonl1 true?theme NbN?
html ;;
*(
* ?
complete function%( )
$.mobile.loading%NhideN(
*?
Passo X, Callbac: de sucesso,
$3ui temos 3ue fa4er o seguinte9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 65/81
V# .bter o tag :et@eather/esponse=-A
M# avegar nos seus tags internos 's tem um(A
L# Pegar o conteHdo te*tualA
O# 6ransformar o string em Y+2A
T# avegar no resultado e montar a listvie?A
.bter o tag :et@eather/esponse=-var response / $%data(.find%;SetKeather3esponse;(
avegar nos seus tags internos$%response(.each%function%( )
*(
Pegar o conteHdo te*tual9var resposta*trin$ / WX
$%response(.each%function%( )
resposta*trin$ L= K>this?.te't>?5
*(
6ransformar o String em Y+29resposta6tring / resposta6tring.replace%;Ylt;? ;<;(
resposta6tring / resposta6tring.replace%;Ygt;? ;>;(
var respostaQml / $.parseQ:L%resposta6tring(
avegar no resultado e montar a listvie?9
var result7tml R -A
5'urrent@eather, respostaYml(#each'function'(
result7tml \R ":li=2ocali4a%ão9 "
\ 5'this(#find'"2ocation"(#te*t'( \ ":li="A
'outros campos(
(A 5'"saida"(#html'result7tml(A
5'"saida"(#listvie?'(#listvie?'"refresh"(A
5'"formcidade"(#get'(#reset'(A
5#mobile#navigate' "resultado", transition9 pop, role9 "dialog" (A
$lgumas notas### Para come%ar, eu não colo3uei todos os campos, logo, você terá 3ue
fa4er isso# Em segundo lugar, estamos Jogando o resultado 'um conJunto de tags :li=-(
dentro de uma :ul= listvie?-# . comando de refresh- ) estranho, mas ) assim
mesmo9$%;Msaida;(.list#ie->?.listvie'%;refresh;(
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 66/81
omo a página onde está esta :ul= não está carregada, temos 3ue iniciali4ar a
listvie?-# &aí a primeira referência ao m)todo listvie?'(-# Então, temos 3ue invocar o
m)todo refresh- da listvie?, pois acabamos de inserir novos dados, daí a segunda
chamada do m)todo listvie?'(-#
2impamos o form com o comando9$%;Mformcidade;(.get%O(.reset%(
E navegamos 'por ]avascript( para o diálogo resultado-, cuJa listvie?- ns
preenchemos#
ão se es3ue%a de criar o callbac<- de erro!
Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /icão O
esta li%ão, estudaremos a onectividade#
Cai*e os ar3uivos correspondentes a esta aula# $ pasta completa está em9
https,<<===>dropbo0>com<sh<ur?ed.cs?@o=iy0<AA%jh:nys$i7mv74C!n6s1madl8B
O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaio
de /elo 0r est licenciado com uma icena Creative Commons Atri#uiãoCompartilha*4ual
5&( *nternacional! sso inclui# $e%tos& p'inas& 'r(icos e códi'o)(onte!
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 67/81
Conectividade. grande lance das aplica%>es mveis ) a conectividade# $plica%>es standalone-, 3ue não se
comunicam com nenhum Servi%o, são raras e, geralmente, de pouca utilidade em plataforma mvel#
6emos 3ue lembrar 3ue o usuário ) movel e está com uma plataforma computacional de grandepoder em seu bolso#
o início da 1nternet mvel '@$P(, a grande novidade era acessar seu e;mail ou então navegar em
?ebsites @$P# 7oJe em dia, podemos fa4er muito mais do 3ue isso#
Ar?uitetura tSpica de conectividade
Casicamente, temos dois tipos de comunica%ão9 onsumo de Servi%os e Push-# . onsumo de
servi%os ) 3uando o dispositivo envia um /e3uest a um Servidor na @eb, o 3ue, geralmente, ) feito
utili4ando;se 766P, e recebe uma resposta# . @eb Service pode ser S.$P ou 766P puro, e o
formato de dados pode ser ]S. ou Y+2#
Consumo usando F11P
Podemos consumir servi%os utili4ando 766P puro, e o JuerD nos fornece vários m)todos para isto9
Get de dados a partir de um servidor,
5#get':url=-, :callbac<=(
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 68/81
5'"button"(#clic<'function'(
5#get'"demoItest#asp",3unctiondata&statusL
alert'"&ata9 " \ data \ "jnStatus9 " \ status(A
(A
(A
Post de dados para um servidor,
5#post'Q/2,data,callbac<(A
5'"button"(#clic<'function'(
5#post'"demoItestIpost#asp",
name9"&onald &uc<",citD9"&uc<burg"
,
function'data,status(
alert'"&ata9 " \ data \ "jnStatus9 " \ status(A
(A
(A
Get de um objeto D!+4 a partir de um servidor,
5#get]S.' url , data , success (
5#get]S.' "aJa*test#Json", function' data (
var items R A
5#each' data, function' <eD, val (
items#push' ":li idR" \ <eD \ "=" \ val \ ":li=" (A
(A
5' ":ul=",
"class"9 "mD;ne?;list",html9 items#Join' "" (
(#append6o' "bodD" (A
(A
E temos tamb)m o m)todo $Ja*-, 3ue ) mais completo9
$.aGa%)
t1pe ;D56,;?
url 'sPrl?content,1pe ;tetFml;?
data,1pe ;ml;?
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 69/81
data soap3equest?
success process6uccess?
error process+rror
*(
Sempre temos 3ue passar callbac<s- para os eventos, al)m de testarmos o status da resposta9
http9???#?L#orgProtocolsrfcMNVNrfcMNVN;secV#html
.BB +K
. /e3uest foi bem sucedido# . conteHdo da resposta estará de acordo com o campo ontent;
tDpe-#
B Moved PermanentlyB. 7ound
B !ee +ther
X necessário fa4er um redirect- para outra Q/2, informada no 7E$&E/ da resposta#
BO 4ot Modi3ied
. /ecurso 3ue você está tentando obter não sofreu modifica%>es, logo, o 3ue está em seu cache- )
válido# 1sso depende do conteHdo do E6ag e da data de modifica%ão, e você pode controlar isso comos tags no /e3uest9 if;none;match- e if;modified;since-#
OBB %ad *e?uest
Seu re3uest não foi entendido pelo Servidor# Gerifi3ue o formato e os 7E$&E/S#
OB $nauthoriRed
. acesso ao /ecurso e*ige autentica%ão# $ resposta deve incluir um 7E$&E/ @@@;$uthenticate- 3ue cont)m um challenge- a ser devolvido no pr*imo re3uest# . liente pode
repetir o re3uest incluindo o 7E$&E/9 $uthori4ation-# Se o /e3uest original Já incluiu o
7E$&E/ $uthori4ation-, então ) uma indica%ão 3ue o usuário não tem direito de acesso ao
/ecurso#
OB 7orbidden
. Servidor entendeu o re3uest, por)m não vai enviar o recurso# este caso, não adianta incluir o
7E$&E/ $uthori4ation- e o /e3uest não deve ser repetido#
OBO 4ot 7ound
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 70/81
. /ecurso não foi encontrado# Pode ser um problema de Q/1, indicando 3ue o nome ou a
identifica%ão do /ecurso esteJam inválidos#
OBT Method 4ot Allo=ed
. +)todo 766P 3ue você está enviando em seu /e3uest não ) aceito pelo Servidor para este
/ecurso# Por e*emplo, você pode estar tentando obter um recurso com E6, mas ele s está
disponível via P.S6#
OBE 4ot Acceptable
uando criamos um /e3uest, podemos especificar 3uais tipos de resposta aceitaremos, por
e*emplo9 Y+2, ]S., 76+2 ou 6EY6# Se o Servidor concluir 3ue não pode enviar o /ecurso
na3uele formato, ele retorna um erro ON#
T (rro de servidor
Este tipo de erro ) retornado devido a um problema no Servidor# Pode ser 3ue tenha dado uma
e*ception, ou mesmo 3ue o Servi%o esteJa fora do ar#
(0ercScio
Gamos fa4er um e*ercício breve 'guiado( para consumir um servi%o via 766P# Gamos verificar deonde ) nosso Endere%o 1P#
Para come%ar9
• cordova create geoip com#e*emplo#geoip geoip
• cordova platform add android
&epois, crie uma página 76+2 inde*#html- de acordo com as orienta%>es da Sessão L, página T#
2embre;se de copiar os ar3uivos do JuerD- e do JuerD +obile- para dentro da pasta Js- 'estão
dentro da sessão L em J3uerD;mobile-(# E a SS do JuerD +obile para a pasta css-#
1mporte os proJetos geoip- e geoip;ordova2ib- para sua @or<space# '1nport $ndroid
E*isting $ndroid ode###-(# Se der erro no proJeto geoip-, abra o Cuild Path- e adicione o proJeto
geoip;ordova2ib-#
2embre;se de e*cluir os /esource filters- para 3ue os ar3uivos ??? apare%am#
. 3ue você vai fa4erB Gai acessar uma $P1 /ES6 3ue retorna um ]S.# Pode usar o m)todo
5#get]S., do JuerD9
console.log%;ZZZZZZZZZZZZ 7aIendo o request;(
$.get65% ;httpFFfreegeoip.netFGson;? function% data ( )
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 71/81
console.log%;ZZZZZZZZZZZZ 9ados recebidos ; ]
= 65.stringif1%data((
$%;Msaida;(.tet%65.stringif1%data((
*(
Eis o resultado esperado9
. servi%o freegeoip#net- retorna as informa%>es geográficas de um endere%o 1P, e pode fa4ê;lo emformato ]S. ou Y+2# Eis a url9
http9freegeoip:formato=:endere%o ip=
. cdigo de acesso ao @ebservice deve ser incluído no evento ondevicereadD-, do ordova#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 72/81
1rabalhando o D!+4
$s respostas ]S. são fáceis de trabalhar em ]avascript# Elas Já são .bJetos e podemos usar suas
propriedades e m)todos# . obJeto recebido foi mais ou menos esse9
)
;ip;;#ER.R.#!.";?
;countr1_code;;03;?
;countryMname;;0raIil;?
;region_code;;;?
;region_name;;;?
;cit1;;;?
;Iipcode;;;?
;latitude;-#O?
;longitude;-""?
;metro_code;;;?
;area_code;;;
*
2ogo, poderíamos ter trabalhado os valores individualmente9
console#log'" País9 " \ data>country6name(A
E podemos usar o m)todo ]S.#stringifD'( para transformar um .bJeto em String#
1rabalhando com M/
6rabalhar com Y+2 em plataforma mvel não ) fácil# em todos os recursos estão disponíveis# Se
você tiver oportunidade, evite trabalhar com Y+2 a 3ual3uer custo!
1sto posto, vamos ver com trabalhar com Y+2 no ambiente mvel com JuerD# . servi%o
freegeoip- tamb)m permite obter os dados em Y+2# Por e*emplo9
Podemos trabalhar isso de maneira simples9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 73/81
$.get%;httpFFfreegeoip.netFml;? function% data ( )
console.log%;$$$$ ; = $%N@ountr1ameN?data(.tet%((
*
(
Qsamos o prprio seletor do JuerD para pegar o elemento ountrDame- de dentro da respostaY+2, 3ue estava na variável data-# Qsamos o m)todo te*t'(- para obter o conteHdo do 6ag#
Poderíamos ter navegado em todos os tags 3ue estão dentro do tag inicial ':/esponse=( dessa
forma9
$.get%;httpFFfreegeoip.netFml;? function% data ( )
$%;3esponse;? data(.each%function%( )
console.log%;\\\\\\\\\\\\\\\\\\;(
console.log%;2p ; = $%this(.find%;2p;(.tet%((
console.log%;@ountr1@ode ; = $%this(.find%;@ountr1@ode;(.tet%((
console.log%;@ountr1ame ; = $%this(.find%;@ountr1ame;(.tet%((
*(
Qsamos o m)todo each'(- dentro do tag /esponse-, para navegar em todos os tags encontrados#
&epois, para cada tag encontrado, mostramos o seu conteHdo te*tual#
. find'(- tem 3ue ser e*ecutado no tag superior#
!+AP
S.$P ) um protocolo de troca de informa%>es, baseado na invoca%ão remota de opera%>es
'm)todos(# Ele necessita de um formato específico de mensagem, descrito em um ar3uivo @S&2#
$ntes de mais nada, instale o programa soapui-9
http9???#soapui#orgetting;Startedinstalling;on;linu*uni*#html
Por 3ue você vai precisar do S.$PQ1B Por3ue você terá 3ue montar o S.$P Envelope na mão!
Gamos criar um ProJeto S.$P no S.$P Q1 e usar o servi%o alculator-# Eis o endere%o do
@S&29
http9soaptest#parasoft#comcalculator#?sdl
Gamos invocar a soma 'add(9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 74/81
Eis a /esposta9
:soap9Envelope *mlns9*siR"http9???#?L#orgMVY+2Schema;instance"
*mlns9*sdR"http9???#?L#orgMVY+2Schema"
*mlns9soapR"http9schemas#*mlsoap#orgsoapenvelope"=
:soap9CodD= :n9add/esponse *mlns9nR"http9???#parasoft#com?sdlcalculator"=
:n9/esult *si9tDpeR"*sd9float"=U#:n9/esult=
:n9add/esponse=
:soap9CodD=
:soap9Envelope=
Como 3aRer isso em uma app
6emos 3ue montar o S.$P Envelope, enviar usando P.S6 e depois analisar a resposta#
Montando o !+AP (nvelope
:soapenv9Envelope *mlns9soapenvR"http9schemas#*mlsoap#orgsoapenvelope"
*mlns9calR"http9???#parasoft#com?sdlcalculator"=
:soapenv97eader=
:soapenv9CodD=
:cal9add=
:cal9*=T:cal9*=
:cal9D=M:cal9D=
:cal9add=
:soapenv9CodD=
:soapenv9Envelope=
6emos 3ue colocar isso dentro de um String9
var soapEnv R ":soapenv9Envelope *mlns9soapenvRhttp9schemas#*mlsoap#orgsoapenvelope"
\ " *mlns9calRhttp9???#parasoft#com?sdlcalculator="
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 75/81
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 76/81
\ ":cal9D="
\ M
\ ":cal9D="
\ ":cal9add="
\ ":soapenv9CodD="
\ ":soapenv9Envelope="A
5#aJa*'
tDpe9 "P.S6",
url9 "http9?sV#parasoft#comgluecalculator",
headers9 S.$P$ction9 add ,
content6Dpe9 "te*t*mlAcharsetRQ60;[",
data6Dpe9 "*ml",
data9 soapEnv,
success9 function'data, status, re3( console#log'"______ .K9 " \ status(A
5'"saida"(#te*t'5'"/esult",data(#te*t'((A
,
error9 function're3uest, status, error(
console#log'"_____ E//.9 " \ status \ " 9 " \ error(A
(A
E o resultado9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 77/81
4oti3icaçesotifica%>es Push-, para $ndroid e i.S, são providas por seus respectivos servi%os de
notifica%>es9
oogle loud +essaging
$pple Push otification Service
@indo?s Phone Push otification Service
$ conectividade Push- funciona sem necessidade do usuário acionar uma aplica%ão# Em seu
dispositivo, um Servi%o abre uma cone*ão com o Servi%o de otifica%>es na uvem, e fica
aguardando# uando chega uma notifica%ão, ela vem com o id- da aplica%ão, logo, o Servi%o de
bac<ground consegue enviar a mensagem para a aplica%ão, mesmo 3ue ela não esteJa sendo
e*ecutada#
$o receber notifica%>es, o dispositivo e*ibe uma lista9
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 78/81
$o clicar em uma notifica%ão, a aplica%ão correspondente será aberta, no callbac<- de tratamentode notifica%>es# Ela poderá fa4er várias coisas, por e*emplo abrir uma Janela com a mensagem
nova#
%ad#e number
o i.S ) possível adicionar um Cadge number- ao ícone da aplica%ão, geralmente mostrando
3uantos novos itens estão disponíveis9
os dispositivos $ndroid isso não ) possível, pois a $P1 não permite alterar o ícone de um
aplicativo#
Por)m, se for absolutamente necessário e*ibir esse tipo de informa%ão, você pode criar um @idget
para o usuário $ndroid#
Em aparelhos Samsung, a interface 6ouch@i4 permite criar Cadge umbers# $ desvantagem ) 3ue
s funciona com aparelhos Samsung#
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 79/81
+ processo de noti3icação
E*iste todo um processo para poder enviar notifica%>es de push- para os aparelhos# Para come%ar,
) de bom tom perguntar ao usuário se o aplicativo pode lhe enviar notifica%>es de push-# &epois, )
necessário registrar seu aplicativo nos servi%os de push- 3ue deseJa utili4ar9 +, $Ps ou
@PPS #
Em segundo lugar, você terá 3ue criar uma aplica%ão 3ue enviará as mensagens ao Servidor de
otifica%>es deseJado# Essa aplica%ão se registrará no Servidor de otifica%ão 'usando as
credenciais 3ue você registrou(, e enviará as mensagens para os usuários 3ue se registraram com a
aplica%ão# ote 3ue ele não enviará as mensagens diretamente aos aparelhos, mas para o Servidor
do servi%o de notifica%>es apropriado#
0inalmente, sua aplica%ão deverá estar preparada para receber notifica%>es de push-, fornecendo
um callbac<- a ser e*ecutado 3uando as mesmas chegarem#
$s mensagens de notifica%>es não possuem garantia de entrega#
!e?uncia de passos para noti3icaçes
Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - /icão T
Cem, chegou a hora do nosso e*ercício final!
Cai*e os ar3uivos correspondentes a esta aula# $ pasta completa está em9
https,<<===>dropbo0>com<sh<ur?ed.cs?@o=iy0<AA%jh:nys$i7mv74C!n6s1madl8B
O trabalho "Criação de aplicações Móveis com PhoneGap e jQuery Mobile" de Cleuton Sampaio
de /elo 0r est licenciado com uma icena Creative Commons Atri#uiãoCompartilha*4ual
5&( *nternacional! sso inclui# $e%tos& p'inas& 'r(icos e códi'o)(onte!
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 80/81
PrVtica 3inal
Gocê vai criar uma aplica%ão Phoneap 'ordova( com JuerD +obile para obter os dados das
a%>es da oogle, utili4ando o @ebservice S.$PY+29 Stoc< uote-9
• @S&29 http9???#?ebservice*#netstoc<3uote#asm*B@S&2A
• Site9 http9???#?ebservice*#com?s@S&etails#asp*B$61&RMk@S1&RWA
$ app s terá uma Hnica page-, com duas situa%>es possíveis9
$o clicar no botão $tuali4ar-, deverá ser feito um re3uest $Ja* para o @ebservice, 3ue preencherá
a :ul= listvie?- 3ue está colapsada, com todos os dados da a%ão#
+ Iebservice&epois de acessar com o soapui-, consegui obter o re3uest e o response9
*e?uest,
P.S6 http9???#?ebservice*#netstoc<3uote#asm* 766PV#V
$ccept;Encoding9 g4ip,deflate
ontent;6Dpe9 applicationsoap\*mlAcharsetRQ60;
[AactionR"http9???#?ebserviceY#E6etuote"
ontent;2ength9 MWV
7ost9 ???#?ebservice*#net
onnection9 Keep;$live
Qser;$gent9 $pache;7ttplientO#V#V 'Java V#T(
:soap9Envelope *mlns9soapR"http9???#?L#orgMLTsoap;envelope"
8/10/2019 Curso de Criação de Apps Móveis com PhoneGap e jQuery Mobile - Kit de sobrevivência
http://slidepdf.com/reader/full/curso-de-criacao-de-apps-moveis-com-phonegap-e-jquery-mobile-kit-de-sobrevivencia 81/81
*mlns9?ebR"http9???#?ebserviceY#E6"=
:soap97eader=
:soap9CodD=
:?eb9etuote=
:!;;.ptional9;;=
:?eb9sDmbol=..2:?eb9sDmbol= :?eb9etuote=
:soap9CodD=
:soap9Envelope=
*esponse,
:soap9Envelope *mlns9soapR"http9???#?L#orgMLTsoap;envelope"
*mlns9*siR"http9???#?L#orgMVY+2Schema;instance"
*mlns9*sdR"http9???#?L#orgMVY+2Schema"= :soap9CodD=
:etuote/esponse *mlnsR"http9???#?ebserviceY#E6"=
:etuote/esult=:!
&$6$:Stoc<uotes=:Stoc<=:SDmbol=..2:SDmbol=:2ast=TWM#TT:2ast=:&ate=WMLM
VO:&ate=:6ime=VM9MOpm:6ime=:hange=;
O#UM:hange=:.pen=TWT#:.pen=:7igh=TWN#NT:7igh=:2o?=TW#[N:2o?=:Golume=[V
WVU:Golume=:+<tap=O#[C:+<tap=:Previouslose=TWU#MU:Previouslose=:Percentage
hange=;#UW8:Percentagehange=:$nn/ange=OMV#WVM ;
NVT#TT:$nn/ange=:Earns=VW#L:Earns=:P;E=L#WT:P;E=:ame=oogle1nc#:ame=:Stoc<=:Stoc<uotes==:etuote/esult=
:etuote/esponse=
:soap9CodD=
:soap9Envelope=
omo no e*ercício da sessão anterior, o miolo- da resposta vem dentro de um &$6$, logo, ) um
te*to# Gocê precisa transformá;lo em Y+2 para poder obter todas as propriedades#
Achou moleRaEntão fa%a para O a%>es9
• +S069 +icrosoftA