XDK 100 PDF

#Desenvolvendo Aplicaes Multiplataforma com o XDK
1
Sumrio
Introduo Depurando e Testando
Apresentao do XDK. Construindo Apps Explorando a aba EMULATE. Utilizando o
multiplataforma com o HTML5. Cordova. emulador. Usando o Intel App Preview.
Explorando as abas TEST e DEBUG.
Explorando a Ferramenta Debugando uma App. Testando a App em
Apresentao do XDK e seus recursos. dispositivos reais.
Licena Construindo e Publicando a App

Entendendo a licena do XDK. Informaes para construir e publicar a App
nas lojas da Apple, Google e Microsoft.
Explorando os Demos Publicando a App na loja do Chrome.
Explorando os Demos do XDK.
Aplicaes com Dados Locais
Aba PROJECTS Criando aplicaes com acesso a dados locais.
Explorando a aba PROJECTS. Criando,
gerenciando e importando projetos. Aplicaes Consumindo Web Services
Adicionando e gerenciando plugins. Projetos Criando aplicaes que consumam os servios
Cordova. de um web service.
Aba DEVELOP Desenvolvimento de Jogos

Explorando a aba DEVELOP. Conhecendo o Introduo ao desenvolvimento de jogos com
editor de cdigo. Desenvolvendo a App de o XDK.
forma visual. Usando Templates.
2
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.
3
Introduo
A Ferramenta XDK
O XDK uma IDE da Intel. Ele foi O problema que no teremos acesso aos
desenvolvido com o objetivo de ajudar o recursos do dispositivo, por questes de
desenvolvedor a criar Apps que possam ser segurana. Para isso utilizaremos a tal
publicadas nas principais lojas de aplicaes e ponte. Pensando nisso a comunidade criou o
que possam rodar na grande maioria dos PhoneGAP, um projeto 100% open source.
dispositivos existentes.
Esse framework foi desenvolvido pela Nitobi,
As aplicaes feitas com o XDK so hbridas, que foi comprada pela Adobe. Posteriormente
ou seja, so aplicaes feitas em HTML5 que foi doado para a Apache e chamado de Apache
possuem a capacidade de acessar os recursos Callback. Como o nome era muito genrico, foi
nativos do dispositivo. Para isso ser utilizada renomeado para Apache Cordova. O PhoneGap
uma ponte entre a aplicao HTML5 e os agora uma distribuio Cordova. com ele
recursos do dispositivo. Essa ponte um que poderemos acessar os recursos do
conjunto de componentes que podemos dispositivo tais como a cmera, contatos,
chamar de framework. 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 O webview tem menos recursos que um
desenvolvimento das Apps hbridas. Mas no browser. A vantagem a capacidade de ser
apenas isso, ele permite que voc desenvolva estendido atravs dos plugins de cdigo nativo
de forma visual, realize testes utilizando uma do Cordova (PhoneGap).
ferramenta instalada no dispositivo, debugue a
aplicao diretamente no dispositivo, crie seu
pacote para publicao nas lojas e muito mais.
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 write-
once, 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? Uma delas o Delphi / RAD Studio /
aquele que chega ao usurio atravs de AppMethod da Embarcadero. Com essa IDE
qualquer dispositivo que ele possa utilizar, possvel criar Apps para Android e iOS, alm
onde quer que se encontre. de aplicaes desktop para Windows e OSX.
No entanto, ele no tem suporte para o
OK. E porque usar o HTML5? Bom, existem Windows Phone e tem o preo alto. Sem falar
vrios dispositivos no mercado, com suas das constantes atualizaes, que foram o
respectivas plataformas. Para resumir, vamos desenvolvedor a pagar pelos upgrades.
citar as principais: Android, iOS e Windows
Phone. Isso significa trs linguagens de Outra alternativa o Xamarin. Se o
programao para aprender, cada uma com desenvolvedor instalar o Xamarin no Visual
seus recursos: Studio, conseguir criar Apps para as trs
plataformas. Para isso criar um projeto e
Android Java compartilhar parte do cdigo. Para que as
iOS Objective C Apps sejam fieis aos recursos visuais de cada
Windows Phone C# ou Visual Basic plataforma, o desenvolvedor dever criar

projetos distintos para desenhar as telas.
Imagine ento criar uma App para as trs Existe uma alternativa para isso, que usar o
plataformas! Xamarin.Forms. Dessa forma, o desenvolvedor
consegue desenhar a tela apenas uma vez,
Existem alternativas que se apresentam para mas existem limitaes. Existe ainda a
criar as Apps utilizando uma s IDE. questo do preo, que cobrado por
plataforma utilizada e por perodo.
6
Introduo
Existem ainda outras opes, mas as que Um dos grandes desafios de criar aplicaes
mencionamos anteriormente so as mais multiplataforma o tamanho das telas.
promissoras para quem deseja construir
aplicaes para as trs plataformas principais. Quando a Apple cria um dispositivo novo, ela
pensa nas Apps que sero criadas para esse
Como tudo na vida, utilizar cada uma das dispositivo e como tais Apps sero feitas
opes tem seus prs e contras. utilizando a sua IDE, o XCode. provvel que
pense tambm na compatibilidade com seus
A opo que vamos apresentar nesse livro demais dispositivos.
criar as Apps usando HTML5 com os plugins do
Cordova. Para facilitar nossa vida, vamos No entanto, a Apple no vai se preocupar com
utilizar o XDK, a IDE feita pela Intel. a compatibilidade dos dispositivos feitos para
Android ou para o Windows Phone.
Uma vantagem de usar o HTML5 que voc
no se preocupar em aprender as linguagens Cabe ao desenvolvedor que cria Apps para
utilizada por cada plataforma. Alm disso, no todas as plataformas se preocupar com isso.
precisar conhecer detalhes das APIs de cada
plataforma. O tamanho da tela apenas uma das vrias
preocupaes que um desenvolvedor ter
Outra vantagem interessante que sua App quando for criar uma App multiplataforma.
vai funcionar nos dispositivos novos que Existem ainda os demais recursos: cmera,
chegam ao mercado. acelermetro, etc.
7
Introduo
Uma App multiplataforma deve tirar proveito possvel empacotar o cdigo HTML5 e
desses recursos e ainda se preocupar com a disponibilizar a App para implantao, como se
experincia do usurio. O usurio espera que fosse uma App nativa.
uma App feita para Android se comporte como
uma App feita para Android. Como assim? Dessa forma, ser possvel utilizar os mesmos
canais de distribuio e monetizao das Apps
Existem alguns padres em cada plataforma. nativas. Alm disso, pode-se utilizar os
Por exemplo, as abas de uma App para iOS mesmos recursos de lanamento e instalao.
aparecem na parte inferior da tela, ao passo
que numa App feita para Android aparece na A App no vai rodar numa janela do browser
parte superior da tela. do dispositivo. Em vez disso, rodar em um
webview de tela cheia (fullscreen), com
Se o desenvolvedor fizer uma App controle total sobre o estado real da tela e
multiplataforma e deixar as abas na parte sobre as capacidades do dispositivo.
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.
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 Ou seja, o cdigo feito em HTML porttil, o
se as plataformas de destino suportarem todas pacote no. O pacote feito para cada
as APIs utilizadas. Dessa forma, preciso ter plataforma.
ateno a alguns detalhes, como a utilizao
de cdigo JavaScript. E a que entra o XDK. Com ele possvel
desenvolver a aplicao e tambm criar os
No porque um cdigo escrito em pacotes para cada plataforma facilmente.
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.
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 Imagens Responsivas
vrios dispositivos usando HTML? Existem
vria formas de fazer isso. As imagens podem exigir mais do que um
simples dimensionamento. s vezes
Usando Escala Dimensionamento desejvel cortar uma imagem de maneira
diferente ou mesmo carregar uma imagem
Uma forma simples de controle dimensionar com resoluo maior ou menor.
os componentes e fontes de acordo com o
tamanho da tela e, opcionalmente, ajustar o Layout Responsivo
preenchimento em torno dos componentes.
Para trabalhar dessa forma, o leitor pode usar Se a App formada por vrias sees, talvez
unidades relativas do CSS ou utilizar um seja interessante pensar num layout fluido em
framework responsivo como o jQuery Mobile que voc rearranja (e as vezes esconde)
ou o Sencha Touch para fazer o trabalho alguns elementos. Existem alguns padres
pesado. (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 Uma WebView seria uma Web App HTML5
aplicao web para celular, alguns hbrida, feita para rodar um dispositivo mvel.
desenvolvedores vo pensar no Chrome ou no Ela ser executada dentro de um controle
Safari rodando a aplicao e logo vo imaginar WebView e no num browser.
que isso no vai dar certo.
O termo WebView tem origem na biblioteca
O fato que uma Web App realmente roda incorporada nos sistemas operacionais para
num browser, mas uma WebView App no. dispositivos mveis. O nome dessa biblioteca
Como assim? no iOS UIWebView. No Android e no
Windows Phone conhecida como WebView.
Uma aplicao web (Web App) um software
que roda num browser e criada numa As caractersticas e capacidades do WebView
linguagem de programao suportada pelo podem variar dependendo da plataforma, da
browser, como a combinao HTML + CSS + verso do sistema operacional e at mesmo do
JavaScript. necessrio um browser para fabricante do dispositivo. Por exemplo, o
renderizar a aplicao. WebView de um dispositivo Android da
Samsung pode se comportar de forma
Geralmente so aplicaes interativas que no diferente em um dispositivo Android da HTC.
dependem de um servidor para atualizar a
view. Pode ser uma calculadora, um jogo, etc. Podemos fazer uma analogia com o que ocorre
entre Firefox, Chrome e Internet Explorer.
11
Introduo
Portanto, para ficar claro, sua App HTML5 vai Na imagem abaixo observamos o
rodar dentro de um WebView nativo e no funcionamento de uma Web App rodando
dentro de um browser do dispositivo. No se dentro de um browser no dispositivo.
trata de uma App compilada. Trata-se de uma
aplicao HTML5 que ser interpretada e O acesso s bibliotecas do dispositivo feito
processada pelo WebView nativo do pelo browser.
dispositivo.
12
Introduo
Na imagem abaixo podemos observar o 1 - Localizao do motor de renderizao.
funcionamento de uma App Hbrida. 2 - Capacidade de estender a API JavaScript.
Existem duas diferenas principais entre o E o que isso significa?

browser e o webview:
13
Introduo
O Motor de Renderizao (o intrprete do Existem alguns problemas relacionados ao
HTML, JavaScript e CSS) est contido dentro WebView do Android. Na verdade, essa
do browser e est embutido dentro do plataforma a que apresenta maiores
firmware do dispositivo mvel. desafios. A natureza aberta e flexvel do
Android ao mesmo tempo uma bno e
Assim sendo, possvel atualizar esse uma maldio, pois ela permite muitas
intrprete quando o browser do dispositivo variaes.
atualizado, pois ele vir junto com o browser.
Isso pode ser til para uma Web App, mas no Existem algumas solues para resolver os
far diferena para uma WebView App, que problemas do WebView do Android. Uma delas
utiliza o intrprete do firmware. o Crosswalk, que um WebView
customizado. O objetivo dele normalizar o
A capacidade de estender a API JavaScript de comportamento e as caractersticas dos
uma WebView App (via plugins Cordova) dispositivos Android 4.x.
significa que as Apps tero acesso a dados e
sensores do dispositivo. Isso no permitido
numa Web App que roda num browser.
Portanto, para construir uma aplicao HTML

que rode num dispositivo e possa ser
publicada nas lojas, voc dever criar uma
WebView App.
14
Explorando a Ferramenta
Viso Geral
O XDK possui uma srie de abas, conforme Nessa aba tambm possvel trabalhar com o
observado na imagem abaixo. desenvolvimento de jogos utilizando o painel
Game Asset Manager. Alm disso, existe a
Aba PROJECTS seo Web Services, que fornece acesso
rpido e fcil a uma coleo de APIs de Web
Essa aba deve ser utilizada para criar um novo Services disponveis na nuvem.
projeto, alterar o projeto atual ou importar
uma aplicao HTML5 j existente. Essa aba Aba EMULATE
lista todos os projetos criados ou importados
pelo XDK. Nessa aba ser possvel checar o layout e as
funcionalidades de sua aplicao numa coleo
O projeto ativo ficar realado e ser nele que de dispositivos virtuais. O simulador baseado
as demais abas realizao suas operaes. no emulador Apache Ripple.
Aba DEVELOP possvel ainda clicar no boto Debug (o que

tem o cone de um inseto) para abrir o CDT
Essa aba suporta vrias vises (views). Isto , (Google Chrome Developer Tools). Com isso
voc pode visualizar o editor de textos e ser possvel debugar o cdigo JavaScript, as
trabalhar diretamente nele ou ento desenhar regras CSS e os elementos DOM.
a tela de forma visual.
15
Viso Geral
Aba TEST Aba DEBUG
possvel copiar o aplicativo para um Com essa aba ser possvel depurar a
dispositivo real atravs da rede, sem plugar o aplicao sem precisar construir e instalar a
cabo USB. Com isso ser possvel realizar uma mesma.
inspeo remota na aplicao. Para facilitar a
inspeo remota voc dever baixar e instalar A vantagem dessa aba em relao a aba TEST
uma aplicao no dispositivo. O nome dessa que, com ela, possvel usar o CDT (Google
aplicao Intel App Preview. Ela est Chrome Developer Tools) para depurao
disponvel para as trs plataformas: Android, remota. Assim possvel debugar o cdigo
iOS e Windows Phone. JavaScript completo com pontos de
interrupo (break points).
Provavelmente seria melhor chamar essa aba
de PREVIEW, pois ela permite uma viso da Essa aba s funciona com os dispositivos
App no dispositivo real, mas possui funes Android 4+ e Apple iOS 6.1+. O dispositivo
limitadas de depurao e testes. 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 Antes de implantar (deploy) a App preciso
da aplicao, identificar CPU e caractersticas constru-la (buid).
da memria.
nessa aba que o pacote da sua App ser
Essa aba s funciona nos dispositivos Android construdo para posteriormente ser publicado
4+. em cada loja.
Aqui ser possvel baixar o cdigo HTML5 para O processo de construo efetuado na
o dispositivo Android conectado via USB, nuvem, para que no seja preciso instalar e
executar e pegar estatsticas relacionadas a configurar o SDK para cada plataforma de
como o cdigo JavaScript est utilizando a CPU destino.
e a memria do dispositivo.
A publicao na loja ficar a cargo do
Um mdulo de debug especial ser copiado desenvolvedor, que dever seguir as regras
para o dispositivo: App Preview Crosswalk. 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 Aba BUILD
leitor tenha instalado o XDK em seu SO
preferido. Alm disso, o leitor precisa instalar Antes de implantar (deploy) a App preciso
o App Preview no seu dispositivo real. constru-la (buid).
Execute o XDK e realize o login na sua conta nessa aba que o pacote da sua App ser
Intel. construdo para posteriormente ser publicado
em cada loja.
Voc poder criar dois tipos de projeto:
O processo de construo efetuado na
Standard HTML5: utiliza HTML5 e JavaScript. nuvem, para que no seja preciso instalar e
Poder utilizar as APIs padres do W3C. No configurar o SDK para cada plataforma de
suporta o Cordova. Poder ser implantada destino.
como uma App hbrida nas vrias plataformas
(Android, iOS e Windows) ou como uma A publicao na loja ficar a cargo do
aplicao web (web app) em determinadas desenvolvedor, que dever seguir as regras
plataformas, como a Chrome Web Store. impostas por cada empresa. Veremos mais
detalhes sobre o processo de publicao nas
HTML5 + Cordova: utiliza HTML5 e JavaScript. lojas posteriormente.
Suporta os plugins do Cordova. Poder ser
implantada como uma App hbrida nas vrias
plataformas (Android, iOS e Windows).
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 pr-
visualizao 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. Recomenda-
se 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 possvel usar as ferramentas da Intel sem
no site da Intel so regidas pelo TOU Terms precisar pagar royalties ou qualquer outro
of Use. valor. possvel distribuir as aplicaes
desenvolvidas da forma que voc desejar. Ou
possvel ler os termos completos no seguinte seja, o XDK gratuito e voc pode vender as
link: Apps que fizer com ele sem nenhum
problema.
https://appcenter.html5tools-software.intel.com/TOS/
O que voc no pode fazer redistribuir ou
Ao utilizar o site da Intel ou baixar qualquer vender os materiais da Intel. Ou seja, voc
material que esteja nele, o usurio estar no pode sair por a vendendo o XDK.
aceitando os termos de uso descritos no link
acima. Provavelmente essa a parte da licena que
mais interessa, pelo menos para a maioria
importante a leitura completa dos termos dos desenvolvedores.
acima antes de usar o XDK. Vamos abordar
aqui alguns aspectos importantes relacionados importante frisar que a leitura dos termos e
licena da ferramenta. condies informados no link anterior
imprescindvel.
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.
33
Explorando os Demos
Samples e Demos
Uma das melhores formas de aprender uma importante frisar que as Apps criadas com o
ferramenta, um framework, uma linguagem, XDK so feitas com HTML + JavaScript +
etc estudando os demos. O XDK vem com CSS. Assim sendo, preciso ter o mnimo de
vrios deles. conhecimento dessas linguagens. Quanto
maior for o seu conhecimento nessas
J vimos que ao acessar a opo START A linguagens, mais facilidade voc ter para
NEW PROJECT teremos acesso seo criar suas Apps com o XDK.
Samples and Demos.
Se voc nunca teve contato com essas
Nessa seo ns temos o item General, que linguagens, pare agora a leitura do livro e
fornece acesso aos demos Standard HTML e aprenda sobre elas. Tenha pelo menos uma
HTML5 + Cordova. viso geral sobre elas, seno o estudo do XDK
ser frustrante.
Temos ainda o item Games, que fornece
acesso aos demos HTML5 + Cordova.
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 de um projeto
HTML puro e simples. Se voc domina HTML + JavaScript + CSS j possui quase todo o
conhecimento necessrio relacionado ao exemplo! Sua preocupao no momento deve ser com
design e layout responsivo. O que isso? Em suma, adaptar a visualizao da sua aplicao para
qualquer tipo de tela.
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 em cada arquivo especfico de plataforma:

intelxdk.config.<platform>.xml.
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-special-

plugin.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 pr-
visualizada
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 com

acesso a dados
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

Enviado por

Direitos autorais:

Formatos disponíveis

#Desenvolvendo Aplicaes Multiplataforma com o XDK

Licena Construindo e Publicando a App

Aba DEVELOP Desenvolvimento de Jogos

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

A cpia do contedo do livro sem autorizao configura crime. Alm de

Imagine uma pgina feita em HTML5 com

Alm das aplicaes hbidas, possvel criar

possvel instalar o XDK no Windows, Linux e

O XDK cumpre a promessa: escreva uma vez,

As Apps construdas no XDK rodam num

Android Java compartilhar parte do cdigo. Para que as

iOS Objective C Apps sejam fieis aos recursos visuais de cada

Windows Phone C# ou Visual Basic plataforma, o desenvolvedor dever criar

As Apps feitas em HTML5 no esto limitadas

Uma API importante e multiplataforma o

O Cordova fornece acesso para

Existem duas diferenas principais entre o E o que isso significa?

Portanto, para construir uma aplicao HTML

Aba DEVELOP possvel ainda clicar no boto Debug (o que

Para os dispositivos Windows, essa aba a

7 Com a paleta WEB

2 Use os botes da barra

4 Use as paletas para

Quando acessar a aba

1 Utilize a aba TEST para

Use o boto WIFI para

3 As instrues esto ali

Veremos agora alguns desses demos e como o

Depois de criar o projeto,

Depois de criar o projeto,

Multi-Device Layout Patterns

Layout / Leiaute Responsivo

Responsive Web Design

Essa App vai acompanhar o progresso do usurio durante sua viagem

Existem duas funes importantes nessa App. Ambos esto no

A primeira a que detecta a latitude e a longitude do dispositivo a

O que voc deve fazer nesse momento? Explorar os demais demos.

Concentre-se em testar os demos para observar o que voc pode

Em Plugin Management voc conseguir:

Explorar e adicionar novos plugins.

Ver o ID, nome, verso, documentao,

Em Build Settings voc vai configurar aspectos

E na ltima opo voc conseguir selecionar

Aps isso, as seguintes opes ficaro disponveis:

Nesse momento tambm ser possvel selecionar a orientao:

Se desejar, poder localizar os fontes do Demo no GitHub atravs

Depois que analisar e selecionar o projeto desejado, dever

Por exemplo, a API JavaScript redirecionada para cdigo

Voc no vai precisar aprender Java, Objective C ou C#.

Voc pode pensar em um plugin Cordova como uma

Nem todos os plugins se comportam de maneira igual em todas as plataformas. O

O XDK no possui um mecanismo para validar o funcionamento de um plugin. Busque suporte

<script type="text/javascript" src="cordova.js">

Observe na imagem que numa aplicao web

J numa SPA, toda a pgina carregadas de

Os plugins adicionados no XDK

Voc dever selecionar um dos

Caso o link no esteja ativo, basta

Ao clicar no link de um dos plugins,

Existem alguns plugins XDK que

Observe sempre a documentao do

J que esse arquivo gerado automaticamente

Se voc precisar incluir alguma diretiva que no