XDK 100 PDF

#Desenvolvendo Aplicaes Multiplataforma com o XDK
Sumrio
Introduo
Apresentao do XDK. Construindo Apps
multiplataforma com o HTML5. Cordova.
Explorando a Ferramenta
Apresentao do XDK e seus recursos.
Licena
Entendendo a licena do XDK.
Explorando os Demos
Explorando os Demos do XDK.
Aba PROJECTS
Explorando
a
aba
PROJECTS.
Criando,
gerenciando
e
importando
projetos.
Adicionando e gerenciando plugins. Projetos
Cordova.
Aba DEVELOP
Explorando a aba DEVELOP. Conhecendo o
editor de cdigo. Desenvolvendo a App de
forma visual. Usando Templates.
Depurando e Testando
Explorando a aba EMULATE. Utilizando o
emulador. Usando o Intel App Preview.
Explorando
as
abas
TEST
e
DEBUG.
Debugando uma App. Testando a App em
dispositivos reais.
Construindo e Publicando a App
Informaes para construir e publicar a App
nas lojas da Apple, Google e Microsoft.
Publicando a App na loja do Chrome.
Aplicaes com Dados Locais
Criando aplicaes com acesso a dados locais.
Aplicaes Consumindo Web Services
Criando aplicaes que consumam os servios
de um web service.
Desenvolvimento de Jogos
Introduo ao desenvolvimento de jogos com
o XDK.
Diga no pirataria
O leitor que adquiriu o e-book legalmente no site AlbertEije.COM poder

imprimir o contedo para seu uso pessoal.
A cpia do contedo do livro sem autorizao configura crime. Alm de
contribuir para a criminalidade, a cpia ilegal desestimula o autor de realizar
novos trabalhos. Todos saem perdendo com a pirataria.
Introduo
A Ferramenta XDK
O XDK uma IDE da Intel. Ele foi
desenvolvido com o objetivo de ajudar o
desenvolvedor a criar Apps que possam ser
publicadas nas principais lojas de aplicaes e
que possam rodar na grande maioria dos
dispositivos existentes.
As aplicaes feitas com o XDK so hbridas,
ou seja, so aplicaes feitas em HTML5 que
possuem a capacidade de acessar os recursos
nativos do dispositivo. Para isso ser utilizada
uma ponte entre a aplicao HTML5 e os
recursos do dispositivo. Essa ponte um
conjunto de componentes que podemos
chamar de framework.
O problema que no teremos acesso aos

recursos do dispositivo, por questes de
segurana. Para isso utilizaremos a tal
ponte. Pensando nisso a comunidade criou o
PhoneGAP, um projeto 100% open source.
Esse framework foi desenvolvido pela Nitobi,
que foi comprada pela Adobe. Posteriormente
foi doado para a Apache e chamado de Apache
Callback. Como o nome era muito genrico, foi
renomeado para Apache Cordova. O PhoneGap
agora uma distribuio Cordova. com ele
que poderemos acessar os recursos do
dispositivo tais como a cmera, contatos,
notificaes, etc.
Imagine uma pgina feita em HTML5 com

algum cdigo em JavaScript. Para melhorar a
aparncia da pgina, utilizaramos CSS.
Basicamente isso que faremos para que
nossa App rode em todos os dispositivos
mveis.
4
Introduo
A Ferramenta XDK
O XDK a ferramenta que vai possibilitar o
desenvolvimento das Apps hbridas. Mas no
apenas isso, ele permite que voc desenvolva
de forma visual, realize testes utilizando uma
ferramenta instalada no dispositivo, debugue a
aplicao diretamente no dispositivo, crie seu
pacote para publicao nas lojas e muito mais.
O webview tem menos recursos que um

browser. A vantagem a capacidade de ser
estendido atravs dos plugins de cdigo nativo
do Cordova (PhoneGap).
Alm das aplicaes hbidas, possvel criar

Apps HTML5 nativas e at mesmo importar
projetos HTML5 desenvolvidos anteriormente.
possvel instalar o XDK no Windows, Linux e
OSX.
O XDK cumpre a promessa: escreva uma vez,
rode em qualquer lugar, em ingls writeonce, run-anywhere.
As Apps construdas no XDK rodam num
webview (navegador embutido) e esto
limitadas aos recursos do webview mais a
combinao dos plugins utilizados.
5
Introduo
Construindo Apps Multiplataforma com HTML5
O que um aplicativo multiplataforma?
aquele que chega ao usurio atravs de
qualquer dispositivo que ele possa utilizar,
onde quer que se encontre.
OK. E porque usar o HTML5? Bom, existem
vrios dispositivos no mercado, com suas
respectivas plataformas. Para resumir, vamos
citar as principais: Android, iOS e Windows
Phone. Isso significa trs linguagens de
programao para aprender, cada uma com
seus recursos:
Android Java
iOS Objective C
Windows Phone C# ou Visual Basic
Imagine ento criar uma App para as trs

plataformas!
Existem alternativas que se apresentam para
criar as Apps utilizando uma s IDE.
Uma delas o Delphi / RAD Studio /

AppMethod da Embarcadero. Com essa IDE
possvel criar Apps para Android e iOS, alm
de aplicaes desktop para Windows e OSX.
No entanto, ele no tem suporte para o
Windows Phone e tem o preo alto. Sem falar
das constantes atualizaes, que foram o
desenvolvedor a pagar pelos upgrades.
Outra alternativa o Xamarin. Se o
desenvolvedor instalar o Xamarin no Visual
Studio, conseguir criar Apps para as trs
plataformas. Para isso criar um projeto e
compartilhar parte do cdigo. Para que as
Apps sejam fieis aos recursos visuais de cada
plataforma, o desenvolvedor dever criar
projetos distintos para desenhar as telas.
Existe uma alternativa para isso, que usar o
Xamarin.Forms. Dessa forma, o desenvolvedor
consegue desenhar a tela apenas uma vez,
mas existem limitaes. Existe ainda a
questo do preo, que cobrado por
plataforma utilizada e por perodo.
6
Introduo
Existem ainda outras opes, mas as que
mencionamos anteriormente so as mais
promissoras para quem deseja construir
aplicaes para as trs plataformas principais.
Como tudo na vida, utilizar cada uma das
opes tem seus prs e contras.
A opo que vamos apresentar nesse livro
criar as Apps usando HTML5 com os plugins do
Cordova. Para facilitar nossa vida, vamos
utilizar o XDK, a IDE feita pela Intel.
Uma vantagem de usar o HTML5 que voc
no se preocupar em aprender as linguagens
utilizada por cada plataforma. Alm disso, no
precisar conhecer detalhes das APIs de cada
plataforma.
Outra vantagem interessante que sua App
vai funcionar nos dispositivos novos que
chegam ao mercado.
Um dos grandes desafios de criar aplicaes

multiplataforma o tamanho das telas.
Quando a Apple cria um dispositivo novo, ela
pensa nas Apps que sero criadas para esse
dispositivo e como tais Apps sero feitas
utilizando a sua IDE, o XCode. provvel que
pense tambm na compatibilidade com seus
demais dispositivos.
No entanto, a Apple no vai se preocupar com
a compatibilidade dos dispositivos feitos para
Android ou para o Windows Phone.
Cabe ao desenvolvedor que cria Apps para
todas as plataformas se preocupar com isso.
O tamanho da tela apenas uma das vrias
preocupaes que um desenvolvedor ter
quando for criar uma App multiplataforma.
Existem ainda os demais recursos: cmera,
acelermetro, etc.
7
Introduo
Uma App multiplataforma deve tirar proveito
desses recursos e ainda se preocupar com a
experincia do usurio. O usurio espera que
uma App feita para Android se comporte como
uma App feita para Android. Como assim?
Existem alguns padres em cada plataforma.
Por exemplo, as abas de uma App para iOS
aparecem na parte inferior da tela, ao passo
que numa App feita para Android aparece na
parte superior da tela.
Se
o
desenvolvedor
fizer
uma
App
multiplataforma e deixar as abas na parte
inferior da tela, os usurios do iOS no vo
estranhar, mas os usurio do Android vero
algo diferente, fora do padro. Dessa forma, o
usurio no estaria tendo uma boa experincia
ao utilizar essa App.
possvel empacotar o cdigo HTML5 e

disponibilizar a App para implantao, como se
fosse uma App nativa.
Dessa forma, ser possvel utilizar os mesmos
canais de distribuio e monetizao das Apps
nativas. Alm disso, pode-se utilizar os
mesmos recursos de lanamento e instalao.
A App no vai rodar numa janela do browser
do dispositivo. Em vez disso, rodar em um
webview de tela cheia (fullscreen), com
controle total sobre o estado real da tela e
sobre as capacidades do dispositivo.
As Apps feitas em HTML5 no esto limitadas

a serem exibidas dentro de um browser.
8
Introduo
A App feita em HTML s ser multiplataforma
se as plataformas de destino suportarem todas
as APIs utilizadas. Dessa forma, preciso ter
ateno a alguns detalhes, como a utilizao
de cdigo JavaScript.
No porque um cdigo escrito em
JavaScript que ele vai rodar em qualquer
plataforma. Se um cdigo feito em JavaScript
fizer uso de uma API especfica, a App no
ser multiplataforma.
Ou seja, o cdigo feito em HTML porttil, o

pacote no. O pacote feito para cada
plataforma.
E a que entra o XDK. Com ele possvel
desenvolver a aplicao e tambm criar os
pacotes para cada plataforma facilmente.
Uma API importante e multiplataforma o

Apache Cordova. Ele habilita o acesso aos
recursos
do
dispositivo
cmera,
acelermetro, geolocalizao, etc de forma
consistente
em
vrias
plataformas
e
dispositivos.
O
Cordova
fornece
acesso
para
implementaes nativas em cada plataforma.
As Apps feitas com o Cordova devem ser
empacotadas como uma App hbrida.
9
Introduo
E como ajustar a aplicao para as telas de
vrios dispositivos usando HTML? Existem
vria formas de fazer isso.
Usando Escala Dimensionamento
Uma forma simples de controle dimensionar
os componentes e fontes de acordo com o
tamanho da tela e, opcionalmente, ajustar o
preenchimento em torno dos componentes.
Para trabalhar dessa forma, o leitor pode usar
unidades relativas do CSS ou utilizar um
framework responsivo como o jQuery Mobile
ou o Sencha Touch para fazer o trabalho
pesado.
Imagens Responsivas
As imagens podem exigir mais do que um
simples
dimensionamento.
s
vezes
desejvel cortar uma imagem de maneira

diferente ou mesmo carregar uma imagem
com resoluo maior ou menor.
Layout Responsivo
Se a App formada por vrias sees, talvez
seja interessante pensar num layout fluido em
que voc rearranja (e as vezes esconde)
alguns elementos. Existem alguns padres
(patterns) de layout e de navegao que
podem ser estudados e implementados para
esse fim.
10
Introduo
Web App ou WebView App?
Quando voc mencionar que est criando uma
aplicao
web
para
celular,
alguns
desenvolvedores vo pensar no Chrome ou no
Safari rodando a aplicao e logo vo imaginar
que isso no vai dar certo.
O fato que uma Web App realmente roda
num browser, mas uma WebView App no.
Como assim?
Uma aplicao web (Web App) um software
que roda num browser e criada numa
linguagem de programao suportada pelo
browser, como a combinao HTML + CSS +
JavaScript. necessrio um browser para
renderizar a aplicao.
Geralmente so aplicaes interativas que no
dependem de um servidor para atualizar a
view. Pode ser uma calculadora, um jogo, etc.
Uma WebView seria uma Web App HTML5

hbrida, feita para rodar um dispositivo mvel.
Ela ser executada dentro de um controle
WebView e no num browser.
O termo WebView tem origem na biblioteca
incorporada nos sistemas operacionais para
dispositivos mveis. O nome dessa biblioteca
no iOS UIWebView. No Android e no
Windows Phone conhecida como WebView.
As caractersticas e capacidades do WebView
podem variar dependendo da plataforma, da
verso do sistema operacional e at mesmo do
fabricante do dispositivo. Por exemplo, o
WebView de um dispositivo Android da
Samsung pode se comportar de forma
diferente em um dispositivo Android da HTC.
Podemos fazer uma analogia com o que ocorre
entre Firefox, Chrome e Internet Explorer.
11
Introduo
Portanto, para ficar claro, sua App HTML5 vai
rodar dentro de um WebView nativo e no
dentro de um browser do dispositivo. No se
trata de uma App compilada. Trata-se de uma
aplicao HTML5 que ser interpretada e
processada
pelo
WebView
nativo
do
dispositivo.
Na
imagem
abaixo
observamos
o
funcionamento de uma Web App rodando
dentro de um browser no dispositivo.
O acesso s bibliotecas do dispositivo feito
pelo browser.
12
Introduo
Na imagem abaixo podemos observar
funcionamento de uma App Hbrida.
Existem duas diferenas principais entre o

browser e o webview:
1 - Localizao do motor de renderizao.

2 - Capacidade de estender a API JavaScript.
E o que isso significa?
13
Introduo
O Motor de Renderizao (o intrprete do
HTML, JavaScript e CSS) est contido dentro
do browser e est embutido dentro do
firmware do dispositivo mvel.
Assim sendo, possvel atualizar esse
intrprete quando o browser do dispositivo
atualizado, pois ele vir junto com o browser.
Isso pode ser til para uma Web App, mas no
far diferena para uma WebView App, que
utiliza o intrprete do firmware.
A capacidade de estender a API JavaScript de
uma WebView App (via plugins Cordova)
significa que as Apps tero acesso a dados e
sensores do dispositivo. Isso no permitido
numa Web App que roda num browser.
Existem alguns problemas relacionados ao

WebView do Android. Na verdade, essa
plataforma a que apresenta maiores
desafios. A natureza aberta e flexvel do
Android ao mesmo tempo uma bno e
uma maldio, pois ela permite muitas
variaes.
Existem algumas solues para resolver os
problemas do WebView do Android. Uma delas
o Crosswalk, que um WebView
customizado. O objetivo dele normalizar o
comportamento e as caractersticas dos
dispositivos Android 4.x.
Portanto, para construir uma aplicao HTML

que rode num dispositivo e possa ser
publicada nas lojas, voc dever criar uma
WebView App.
14
Viso Geral
O XDK possui uma srie de abas, conforme
observado na imagem abaixo.
Aba PROJECTS
Essa aba deve ser utilizada para criar um novo
projeto, alterar o projeto atual ou importar
uma aplicao HTML5 j existente. Essa aba
lista todos os projetos criados ou importados
pelo XDK.
O projeto ativo ficar realado e ser nele que
as demais abas realizao suas operaes.
Aba DEVELOP
Essa aba suporta vrias vises (views). Isto ,
voc pode visualizar o editor de textos e
trabalhar diretamente nele ou ento desenhar
a tela de forma visual.
Nessa aba tambm possvel trabalhar com o

desenvolvimento de jogos utilizando o painel
Game Asset Manager. Alm disso, existe a
seo Web Services, que fornece acesso
rpido e fcil a uma coleo de APIs de Web
Services disponveis na nuvem.
Aba EMULATE
Nessa aba ser possvel checar o layout e as
funcionalidades de sua aplicao numa coleo
de dispositivos virtuais. O simulador baseado
no emulador Apache Ripple.
possvel ainda clicar no boto Debug (o que
tem o cone de um inseto) para abrir o CDT
(Google Chrome Developer Tools). Com isso
ser possvel debugar o cdigo JavaScript, as
regras CSS e os elementos DOM.
15
Viso Geral
Aba TEST
Aba DEBUG
possvel copiar o aplicativo para um

dispositivo real atravs da rede, sem plugar o
cabo USB. Com isso ser possvel realizar uma
inspeo remota na aplicao. Para facilitar a
inspeo remota voc dever baixar e instalar
uma aplicao no dispositivo. O nome dessa
aplicao Intel App Preview. Ela est
disponvel para as trs plataformas: Android,
iOS e Windows Phone.
Com essa aba ser possvel depurar a

aplicao sem precisar construir e instalar a
mesma.
Provavelmente seria melhor chamar essa aba

de PREVIEW, pois ela permite uma viso da
App no dispositivo real, mas possui funes
limitadas de depurao e testes.
A vantagem dessa aba em relao a aba TEST

que, com ela, possvel usar o CDT (Google
Chrome Developer Tools) para depurao
remota. Assim possvel debugar o cdigo
JavaScript
completo
com
pontos
de
interrupo (break points).
Essa aba s funciona com os dispositivos
Android 4+ e Apple iOS 6.1+. O dispositivo
precisa estar conectado via USB.
Para os dispositivos Windows, essa aba a

melhor opo. Para os dispositivos Android e
iOS, temos a aba DEBUG.
16
Viso Geral
Aba PROFILE
Aba BUILD
Nessa aba ser possvel monitorar os recursos

da aplicao, identificar CPU e caractersticas
da memria.
Antes de implantar (deploy) a App preciso

constru-la (buid).
Essa aba s funciona nos dispositivos Android

4+.
Aqui ser possvel baixar o cdigo HTML5 para
o dispositivo Android conectado via USB,
executar e pegar estatsticas relacionadas a
como o cdigo JavaScript est utilizando a CPU
e a memria do dispositivo.
Um mdulo de debug especial ser copiado
para o dispositivo: App Preview Crosswalk.
nessa aba que o pacote da sua App ser

construdo para posteriormente ser publicado
em cada loja.
O processo de construo efetuado na
nuvem, para que no seja preciso instalar e
configurar o SDK para cada plataforma de
destino.
A publicao na loja ficar a cargo do
desenvolvedor, que dever seguir as regras
impostas por cada empresa. Veremos mais
detalhes sobre o processo de publicao nas
lojas posteriormente.
17
Primeiro Contato
Para esse primeiro contato esperado que o
leitor tenha instalado o XDK em seu SO
preferido. Alm disso, o leitor precisa instalar
o App Preview no seu dispositivo real.
Aba BUILD
Execute o XDK e realize o login na sua conta

Intel.
nessa aba que o pacote da sua App ser

construdo para posteriormente ser publicado
em cada loja.
Voc poder criar dois tipos de projeto:

Standard HTML5: utiliza HTML5 e JavaScript.
Poder utilizar as APIs padres do W3C. No
suporta o Cordova. Poder ser implantada
como uma App hbrida nas vrias plataformas
(Android, iOS e Windows) ou como uma
aplicao web (web app) em determinadas
plataformas, como a Chrome Web Store.
HTML5 + Cordova: utiliza HTML5 e JavaScript.
Suporta os plugins do Cordova. Poder ser
implantada como uma App hbrida nas vrias
plataformas (Android, iOS e Windows).
Antes de implantar (deploy) a App preciso

constru-la (buid).
O processo de construo efetuado na

nuvem, para que no seja preciso instalar e
configurar o SDK para cada plataforma de
destino.
A publicao na loja ficar a cargo do
desenvolvedor, que dever seguir as regras
impostas por cada empresa. Veremos mais
detalhes sobre o processo de publicao nas
lojas posteriormente.
18
Primeiro Contato | Novo Projeto
Quando selecionar a opo para criar um novo projeto, o XDK fornecer trs opes:
19
Na janela anterior, selecione a opo Samples and Demos. Na opo General, selecione a guia
HTML5 + Cordova. Agora clique na imagem Hello, Cordova para iniciar uma App a partir desse
demo. Clique no boto Continue para iniciar o projeto.
20
O XDK vai solicitar que voc informe o nome da App. Observe na imagem abaixo que eu chamei o
projeto de App20. Na primeira vez que voc criar uma App, o XDK vai exibir um Quick Tour,
apresentando alguns aspectos da ferramenta. Aps isso, voc ver o cdigo de sua aplicao na aba
DEVELOP.
21
Primeiro Contato | Novo Projeto | Aba DEVELOP
1 Essa aba ser
utilizada para editar e
adicionar arquivos ao
projeto. Voc pode usar
o editor
de
cdigo
embutido, que j vem
com o XDK, ou usar o
seu editor de cdigo
preferido,
como
o
Notepad++, se desejar.
2 Na rvore de
arquivos
possvel
visualizar os arquivos
associados ao projeto
ativo,
incluindo
os
arquivos de imagem.
Tambm
possvel
selecionar um arquivo
para edio.
22
3 Utilize as opes de
menu ou seus atalhos
para acessar as opes
do editor de cdigo.
4 No editor de cdigo
ser possvel editar o
arquivo. Utilize o menu
de
contexto
se
necessrio.
5 Use os botes da
barra de ferramentas
(presentes em todas as
abas) para acessar a
ajuda, iniciar o Quick
Tour,
alterar
as
configuraes do XDK,
exibir
e
alterar
as
configuraes de sua
conta e acompanhar os
tweets sobre o XDK.
23
6 A paleta
LIVE
DEVELOPMENT
TASKS
permite
a
prvisualizao do cdigo
em um navegador ou
em dispositivos reais e
virtuais.
7 Com a paleta WEB
SERVICES ser possvel
explorar alguns servios
de terceiros que j vem
embutidos
no
XDK.
Alm
disso,
ser
possvel integrar outras
APIs.
24
O editor de cdigos embutido no XDK baseado no Brackets. Sendo assim, fcil adicionar
extenses atravs do menu File > Extension Manager.
Com esse Demo no podemos trabalhar com o App Designer. Ou seja, no possvel desenhar as
telas de forma visual. Veremos posteriormente como fazer isso. Num projeto que criado para ser
trabalhado de forma visual, possvel revesar entre os modos de visualizao CODE e DESIGN.
Quando iniciamos um projeto que usa o App Designer, teremos a capacidade de trabalhar de forma
visual e tambm no cdigo, sendo que alteraes na tela repercutiro no cdigo e vice-versa.
Se voc selecionar a opo Run My App Run in Emulator da paleta LIVE DEVELOPMENT TASKS
ser aberta uma janela flutuante com as opes do emulador.
Essa janela tem as mesmas opes da aba EMULATE.
25
Primeiro Contato | Novo Projeto | Aba EMULATE
1 A janela flutuante e a
aba EMULATE devem ser
utilizadas
para
corrigir
alguns aspectos da App
antes
que
ela
seja
publicada ou testada num
dispositivo real. possvel
realizar testes em vrios
dispositivos virtuais.
2 Use os botes da barra
de
ferramentas
para
recarregar os arquivos de
cdigo fonte e reiniciar a
aplicao. possvel ainda
iniciar
o
depurador
embutido
numa
nova
janela, exibir e alterar as
configuraes do emulador
e parar de executar a App
no emulador.
26
Primeiro Contato | Novo Projeto | Aba EMULATE
3 Se voc clicar no cone
Auto Zoom, a tela do
dispositivo se encaixar
totalmente na sua janela.
possvel ainda aumentar
e diminuir o zoom atravs
do controle deslizante.
4 Use as paletas para
configurar
vrios
dispositivos virtuais que
ajudam a determinar como
sua aplicao vai funcionar
em vrios tamanhos e
orientaes de telas.
possvel abrir e fechar
cada paleta, ocultar e
mostras as colunas, mover
colunas e mover paletas
dentro de uma coluna.
5 Utilize o dispositivo
virtual para testar a App.
27
Primeiro Contato | Novo Projeto | Aba TEST
Antes de usar a aba TEST,
no esquea de instalar no
dispositivo real a App
Preview.
Quando acessar a aba
TEST pela primeira vez,
uma mensagem vai surgir
solicitando a sincronizao
com o servidor: Please
sync with our testing
server.
1 Utilize a aba TEST para
avaliar atravs da rede
como sua App funciona
num dispositivo real sem
precisar
realizar
uma
instalao completa do
mesmo. Nesse ponto voc
tambm ver como ser a
aparncia da sua App no
dispositivo real.
28
2 Use o boto MOBILE
para realizar testes num
servidor na nuvem. Requer
configurao mnima, evita
problemas de firewall da
rede, possvel baixar os
arquivos do servidor a
qualquer
hora
e
em
qualquer lugar.
Use o boto WIFI para
realizar testes numa rede
Wi-Fi
onde
tanto
a
mquina
de
desenvolvimento quando o
dispositivo real estejam
conetados.
3 As instrues esto ali
para lembrar como as
coisas funcionam.
29
4 Use o boto PUSH
FILES para enviar os
arquivos mais recentes do
projeto de sua mquina
para o servidor.
5 Use o leitor de QR
Code do App Preview para
executar
o
teste
no
dispositivo real.
6 possvel depurar
remotamente a aplicao
enquanto ela estiver sendo
executada no dispositivo
real.
Nesse
caso
utilizado o console de
depurao weinre.
30
Primeiro Contato | Novo Projeto | Aba BUILD
1 A aba BUILD fornece
vrias
opes
para
construir o pacote da
aplicao. Nessa aba ser
possvel empacotar a App
para que a mesma seja
distribuda nas lojas. Se
for
uma
App
HTML5
poder ser publicada em
lojas de Apps HTML, como
a Chrome Web Store.
2
Use
a
paleta
PREVIOUS BUILDS para
visualizar e atualizar uma
lista
de
compilaes
(builds) anteriores.
31
Primeiro Contato | Novo Projeto | Aba BUILD
3 Na seo CORDOVA
HYBRID
MOBILE
APP
PLATFORMS
voc
conseguir criar um pacote
que poder ser publicado
nas lojas da Apple, Google
e Microsoft.
4 A opo LEGACY
HYBRID
MOBILE
APP
PLATFORMS continua na
ferramenta por conta de
APIs antigas. Recomendase migrar as aplicaes
para as APIs atuais e
utilizar a opo CORDOVA
HYBRID
MOBILE
APP
PLATFORMS.
Veremos
em
detalhes
como funciona cada uma
das abas nos captulos
posteriores.
32
Licena
Entendendo a Licena do XDK
A utilizao das ferramentas disponibilizadas
no site da Intel so regidas pelo TOU Terms
of Use.
possvel ler os termos completos no seguinte
link:
https://appcenter.html5tools-software.intel.com/TOS/
Ao utilizar o site da Intel ou baixar qualquer

material que esteja nele, o usurio estar
aceitando os termos de uso descritos no link
acima.
importante a leitura completa dos termos
acima antes de usar o XDK. Vamos abordar
aqui alguns aspectos importantes relacionados
licena da ferramenta.
Antes de usar o XDK, preciso se registrar no
site da Intel. preciso ser maior de 18 anos.
O ID e senha criados no site no pode ser
compartilhado com outro usurio.
possvel usar as ferramentas da Intel sem

precisar pagar royalties ou qualquer outro
valor. possvel distribuir as aplicaes
desenvolvidas da forma que voc desejar. Ou
seja, o XDK gratuito e voc pode vender as
Apps que fizer com ele sem nenhum
problema.
O que voc no pode fazer redistribuir ou
vender os materiais da Intel. Ou seja, voc
no pode sair por a vendendo o XDK.
Provavelmente essa a parte da licena que
mais interessa, pelo menos para a maioria
dos desenvolvedores.
importante frisar que a leitura dos termos e
condies informados no link anterior
imprescindvel.
33
Explorando os Demos
Samples e Demos
Uma das melhores formas de aprender uma
ferramenta, um framework, uma linguagem,
etc estudando os demos. O XDK vem com
vrios deles.
J vimos que ao acessar a opo START A
NEW PROJECT teremos acesso seo
Samples and Demos.
Nessa seo ns temos o item General, que
fornece acesso aos demos Standard HTML e
HTML5 + Cordova.
Temos ainda o item Games, que fornece
acesso aos demos HTML5 + Cordova.
importante frisar que as Apps criadas com o

XDK so feitas com HTML + JavaScript +
CSS. Assim sendo, preciso ter o mnimo de
conhecimento dessas linguagens. Quanto
maior for o seu conhecimento nessas
linguagens, mais facilidade voc ter para
criar suas Apps com o XDK.
Se voc nunca teve contato com essas
linguagens, pare agora a leitura do livro e
aprenda sobre elas. Tenha pelo menos uma
viso geral sobre elas, seno o estudo do XDK
ser frustrante.
Veremos agora alguns desses demos e como o

estudo deles pode ajudar a compreender como
o XDK funciona e quais os passos para
construir uma App com essa ferramenta.
34
Explorando os Demos
Samples e Demos | Buttons
Vamos comear com o Sample Buttons. Selecione esse exemplo conforme imagem abaixo e clique
no boto Continue. Esse um exemplo bsico que mostra como uma tela responsiva com botes.
O projeto em si no tem muito segredo. Dois botes sero exibidos na tela e tero seu tamanho e
posio adaptados de acordo com o tamanho e orientao da tela.
Depois de criar o projeto,
acesse a aba EMULATE e
altere vrias vezes o
dispositivo. Observe como
a tela vai se adequando
ao tamanho da tela do
dispositivo.
Mude
tambm
a
orientao da tela e
observe como a aplicao
se comporta.
35
Explorando os Demos
A aplicao foi salva com o nome App21. Dentro da pasta da aplicao esto os arquivos do
projeto XDK, conforme observamos na imagem abaixo. O arquivo .xdke contm preferncias
especficas do desenvolvedor para o projeto. O arquivo .xkd define o projeto e compartilhado
por todos os membros que trabalham no mesmo projeto. Esses arquivos no devem ser alterados
por fora do XDK.
Depois de criar o projeto,
acesse a aba EMULATE e
altere vrias vezes o
dispositivo. Observe como
a tela vai se adequando
ao tamanho da tela do
dispositivo.
Mude
tambm
a
orientao da tela e
observe como a aplicao
se comporta.
36
Explorando os Demos
Na imagem anterior podemos observar que existe uma pasta www dentro da pasta do projeto.
Essa pasta contm o projeto HTML. Voc pode clicar duas vezes no arquivo index.html e ver que
ele ser aberto no seu navegador padro. Observe pelo cone que o navegador padro da mquina
onde a imagem foi capturada o chrome.
O projeto ser aberto e funcionar normalmente no browser. Lembrando que criamos um projeto
Standard HTML.
Explorando as demais pastas voc ter acesso aos arquivos CSS, JavaScript e de imagens. A pasta
xdk contm um arquivo JSON com algumas informaes sobre o projeto.
37
Explorando os Demos
O que existe para estudar nesse Demo? Na verdade, no tem muita coisa. Trata-se
HTML puro e simples. Se voc domina HTML + JavaScript + CSS j possui
conhecimento necessrio relacionado ao exemplo! Sua preocupao no momento
design e layout responsivo. O que isso? Em suma, adaptar a visualizao da sua
qualquer tipo de tela.
de um projeto
quase todo o
deve ser com
aplicao para
No vamos tratar desse assunto no livro, pois no o nosso foco. Portanto, se voc ainda no
ouviu falar sobre responsividade ou como criar telas responsivas, chegou a hora de pesquisar sobre
os seguintes temas antes de continuar a leitura do livro:
Multi-Device Layout Patterns

Responsice Patterns
Design Responsivo
Layout / Leiaute Responsivo
Responsive Web Design
Responsive Images
Media Queries
Leve o termpo que for necessrio pesquisando sobre esse assunto at compreend-lo e depois
volte leitura do livro.
38
Explorando os Demos
Samples e Demos | Geolocation Demonstration
Uma das caractersticas mais utilizadas nas aplicaes acessar a localizao geogrfica do
dispositivo. til em vrias situaes.
O XDK possui um demo que trata exatamente disso. No um demo Standard HTML. Trata-se de
um demo HTML5 + Cordova. Inicie uma nova aplicao conforme imagem a seguir.
39
Explorando os Demos
O objetivo desse demo mostrar como criar uma App hbrida que
aproveita os servios de geolocalizao da API JavaScript Bridge, bem
como se conectar a web services gratuitos de mapeamento.
Essa App vai acompanhar o progresso do usurio durante sua viagem
e vai colocar um pin no mapa a cada 10 segundos.
Existem duas funes importantes nessa App. Ambos esto no
arquivo js/main.js.
A primeira a que detecta a latitude e a longitude do dispositivo a
partir de seus servios de geolocalizao, conforme demostrado
abaixo.
40
Explorando os Demos
A segunda a que desenha o mapa na tela.
O que voc deve fazer nesse momento? Explorar os demais demos.

Inicie um novo projeto para cada demo disponvel, incluindo a os que
so apenas HTML, os hbridos e os games.
Concentre-se em testar os demos para observar o que voc pode
fazer com esse tipo de aplicao. Se desejar, explore tambm o
cdigo. Quanto mais estudar o cdigo, mais vai aprender. Nos
captulos seguintes vamos analisar a fundo as caractersticas do XDK.
41
Aba PROJECTS
Viso Geral
Essa aba lista os projetos que foram criados pelo XDK.
1 O nome do projeto ativo aparece direita da ava PROJECTS. As demais abas realizaro suas
operaes em cima desse projeto.
2 Uma lista de
projetos
conhecidos
aparecem
no
lado
esquerdo da tela.
3 Veja informaes
sobre o projeto ativo
na paleta a direita, na
seo Project Info.
4 As configuraes
do
projeto
que
aparecem nessa seo
vo depender do tipo
de projeto que est
sendo trabalhado.
42
Aba PROJECTS
Viso Geral
Para exibir informaes sobre um projeto, basta clicar no nome do projeto. Dentre as informaes
exibidas esto: o tipo de projeto, o caminho raiz e o diretrio de origem. Seguem as funes dos
botes disponveis:
43
Aba PROJECTS
Viso Geral Tipos de Projetos
Existem dois tipos de projetos: Standard HTML5 e HTML5+Cordova. Existe um terceiro tipo de
projeto numa verso especfica do XDK: Internet of Things Embedded Applications. No
abordaremos esse tipo de projeto nesse livro.
44
Aba PROJECTS
Viso Geral Tipos de Projetos
Existem dois tipos de projetos: Standard HTML5 e HTML5+Cordova. Existe um terceiro tipo de
projeto numa verso especfica do XDK: Internet of Things Embedded Applications. No
abordaremos esse tipo de projeto nesse livro.
45
Aba PROJECTS
Habilitando / Desabilitando Plataformas Alvo
Atravs da aba PROJECTS possvel habilitar ou desabilitar certas plataformas alvo. Por exemplo,
em um projeto HTML5+Cordova, se a App requer uma plataforma alvo Android Crosswalk, mas
no precisa da plataforma alvo Android, voc pode desabilitar a plataforma alvo Android.
Para desabilit-la, abra a aba PROJECTS e clique no cone do Android. Com isso, essa plataforma
ser desabilitada e no vai mais aparecer a opo de construir o pacote pra ela na aba BUILD.
Observe a imagem abaixo.
46
Aba PROJECTS
Configurando a App
Para os projetos HTML5+Cordova, voc deve especificar as configuraes na seo CORDOVA
HYBRID MOBILE APP SETTINGS. Essas configuraes so utilizadas pelo XDK para criar os arquivos
de configurao especficos da plataforma que so enviados para o sistema de compilao do XDK.
O XDK gera automaticamente esses arquivos de configurao com base nas configuraes da aba
PROJECTS. Os arquivos intelxdk.config.<platform>.xml se encontram na pasta do projeto.
Voc deve explorar a seo CORDOVA HYBRID MOBILE APP SETTINGS para compreender como
configurar sua aplicao. Observe que existem trs opes: Plugin Management, Build Settings e
Launch Icons and Splash Screens. Ao clicar no boto [+] voc ter acesso a todas as opes de
configurao.
Em Plugin Management voc conseguir:
Explorar e adicionar novos plugins.
Ver o ID, nome, verso, documentao,

dependncias e outros detalhes sobre o plugin.
Remover plugins.
Em Build Settings voc vai configurar aspectos

exigidos por cada plataforma.
E na ltima opo voc conseguir selecionar
as imagens que comporo a App.
47
Aba PROJECTS
Configurando a App Plugin Management
48
Aba PROJECTS
Configurando a App Build Settings
49
Aba PROJECTS
Configurando a App Launch Icons and Splash Screens
50
Aba PROJECTS
Criando um Novo Projeto
Abra a aba PROJECTS e clique na seta abaixo, conforme imagem, ou selecione a opo Start a New
Project abaixo da lista de projetos.
Aps isso, as seguintes opes ficaro disponveis:
51
Aba PROJECTS
Caso voc opte por criar um novo projeto a partir de um Template, dever escolher entre as
categorias disponveis: Blank, Layout and User Interface e Games.
52
Aba PROJECTS
Quando selecionar um dos templates, o XDK apresentar uma breve descrio do mesmo. Ser
possvel nesse momento escolher o tipo do projeto e se o mesmo vai utilizar o App Designer,
conforme imagem abaixo.
s vezes o template possui um artigo que poder ser consultado clicando no respectivo link.
53
Aba PROJECTS
No caso dos jogos funciona de forma semelhante. Cada template apresentar uma breve descrio.
No caso do Cocos2d, visto na imagem, ser possvel selecionar entre as verses 2.x e 3.x.
O desenvolvedor tambm dever selecionar o tipo de projeto (CODE BASE), de acordo com os tipos
que vimos anteriormente.
Nesse momento tambm ser possvel selecionar a orientao:
Portrait ou Landscape.
Se desejar, poder localizar os fontes do Demo no GitHub atravs
do boto abaixo.
Depois que analisar e selecionar o projeto desejado, dever

clicar no boto Continue para que o projeto seja criado.
54
Aba PROJECTS
Plugins para a Aplicao Cordova
Os plugins do Apache Cordova so ferramentas muito importantes para melhorar os recursos e
funcionalidades do seu aplicativo. Eles fornecem uma maneira de estender a API JavaScript do
aplicativo, resultando numa maior integrao entre o aplicativo e o software/hardware do
dispositivo.
Existem centenas de plugins Cordova (e Adobe PhoneGap) disponveis para uso com o seu
aplicativo. Eles podem ser encontrados no registro de plugins do Cordova (Apache Cordova Plugins
Registry) e em outros registros semelhantes, assim como em muitos repositrios open source do
GitHub.
O XDK utiliza plugins Cordova durante todo o ciclo de desenvolvimento de uma App HTML5
Cordova. O uso mais evidente feito nas abas PROJECTS e BUILD.
Na aba DEVELOP, os plugins so usados no editor para apresentar o intelli-sense. A aba EMULATE
toma nota dos plugins que foram adicionados na aba PROJECTS e disponibiliza para a App apenas
as APIs dos plugins que foram adicionados. O emulador usar o conjunto completo de plugins
disponveis no XDK, mesmo que no tenham sido adicionados ao projeto.
Um plugin um pacote de cdigo que permite que sua App HTML5 se comunique com a plataforma
nativa em que executada. O plugin fornece acesso a funcionalidades de plataforma que
normalmente no esto disponveis para Apps que rodam num navegador. As APIs Cordova e do
XDK so implementadas como plugins.
55
Aba PROJECTS
Os plugins consistem de APIs JavaScript e mdulos de cdigo
nativo (para cada plataforma suportada pelo plugin). Em
essncia, quando a App chama a API JavaScript do plugin,
ela redirecionada para o cdigo nativo subjacente que
implementa essa API no dispositivo.
Por exemplo, a API JavaScript redirecionada para cdigo
Java em um dispositivo Android ou para cdigo Objective C
em um dispositivo iOS. Plugins podem ser simples ou
complexos: to complexo quanto o mecanismo de
persistncia do banco de dados ou to simples como um
mtodo para ligar o flash da cmera LED.
Voc no vai precisar aprender Java, Objective C ou C#.
Para usar o plugin voc vai simplesmente adicion-lo no seu
projeto, sem se preocupar em aprender como o plugin
funciona internamente.
Voc pode pensar em um plugin Cordova como uma
biblioteca JavaScript que estende as caractersticas
especficas do dispositivo que sua App pode acessar,
caractersticas que normalmente no podem ser acessadas a
partir de um navegador ou WebView padro.
56
Aba PROJECTS
Plugins para a Aplicao Cordova Observaes
J que a maioria dos plugins so bibliotecas de terceiros, o XDK pode no ter conhecimento
explcito de funcionalidades ou do cdigo interno de um plugin especfico. As ferramentas de
depurao includas no XDK apenas fornecem suporte para os plugins do ncleo do Cordova e
XDK.
Nem todos os plugins so iguais. Muitos plugins esto disponveis apenas para as plataformas
Android e iOS. Os plugins do ncleo do Cordova e XDK suportam uma ampla gama de
plataformas. Certifique-se de confirmar que o plugin que voc pretende usar suporta as
plataformas em que voc planeja implantar seu aplicativo, ou utilize tcnicas de deteco de
plataformas e de recursos para implementar uma soluo alternativa para plataformas no
suportadas.
Nem todos os plugins se comportam de maneira igual em todas as plataformas. O
funcionamento de um plugin pode variar em funo da plataforma, geralmente devido a detalhes
de plataforma e no porque o plugin est incompleto ou com problemas. As variaes incluem
propriedades que no existem em algumas plataformas ou mtodos que no funcionam em
outras plataformas. Consulte a documentao do plugin para observar esses detalhes.
O XDK no possui um mecanismo para validar o funcionamento de um plugin. Busque suporte
com o autor e pesquise na Internet sobre a qualidade do plugin antes de utiliz-lo.
Os plugins de ncleo do XDK so escritos como plugins Cordova. Os plugins de ncleo (core) do
Cordova so mantidos pela comunidade de desenvolvimento Cordova CLI. J os plugins de
ncleo do XDK so mantidos pela equipe de desenvolvimento da Intel.
57
Aba PROJECTS
Plugins para a Aplicao Cordova Observaes
Se voc estiver desenvolvendo seu prprio plugin Cordova, voc pode precisar instalar e usar o
sistema Cordova CLI. Voc pode compartilhar o seu plugin com os outros sem exigir que eles
tambm instalem o sistema Cordova CLI.
O XDK fornece um mecanismo para depurar o cdigo nativo em um plugin Cordova apenas para
dispositivos Android 4.x e 5.x. Para outros dispositivos, voc pode depurar utilizando o
depurador weinre ou ferramentas de desenvolvimento de cdigo nativas que so especficas para
a plataforma nativa.
A App Preview que voc baixou a partir das respectivas lojas para depurao rpida de seus
aplicativos HTML5 inclui suporte apenas para plugins de ncleo do Cordova e XDK. Para
conseguir depurar os plugins de terceiro, ser preciso construir a App, na aba BUILD, e ento
rodar e depurar num dispositivo real.
Para ativar o uso do plugin Cordova, voc dever referenciar o arquivo cordova.js no seu
arquivo index.html.
<script type="text/javascript" src="cordova.js">
Se o seu projeto contiver mais do que um arquivo HTML que utilizar a API Cordova, voc dever
incluir a linha acima em cada arquivo HTML. uma boa prtica adotar o estilo conhecido como
SPA (Single Page Application). Voc faz uma pgina e realiza todo o controle via Ajax. A App
ficar mais eficiente, pois ao criar vrias pginas, a App precisa recarregar os scripts, assets,
etc. Mesmo que tais coisas estejam em cache, ainda assim haver problemas de desempenho.
58
Aba PROJECTS
Plugins para a Aplicao Cordova Single Page Application [SPA]
As
SPAs
so
aplicaes
completas,
desenvolvidas em JavaScript, que funcionam
quase como se estivessem sendo executadas
nativamente no desktop. O Google foi
pioneiro nesta tecnologia e o mundo o
seguiu. Atualmente, a maior parte das
aplicaes web 2.0 usam este modelo: o
Gmail, a busca do Google, o Google Drive,
Facebook, o Twitter, o FourSquare, o
Instagram, blogs, sites corporativos, dentre
outros.
Observe na imagem que numa aplicao web
tradicional, as requisies ficam sendo feitas
ao servidor, que devolve uma pgina HTML
para o navegador a cada requisio.
J numa SPA, toda a pgina carregadas de
uma vez s. As requisies so feitas via
Ajax e o servidor retorna os dados em JSON
que sero exibidos na pgina sem que a
mesma seja recarregada.
59
Aba PROJECTS
J vimos anteriormente que a aba
PROJECTS contm uma seo
para o gerenciamento de plugins
chamada Plugin Management.
Os plugins adicionados no XDK
sero armazenados como parte
de seu projeto e copiados para a
pasta
plugins.
Os
plugins
subiro para o servidor de
compilao da Intel junto com o
cdigo fonte da App.
Voc dever selecionar um dos
plugins listados para adicionar ao
projeto: plugins mantidos pela
equipe
do
Apache
Cordova,
plugins mantidos pela equipe
XDK, plugins Cordova mantidos
por terceiros ou qualquer outro
plugin de terceiro que sua App
necessite.
60
Aba PROJECTS
Aps selecionar um plugin, voc pode expandi-lo para ver mais detalhes sobre ele: ID, verso est
instalada no projeto, um link para a pgina de documentao principal e um cone para modificar a
verso do plugin.
Dependendo do plugin que est utilizando poder ainda observar de quais outros plugins ele
depende, quais as verses do Cordova que so compatveis com o plugin, as permisses Android
que o plugin vai precisar e o nome do autor que criou o plugin.
61
Aba PROJECTS
O Plugin Manager armazena os plugins includos no projeto numa pasta chamada plugins dentro
da pasta do projeto.
Cada plugin armazenado em uma subpasta dentro da pasta plugin. O nome da subpastas ser
de acordo com o ID do plugin. Por exemplo: plugin/org.apache.cordova.file-transfer.
Incluir os fontes do plugin ser til para anlise do cdigo e tambm para depurao.
62
Aba PROJECTS
Plugins para a Aplicao Cordova Whitelist Rules
atravs das Whitelist Rules que voc poder especificar quais recursos do dispositivo sua App
ter acesso. Antes de publicar a aplicao preciso determinar quais recursos especficos so
exigidos por ela, a fim de maximizar a segurana do seu aplicativo e seus dados.
63
Aba PROJECTS
Plugins para a Aplicao Cordova Whitelist Rules
Quando no existem regras definidas, todos os acessos de rede ficaro bloqueados. Atravs das
regras possvel definir se o acesso ao recurso ser feito por meio de uma API (XMLHttpRequest,
por exemplo) ou atravs de marcao (<iframe>, <script>, <img>).
A opo "Block All" bloqueia os acessos externos. Esta a configurao recomendada se o seu
aplicativo no necessita de quaisquer recursos externos.
Essas regras s se aplicam s aplicaes que so construdas e publicadas. As abas EMULATE, TEST
e DEBUG no tem conhecimento das regras definidas nas configuraes do projeto. As ferramentas
de depurao so configurados de forma permanente para permitir acesso externo irrestrito. Se
voc precisar testar suas regras, dever utilizar um pacote publicado num dispositivo real.
Em tempo de execuo, quando uma requisio feita para acessar um recurso de rede dentro do
escopo de execuo da App, o WebView compara a requisio com as regras definidas. Conceder
acesso a um recurso externo, por conta de de uma regra, significa que o cdigo em execuo no
WebView autoriza o acesso ao recurso externo. Em outras palavras, o WebView interpreta as
regras para decidir quando autorizar e quando negar o acesso.
64
Aba PROJECTS
Plugins para a Aplicao Cordova Lista de Plugins
Voc pode encontrar uma lista com os plugins Cordova no seguinte link:
https://github.com/apache?utf8=%E2%9C%93&query=cordova-plugin
Caso o link no esteja ativo, basta
procurar por cordova-plugin no site
da Apache Software Foundation.
Ao clicar no link de um dos plugins,
voc direcionado para a pgina
GitHub com o cdigo fonte e a
documentao do plugin.
Existem alguns plugins XDK que
esto depreciados. Tome cuidado
para no utiliz-los na sua aplicao.
Prefira sempre utilizar os plugins
Cordova.
Observe sempre a documentao do
XDK para observar se o plugin est
depreciado antes de utiliz-lo.
65
Aba PROJECTS
Plugins para a Aplicao Cordova Configurando
Os detalhes para construir a App no servidor da Intel so controlados por diretivas localizadas
dentro de um arquivo comumente chamado config.xml. No caso do XDK ser criado um arquivo
intelxdk.config.xml. Um arquivo de configurao ser criado automaticamente para cada
plataforma. Por exemplo: intelxdk.config.android.xml.
J que esse arquivo gerado automaticamente
sempre que um build realizado, voc no pode
alter-lo.
Se voc precisar incluir alguma diretiva que no
esteja disponvel nas opes do XDK, dever utilizar
um arquivo de adies: Additions File. Tal arquivo
receber o nome intelxdk.config.additions.xml.
Na maioria dos casos voc no usar esse arquivo.
Ele opcional.
66
Aba PROJECTS
Plugins para a Aplicao Cordova Configurando | Arquivo de Adio
Existem algumas opes que podem estar no arquivo de configurao e no tem como configurar
via XDK. A maioria dessas opes so incomuns ou podem ser configuradas pelo valor padro. Se
voc for forado a trabalhar com uma dessas configuraes, ser o caso de criar o arquivo de
adio que mencionamos anteriormente: intelxdk.config.additions.xml. Podemos ver um exemplo
na imagem abaixo. A primeira diretiva adiciona uma opo de configurao que cria um aplicativo
Cordova para Android que pode ser depurado remotamente usando o Google Chrome DevTools.
67
Aba PROJECTS
As demais diretivas do exemplo acima controlam as opes do plugin Cordova Status Bar.
Normalmente essas opes no seriam colocadas nesse arquivo. O fato de elas estarem a
mostram que o desenvolvedor sobrescreveu esses diretivas para alterar o comportamento padro
do plugin.
As diretivas acima sero adicionadas
intelxdk.config.<platform>.xml.
em
cada
arquivo
especfico
de
plataforma:
68
Aba PROJECTS
Observe as quatro linhas adicionadas no final do arquivo especfico da plataforma android.
69
Aba PROJECTS
A seguir veremos alguns exemplos de utilizao do arquivo de adio. O primeiro adiciona uma
preferncia para todos os demais arquivos de construo:
<preference name="Fullscreen" value="true" />
Adiciona uma preferncia apenas para o arquivo de construo do Android:

<icon platform="android" src="assets/icon-l.png" density="ldpi" />
<preference name="Fullscreen" value="true" />
Remove um plugin do arquivo de construo do iOS:

<intelxdk:plugin intelxdk:name="Contacts" />
Remove todos os cones do arquivo de construo do Windows 8:

<icon />
Adiciona um plugin de terceiro que precisa de parmetros em todos os arquivos de construo:

<intelxdk:plugin intelxdk:name="My Special Plugin" intelxdk:value="https://github.com/myplugin/my-specialplugin.git">
<intelxdk:param intelxdk:name="PLUGIN_PARM_1" intelxdk:value="123456789" />
<intelxdk:param intelxdk:name="PLUGIN_PARM_2" intelxdk:value="mySecondParameter" />
</intelxdk:plugin>
70
Aba DEVELOPER
Viso Geral
A aba DEVELOPER fornece uma viso completa dos arquivos da pasta do projeto. Voc pode editar
os arquivos de projeto com o editor de cdigo embutido do XDK ou com o seu editor de cdigo
favorito. Voc tambm pode usar essa aba para explorar web services e visualizar ativos (assets)
de jogos. O XDK detecta automaticamente se um os arquivos do projeto foram alterados (por um
editor de cdigo externo, por exemplo) e solicita aes adicionais por conta disso. Nessa aba o
desenvolvedor tem duas opes de viso (view): CODE visualiza o editor de cdigo embutido e
DESIGN permite a criao da App de forma visual usando o App Designer.
71
Aba DEVELOPER
Viso Geral
Para alternar entre os
modos
CODE
e
DESIGN, utilize os
botes com o mesmo
nome
vistos
na
imagem anterior. Na
imagem anterior voc
observa o tipo de
viso DESIGN.
O
painel
Live
Development
Tasks
se encontra do lado
direito. Ele permite
que a App seja prvisualizada
rapidamente
num
navegador
ou
dispositivo, o que
muito
til
para
alteraes no layout e
CSS.
72
Aba DEVELOPER
Editor de Cdigo
Na barra lateral do
lado esquerdo
possvel visualizar
os arquivos que
pertencem
ao
projeto.
Se voc selecionar
um dos arquivos,
ver
o
cdigo
respectivo
no
editor de cdigo.
Se
estiver
na
visualizao
de
Design, clique no
boto CODE para
visualizar o editor
de cdigo.
73
Aba DEVELOPER
Editor de Cdigo
Na barra lateral do
lado esquerdo
possvel visualizar
os arquivos que
pertencem
ao
projeto.
Se voc selecionar
um dos arquivos,
ver
o
cdigo
respectivo
no
editor de cdigo.
Se
estiver
na
visualizao
de
Design, clique no
boto CODE para
visualizar o editor
de cdigo.
74
Aba DEVELOPER
Editor de Cdigo
O editor de cdigo embutido totalmente integrado com a aba EMULATE. Ou seja, quando salvar
um arquivo no editor, o mesmo ser carregado automaticamente na aba EMULATE para ser
utilizado no emulador. O mesmo no ocorre quando o arquivo utilizado num editor externo.
Nesse caso, ser preciso atualizar a aba EMULATE. No entanto, um arquivo alterado num editor
externo ser atualizado automaticamente no editor embutido.
Para adicionar um novo arquivo, clique com o boto direito na rvore de arquivos e selecione a
opo New File, conforme imagem. Voc deve ento informar o nome do arquivo com a
extenso. Aps isso poder trabalhar no arquivo em branco.
Se desejar deletar o arquivo que criou, selecione o mesmo com o boto
direito do mouse e escolha a opo Delete.
possvel que aps deletar o arquivo, ele ainda aparea na rvore.
Se isso acontecer, clique novamente com o boto direito na rvore
para ter acesso ao menu de contexto e selecione a opo Refresh
File Tree.
Como voc pode observar, tanto a rvore de arquivos quanto o
editor de textos possuem um menu de contexto, que aparece quando
voc pressiona o boto direito do mouse. Realize testes para observar
as opes que esto disponveis nesses menus.
75
Aba DEVELOPER
Editor de Cdigo Viso de Mltiplos Arquivos
Para habilitar a viso para mltiplos arquivos:
1 Para criar uma viso side-by-side, clique View > Vertical Split.
2 Para criar uma viso above-and-below, clique View > Horizontal Split.
3 Para desativar a diviso da tela e fechar o painel que no est em foco, use View > No Split.
Depois de habilitar uma viso de tela dividida (split screen view), as operaes realizadas sero
aplicadas ao painel que se encontra com o foco. Alm disso, a seo Working Files ser
substituda pelas opes Left e Right numa diviso vertical (side-by-side), ou Top e Bottom numa
diviso horizontal (above-and-below).
76
Aba DEVELOPER
Editor de Cdigo
Ao explorar o editor voc logo ver que ele se comporta como outros editores de cdigo, como o
Notepad++, e que tem suas prprias caractersticas, evidentemente. Por exemplo, pressione
Control+F (Edit > Find) e digite a string de pesquisa <script. O editor reala as ocorrncias de
<script e sua barra de rolagem indica onde a sequncia ocorre no arquivo:
77
Aba DEVELOPER
Editor de Cdigo Autocompletion Hints
O editor exibe dicas (hints) enquanto voc digita o cdigo HTML, CSS ou JavaScript. O editor
conhece a maioria dos objetos e mtodos da API.
No caso das tags HTML voc pode precisar pressionar Control+Espao ou clicar em Edit > Show
Code Hint. Seguem algumas dicas relacionadas s tags HTML.
78
Aba DEVELOPER
79
Aba DEVELOPER
80
Aba DEVELOPER
Editor de Cdigo Quick Edit
O Quick Edit exibe uma janela pop-up de edio para a definio selecionada dentro da janela
atual. Ela aparece com um fundo cinzento e limitada ao cdigo JavaScript e CSS.
Por exemplo, usando o arquivo index.html da App demo Towers of Hanoi, posicione o cursor do
mouse na div mostrada abaixo:
Depois de pressionar Control+E ou clicar em Navigate > Quick Edit, a definio correspondente
do arquivo toh.css aparece num pop-up com um fundo cinza.
81
Aba DEVELOPER
Editor de Cdigo Quick Edit
Aps editar o arquivo pressione Control+S para salv-lo. Para fechar o pop-up pressione ESC ou
Control+E ou ainda clique em Navigate > Quick Edit. Para editar um JavaScript semelhante:
posiciona o cursor numa funo e pressiona Control+E ou clica em Navigate > Quick Edit.
Observe o exemplo abaixo no arquivo toh.js.
Aps chamar o Quick Edit aparecer o pop-up correspondente.
82
Aba DEVELOPER
Editor de Cdigo Quick Open
Use o Quick Open para navegar rapidamente por vrios arquivos, nmeros de linhas ou definies
de funes. Para isso pressione Control+Shift+O ou clique em Navigate > Quick Open para abrir
um pop-up no canto direito superior da janela de edio.
83
Aba DEVELOPER
App Designer Viso Geral
O XDK inclui uma ferramenta de layout GUI intuitiva chamada App Designer. Use esse editor para
desenhar visualmente as pginas da App.
O App Designer d nfase ao design responsivo atravs da utilizao de um sistema de grid e
media queries. Isso vai te ajudar a criar layouts de pginas que funcionam bem em diferentes
tamanhos e orientaes de tela. Esta ferramenta tambm reduz o trabalho duro e tedioso de
desenhar telas HTML responsivas.
O App Designer suporta mltiplos frameworks UI. Escolha um que atenda s necessidades de seu
aplicativo: Twitter Bootstrap 3, Ionic, Framework7, jQuery Mobile, Ratchet, App Framework ou
Topcoat.
Voc deve usar o App Designer pelas seguintes razes:
Se voc est desconfortvel para escrever na unha o cdigo HTML ou CSS/LESS.

Se voc no um especialista no framewok UI que escolheu, ou no quer se tornar um
especialista.
Se voc prefere que o App Designer faa o trabalho pesado, que exige um monte de cdigo
manual, como as media queries.
Quando voc precisa fazer rapidamente um prottipo para fins de avaliao.
84
Aba DEVELOPER
O XDK inclui uma ferramenta de layout GUI intuitiva chamada App Designer. Use esse editor para
desenhar visualmente as pginas da App.
O App Designer d nfase ao design responsivo atravs da utilizao de um sistema de grid e
media queries. Isso vai te ajudar a criar layouts de pginas que funcionam bem em diferentes
tamanhos e orientaes de tela. Esta ferramenta tambm reduz o trabalho duro e tedioso de
desenhar telas HTML responsivas.
O App Designer suporta mltiplos frameworks UI. Escolha um que atenda s necessidades de seu
aplicativo: Twitter Bootstrap 3, Ionic, Framework7, jQuery Mobile, Ratchet, App Framework ou
Topcoat.
Voc deve usar o App Designer pelas seguintes razes:
Se voc est desconfortvel para escrever na unha o cdigo HTML ou CSS/LESS.

Se voc no um especialista no framewok UI que escolheu, ou no quer se tornar um
especialista.
Se voc prefere que o App Designer faa o trabalho pesado, que exige um monte de cdigo
manual, como as media queries.
Quando voc precisa fazer rapidamente um prottipo para fins de avaliao.
85
Aba DEVELOPER
1 Para um projeto criado com o App Designer, use os botes CODE e DESIGN para alternar entre
a view do App Designer e do Editor de Cdigo.
2 O boto Arrow exibe ou oculta a rvore de arquivos do projeto.
3 Coluna da esquerda onde possvel exibir e selecionar Controls, Pages, rvore DOM e outros
elementos. Para exibir/esconder um dos grupos, clique no label vertical, por exemplo: Pages. A
lista de controles disponveis vai depender do framework UI selecionado para o projeto.
4 Atravs da barra de ferramentas do App Designer possvel recarregar seu aplicativo, excluir
um controle ou elemento selecionado, desfazer ou refazer a ltima ao, ver o framework UI
selecionado, redimensionar a rea de trabalho (workspace canvas) e a orientao do dispositivo,
exibir ou ocultar as guidelines.
5 Barra de ferramentas para selecionar ou excluir controles e outros elementos de documentos
da rea de trabalho.
6 Workspace canvas que mostra o look-and-feel da App numa representao WYSIWYG (What
You See Is What You Get - O que voc v o que voc obtm). Arraste e solte os elementos da
coluna da esquerda para a rea de trabalho.
7 Coluna da direita para configurar as propriedades, criar estilos e media queries, atribuir estilos
aos controles, definir interatividade e outros elementos.
86
Aba DEVELOPER
App Designer Workspace Canvas
Conforme voc arrasta um controle da coluna da esquerda para a rea de trabalho:
Possveis reas de destino aparecem em um fundo azul claro.

A rea onde o controle colocado fica com um fundo alaranjado.
Para mover um controle existente na rea de trabalho para um novo local, basta arrast-lo.
A Utilizado para inserir Wrap Points.
B Barra dos wrap points. Nela voc poder
mover, inserir e deletar os wrap points.
C Alas da workspace. Observe que so trs
alas. Servem para redimensionar a tela
(canvas) de acordo com a necessidade.
D Workspace para ver os controles e
elementos relacionados que voc inseriu na
pgina do aplicativo. Voc pode inserir, mover e
selecionar controles dentro dessa tela (canvas),
ou excluir um elemento.
E Abas que exibem o log de atividade, ajuda
contextual, visualizao do cdigo LESS e HTML.
possvel editar o cdigo LESS e HTML.
87
Aba DEVELOPER
App Designer LESS
Abrimos aqui um parntesis para explicar o que o LESS. Segundo a Wikipdia:
LESS uma linguagem de folha de estilos dinmica desenhada por Alexis Sellier. Ela foi
influenciada por Sass e influenciou a nova sintaxe SCSS do Sass, que adaptou sua sintaxe de
formao de blocos do tipo CSS. LESS de cdigo aberto. Sua primeira verso foi escrita em Ruby,
no entanto em verses posteriores, o uso do Ruby foi depreciado e substitudo por JavaScript. A
sintaxe indentada do LESS uma metalinguagem aninhada, uma vez que um cdigo vlido em CSS
tambm vlido em LESS e tem a mesma semntica. LESS fornece os seguintes mecanismos:
variveis, aninhamento, mixins, operadores e funes; a principal diferena entre LESS e outros
pr-compiladores de CSS que LESS permite a compilao em tempo real pelo navegador por
meio do LESS.js. LESS pode ser executado tanto no lado do cliente quanto no lado do servidor, ou
pode ser compilado em CSS plano.
88
Aba DEVELOPER
App Designer
O App Designer s estar visvel e disponvel se voc iniciar um projeto que o utilize. Se for um
projeto em branco, marque a caixa Use App Designer. Os templates Layout and User Interface
tambm contm essa caixa. Alguns Samples e Demos utilizam o App Designer, outros no.
89
Aba DEVELOPER
App Designer
Depois de informar o nome do projeto, o XDK vai solicitar que voc escolha o framework UI. O lado
direito da tela exibe alguns controles interativos do framework selecionado para ajudar na escolha.
90
Aba DEVELOPER
App Designer
Analise o arquivo de index.html e observe que a seo <body> contm mltiplas tags <div>. O
<div> mais externo define o documento principal. Se voc tem uma linha com duas colunas, a
linha contm tags <div> e aninhadas dentro dela esto as <div> das colunas. Dentro de cada
coluna <div> esto os controles que voc inseriu aninhados com as tags <div> dessa coluna.
91
Aba DEVELOPER
App Designer Diretrizes de Codificao
No modifique o arquivo css/index_main.less.css. Ele reservado para uso pelo App Designer,
portanto crie seu prprio arquivo CSS para o seu projeto.
O App Designer utiliza arquivos LESS e no arquivos CSS. Para ver rapidamente ou editar um
arquivo .less, selecione um elemento Document e clique na aba LESS abaixo da workspace.
Para preservar a capacidade de alterar os controles e isso repercutir no cdigo e tambm alterar
o cdigo e isso repercutir nos controles visuais, no altere os labels que contm UIB.
Evite usar cdigo JavaScript incorporado no layout HTML. Essa abordagem no recomendada
porque as mudanas que voc faz no layout podem modificar ou apagar o cdigo embutido.
Alm disso, futuras verses do Cordova podem limitar o uso de JavaScript embutido. Em vez de
usar JavaScript embutido, use o App Designer para atribuir um ID aos controles. Da, em seu
cdigo de inicializao, acesse o controle. Exemplo:
el = document.getElementById("myElementID")
92
Aba DEVELOPER
Templates
O XDK fornece alguns templates para iniciar um projeto de forma mais fcil. Ao iniciar um projeto
a partir desses templates, o XDK utilizar o framework UI: App Framework (AFUI). Este
framework patrocinado pela Intel. Veremos agora sete desses templates:
SingleView App
FlipView App
ListView App
GridView App
SideMenu App
TabView App
LoginView App
93
Aba DEVELOPER
Templates SingleView App
Este template pode ser usado para aplicaes simples que tem
apenas uma view.
Exemplos de Apps que podem ser feitas com esse template:
Calculadora
Flash Light
94
Aba DEVELOPER
Templates FlipView App
Este template pode ser usado para
aplicaes utilitrias simples com
uma view principal e outra de
configuraes.
Exemplos de Apps que podem ser
feitas com esse template:
Mapas
Clima
Relgio
95
Aba DEVELOPER
Templates ListView App
aplicaes que precisem exibir
dados em uma lista simples na
tela principal.
O usurio pode navegar na lista e
ao selecionar um item acessar
uma tela secundria com as
informaes detalhadas do item
selecionado.
E-Mail
Mensagens
Twitter
Apps comerciais com acesso a
dados
96
Aba DEVELOPER
Templates GridView App
aplicaes de fotos com uma
viso em grade (grid) que abrir
o detalhe, ou seja, a visualizao
da foto selecionada.
Aplicaes de Fotos
Instagram
97
Aba DEVELOPER
Templates SideMenu App
aplicaes simples que utilizam
um menu lateral que pode ser
acessado para navegar entre as
views.
Youtube
Gmail
dados
98
Aba DEVELOPER
Templates TabView App
criar uma aplicao que utiliza
abas para navegar entre as views.
Facebook
Instagram
dados
99
Aba DEVELOPER
Templates LoginView App
Este template pode ser
usado para criar uma
aplicao que requisita
um
login
ou
um
registro antes que a
App seja iniciada.
Possui tanto a opo de
login quanto a de
registro.
Exemplos de Apps que
podem ser feitas com
esse template:
Facebook
Twitter
Apps comerciais
acesso a dados
com
100

XDK 100 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

XDK 100 PDF

Título original:

Enviado por

Direitos autorais:

Formatos disponíveis

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

O leitor que adquiriu o e-book legalmente no site AlbertEije.COM poder

#Desenvolvendo Aplicaes Multiplataforma com o XDK

O problema que no teremos acesso aos

Imagine uma pgina feita em HTML5 com

#Desenvolvendo Aplicaes Multiplataforma com o XDK

O webview tem menos recursos que um

Alm das aplicaes hbidas, possvel criar

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Imagine ento criar uma App para as trs

Uma delas o Delphi / RAD Studio /

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Um dos grandes desafios de criar aplicaes

#Desenvolvendo Aplicaes Multiplataforma com o XDK

possvel empacotar o cdigo HTML5 e

As Apps feitas em HTML5 no esto limitadas

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Ou seja, o cdigo feito em HTML porttil, o

Uma API importante e multiplataforma o

#Desenvolvendo Aplicaes Multiplataforma com o XDK

desejvel cortar uma imagem de maneira

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Uma WebView seria uma Web App HTML5

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Existem duas diferenas principais entre o

1 - Localizao do motor de renderizao.

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Existem alguns problemas relacionados ao

Portanto, para construir uma aplicao HTML

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Nessa aba tambm possvel trabalhar com o

#Desenvolvendo Aplicaes Multiplataforma com o XDK

possvel copiar o aplicativo para um

Com essa aba ser possvel depurar a

Provavelmente seria melhor chamar essa aba

A vantagem dessa aba em relao a aba TEST

Para os dispositivos Windows, essa aba a

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Nessa aba ser possvel monitorar os recursos

Antes de implantar (deploy) a App preciso

Essa aba s funciona nos dispositivos Android

nessa aba que o pacote da sua App ser

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Execute o XDK e realize o login na sua conta

nessa aba que o pacote da sua App ser

Voc poder criar dois tipos de projeto:

Antes de implantar (deploy) a App preciso

O processo de construo efetuado na

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK

#Desenvolvendo Aplicaes Multiplataforma com o XDK