desenvolvendo aplicações multiplataforma com o xdk

8/19/2019 Desenvolvendo Aplicações Multiplataforma Com o XDK

http://slidepdf.com/reader/full/desenvolvendo-aplicacoes-multiplataforma-com-o-xdk 1/100

1

#Desenvolvendo Aplicações Multiplataforma com o XDK



2


Sumário

Introdução

Apresentação do XDK. Construindo Appsmultiplataforma com o HTML5. Cordova.

Explorando a FerramentaApresentação do XDK e seus recursos.

LicençaEntendendo a licença do XDK.

Explorando os DemosEplorando os Demos do XDK.

Aba PROJECTEplorando a a!a "#$%ECT&. Criando'(erenciando e importando pro)etos.Adicionando e (erenciando plu(ins. "ro)etosCordova.

Aba DE!ELOPEplorando a a!a DE*EL$". Con+ecendo oeditor de c,di(o. Desenvolvendo a App deforma visual. -sando Templates.

Depurando e Testando

Eplorando a a!a EM-LATE. -tiliando oemulador. -sando o /ntel App "revie0.Eplorando as a!as TE&T e DE1-2.De!u(ando uma App. Testando a App emdispositivos reais.

Construindo e Publicando a App/nformaç3es para construir e pu!licar a App

nas lo)as da Apple' 2oo(le e Microsoft."u!licando a App na lo)a do C+rome.

Aplicaç"es com Dados LocaisCriando aplicaç3es com acesso a dados locais.

Aplicaç"es Consumindo #eb er$icesCriando aplicaç3es 4ue consumam os serviçosde um 0e! service.

Desen$ol$imento de Jo%os/ntrodução ao desenvolvimento de )o(os como XDK.



3


Diga não à pirataria

O leitor &ue ad&uiriu o e'boo( le%almente no site AlbertEi)e*CO+ poder,imprimir o conte-do para seu uso pessoal*

A c.pia do conte-do do li$ro sem autori/ação con0i%ura crime* Al1m decontribuir para a criminalidade2 a c.pia ile%al desestimula o autor de reali/arno$os trabal3os* Todos saem perdendo com a pirataria*



4


Introdução

$ XDK uma /DE da /ntel. Ele foidesenvolvido com o o!)etivo de a)udar odesenvolvedor a criar Apps 4ue possam serpu!licadas nas principais lo)as de aplicaç3es e4ue possam rodar na (rande maioria dosdispositivos eistentes.

As aplicaç3es feitas com o XDK são +6!ridas'ou se)a' são aplicaç3es feitas em HTML5 4uepossuem a capacidade de acessar os recursosnativos do dispositivo. "ara isso ser7 utiliadauma 8ponte9 entre a aplicação HTML5 e osrecursos do dispositivo. Essa 8ponte9 umcon)unto de componentes 4ue podemosc+amar de frame0or:.

/ma(ine uma p7(ina feita em HTML5 comal(um c,di(o em %ava&cript. "ara mel+orar aapar;ncia da p7(ina' utiliar6amos C&&.1asicamente isso 4ue faremos para 4uenossa App rode em todos os dispositivosm,veis.

A Ferramenta XDK

$ pro!lema 4ue não teremos acesso aosrecursos do dispositivo' por 4uest3es dese(urança. "ara isso utiliaremos a tal 8ponte9. "ensando nisso a comunidade criou o"+one2A"' um pro)eto <==> open source.

Esse frame0or: foi desenvolvido pela ?ito!i'

4ue foi comprada pela Ado!e. "osteriormentefoi doado para a Apac+e e c+amado de Apac+eCall!ac:. Como o nome era muito (enrico' foirenomeado para Apac+e Cordova. $ "+one2apa(ora uma distri!uição Cordova. @ com ele4ue poderemos acessar os recursos dodispositivo tais como a cmera' contatos'notificaç3es' etc.



5


Introdução

$ XDK a ferramenta 4ue vai possi!ilitar odesenvolvimento das Apps +6!ridas. Mas nãoapenas isso' ele permite 4ue voc; desenvolvade forma visual' realie testes utiliando umaferramenta instalada no dispositivo' de!u(ue aaplicação diretamente no dispositivo' crie seupacote para pu!licação nas lo)as e muito mais.

Alm das aplicaç3es +6!idas' poss6vel criarApps HTML5 nativas e at mesmo importarpro)etos HTML5 desenvolvidos anteriormente.

@ poss6vel instalar o XDK no Bindo0s' Linu e$&X.

$ XDK cumpre a promessa 8escreva uma ve'

rode em 4ual4uer lu(ar9' em in(l;s 8write-once, run-anywhere”.

As Apps constru6das no XDK rodam numwebview nave(ador em!utido e estãolimitadas aos recursos do 0e!vie0 mais acom!inação dos plu(ins utiliados.

A Ferramenta XDK

$ 0e!vie0 tem menos recursos 4ue um!ro0ser. A vanta(em a capacidade de serestendido atravs dos plu(ins de c,di(o nativodo Cordova "+one2ap.



6


Introdução

$ 4ue um aplicativo multiplataformaF @a4uele 4ue c+e(a ao usu7rio atravs de4ual4uer dispositivo 4ue ele possa utiliar'onde 4uer 4ue se encontre.

$K. E por4ue usar o HTML5F 1om' eistemv7rios dispositivos no mercado' com suas

respectivas plataformas. "ara resumir' vamoscitar as principais Android' i$& e Bindo0s"+one. /sso si(nifica tr;s lin(ua(ens depro(ramação para aprender' cada uma comseus recursos

Android G %ava i$& G $!)ective C Bindo0s "+one G C ou *isual 1asic

/ma(ine então criar uma App para as tr;splataformasI

Eistem alternativas 4ue se apresentam paracriar as Apps utiliando uma s, /DE.

Construindo Apps Multiplataforma com HTML5

-ma delas o Delp+i J #AD &tudio JAppMet+od da Em!arcadero. Com essa /DE poss6vel criar Apps para Android e i$&' almde aplicaç3es des:top para Bindo0s e $&X.?o entanto' ele não tem suporte para oBindo0s "+one e tem o preço alto. &em falardas constantes atualiaç3es' 4ue forçam o

desenvolvedor a pa(ar pelos up(rades.

$utra alternativa o Xamarin. &e odesenvolvedor instalar o Xamarin no *isual&tudio' conse(uir7 criar Apps para as tr;splataformas. "ara isso criar7 um pro)eto ecompartil+ar7 parte do c,di(o. "ara 4ue asApps se)am fieis aos recursos visuais de cadaplataforma' o desenvolvedor dever7 criar

pro)etos distintos para desen+ar as telas.Eiste uma alternativa para isso' 4ue usar oXamarin.orms. Dessa forma' o desenvolvedorconse(ue desen+ar a tela apenas uma ve'mas eistem limitaç3es. Eiste ainda a4uestão do preço' 4ue co!rado porplataforma utiliada e por per6odo.



7


Introdução

Eistem ainda outras opç3es' mas as 4uemencionamos anteriormente são as maispromissoras para 4uem dese)a construiraplicaç3es para as tr;s plataformas principais.

Como tudo na vida' utiliar cada uma dasopç3es tem seus pr,s e contras.

A opção 4ue vamos apresentar nesse livro criar as Apps usando HTML5 com os plu(ins doCordova. "ara facilitar nossa vida' vamosutiliar o XDK' a /DE feita pela /ntel.

-ma vanta(em de usar o HTML5 4ue voc;não se preocupar7 em aprender as lin(ua(ensutiliada por cada plataforma. Alm disso' não

precisar7 con+ecer detal+es das A"/s de cadaplataforma.

$utra vanta(em interessante 4ue sua Appvai funcionar nos dispositivos novos 4uec+e(am ao mercado.


-m dos (randes desafios de criar aplicaç3esmultiplataforma o taman+o das telas.

uando a Apple cria um dispositivo novo' elapensa nas Apps 4ue serão criadas para essedispositivo e como tais Apps serão feitasutiliando a sua /DE' o XCode. @ prov7vel 4ue

pense tam!m na compati!ilidade com seusdemais dispositivos.

?o entanto' a Apple não vai se preocupar coma compati!ilidade dos dispositivos feitos paraAndroid ou para o Bindo0s "+one.

Ca!e ao desenvolvedor 4ue cria Apps paratodas as plataformas se preocupar com isso.

$ taman+o da tela apenas uma das v7riaspreocupaç3es 4ue um desenvolvedor ter74uando for criar uma App multiplataforma.Eistem ainda os demais recursos cmera'acelermetro' etc.



8


Introdução

-ma App multiplataforma deve tirar proveitodesses recursos e ainda se preocupar com aeperi;ncia do usu7rio. $ usu7rio espera 4ueuma App feita para Android se comporte comouma App feita para Android. Como assimF

Eistem al(uns padr3es em cada plataforma.

"or eemplo' as a!as de uma App para i$&aparecem na parte inferior da tela' ao passo4ue numa App feita para Android aparece naparte superior da tela.

&e o desenvolvedor fier uma Appmultiplataforma e deiar as a!as na parteinferior da tela' os usu7rios do i$& não vãoestran+ar' mas os usu7rio do Android verão

al(o diferente' fora do padrão. Dessa forma' ousu7rio não estaria tendo uma !oa eperi;nciaao utiliar essa App.

As Apps feitas em HTML5 não estão limitadasa serem ei!idas dentro de um !ro0ser.


@ poss6vel empacotar o c,di(o HTML5 edisponi!iliar a App para implantação' como sefosse uma App nativa.

Dessa forma' ser7 poss6vel utiliar os mesmoscanais de distri!uição e monetiação das Appsnativas. Alm disso' podeNse utiliar os

mesmos recursos de lançamento e instalação.A App não vai rodar numa )anela do !ro0serdo dispositivo. Em ve disso' rodar7 em um0e!vie0 de tela c+eia fullscreen' comcontrole total so!re o estado real da tela eso!re as capacidades do dispositivo.



9


Introdução

A App feita em HTML s, ser7 multiplataformase as plataformas de destino suportarem todasas A"/s utiliadas. Dessa forma' preciso teratenção a al(uns detal+es' como a utiliaçãode c,di(o %ava&cript.

?ão por4ue um c,di(o escrito em

%ava&cript 4ue ele vai rodar em 4ual4uerplataforma. &e um c,di(o feito em %ava&criptfier uso de uma A"/ espec6fica' a App nãoser7 multiplataforma.

-ma A"/ importante e multiplataforma oApac+e Cordova. Ele +a!ilita o acesso aosrecursos do dispositivo G cmera'acelermetro' (eolocaliação' etc G de forma

consistente em v7rias plataformas edispositivos.

$ Cordova fornece acesso paraimplementaç3es nativas em cada plataforma.As Apps feitas com o Cordova devem serempacotadas como uma App +6!rida.


$u se)a' o c,di(o feito em HTML port7til' opacote não. $ pacote feito para cadaplataforma.

E a6 4ue entra o XDK. Com ele poss6veldesenvolver a aplicação e tam!m criar ospacotes para cada plataforma facilmente.



10


Introdução

E como a)ustar a aplicação para as telas dev7rios dispositivos usando HTMLF Eistemv7ria formas de faer isso.

4sando Escala 5 Dimensionamento

-ma forma simples de controle dimensionar

os componentes e fontes de acordo com otaman+o da tela e' opcionalmente' a)ustar opreenc+imento em torno dos componentes."ara tra!al+ar dessa forma' o leitor pode usarunidades relativas do C&& ou utiliar umframe0or: responsivo como o )uerO Mo!ileou o &enc+a Touc+ para faer o tra!al+opesado.


Ima%ens Responsi$as

As ima(ens podem ei(ir mais do 4ue umsimples dimensionamento. Ps vees dese)7vel cortar uma ima(em de maneiradiferente ou mesmo carre(ar uma ima(emcom resolução maior ou menor.

La6out Responsi$o

&e a App formada por v7rias seç3es' talvese)a interessante pensar num laOout fluido em4ue voc; rearran)a e as vees escondeal(uns elementos. Eistem al(uns padr3espatterns de laOout e de nave(ação 4uepodem ser estudados e implementados para

esse fim.



11


Introdução

uando voc; mencionar 4ue est7 criando umaaplicação 0e! para celular' al(unsdesenvolvedores vão pensar no C+rome ou no&afari rodando a aplicação e lo(o vão ima(inar4ue isso não vai dar certo.

$ fato 4ue uma Be! App realmente roda

num !ro0ser' mas uma Be!*ie0 App não.Como assimF

-ma aplicação 0e! Be! App um soft0are4ue roda num !ro0ser e criada numalin(ua(em de pro(ramação suportada pelo!ro0ser' como a com!inação HTML Q C&& Q%ava&cript. @ necess7rio um !ro0ser pararenderiar a aplicação.

2eralmente são aplicaç3es interativas 4ue nãodependem de um servidor para atualiar avie0. "ode ser uma calculadora' um )o(o' etc.

Web App ou WebView App?

-ma Be!*ie0 seria uma Be! App HTML5+6!rida' feita para rodar um dispositivo m,vel.Ela ser7 eecutada dentro de um controleBe!*ie0 e não num !ro0ser.

$ termo Be!*ie0 tem ori(em na !i!liotecaincorporada nos sistemas operacionais para

dispositivos m,veis. $ nome dessa !i!liotecano i$& -/Be!*ie0. ?o Android e noBindo0s "+one con+ecida como Be!*ie0.

As caracter6sticas e capacidades do Be!*ie0podem variar dependendo da plataforma' daversão do sistema operacional e at mesmo dofa!ricante do dispositivo. "or eemplo' oBe!*ie0 de um dispositivo Android da

&amsun( pode se comportar de formadiferente em um dispositivo Android da HTC.

"odemos faer uma analo(ia com o 4ue ocorreentre irefo' C+rome e /nternet Eplorer.



12


Introdução

"ortanto' para ficar claro' sua App HTML5 vairodar dentro de um Be!*ie0 nativo e nãodentro de um !ro0ser do dispositivo. ?ão setrata de uma App compilada. TrataNse de umaaplicação HTML5 4ue ser7 interpretada eprocessada pelo Be!*ie0 nativo dodispositivo.


?a ima(em a!aio o!servamos ofuncionamento de uma Be! App rodandodentro de um !ro0ser no dispositivo.

$ acesso Rs !i!liotecas do dispositivo feitopelo !ro0ser.



13


Introdução

?a ima(em a!aio podemos o!servar ofuncionamento de uma App H6!rida.

Eistem duas diferenças principais entre o!ro0ser e o 0e!vie0


< N Localiação do motor de renderiação.S N Capacidade de estender a A"/ %ava&cript.

E o 4ue isso si(nificaF



14


Introdução

$ Motor de #enderiação o intrprete doHTML' %ava&cript e C&& est7 contido dentrodo !ro0ser e est7 em!utido dentro dofirm0are do dispositivo m,vel.

Assim sendo' poss6vel atualiar esseintrprete 4uando o !ro0ser do dispositivo

atualiado' pois ele vir7 )unto com o !ro0ser./sso pode ser til para uma Be! App' mas nãofar7 diferença para uma Be!*ie0 App' 4ueutilia o intrprete do firm0are.

A capacidade de estender a A"/ %ava&cript deuma Be!*ie0 App via plu(ins Cordovasi(nifica 4ue as Apps terão acesso a dados esensores do dispositivo. /sso não permitido

numa Be! App 4ue roda num !ro0ser.

"ortanto' para construir uma aplicação HTML4ue rode num dispositivo e possa serpu!licada nas lo)as' voc; dever7 criar umaBe!*ie0 App.


Eistem al(uns pro!lemas relacionados aoBe!*ie0 do Android. ?a verdade' essaplataforma a 4ue apresenta maioresdesafios. A naturea a!erta e fle6vel doAndroid ao mesmo tempo uma !;nção euma maldição' pois ela permite muitasvariaç3es.

Eistem al(umas soluç3es para resolver ospro!lemas do Be!*ie0 do Android. -ma delas o Cross0al:' 4ue um Be!*ie0customiado. $ o!)etivo dele normaliar ocomportamento e as caracter6sticas dosdispositivos Android U..



15


Explorando a Ferramenta

$ XDK possui uma srie de a!as' conformeo!servado na ima(em a!aio.

Aba PROJECT

Essa a!a deve ser utiliada para criar um novopro)eto' alterar o pro)eto atual ou importar

uma aplicação HTML5 )7 eistente. Essa a!alista todos os pro)etos criados ou importadospelo XDK.

$ pro)eto ativo ficar7 realçado e ser7 nele 4ueas demais a!as realiação suas operaç3es.

Aba DE!ELOP

Essa a!a suporta v7rias vis3es vie0s. /sto 'voc; pode visualiar o editor de tetos etra!al+ar diretamente nele ou então desen+ara tela de forma visual.

Visão Geral

?essa a!a tam!m poss6vel tra!al+ar com odesenvolvimento de )o(os utiliando o painel2ame Asset Mana(er. Alm disso' eiste aseção Be! &ervices' 4ue fornece acessor7pido e f7cil a uma coleção de A"/s de Be!&ervices dispon6veis na nuvem.

Aba E+4LATE

?essa a!a ser7 poss6vel c+ecar o laOout e asfuncionalidades de sua aplicação numa coleçãode dispositivos virtuais. $ simulador !aseadono emulador Apac+e #ipple.

@ poss6vel ainda clicar no !otão De!u( o 4uetem o 6cone de um inseto para a!rir o CDT

2oo(le C+rome Developer Tools. Com issoser7 poss6vel de!u(ar o c,di(o %ava&cript' asre(ras C&& e os elementos D$M.



16



Aba TET

@ poss6vel copiar o aplicativo para umdispositivo real atravs da rede' sem plu(ar oca!o -&1. Com isso ser7 poss6vel realiar umainspeção remota na aplicação. "ara facilitar ainspeção remota voc; dever7 !aiar e instalar

uma aplicação no dispositivo. $ nome dessaaplicação /ntel App "revie0. Ela est7dispon6vel para as tr;s plataformas Android'i$& e Bindo0s "+one.

"rovavelmente seria mel+or c+amar essa a!ade "#E*/EB' pois ela permite uma visão daApp no dispositivo real' mas possui funç3eslimitadas de depuração e testes.

"ara os dispositivos Bindo0s' essa a!a amel+or opção. "ara os dispositivos Android ei$&' temos a a!a DE1-2.

Visão Geral

Aba DE748

Com essa a!a ser7 poss6vel depurar aaplicação sem precisar construir e instalar amesma.

A vanta(em dessa a!a em relação a a!a TE&T

4ue' com ela' poss6vel usar o CDT 2oo(leC+rome Developer Tools para depuraçãoremota. Assim poss6vel de!u(ar o c,di(o%ava&cript completo com pontos deinterrupção !rea: points.

Essa a!a s, funciona com os dispositivosAndroid UQ e Apple i$& V.<Q. $ dispositivoprecisa estar conectado via -&1.

#D l d A li õ M l i l f XDK



17



Aba PROFILE

?essa a!a ser7 poss6vel monitorar os recursosda aplicação' identificar C"- e caracter6sticasda mem,ria.

Essa a!a s, funciona nos dispositivos Android

UQ.A4ui ser7 poss6vel !aiar o c,di(o HTML5 parao dispositivo Android conectado via -&1'eecutar e pe(ar estat6sticas relacionadas acomo o c,di(o %ava&cript est7 utiliando a C"-e a mem,ria do dispositivo.

-m m,dulo de de!u( especial ser7 copiado

para o dispositivo App "revie0 Cross0al:.

Visão Geral

Aba 74ILD

Antes de implantar deploO a App precisoconstru6Nla !uid.

@ nessa a!a 4ue o pacote da sua App ser7constru6do para posteriormente ser pu!licado

em cada lo)a.$ processo de construção efetuado nanuvem' para 4ue não se)a preciso instalar econfi(urar o &DK para cada plataforma dedestino.

A pu!licação na lo)a ficar7 a car(o dodesenvolvedor' 4ue dever7 se(uir as re(ras

impostas por cada empresa. *eremos maisdetal+es so!re o processo de pu!licação naslo)as posteriormente.

#D l d A li õ M lti l t f XDK



18



"ara esse primeiro contato esperado 4ue oleitor ten+a instalado o XDK em seu &$preferido. Alm disso' o leitor precisa instalaro App "revie0 no seu dispositivo real.

Eecute o XDK e realie o lo(in na sua conta/ntel.

*oc; poder7 criar dois tipos de pro)eto

&tandard HTML5 utilia HTML5 e %ava&cript."oder7 utiliar as A"/s padr3es do BWC. ?ãosuporta o Cordova. "oder7 ser implantadacomo uma App +6!rida nas v7rias plataformasAndroid' i$& e Bindo0s ou como umaaplicação 0e! 0e! app em determinadas

plataformas' como a C+rome Be! &tore.

HTML5 Q Cordova utilia HTML5 e %ava&cript.&uporta os plu(ins do Cordova. "oder7 serimplantada como uma App +6!rida nas v7riasplataformas Android' i$& e Bindo0s.

Primeiro Contato

Aba 74ILD

Antes de implantar deploO a App precisoconstru6Nla !uid.

@ nessa a!a 4ue o pacote da sua App ser7constru6do para posteriormente ser pu!licado

em cada lo)a.$ processo de construção efetuado nanuvem' para 4ue não se)a preciso instalar econfi(urar o &DK para cada plataforma dedestino.

A pu!licação na lo)a ficar7 a car(o dodesenvolvedor' 4ue dever7 se(uir as re(ras

impostas por cada empresa. *eremos maisdetal+es so!re o processo de pu!licação naslo)as posteriormente.




19



uando selecionar a opção para criar um novo pro)eto' o XDK fornecer7 tr;s opç3es

Primeiro Contato | Novo Projeto




20



?a )anela anterior' selecione a opção 8&amples and Demos9. ?a opção 2eneral' selecione a (uia 8HTML5 Q Cordova9. A(ora cli4ue na ima(em 8Hello' Cordova9 para iniciar uma App a partir dessedemo. Cli4ue no !otão 8Continue9 para iniciar o pro)eto.





21



$ XDK vai solicitar 4ue voc; informe o nome da App. $!serve na ima(em a!aio 4ue eu c+amei opro)eto de 8AppS=9. ?a primeira ve 4ue voc; criar uma App' o XDK vai ei!ir um 8uic: Tour9'apresentando al(uns aspectos da ferramenta. Ap,s isso' voc; ver7 o c,di(o de sua aplicação na a!aDE*EL$".





22

p ç p f


< G Essa a!a ser7utiliada para editar eadicionar ar4uivos aopro)eto. *oc; pode usaro editor de c,di(oem!utido' 4ue )7 vemcom o XDK' ou usar o

seu editor de c,di(opreferido' como o?otepadQQ' se dese)ar.

S G ?a 7rvore dear4uivos poss6velvisualiar os ar4uivosassociados ao pro)etoativo' incluindo os

ar4uivos de ima(em.Tam!m poss6velselecionar um ar4uivopara edição.

Primeiro Contato | Novo Projeto | Aba DEVELOP




23

p ç p f


W G -tilie as opç3es demenu ou seus atal+ospara acessar as opç3esdo editor de c,di(o.

U G ?o editor de c,di(oser7 poss6vel editar o

ar4uivo. -tilie o menude conteto senecess7rio.

5 G -se os !ot3es da!arra de ferramentaspresentes em todas asa!as para acessar aa)uda' iniciar o uic:

Tour' alterar asconfi(uraç3es do XDK'ei!ir e alterar asconfi(uraç3es de suaconta e acompan+ar ost0eets so!re o XDK.





24


V G A paleta L/*EDE*EL$"ME?T TA&K&permite a prNvisualiação do c,di(oem um nave(ador ouem dispositivos reais evirtuais.

G Com a paleta BE1&E#*/CE& ser7 poss6veleplorar al(uns serviçosde terceiros 4ue )7 vemem!utidos no XDK.Alm disso' ser7poss6vel inte(rar outrasA"/s.





25


$ editor de c,di(os em!utido no XDK !aseado no 1rac:ets. &endo assim' f7cil adicionaretens3es atravs do menu 8ile Y Etension Mana(er9.

Com esse Demo não podemos tra!al+ar com o App Desi(ner. $u se)a' não poss6vel desen+ar astelas de forma visual. *eremos posteriormente como faer isso. ?um pro)eto 4ue criado para sertra!al+ado de forma visual' poss6vel revesar entre os modos de visualiação C$DE e DE&/2?.

uando iniciamos um pro)eto 4ue usa o App Desi(ner' teremos a capacidade de tra!al+ar de forma

visual e tam!m no c,di(o' sendo 4ue alteraç3es na tela repercutirão no c,di(o e viceNversa.&e voc; selecionar a opção 8#un MO App #un in Emulator9 da paleta L/*E DE*EL$"ME?T TA&K&→

ser7 a!erta uma )anela flutuante com as opç3es do emulador.Essa )anela tem as mesmas opç3es da a!a EM-LATE.





26


< G A )anela flutuante e aa!a EM-LATE devem serutiliadas para corri(iral(uns aspectos da Appantes 4ue ela se)apu!licada ou testada numdispositivo real. @ poss6velrealiar testes em v7riosdispositivos virtuais.

S G -se os !ot3es da !arrade ferramentas pararecarre(ar os ar4uivos dec,di(o fonte e reiniciar aaplicação. @ poss6vel aindainiciar o depurador

em!utido numa nova )anela' ei!ir e alterar asconfi(uraç3es do emuladore parar de eecutar a Appno emulador.

Primeiro Contato | Novo Projeto | Aba EMULATE




27


W G &e voc; clicar no 6coneAuto Zoom' a tela dodispositivo se encaiar7totalmente na sua )anela.@ poss6vel ainda aumentare diminuir o oom atravsdo controle desliante.

U G -se as paletas paraconfi(urar v7riosdispositivos virtuais 4uea)udam a determinar comosua aplicação vai funcionarem v7rios taman+os eorientaç3es de telas. @poss6vel a!rir e fec+ar

cada paleta' ocultar emostras as colunas' movercolunas e mover paletasdentro de uma coluna.

5 G -tilie o dispositivovirtual para testar a App.

Primeiro Contato | Novo Projeto | Aba EMULATE




28


Antes de usar a a!a TE&T'não es4ueça de instalar nodispositivo real a App"revie0.

uando acessar a a!aTE&T pela primeira ve'uma mensa(em vai sur(irsolicitando a sincroniaçãocom o servidor 8"leasesOnc 0it+ our testin(server9.

< G -tilie a a!a TE&T paraavaliar G atravs da rede Gcomo sua App funciona

num dispositivo real semprecisar realiar umainstalação completa domesmo. ?esse ponto voc;tam!m ver7 como ser7 aapar;ncia da sua App nodispositivo real.

Primeiro Contato | Novo Projeto | Aba TE T




29


S G -se o !otão M$1/LEpara realiar testes numservidor na nuvem. #e4uerconfi(uração m6nima' evitapro!lemas de fire0all darede' poss6vel !aiar osar4uivos do servidor a4ual4uer +ora e em4ual4uer lu(ar.

-se o !otão B// pararealiar testes numa redeBiNi onde tanto am74uina dedesenvolvimento 4uando odispositivo real este)am

conetados.W G As instruç3es estão alipara lem!rar como ascoisas funcionam.





30


U G -se o !otão "-&H/LE& para enviar osar4uivos mais recentes dopro)eto de sua m74uinapara o servidor.

5 G -se o leitor de #Code do App "revie0 paraeecutar o teste nodispositivo real.

V G @ poss6vel depurarremotamente a aplicaçãoen4uanto ela estiver sendoeecutada no dispositivoreal. ?esse caso

utiliado o console dedepuração 80einre9.





31


< G A a!a 1-/LD fornecev7rias opç3es paraconstruir o pacote daaplicação. ?essa a!a ser7poss6vel empacotar a Apppara 4ue a mesma se)adistri!u6da nas lo)as. &efor uma App HTML5poder7 ser pu!licada emlo)as de Apps HTML' comoa C+rome Be! &tore.

S G -se a paleta"#E*/$-& 1-/LD& paravisualiar e atualiar umalista de compilaç3es

builds anteriores.

Primeiro Contato | Novo Projeto | Aba BUILD




32


W G ?a seção C$#D$*AH[1#/D M$1/LE A"""LAT$#M& voc;conse(uir7 criar um pacote4ue poder7 ser pu!licadonas lo)as da Apple' 2oo(lee Microsoft.

U G A opção LE2AC[H[1#/D M$1/LE A"""LAT$#M& continua naferramenta por conta deA"/s anti(as. #ecomendaNse mi(rar as aplicaç3espara as A"/s atuais eutiliar a opção C$#D$*A

H[1#/D M$1/LE A"""LAT$#M&.

*eremos em detal+escomo funciona cada umadas a!as nos cap6tulosposteriores.

Primeiro Contato | Novo Projeto | Aba BUILD




33

Licença

A utiliação das ferramentas disponi!iliadasno site da /ntel são re(idas pelo T$- G Termsof -se.

@ poss6vel ler os termos completos no se(uintelin:

+ttpsJJappcenter.+tml5toolsNsoft0are.intel.comJT$&J

Ao utiliar o site da /ntel ou !aiar 4ual4uermaterial 4ue este)a nele' o usu7rio estar7aceitando os termos de uso descritos no lin:acima.

@ importante a leitura completa dos termosacima antes de usar o XDK. *amos a!ordara4ui al(uns aspectos importantes relacionadosR licença da ferramenta.

Antes de usar o XDK' preciso se re(istrar nosite da /ntel. @ preciso ser maior de <\ anos.$ /D e sen+a criados no site não pode sercompartil+ado com outro usu7rio.

Entendendo a Licença do XDK

@ poss6vel usar as ferramentas da /ntel semprecisar pa(ar roOalties ou 4ual4uer outrovalor. @ poss6vel distri!uir as aplicaç3esdesenvolvidas da forma 4ue voc; dese)ar. $use)a' o XDK (ratuito e voc; pode vender asApps 4ue fier com ele sem nen+umpro!lema.

$ 4ue voc; não pode faer redistri!uir ouvender os materiais da /ntel. $u se)a' voc;não pode sair por a6 vendendo o XDK.

"rovavelmente essa a parte da licença 4uemais interessa' pelo menos para a maioriados desenvolvedores.

@ importante frisar 4ue a leitura dos termos econdiç3es informados no lin: anterior imprescind6vel.


https://appcenter.html5tools-software.intel.com/TOS/

https://appcenter.html5tools-software.intel.com/TOS/



34

Explorando os Demos

-ma das mel+ores formas de aprender umaferramenta' um frame0or:' uma lin(ua(em'etc estudando os demos. $ XDK vem comv7rios deles.

%7 vimos 4ue ao acessar a opção &TA#T A?EB "#$%ECT teremos acesso R seção 8&amples and Demos9.

?essa seção n,s temos o item 82eneral9' 4uefornece acesso aos demos 8&tandard HTML9 e 8HTML5 Q Cordova9.

Temos ainda o item 82ames9' 4ue forneceacesso aos demos 8HTML5 Q Cordova9.

*eremos a(ora al(uns desses demos e como oestudo deles pode a)udar a compreender comoo XDK funciona e 4uais os passos paraconstruir uma App com essa ferramenta.

amples e Demos

@ importante frisar 4ue as Apps criadas com oXDK são feitas com HTML Q %ava&cript QC&&. Assim sendo' preciso ter o m6nimo decon+ecimento dessas lin(ua(ens. uantomaior for o seu con+ecimento nessaslin(ua(ens' mais facilidade voc; ter7 paracriar suas Apps com o XDK.

&e voc; nunca teve contato com essaslin(ua(ens' pare a(ora a leitura do livro eaprenda so!re elas. Ten+a pelo menos umavisão (eral so!re elas' senão o estudo do XDKser7 frustrante.




35

Explorando os Demos

Depois de criar o pro)eto'acesse a a!a EM-LATE ealtere v7rias vees odispositivo. $!serve comoa tela vai se ade4uandoao taman+o da tela dodispositivo.

Mude tam!m aorientação da tela e

o!serve como a aplicaçãose comporta.

amples e Demos | Buttons

*amos começar com o &ample 1uttons. &elecione esse eemplo conforme ima(em a!aio e cli4ueno !otão 8Continue9. Esse um eemplo !7sico 4ue mostra como uma tela responsiva com !ot3es.

$ pro)eto em si não tem muito se(redo. Dois !ot3es serão ei!idos na tela e terão seu taman+o eposição adaptados de acordo com o taman+o e orientação da tela.




36

Explorando os Demos

Depois de criar o pro)eto'acesse a a!a EM-LATE ealtere v7rias vees odispositivo. $!serve comoa tela vai se ade4uandoao taman+o da tela dodispositivo.

Mude tam!m aorientação da tela e

o!serve como a aplicaçãose comporta.


A aplicação foi salva com o nome 8AppS<9. Dentro da pasta da aplicação estão os ar4uivos dopro)eto XDK' conforme o!servamos na ima(em a!aio. $ ar4uivo 8.d:e9 contm prefer;nciasespec6ficas do desenvolvedor para o pro)eto. $ ar4uivo 8.:d9 define o pro)eto e compartil+adopor todos os mem!ros 4ue tra!al+am no mesmo pro)eto. Esses ar4uivos não devem ser alteradospor fora do XDK.




37

Explorando os Demos


?a ima(em anterior podemos o!servar 4ue eiste uma pasta 80009 dentro da pasta do pro)eto.Essa pasta contm o pro)eto HTML. *oc; pode clicar duas vees no ar4uivo 8inde.+tml9 e ver7 4ueele ser7 a!erto no seu nave(ador padrão. $!serve pelo 6cone 4ue o nave(ador padrão da m74uinaonde a ima(em foi capturada o c+rome.

$ pro)eto ser7 a!erto e funcionar7 normalmente no !ro0ser. Lem!rando 4ue criamos um pro)eto 8&tandard HTML9.

Eplorando as demais pastas voc; ter7 acesso aos ar4uivos C&&' %ava&cript e de ima(ens. A pasta 8d:9 contm um ar4uivo %&$? com al(umas informaç3es so!re o pro)eto.




38

Explorando os Demos


$ 4ue eiste para estudar nesse DemoF ?a verdade' não tem muita coisa. TrataNse de um pro)etoHTML puro e simples. &e voc; domina HTML Q %ava&cript Q C&& )7 possui 4uase todo ocon+ecimento necess7rio relacionado ao eemploI &ua preocupação no momento deve ser comdesi(n e laOout responsivo. $ 4ue issoF Em suma' adaptar a visualiação da sua aplicação para4ual4uer tipo de tela.

?ão vamos tratar desse assunto no livro' pois não o nosso foco. "ortanto' se voc; ainda nãoouviu falar so!re responsividade ou como criar telas responsivas' c+e(ou a +ora de pes4uisar so!re

os se(uintes temas antes de continuar a leitura do livro

MultiNDevice LaOout "atterns #esponsice "atterns Desi(n #esponsivo LaOout J Leiaute #esponsivo #esponsive Be! Desi(n #esponsive /ma(es Media ueries

Leve o termpo 4ue for necess7rio pes4uisando so!re esse assunto at compreend;Nlo e depoisvolte R leitura do livro.




39

Explorando os Demos

amples e Demos | Geolocation Demonstration

-ma das caracter6sticas mais utiliadas nas aplicaç3es acessar a localiação (eo(r7fica dodispositivo. @ til em v7rias situaç3es.

$ XDK possui um demo 4ue trata eatamente disso. ?ão um demo 8&tandard HTML9. TrataNse deum demo 8HTML5 Q Cordova9. /nicie uma nova aplicação conforme ima(em a se(uir.




40

Explorando os Demos


$ o!)etivo desse demo mostrar como criar uma App +6!rida 4ueaproveita os serviços de (eolocaliação da A"/ %ava&cript 1rid(e' !emcomo se conectar a 0e! services (ratuitos de mapeamento.

Essa App vai acompan+ar o pro(resso do usu7rio durante sua via(eme vai colocar um 8pin9 no mapa a cada <= se(undos.

Eistem duas funç3es importantes nessa App. Am!os estão no

ar4uivo 8)sJmain.)s9.

A primeira a 4ue detecta a latitude e a lon(itude do dispositivo apartir de seus serviços de (eolocaliação' conforme demostradoa!aio.




41

Explorando os Demos


A se(unda a 4ue desen+a o mapa na tela.

$ 4ue voc; deve faer nesse momentoF Eplorar os demais demos./nicie um novo pro)eto para cada demo dispon6vel' incluindo a6 os 4uesão apenas HTML' os +6!ridos e os (ames.

ConcentreNse em testar os demos para o!servar o 4ue voc; podefaer com esse tipo de aplicação. &e dese)ar' eplore tam!m oc,di(o. uanto mais estudar o c,di(o' mais vai aprender. ?oscap6tulos se(uintes vamos analisar a fundo as caracter6sticas do XDK.




42

Aba PROJECTS

Visão Geral

Essa a!a lista os pro)etos 4ue foram criados pelo XDK.

< G $ nome do pro)eto ativo aparece R direita da ava "#$%ECT&. As demais a!as realiarão suasoperaç3es em cima desse pro)eto.

S G -ma lista depro)etos con+ecidosaparecem no lado

es4uerdo da tela.W G *e)a informaç3esso!re o pro)eto ativona paleta a direita' naseção "ro)ect /nfo.

U G As confi(uraç3esdo pro)eto 4ue

aparecem nessa seçãovão depender do tipode pro)eto 4ue est7sendo tra!al+ado.




43

Aba PROJECTS

Visão Geral

"ara ei!ir informaç3es so!re um pro)eto' !asta clicar no nome do pro)eto. Dentre as informaç3esei!idas estão o tipo de pro)eto' o camin+o rai e o diret,rio de ori(em. &e(uem as funç3es dos!ot3es dispon6veis




44

Aba PROJECTS

Visão Geral – Tipos de Projetos

Eistem dois tipos de pro)etos &tandard HTML5 e HTML5QCordova. Eiste um terceiro tipo depro)eto numa versão espec6fica do XDK /nternet of T+in(s Em!edded Applications. ?ãoa!ordaremos esse tipo de pro)eto nesse livro.




45

Aba PROJECTS

Visão Geral – Tipos de Projetos

Eistem dois tipos de pro)etos &tandard HTML5 e HTML5QCordova. Eiste um terceiro tipo depro)eto numa versão espec6fica do XDK /nternet of T+in(s Em!edded Applications. ?ãoa!ordaremos esse tipo de pro)eto nesse livro.




46

Aba PROJECTS

Habilitando / Desabilitando Plataformas Alvo

Atravs da a!a "#$%ECT& poss6vel +a!ilitar ou desa!ilitar certas plataformas alvo. "or eemplo'em um pro)eto 8HTML5QCordova9' se a App re4uer uma plataforma alvo 8Android Cross0al:9' masnão precisa da plataforma alvo 8Android9' voc; pode desa!ilitar a plataforma alvo Android.

"ara desa!ilit7Nla' a!ra a a!a "#$%ECT& e cli4ue no 6cone do Android. Com isso' essa plataformaser7 desa!ilitada e não vai mais aparecer a opção de construir o pacote pra ela na a!a 1-/LD.$!serve a ima(em a!aio.




47

Aba PROJECTS

Configurando a App

"ara os pro)etos 8HTML5QCordova9' voc; deve especificar as confi(uraç3es na seção C$#D$*AH[1#/D M$1/LE A"" &ETT/?2&. Essas confi(uraç3es são utiliadas pelo XDK para criar os ar4uivosde confi(uração espec6ficos da plataforma 4ue são enviados para o sistema de compilação do XDK.$ XDK (era automaticamente esses ar4uivos de confi(uração com !ase nas confi(uraç3es da a!a"#$%ECT&. $s ar4uivos 8inteld:.confi(.]platformY.ml9 se encontram na pasta do pro)eto.

*oc; deve eplorar a seção C$#D$*A H[1#/D M$1/LE A"" &ETT/?2& para compreender comoconfi(urar sua aplicação. $!serve 4ue eistem tr;s opç3es "lu(in Mana(ement' 1uild &ettin(s e

Launc+ /cons and &plas+ &creens. Ao clicar no !otão ^Q_ voc; ter7 acesso a todas as opç3es deconfi(uração.

Em "lu(in Mana(ement voc; conse(uir7

Eplorar e adicionar novos plu(ins. *er o /D' nome' versão' documentação'depend;ncias e outros detal+es so!re o plu(in. #emover plu(ins.

Em 1uild &ettin(s voc; vai confi(urar aspectosei(idos por cada plataforma.

E na ltima opção voc; conse(uir7 selecionaras ima(ens 4ue comporão a App.


b



48

Aba PROJECTS

Configurando a App – Plugin Management




Ab PROJECTS



49

Aba PROJECTS

Configurando a App – Build ettings




Ab PROJECTS



50

Aba PROJECTS

Configurando a App – Launch Icons and plash creens




Ab PROJECTS



51

Aba PROJECTS

Criando um Novo Projeto

A!ra a a!a "#$%ECT& e cli4ue na seta a!aio' conforme ima(em' ou selecione a opção &tart a ?e0"ro)ect a!aio da lista de pro)etos.

Ap,s isso' as se(uintes opç3es ficarão dispon6veis


AbaPROJECTS



52

Aba PROJECTS


Caso voc; opte por criar um novo pro)eto a partir de um Template' dever7 escol+er entre ascate(orias dispon6veis 1lan:' LaOout and -ser /nterface e 2ames.


AbaPROJECTS



53

Aba PROJECTS


uando selecionar um dos templates' o XDK apresentar7 uma !reve descrição do mesmo. &er7poss6vel nesse momento escol+er o tipo do pro)eto e se o mesmo vai utiliar o App Desi(ner'conforme ima(em a!aio.

Ps vees o template possui um arti(o 4ue poder7 ser consultado clicando no respectivo lin:.


AbaPROJECTS



54

Aba PROJECTS


?o caso dos )o(os funciona de forma semel+ante. Cada template apresentar7 uma !reve descrição.

?o caso do CocosSd' visto na ima(em' ser7 poss6vel selecionar entre as vers3es S. e W..

$ desenvolvedor tam!m dever7 selecionar o tipo de pro)eto C$DE 1A&E' de acordo com os tipos4ue vimos anteriormente.

?esse momento tam!m ser7 poss6vel selecionar a orientação

"ortrait ou Landscape.&e dese)ar' poder7 localiar os fontes do Demo no 2itHu! atravsdo !otão a!aio.

Depois 4ue analisar e selecionar o pro)eto dese)ado' dever7

clicar no !otão 8Continue9 para 4ue o pro)eto se)a criado.


AbaPROJECTS



55

Aba PROJECTS

Plugins para a Aplicação Cordova

$s plu(ins do Apac+e Cordova são ferramentas muito importantes para mel+orar os recursos efuncionalidades do seu aplicativo. Eles fornecem uma maneira de estender a A"/ %ava&cript doaplicativo' resultando numa maior inte(ração entre o aplicativo e o soft0areJ+ard0are dodispositivo.

Eistem centenas de plu(ins Cordova e Ado!e "+one2ap dispon6veis para uso com o seuaplicativo. Eles podem ser encontrados no re(istro de plu(ins do Cordova Apac+e Cordova "lu(ins#e(istrO e em outros re(istros semel+antes' assim como em muitos reposit,rios open source do

2itHu!.$ XDK utilia plu(ins Cordova durante todo o ciclo de desenvolvimento de uma App HTML5Cordova. $ uso mais evidente feito nas a!as "#$%ECT& e 1-/LD.

?a a!a DE*EL$"' os plu(ins são usados no editor para apresentar o 8intelliNsense9. A a!a EM-LATEtoma nota dos plu(ins 4ue foram adicionados na a!a "#$%ECT& e disponi!ilia para a App apenasas A"/s dos plu(ins 4ue foram adicionados. $ emulador usar7 o con)unto completo de plu(insdispon6veis no XDK' mesmo 4ue não ten+am sido adicionados ao pro)eto.

-m plu(in um pacote de c,di(o 4ue permite 4ue sua App HTML5 se comuni4ue com a plataformanativa em 4ue eecutada. $ plu(in fornece acesso a funcionalidades de plataforma 4uenormalmente não estão dispon6veis para Apps 4ue rodam num nave(ador. As A"/s Cordova e doXDK são implementadas como plu(ins.


AbaPROJECTS



56

Aba PROJECTS


$s plu(ins consistem de A"/s %ava&cript e m,dulos de c,di(onativo para cada plataforma suportada pelo plu(in. Emess;ncia' 4uando a App c+ama a A"/ %ava&cript do plu(in'ela redirecionada para o c,di(o nativo su!)acente 4ueimplementa essa A"/ no dispositivo.

"or eemplo' a A"/ %ava&cript redirecionada para c,di(o%ava em um dispositivo Android ou para c,di(o $!)ective C

em um dispositivo i$&. "lu(ins podem ser simples oucompleos tão compleo 4uanto o mecanismo depersist;ncia do !anco de dados ou tão simples como ummtodo para li(ar o flas+ da cmera LED.

*oc; não vai precisar aprender %ava' $!)ective C ou C."ara usar o plu(in voc; vai simplesmente adicion7Nlo no seupro)eto' sem se preocupar em aprender como o plu(infunciona internamente.

*oc; pode pensar em um plu(in Cordova como uma!i!lioteca %ava&cript 4ue estende as caracter6sticasespec6ficas do dispositivo 4ue sua App pode acessar'caracter6sticas 4ue normalmente não podem ser acessadas apartir de um nave(ador ou Be!*ie0 padrão.


AbaPROJECTS



57

Aba PROJECTS

Plugins para a Aplicação Cordova – Observações

%7 4ue a maioria dos plu(ins são !i!liotecas de terceiros' o XDK pode não ter con+ecimentoepl6cito de funcionalidades ou do c,di(o interno de um plu(in espec6fico. As ferramentas dedepuração inclu6das no XDK apenas fornecem suporte para os plu(ins do ncleo do Cordova eXDK.

?em todos os plu(ins são i(uais. Muitos plu(ins estão dispon6veis apenas para as plataformasAndroid e i$&. $s plu(ins do ncleo do Cordova e XDK suportam uma ampla (ama deplataformas. Certifi4ueNse de confirmar 4ue o plu(in 4ue voc; pretende usar suporta asplataformas em 4ue voc; plane)a implantar seu aplicativo' ou utilie tcnicas de detecção de

plataformas e de recursos para implementar uma solução alternativa para plataformas nãosuportadas. ?em todos os plu(ins se comportam de maneira i(ual em todas as plataformas. $

funcionamento de um plu(in pode variar em função da plataforma' (eralmente devido a detal+esde plataforma e não por4ue o plu(in est7 incompleto ou com pro!lemas. As variaç3es incluempropriedades 4ue não eistem em al(umas plataformas ou mtodos 4ue não funcionam emoutras plataformas. Consulte a documentação do plu(in para o!servar esses detal+es.

$ XDK não possui um mecanismo para validar o funcionamento de um plu(in. 1us4ue suportecom o autor e pes4uise na /nternet so!re a 4ualidade do plu(in antes de utili7Nlo.

$s plu(ins de ncleo do XDK são escritos como plu(ins Cordova. $s plu(ins de ncleo core doCordova são mantidos pela comunidade de desenvolvimento Cordova CL/. %7 os plu(ins dencleo do XDK são mantidos pela e4uipe de desenvolvimento da /ntel.


AbaPROJECTS



58

Aba PROJECTS

Plugins para a Aplicação Cordova – Observações

&e voc; estiver desenvolvendo seu pr,prio plu(in Cordova' voc; pode precisar instalar e usar osistema Cordova CL/. *oc; pode compartil+ar o seu plu(in com os outros sem ei(ir 4ue elestam!m instalem o sistema Cordova CL/.

$ XDK fornece um mecanismo para depurar o c,di(o nativo em um plu(in Cordova apenas paradispositivos Android U. e 5.. "ara outros dispositivos' voc; pode depurar utiliando odepurador 0einre ou ferramentas de desenvolvimento de c,di(o nativas 4ue são espec6ficas paraa plataforma nativa.

A App "revie0 4ue voc; !aiou a partir das respectivas lo)as para depuração r7pida de seus

aplicativos HTML5 inclui suporte apenas para plu(ins de ncleo do Cordova e XDK. "araconse(uir depurar os plu(ins de terceiro' ser7 preciso construir a App' na a!a 1-/LD' e entãorodar e depurar num dispositivo real.

"ara ativar o uso do plu(in Cordova' voc; dever7 referenciar o ar4uivo 8cordova.)s9 no seuar4uivo 8inde.+tml9.

9script t6pe:;text<)a$ascript; src:;cordo$a*)s;=

&e o seu pro)eto contiver mais do 4ue um ar4uivo HTML 4ue utiliar7 a A"/ Cordova' voc; dever7

incluir a lin+a acima em cada ar4uivo HTML. @ uma !oa pr7tica adotar o estilo con+ecido como&"A &in(le "a(e Application. *oc; fa uma p7(ina e realia todo o controle via A)a. A Appficar7 mais eficiente' pois ao criar v7rias p7(inas' a App precisa recarre(ar os scripts' assets'etc. Mesmo 4ue tais coisas este)am em cac+e' ainda assim +aver7 pro!lemas de desempen+o.


AbaPROJECTS



59

Aba PROJECTS

Plugins para a Aplicação Cordova – ingle Page Application [ PA]

As &"As são aplicaç3es completas'desenvolvidas em %ava&cript' 4ue funcionam4uase como se estivessem sendo eecutadasnativamente no des:top. $ 2oo(le foipioneiro nesta tecnolo(ia e o mundo ose(uiu. Atualmente' a maior parte dasaplicaç3es 80e! S.=9 usam este modelo o2mail' a !usca do 2oo(le' o 2oo(le Drive'

ace!oo:' o T0itter' o our&4uare' o/nsta(ram' !lo(s' sites corporativos' dentreoutros.

$!serve na ima(em 4ue numa aplicação 0e!tradicional' as re4uisiç3es ficam sendo feitasao servidor' 4ue devolve uma p7(ina HTMLpara o nave(ador a cada re4uisição.

%7 numa &"A' toda a p7(ina carre(adas deuma ve s,. As re4uisiç3es são feitas viaA)a e o servidor retorna os dados em %&$?4ue serão ei!idos na p7(ina sem 4ue amesma se)a recarre(ada.


AbaPROJECTS



60

Aba PROJECTS


%7 vimos anteriormente 4ue a a!a"#$%ECT& contm uma seçãopara o (erenciamento de plu(insc+amada "lu(in Mana(ement.

$s plu(ins adicionados no XDKserão armaenados como partede seu pro)eto e copiados para a

pasta 8plu(ins9. $s plu(inssu!irão para o servidor decompilação da /ntel )unto com oc,di(o fonte da App.

*oc; dever7 selecionar um dosplu(ins listados para adicionar aopro)eto plu(ins mantidos pelae4uipe do Apac+e Cordova'

plu(ins mantidos pela e4uipeXDK' plu(ins Cordova mantidospor terceiros ou 4ual4uer outroplu(in de terceiro 4ue sua Appnecessite.


AbaPROJECTS



61

Aba PROJECTS


Ap,s selecionar um plu(in' voc; pode epandiNlo para ver mais detal+es so!re ele /D' versão est7instalada no pro)eto' um lin: para a p7(ina de documentação principal e um 6cone para modificar aversão do plu(in.

Dependendo do plu(in 4ue est7 utiliando poder7 ainda o!servar de 4uais outros plu(ins eledepende' 4uais as vers3es do Cordova 4ue são compat6veis com o plu(in' as permiss3es Android4ue o plu(in vai precisar e o nome do autor 4ue criou o plu(in.


Aba PROJECTS



62


$ "lu(in Mana(er armaena os plu(ins inclu6dos no pro)eto numa pasta c+amada 8plu(ins9 dentroda pasta do pro)eto.

Cada plu(in armaenado em uma su!pasta dentro da pasta 8plu(in9. $ nome da su!pastas ser7de acordo com o /D do plu(in. "or eemplo 8plu(inJor(.apac+e.cordova.fileNtransfer9.

/ncluir os fontes do plu(in ser7 til para an7lise do c,di(o e tam!m para depuração.


Aba PROJECTS



63

Plugins para a Aplicação Cordova – Whitelist Rules

@ atravs das B+itelist #ules 4ue voc; poder7 especificar 4uais recursos do dispositivo sua Appter7 acesso. Antes de pu!licar a aplicação preciso determinar 4uais recursos espec6ficos sãoei(idos por ela' a fim de maimiar a se(urança do seu aplicativo e seus dados.


Aba PROJECTS



64

Plugins para a Aplicação Cordova – Whitelist Rules

uando não eistem re(ras definidas' todos os acessos de rede ficarão !lo4ueados. Atravs dasre(ras poss6vel definir se o acesso ao recurso ser7 feito por meio de uma A"/ XMLHttp#e4uest'por eemplo ou atravs de marcação ]iframeY' ]scriptY' ]im(Y.

A opção `1loc: All` !lo4ueia os acessos eternos. Esta a confi(uração recomendada se o seuaplicativo não necessita de 4uais4uer recursos eternos.

Essas re(ras s, se aplicam Rs aplicaç3es 4ue são constru6das e pu!licadas. As a!as EM-LATE' TE&T

e DE1-2 não tem con+ecimento das re(ras definidas nas confi(uraç3es do pro)eto. As ferramentasde depuração são confi(urados de forma permanente para permitir acesso eterno irrestrito. &evoc; precisar testar suas re(ras' dever7 utiliar um pacote pu!licado num dispositivo real.

Em tempo de eecução' 4uando uma re4uisição feita para acessar um recurso de rede dentro doescopo de eecução da App' o Be!*ie0 compara a re4uisição com as re(ras definidas. Concederacesso a um recurso eterno' por conta de de uma re(ra' si(nifica 4ue o c,di(o em eecução noBe!*ie0 autoria o acesso ao recurso eterno. Em outras palavras' o Be!*ie0 interpreta asre(ras para decidir 4uando autoriar e 4uando ne(ar o acesso.


Aba PROJECTS



65

Plugins para a Aplicação Cordova – Lista de Plugins

*oc; pode encontrar uma lista com os plu(ins Cordova no se(uinte lin:

+ttpsJJ(it+u!.comJapac+eFutf\>ES>bC>bW4uerOcordovaNplu(in

Caso o lin: não este)a ativo' !astaprocurar por cordovaNplu(in no siteda Apac+e &oft0are oundation.

Ao clicar no lin: de um dos plu(ins'voc; direcionado para a p7(ina2itHu! com o c,di(o fonte e adocumentação do plu(in.

Eistem al(uns plu(ins XDK 4ueestão depreciados. Tome cuidadopara não utili7Nlos na sua aplicação."refira sempre utiliar os plu(ins

Cordova.$!serve sempre a documentação doXDK para o!servar se o plu(in est7depreciado antes de utili7Nlo.


Aba PROJECTS

https://github.com/apache?utf8=%E2%9C%93&query=cordova-plugin

https://github.com/apache?utf8=%E2%9C%93&query=cordova-plugin



66

Plugins para a Aplicação Cordova – Configurando

$s detal+es para construir a App no servidor da /ntel são controlados por diretivas localiadasdentro de um ar4uivo comumente c+amado 8confi(.ml9. ?o caso do XDK ser7 criado um ar4uivo 8inteld:.confi(.ml9. -m ar4uivo de confi(uração ser7 criado automaticamente para cadaplataforma. "or eemplo 8inteld:.confi(.android.ml.

%7 4ue esse ar4uivo (erado automaticamentesempre 4ue um !uild realiado' voc; não podealter7Nlo.

&e voc; precisar incluir al(uma diretiva 4ue nãoeste)a dispon6vel nas opç3es do XDK' dever7 utiliarum ar4uivo de adiç3es Additions ile. Tal ar4uivorece!er7 o nome 8inteld:.confi(.additions.ml9.

?a maioria dos casos voc; não usar7 esse ar4uivo.Ele opcional.


Aba PROJECTS



67

Plugins para a Aplicação Cordova – Configurando | Arquivo de Adição

Eistem al(umas opç3es 4ue podem estar no ar4uivo de confi(uração e não tem como confi(urarvia XDK. A maioria dessas opç3es são incomuns ou podem ser confi(uradas pelo valor padrão. &evoc; for forçado a tra!al+ar com uma dessas confi(uraç3es' ser7 o caso de criar o ar4uivo deadição 4ue mencionamos anteriormente 8inteld:.confi(.additions.ml9. "odemos ver um eemplona ima(em a!aio. A primeira diretiva adiciona uma opção de confi(uração 4ue cria um aplicativoCordova para Android 4ue pode ser depurado remotamente usando o 2oo(le C+rome DevTools.


Aba PROJECTS



68


As demais diretivas do eemplo acima controlam as opç3es do plu(in Cordova &tatus 1ar.?ormalmente essas opç3es não seriam colocadas nesse ar4uivo. $ fato de elas estarem a6

mostram 4ue o desenvolvedor so!rescreveu esses diretivas para alterar o comportamento padrãodo plu(in.

As diretivas acima serão adicionadas em cada ar4uivo espec6fico de plataformainteld:.confi(.]platformY.ml.


Aba PROJECTS



69


$!serve as 4uatro lin+as adicionadas no final do ar4uivo espec6fico da plataforma android.


Aba PROJECTS



70


A se(uir veremos al(uns eemplos de utiliação do ar4uivo de adição. $ primeiro adiciona umaprefer;ncia para todos os demais ar4uivos de construção

9pre0erence name:;Fullscreen; $alue:;true; <=

Adiciona uma prefer;ncia apenas para o ar4uivo de construção do Android

9>'' ?Android ''=9icon plat0orm:;android; src:;assets<icon'l*pn%; densit6:;ldpi; <=9>'' ?Android ''=9pre0erence name:;Fullscreen; $alue:;true; <=

#emove um plu(in do ar4uivo de construção do i$&

9>'' 'iO ''=9intelxd(@plu%in intelxd(@name:;Contacts; <=

#emove todos os 6cones do ar4uivo de construção do Bindo0s \

9>'' '#indosB ''=9icon <=

Adiciona um plu(in de terceiro 4ue precisa de parmetros em todos os ar4uivos de construção

9intelxd(@plu%in intelxd(@name:;+6 pecial Plu%in; intelxd(@$alue:;3ttps@<<%it3ub*com<m6plu%in<m6'special'plu%in*%it;= 9intelxd(@param intelxd(@name:;PL48IPAR+; intelxd(@$alue:;GHKB; <= 9intelxd(@param intelxd(@name:;PL48IPAR+; intelxd(@$alue:;m6econdParameter; <=9<intelxd(@plu%in=


Aba DEVELOPER



71

Visão Geral

A a!a DE*EL$"E# fornece uma visão completa dos ar4uivos da pasta do pro)eto. *oc; pode editaros ar4uivos de pro)eto com o editor de c,di(o em!utido do XDK ou com o seu editor de c,di(ofavorito. *oc; tam!m pode usar essa a!a para eplorar 0e! services e visualiar ativos assetsde )o(os. $ XDK detecta automaticamente se um os ar4uivos do pro)eto foram alterados por umeditor de c,di(o eterno' por eemplo e solicita aç3es adicionais por conta disso. ?essa a!a odesenvolvedor tem duas opç3es de visão vie0 C$DE G visualia o editor de c,di(o em!utido eDE&/2? G permite a criação da App de forma visual usando o App Desi(ner.


Aba DEVELOPER



72

Visão Geral

"ara alternar entre osmodos C$DE eDE&/2?' utilie os!ot3es com o mesmonome vistos naima(em anterior. ?aima(em anterior voc;o!serva o tipo devisão DE&/2?.

$ painel LiveDevelopment Tas:sse encontra do ladodireito. Ele permite4ue a App se)a prNvisualiadarapidamente num

nave(ador oudispositivo' o 4ue muito til paraalteraç3es no laOout eC&&.


Aba DEVELOPER



73

Editor de Código

?a !arra lateral dolado es4uerdo poss6vel visualiaros ar4uivos 4uepertencem aopro)eto.

&e voc; selecionarum dos ar4uivos'ver7 o c,di(orespectivo noeditor de c,di(o.

&e estiver navisualiação deDesi(n' cli4ue no!otão C$DE para

visualiar o editorde c,di(o.


Aba DEVELOPER



74

Editor de Código

?a !arra lateral dolado es4uerdo poss6vel visualiaros ar4uivos 4uepertencem aopro)eto.

&e voc; selecionarum dos ar4uivos'ver7 o c,di(orespectivo noeditor de c,di(o.

&e estiver navisualiação deDesi(n' cli4ue no!otão C$DE para

visualiar o editorde c,di(o.


Aba DEVELOPER



75

Editor de Código

$ editor de c,di(o em!utido totalmente inte(rado com a a!a EM-LATE. $u se)a' 4uando salvarum ar4uivo no editor' o mesmo ser7 carre(ado automaticamente na a!a EM-LATE para serutiliado no emulador. $ mesmo não ocorre 4uando o ar4uivo utiliado num editor eterno.?esse caso' ser7 preciso atualiar a a!a EM-LATE. ?o entanto' um ar4uivo alterado num editoreterno ser7 atualiado automaticamente no editor em!utido.

"ara adicionar um novo ar4uivo' cli4ue com o !otão direito na 7rvore de ar4uivos e selecione aopção 8?e0 ile9' conforme ima(em. *oc; deve então informar o nome do ar4uivo com aetensão. Ap,s isso poder7 tra!al+ar no ar4uivo em !ranco.

&e dese)ar deletar o ar4uivo 4ue criou' selecione o mesmo com o !otãodireito do mouse e escol+a a opção 8Delete9.

@ poss6vel 4ue ap,s deletar o ar4uivo' ele ainda apareça na 7rvore.&e isso acontecer' cli4ue novamente com o !otão direito na 7rvorepara ter acesso ao menu de conteto e selecione a opção 8#efres+ile Tree9.

Como voc; pode o!servar' tanto a 7rvore de ar4uivos 4uanto oeditor de tetos possuem um menu de conteto' 4ue aparece 4uandovoc; pressiona o !otão direito do mouse. #ealie testes para o!servaras opç3es 4ue estão dispon6veis nesses menus.


Aba DEVELOPER



76

Editor de Código – Visão de Múltiplos Arquivos

"ara +a!ilitar a visão para mltiplos ar4uivos

< G "ara criar uma visão sideN!ONside' cli4ue *ie0 Y *ertical &plit.S G "ara criar uma visão a!oveNandN!elo0' cli4ue *ie0 Y Horiontal &plit.W G "ara desativar a divisão da tela e fec+ar o painel 4ue não est7 em foco' use *ie0 Y ?o &plit.

Depois de +a!ilitar uma visão de tela dividida split screen vie0' as operaç3es realiadas serãoaplicadas ao painel 4ue se encontra com o foco. Alm disso' a seção 8Bor:in( iles9 ser7su!stitu6da pelas opç3es Left e #i(+t numa divisão vertical sideN!ONside' ou Top e 1ottom numadivisão +oriontal a!oveNandN!elo0.


Aba DEVELOPER



77

Editor de Código

Ao eplorar o editor voc; lo(o ver7 4ue ele se comporta como outros editores de c,di(o' como o?otepadQQ' e 4ue tem suas pr,prias caracter6sticas' evidentemente. "or eemplo' pressioneControlQ Edit Y ind e di(ite a strin( de pes4uisa 8]script9. $ editor realça as ocorr;ncias de 8]script9 e sua !arra de rola(em indica onde a se4u;ncia ocorre no ar4uivo


Aba DEVELOPER



78

Editor de Código – Autocompletion Hints

$ editor ei!e dicas +ints en4uanto voc; di(ita o c,di(o HTML' C&& ou %ava&cript. $ editorcon+ece a maioria dos o!)etos e mtodos da A"/.

?o caso das ta(s HTML voc; pode precisar pressionar ControlQEspaço ou clicar em 8Edit Y &+o0Code Hint9. &e(uem al(umas dicas relacionadas Rs ta(s HTML.


Aba DEVELOPER



79




Aba DEVELOPER



80




Aba DEVELOPER



81

Editor de Código – Quick Edit

$ uic: Edit ei!e uma )anela popNup de edição para a definição selecionada dentro da )anelaatual. Ela aparece com um fundo cinento e limitada ao c,di(o %ava&cript e C&&.

"or eemplo' usando o ar4uivo inde.+tml da App demo 8To0ers of Hanoi9' posicione o cursor domouse na div mostrada a!aio

Depois de pressionar ControlQE ou clicar em 8?avi(ate Y uic: Edit9' a definição correspondentedo ar4uivo 8to+.css9 aparece num popNup com um fundo cina.


Aba DEVELOPER



82

Editor de Código – Quick Edit

Ap,s editar o ar4uivo pressione ControlQ& para salv7Nlo. "ara fec+ar o popNup pressione E&C ouControlQE ou ainda cli4ue em 8?avi(ate Y uic: Edit9. "ara editar um %ava&cript semel+anteposiciona o cursor numa função e pressiona ControlQE ou clica em 8?avi(ate Y uic: Edit9.$!serve o eemplo a!aio no ar4uivo 8to+.)s9.

Ap,s c+amar o uic: Edit aparecer7 o popNup correspondente.


Aba DEVELOPER



83

Editor de Código – Quick Open

-se o uic: $pen para nave(ar rapidamente por v7rios ar4uivos' nmeros de lin+as ou definiç3esde funç3es. "ara isso pressione ControlQ&+iftQ$ ou cli4ue em 8?avi(ate Y uic: $pen9 para a!rirum popNup no canto direito superior da )anela de edição.


Aba DEVELOPER



84

App Designer – Visão Geral

$ XDK inclui uma ferramenta de laOout 2-/ intuitiva c+amada App Desi(ner. -se esse editor paradesen+ar visualmente as p7(inas da App.

$ App Desi(ner d7 ;nfase ao desi(n responsivo atravs da utiliação de um sistema de (rid emedia 4ueries. /sso vai te a)udar a criar laOouts de p7(inas 4ue funcionam !em em diferentestaman+os e orientaç3es de tela. Esta ferramenta tam!m redu o tra!al+o duro e tedioso dedesen+ar telas HTML responsivas.

$ App Desi(ner suporta mltiplos frame0or:s -/. Escol+a um 4ue atenda Rs necessidades de seu

aplicativo T0itter 1ootstrap W' /onic' rame0or:' )uerO Mo!ile' #atc+et' App rame0or: ouTopcoat.

*oc; deve usar o App Desi(ner pelas se(uintes ra3es

&e voc; est7 desconfort7vel para escrever na un+a o c,di(o HTML ou C&&JLE&&. &e voc; não um especialista no frame0o: -/ 4ue escol+eu' ou não 4uer se tornar um

especialista. &e voc; prefere 4ue o App Desi(ner faça o tra!al+o pesado' 4ue ei(e um monte de c,di(o

manual' como as media 4ueries. uando voc; precisa faer rapidamente um prot,tipo para fins de avaliação.


Aba DEVELOPER



85


$ XDK inclui uma ferramenta de laOout 2-/ intuitiva c+amada App Desi(ner. -se esse editor paradesen+ar visualmente as p7(inas da App.

$ App Desi(ner d7 ;nfase ao desi(n responsivo atravs da utiliação de um sistema de (rid emedia 4ueries. /sso vai te a)udar a criar laOouts de p7(inas 4ue funcionam !em em diferentestaman+os e orientaç3es de tela. Esta ferramenta tam!m redu o tra!al+o duro e tedioso dedesen+ar telas HTML responsivas.

$ App Desi(ner suporta mltiplos frame0or:s -/. Escol+a um 4ue atenda Rs necessidades de seu

aplicativo T0itter 1ootstrap W' /onic' rame0or:' )uerO Mo!ile' #atc+et' App rame0or: ouTopcoat.

*oc; deve usar o App Desi(ner pelas se(uintes ra3es

&e voc; est7 desconfort7vel para escrever na un+a o c,di(o HTML ou C&&JLE&&. &e voc; não um especialista no frame0o: -/ 4ue escol+eu' ou não 4uer se tornar um

especialista. &e voc; prefere 4ue o App Desi(ner faça o tra!al+o pesado' 4ue ei(e um monte de c,di(o

manual' como as media 4ueries. uando voc; precisa faer rapidamente um prot,tipo para fins de avaliação.


Aba DEVELOPER



86


< G "ara um pro)eto criado com o App Desi(ner' use os !ot3es C$DE e DE&/2? para alternar entrea vie0 do App Desi(ner e do Editor de C,di(o.S G $ !otão Arro0 ei!e ou oculta a 7rvore de ar4uivos do pro)eto.W G Coluna da es4uerda onde poss6vel ei!ir e selecionar Controls' "a(es' 7rvore D$M e outroselementos. "ara ei!irJesconder um dos (rupos' cli4ue no la!el vertical' por eemplo 8"a(es9. Alista de controles dispon6veis vai depender do frame0or: -/ selecionado para o pro)eto.U G Atravs da !arra de ferramentas do App Desi(ner poss6vel recarre(ar seu aplicativo' ecluirum controle ou elemento selecionado' desfaer ou refaer a ltima ação' ver o frame0or: -/selecionado' redimensionar a 7rea de tra!al+o workspace canvas) e a orientação do dispositivo'

ei!ir ou ocultar as guidelines.5 G 1arra de ferramentas para selecionar ou ecluir controles e outros elementos de documentosda 7rea de tra!al+o.V G Bor:space canvas 4ue mostra o loo:NandNfeel da App numa representação B[&/B[2 B+at[ou &ee /s B+at [ou 2et N $ 4ue voc; v; o 4ue voc; o!tm. Arraste e solte os elementos dacoluna da es4uerda para a 7rea de tra!al+o. G Coluna da direita para confi(urar as propriedades' criar estilos e media 4ueries' atri!uir estilosaos controles' definir interatividade e outros elementos.


Aba DEVELOPER



87

App Designer – Workspace Canvas

Conforme voc; arrasta um controle da coluna da es4uerda para a 7rea de tra!al+o "oss6veis 7reas de destino aparecem em um fundo aul claro. A 7rea onde o controle colocado fica com um fundo alaran)ado.

"ara mover um controle eistente na 7rea de tra!al+o para um novo local' !asta arrast7Nlo.

A G -tiliado para inserir Wrap Points.1 G 1arra dos wrap points. ?ela voc; poder7

mover' inserir e deletar os wrap points.C G Alças da 0or:space. $!serve 4ue são tr;salças. &ervem para redimensionar a telacanvas de acordo com a necessidade.D G Bor:space para ver os controles eelementos relacionados 4ue voc; inseriu nap7(ina do aplicativo. *oc; pode inserir' mover eselecionar controles dentro dessa tela canvas'ou ecluir um elemento.

E G A!as 4ue ei!em o lo( de atividade' a)udacontetual' visualiação do c,di(o LE&& e HTML.@ poss6vel editar o c,di(o LE&& e HTML.


Aba DEVELOPER



88

App Designer – LE

A!rimos a4ui um par;ntesis para eplicar o 4ue o LE&&. &e(undo a Bi:ipdiaLESS u!a linguage! de "olha de estilos din#!ica desenhada por $le%is Sellier. Ela "oiin"luenciada por Sass e in"luenciou a nova sinta%e &S'SS” do Sass, (ue adaptou sua sinta%e de"or!a*o de blocos do tipo 'SS. LESS de c+digo aberto. Sua pri!eira vers*o "oi escrita e! uby,no entanto e! verses posteriores, o uso do uby "oi depreciado e substitudo por /avaScript. $sinta%e indentada do LESS u!a !etalinguage! aninhada, u!a ve0 (ue u! c+digo v1lido e! 'SSta!b! v1lido e! LESS e te! a !es!a se!#ntica. LESS "ornece os seguintes !ecanis!os2vari1veis, aninha!ento, !i%ins, operadores e "unes3 a principal di"erena entre LESS e outros

pr-co!piladores de 'SS (ue LESS per!ite a co!pila*o e! te!po real pelo navegador por!eio do LESS.4s. LESS pode ser e%ecutado tanto no lado do cliente (uanto no lado do servidor, ou pode ser co!pilado e! 'SS plano.


Aba DEVELOPER



89

App Designer

$ App Desi(ner s, estar7 vis6vel e dispon6vel se voc; iniciar um pro)eto 4ue o utilie. &e for umpro)eto em !ranco' mar4ue a caia 8-se App Desi(ner9. $s templates 8LaOout and -ser /nterface9tam!m contm essa caia. Al(uns &amples e Demos utiliam o App Desi(ner' outros não.


Aba DEVELOPER



90

App Designer

Depois de informar o nome do pro)eto' o XDK vai solicitar 4ue voc; escol+a o frame0or: -/. $ ladodireito da tela ei!e al(uns controles interativos do frame0or: selecionado para a)udar na escol+a.


Aba DEVELOPER



91

App Designer

Analise o ar4uivo de inde.+tml e o!serve 4ue a seção ]!odOY contm mltiplas ta(s ]divY. $]divY mais eterno define o documento principal. &e voc; tem uma lin+a com duas colunas' alin+a contm ta(s ]divY e anin+adas dentro dela estão as ]divY das colunas. Dentro de cadacoluna ]divY estão os controles 4ue voc; inseriu anin+ados com as ta(s ]divY dessa coluna.


Aba DEVELOPER

App Designer – Diretrizes de Codificação



92

?ão modifi4ue o ar4uivo cssJindemain.less.css. Ele reservado para uso pelo App Desi(ner'portanto crie seu pr,prio ar4uivo C&& para o seu pro)eto. $ App Desi(ner utilia ar4uivos LE&& e não ar4uivos C&&. "ara ver rapidamente ou editar um

ar4uivo .less' selecione um elemento Document e cli4ue na a!a LE&& a!aio da 0or:space. "ara preservar a capacidade de alterar os controles e isso repercutir no c,di(o e tam!m alterar

o c,di(o e isso repercutir nos controles visuais' não altere os la!els 4ue contm 8-/19. Evite usar c,di(o %ava&cript incorporado no laOout HTML. Essa a!orda(em não recomendada

por4ue as mudanças 4ue voc; fa no laOout podem modificar ou apa(ar o c,di(o em!utido.Alm disso' futuras vers3es do Cordova podem limitar o uso de %ava&cript em!utido. Em ve de

usar %ava&cript em!utido' use o App Desi(ner para atri!uir um /D aos controles. Da6' em seuc,di(o de inicialiação' acesse o controle. Eemplo

el : document*%etElement76IdM;m6ElementID;N


Aba DEVELOPER

Templates



93

$ XDK fornece al(uns templates para iniciar um pro)eto de forma mais f7cil. Ao iniciar um pro)etoa partir desses templates' o XDK utiliar7 o frame0or: -/ App rame0or: A-/. Esteframe0or: patrocinado pela /ntel. *eremos a(ora sete desses templates

&in(le*ie0 App lip*ie0 App List*ie0 App 2rid*ie0 App

&ideMenu App Ta!*ie0 App Lo(in*ie0 App


Aba DEVELOPER

Templates – ingleView App



94

Este template pode ser usado para aplicaç3es simples 4ue temapenas uma vie0.

Eemplos de Apps 4ue podem ser feitas com esse template

Calculadora las+ Li(+t


Aba DEVELOPER

Templates – FlipView App



95

Este template pode ser usado paraaplicaç3es utilit7rias simples comuma vie0 principal e outra deconfi(uraç3es.

Eemplos de Apps 4ue podem serfeitas com esse template

Mapas

Clima #el,(io


Aba DEVELOPER

Templates – ListView App



96

Este template pode ser usado paraaplicaç3es 4ue precisem ei!irdados em uma lista simples natela principal.

$ usu7rio pode nave(ar na lista eao selecionar um item acessar7uma tela secund7ria com asinformaç3es detal+adas do item

selecionado.


ENMail Mensa(ens T0itter Apps comerciais com acesso a

dados


Aba DEVELOPER

Templates – GridView App



97

Este template pode ser usado paraaplicaç3es de fotos com umavisão em (rade (rid 4ue a!rir7o detal+e' ou se)a' a visualiaçãoda foto selecionada.


Aplicaç3es de otos /nsta(ram


Aba DEVELOPER

Templates – ideMenu App



98

Este template pode ser usado paraaplicaç3es simples 4ue utiliamum menu lateral 4ue pode seracessado para nave(ar entre asvie0s.


[outu!e 2mail Apps comerciais com acesso a

dados


Aba DEVELOPER

Templates – TabView App



99

Este template pode ser usado paracriar uma aplicação 4ue utiliaa!as para nave(ar entre as vie0s.


ace!oo: /nsta(ram

Apps comerciais com acesso adados


Aba DEVELOPER

Templates – LoginView App



100

Este template pode serusado para criar umaaplicação 4ue re4uisitaum lo(in ou umre(istro antes 4ue aApp se)a iniciada.

"ossui tanto a opção delo(in 4uanto a de

re(istro.Eemplos de Apps 4ue

podem ser feitas comesse template

ace!oo: T0itter Apps comerciais com

acesso a dados

desenvolvendo aplicações multiplataforma com o xdk

Documents