#desenvolvendo aplicações multiplataforma com o xdk · android – java ios ... studio,...

100
1 #Desenvolvendo Aplicações Multiplataforma com o XDK

Upload: dokhuong

Post on 28-Sep-2018

218 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

1

#Desenvolvendo Aplicações Multiplataforma com o XDK

Page 2: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

2

#Desenvolvendo Aplicações Multiplataforma com o XDK

Sumário

IntroduçãoApresentação do XDK. Construindo Apps multiplataforma com o HTML5. Cordova.

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

LicençaEntendendo a licença do XDK.

Explorando os DemosExplorando os Demos do XDK.

Aba PROJECTSExplorando a aba PROJECTS. Criando, gerenciando e importando projetos. Adicionando e gerenciando plugins. Projetos Cordova.

Aba DEVELOPExplorando a aba DEVELOP. Conhecendo o editor de código. Desenvolvendo a App de forma visual. Usando Templates.

Depurando e TestandoExplorando 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 AppInformações para construir e publicar a App nas lojas da Apple, Google e Microsoft. Publicando a App na loja do Chrome.

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

Aplicações Consumindo Web ServicesCriando aplicações que consumam os serviços de um web service.

Desenvolvimento de JogosIntrodução ao desenvolvimento de jogos com o XDK.

Page 3: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

3

#Desenvolvendo Aplicações Multiplataforma com o XDK

Diga não à pirataria

O leitor que adquiriu o e-book legalmente no site AlbertEije.COM poderá imprimir o conteúdo para seu uso pessoal.

A cópia do conteúdo do livro sem autorização configura crime. Além de contribuir para a criminalidade, a cópia ilegal desestimula o autor de realizar novos trabalhos. Todos saem perdendo com a pirataria.

Page 4: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

4

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

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 aplicações e que possam rodar na grande maioria dos dispositivos existentes.

As aplicações feitas com o XDK são híbridas, ou seja, são aplicações feitas em HTML5 que possuem a capacidade de acessar os recursos nativos do dispositivo. Para isso será utilizada uma “ponte” entre a aplicação HTML5 e os recursos do dispositivo. Essa “ponte” é um conjunto de componentes que podemos chamar de framework.

Imagine uma página feita em HTML5 com algum código em JavaScript. Para melhorar a aparência da página, utilizaríamos CSS. Basicamente é isso que faremos para que nossa App rode em todos os dispositivos móveis.

A Ferramenta XDK

O problema é que não teremos acesso aos recursos do dispositivo, por questões de segurança. 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 genérico, foi renomeado para Apache Cordova. O PhoneGap agora é uma distribuição Cordova. É com ele que poderemos acessar os recursos do dispositivo tais como a câmera, contatos, notificações, etc.

Page 5: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

5

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

O XDK é a ferramenta que vai possibilitar o desenvolvimento das Apps híbridas. Mas não apenas isso, ele permite que você desenvolva de forma visual, realize testes utilizando uma ferramenta instalada no dispositivo, debugue a aplicação diretamente no dispositivo, crie seu pacote para publicação nas lojas e muito mais.

Além das aplicações híbidas, é possível criar Apps HTML5 nativas e até mesmo importar projetos HTML5 desenvolvidos anteriormente.

É possível instalar o XDK no Windows, Linux e OSX.

O XDK cumpre a promessa: “escreva uma vez, rode em qualquer lugar”, em inglês “write-once, run-anywhere”.

As Apps construídas no XDK rodam num webview (navegador embutido) e estão limitadas aos recursos do webview mais a combinação dos plugins utilizados.

A Ferramenta XDK

O webview tem menos recursos que um browser. A vantagem é a capacidade de ser estendido através dos plugins de código nativo do Cordova (PhoneGap).

Page 6: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

6

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

O que é um aplicativo multiplataforma? É aquele que chega ao usuário através de qualquer dispositivo que ele possa utilizar, onde quer que se encontre.

OK. E porque usar o HTML5? Bom, existem vários dispositivos no mercado, com suas respectivas plataformas. Para resumir, vamos citar as principais: Android, iOS e Windows Phone. Isso significa três linguagens de programação para aprender, cada uma com seus recursos:

Android – Java iOS – Objective C Windows Phone – C# ou Visual Basic

Imagine então criar uma App para as três plataformas!

Existem alternativas que se apresentam para criar as Apps utilizando uma só IDE.

Construindo Apps Multiplataforma com HTML5

Uma delas é o Delphi / RAD Studio / AppMethod da Embarcadero. Com essa IDE é possível criar Apps para Android e iOS, além de aplicações desktop para Windows e OSX. No entanto, ele não tem suporte para o Windows Phone e tem o preço alto. Sem falar das constantes atualizações, que forçam o desenvolvedor a pagar pelos upgrades.

Outra alternativa é o Xamarin. Se o desenvolvedor instalar o Xamarin no Visual Studio, conseguirá criar Apps para as três plataformas. Para isso criará um projeto e compartilhará parte do código. 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 limitações. Existe ainda a questão do preço, que é cobrado por plataforma utilizada e por período.

Page 7: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

7

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

Existem ainda outras opções, mas as que mencionamos anteriormente são as mais promissoras para quem deseja construir aplicações para as três plataformas principais.

Como tudo na vida, utilizar cada uma das opções tem seus prós e contras.

A opção 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ê não se preocupará em aprender as linguagens utilizada por cada plataforma. Além disso, não precisará conhecer detalhes das APIs de cada plataforma.

Outra vantagem interessante é que sua App vai funcionar nos dispositivos novos que chegam ao mercado.

Construindo Apps Multiplataforma com HTML5

Um dos grandes desafios de criar aplicações multiplataforma é o tamanho das telas.

Quando a Apple cria um dispositivo novo, ela pensa nas Apps que serão criadas para esse dispositivo e como tais Apps serão feitas utilizando a sua IDE, o XCode. É provável que pense também na compatibilidade com seus demais dispositivos.

No entanto, a Apple não 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 várias preocupações que um desenvolvedor terá quando for criar uma App multiplataforma. Existem ainda os demais recursos: câmera, acelerômetro, etc.

Page 8: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

8

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

Uma App multiplataforma deve tirar proveito desses recursos e ainda se preocupar com a experiência do usuário. O usuário espera que uma App feita para Android se comporte como uma App feita para Android. Como assim?

Existem alguns padrões 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 usuários do iOS não vão estranhar, mas os usuário do Android verão algo diferente, fora do padrão. Dessa forma, o usuário não estaria tendo uma boa experiência ao utilizar essa App.

As Apps feitas em HTML5 não estão limitadas a serem exibidas dentro de um browser.

Construindo Apps Multiplataforma com HTML5

É possível empacotar o código HTML5 e disponibilizar a App para implantação, como se fosse uma App nativa.

Dessa forma, será possível utilizar os mesmos canais de distribuição e monetização das Apps nativas. Além disso, pode-se utilizar os mesmos recursos de lançamento e instalação.

A App não 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.

Page 9: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

9

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

A App feita em HTML só será multiplataforma se as plataformas de destino suportarem todas as APIs utilizadas. Dessa forma, é preciso ter atenção a alguns detalhes, como a utilização de código JavaScript.

Não é porque um código é escrito em JavaScript que ele vai rodar em qualquer plataforma. Se um código feito em JavaScript fizer uso de uma API específica, a App não será multiplataforma.

Uma API importante e multiplataforma é o Apache Cordova. Ele habilita o acesso aos recursos do dispositivo – câmera, acelerômetro, geolocalização, etc – de forma consistente em várias plataformas e dispositivos.

O Cordova fornece acesso para implementações nativas em cada plataforma. As Apps feitas com o Cordova devem ser empacotadas como uma App híbrida.

Construindo Apps Multiplataforma com HTML5

Ou seja, o código feito em HTML é portátil, o pacote não. O pacote é feito para cada plataforma.

E é aí que entra o XDK. Com ele é possível desenvolver a aplicação e também criar os pacotes para cada plataforma facilmente.

Page 10: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

10

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

E como ajustar a aplicação para as telas de vários dispositivos usando HTML? Existem vária 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.

Construindo Apps Multiplataforma com HTML5

Imagens Responsivas

As imagens podem exigir mais do que um simples dimensionamento. Às vezes é desejável cortar uma imagem de maneira diferente ou mesmo carregar uma imagem com resolução maior ou menor.

Layout Responsivo

Se a App é formada por várias seções, talvez seja interessante pensar num layout fluido em que você rearranja (e as vezes esconde) alguns elementos. Existem alguns padrões (patterns) de layout e de navegação que podem ser estudados e implementados para esse fim.

Page 11: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

11

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

Quando você mencionar que está criando uma aplicação web para celular, alguns desenvolvedores vão pensar no Chrome ou no Safari rodando a aplicação e logo vão imaginar que isso não vai dar certo.

O fato é que uma Web App realmente roda num browser, mas uma WebView App não. Como assim?

Uma aplicação web (Web App) é um software que roda num browser e é criada numa linguagem de programação suportada pelo browser, como a combinação HTML + CSS + JavaScript. É necessário um browser para renderizar a aplicação.

Geralmente são aplicações interativas que não dependem de um servidor para atualizar a view. Pode ser uma calculadora, um jogo, etc.

Web App ou WebView App?

Uma WebView seria uma Web App HTML5 híbrida, feita para rodar um dispositivo móvel. Ela será executada dentro de um controle WebView e não num browser.

O termo WebView tem origem na biblioteca incorporada nos sistemas operacionais para dispositivos móveis. O nome dessa biblioteca no iOS é UIWebView. No Android e no Windows Phone é conhecida como WebView.

As características e capacidades do WebView podem variar dependendo da plataforma, da versão 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.

Page 12: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

12

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

Portanto, para ficar claro, sua App HTML5 vai rodar dentro de um WebView nativo e não dentro de um browser do dispositivo. Não se trata de uma App compilada. Trata-se de uma aplicação HTML5 que será interpretada e processada pelo WebView nativo do dispositivo.

Web App ou WebView App?

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.

Page 13: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

13

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

Na imagem abaixo podemos observar o funcionamento de uma App Híbrida.

Existem duas diferenças principais entre o browser e o webview:

Web App ou WebView App?

1 - Localização do motor de renderização.2 - Capacidade de estender a API JavaScript.

E o que isso significa?

Page 14: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

14

#Desenvolvendo Aplicações Multiplataforma com o XDK

Introdução

O Motor de Renderização (o intérprete do HTML, JavaScript e CSS) está contido dentro do browser e está embutido dentro do firmware do dispositivo móvel.

Assim sendo, é possível atualizar esse intérprete quando o browser do dispositivo é atualizado, pois ele virá junto com o browser. Isso pode ser útil para uma Web App, mas não fará diferença para uma WebView App, que utiliza o intérprete do firmware.

A capacidade de estender a API JavaScript de uma WebView App (via plugins Cordova) significa que as Apps terão acesso a dados e sensores do dispositivo. Isso não é permitido numa Web App que roda num browser.

Portanto, para construir uma aplicação HTML que rode num dispositivo e possa ser publicada nas lojas, você deverá criar uma WebView App.

Web App ou WebView App?

Existem alguns problemas relacionados ao WebView do Android. Na verdade, essa plataforma é a que apresenta maiores desafios. A natureza aberta e flexível do Android é ao mesmo tempo uma bênção e uma maldição, pois ela permite muitas variações.

Existem algumas soluções para resolver os problemas do WebView do Android. Uma delas é o Crosswalk, que é um WebView customizado. O objetivo dele é normalizar o comportamento e as características dos dispositivos Android 4.x.

Page 15: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

15

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

O XDK possui uma série 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 aplicação HTML5 já existente. Essa aba lista todos os projetos criados ou importados pelo XDK.

O projeto ativo ficará realçado e será nele que as demais abas realização suas operações.

Aba DEVELOP

Essa aba suporta várias visões (views). Isto é, você pode visualizar o editor de textos e trabalhar diretamente nele ou então desenhar a tela de forma visual.

Visão Geral

Nessa aba também é possível trabalhar com o desenvolvimento de jogos utilizando o painel Game Asset Manager. Além disso, existe a seção Web Services, que fornece acesso rápido e fácil a uma coleção de APIs de Web Services disponíveis na nuvem.

Aba EMULATE

Nessa aba será possível checar o layout e as funcionalidades de sua aplicação numa coleção de dispositivos virtuais. O simulador é baseado no emulador Apache Ripple.

É possível ainda clicar no botão Debug (o que tem o ícone de um inseto) para abrir o CDT (Google Chrome Developer Tools). Com isso será possível debugar o código JavaScript, as regras CSS e os elementos DOM.

Page 16: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

16

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

Aba TEST

É possível copiar o aplicativo para um dispositivo real através da rede, sem plugar o cabo USB. Com isso será possível realizar uma inspeção remota na aplicação. Para facilitar a inspeção remota você deverá baixar e instalar uma aplicação no dispositivo. O nome dessa aplicação é Intel App Preview. Ela está disponível para as três plataformas: Android, iOS e Windows Phone.

Provavelmente seria melhor chamar essa aba de PREVIEW, pois ela permite uma visão da App no dispositivo real, mas possui funções limitadas de depuração e testes.

Para os dispositivos Windows, essa aba é a melhor opção. Para os dispositivos Android e iOS, temos a aba DEBUG.

Visão Geral

Aba DEBUG

Com essa aba será possível depurar a aplicação sem precisar construir e instalar a mesma.

A vantagem dessa aba em relação a aba TEST é que, com ela, é possível usar o CDT (Google Chrome Developer Tools) para depuração remota. Assim é possível debugar o código JavaScript completo com pontos de interrupção (break points).

Essa aba só funciona com os dispositivos Android 4+ e Apple iOS 6.1+. O dispositivo precisa estar conectado via USB.

Page 17: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

17

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

Aba PROFILE

Nessa aba será possível monitorar os recursos da aplicação, identificar CPU e características da memória.

Essa aba só funciona nos dispositivos Android 4+.

Aqui será possível baixar o código HTML5 para o dispositivo Android conectado via USB, executar e pegar estatísticas relacionadas a como o código JavaScript está utilizando a CPU e a memória do dispositivo.

Um módulo de debug especial será copiado para o dispositivo: App Preview Crosswalk.

Visão Geral

Aba BUILD

Antes de implantar (deploy) a App é preciso construí-la (buid).

É nessa aba que o pacote da sua App será construído para posteriormente ser publicado em cada loja.

O processo de construção é efetuado na nuvem, para que não seja preciso instalar e configurar o SDK para cada plataforma de destino.

A publicação na loja ficará a cargo do desenvolvedor, que deverá seguir as regras impostas por cada empresa. Veremos mais detalhes sobre o processo de publicação nas lojas posteriormente.

Page 18: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

18

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

Para esse primeiro contato é esperado que o leitor tenha instalado o XDK em seu SO preferido. Além disso, o leitor precisa instalar o App Preview no seu dispositivo real.

Execute o XDK e realize o login na sua conta Intel.

Você poderá criar dois tipos de projeto:

Standard HTML5: utiliza HTML5 e JavaScript. Poderá utilizar as APIs padrões do W3C. Não suporta o Cordova. Poderá ser implantada como uma App híbrida nas várias plataformas (Android, iOS e Windows) ou como uma aplicação 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 híbrida nas várias plataformas (Android, iOS e Windows).

Primeiro Contato

Aba BUILD

Antes de implantar (deploy) a App é preciso construí-la (buid).

É nessa aba que o pacote da sua App será construído para posteriormente ser publicado em cada loja.

O processo de construção é efetuado na nuvem, para que não seja preciso instalar e configurar o SDK para cada plataforma de destino.

A publicação na loja ficará a cargo do desenvolvedor, que deverá seguir as regras impostas por cada empresa. Veremos mais detalhes sobre o processo de publicação nas lojas posteriormente.

Page 19: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

19

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

Quando selecionar a opção para criar um novo projeto, o XDK fornecerá três opções:

Primeiro Contato | Novo Projeto

Page 20: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

20

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

Na janela anterior, selecione a opção “Samples and Demos”. Na opção General, selecione a guia “HTML5 + Cordova”. Agora clique na imagem “Hello, Cordova” para iniciar uma App a partir desse demo. Clique no botão “Continue” para iniciar o projeto.

Primeiro Contato | Novo Projeto

Page 21: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

21

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

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. Após isso, você verá o código de sua aplicação na aba DEVELOP.

Primeiro Contato | Novo Projeto

Page 22: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

22

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

1 – Essa aba será utilizada para editar e adicionar arquivos ao projeto. Você pode usar o editor de código embutido, que já vem com o XDK, ou usar o seu editor de código preferido, como o Notepad++, se desejar.

2 – Na árvore de arquivos é possível visualizar os arquivos associados ao projeto ativo, incluindo os arquivos de imagem. Também é possível selecionar um arquivo para edição.

Primeiro Contato | Novo Projeto | Aba DEVELOP

Page 23: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

23

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

3 – Utilize as opções de menu ou seus atalhos para acessar as opções do editor de código.

4 – No editor de código será possível editar o arquivo. Utilize o menu de contexto se necessário.

5 – Use os botões da barra de ferramentas (presentes em todas as abas) para acessar a ajuda, iniciar o Quick Tour, alterar as configurações do XDK, exibir e alterar as configurações de sua conta e acompanhar os tweets sobre o XDK.

Primeiro Contato | Novo Projeto | Aba DEVELOP

Page 24: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

24

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

6 – A paleta LIVE DEVELOPMENT TASKS permite a pré-visualização do código em um navegador ou em dispositivos reais e virtuais.

7 – Com a paleta WEB SERVICES será possível explorar alguns serviços de terceiros que já vem embutidos no XDK. Além disso, será possível integrar outras APIs.

Primeiro Contato | Novo Projeto | Aba DEVELOP

Page 25: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

25

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

O editor de códigos embutido no XDK é baseado no Brackets. Sendo assim, é fácil adicionar extensões através do menu “File > Extension Manager”.

Com esse Demo não podemos trabalhar com o App Designer. Ou seja, não é possível desenhar as telas de forma visual. Veremos posteriormente como fazer isso. Num projeto que é criado para ser trabalhado de forma visual, é possível revesar entre os modos de visualização CODE e DESIGN.

Quando iniciamos um projeto que usa o App Designer, teremos a capacidade de trabalhar de forma visual e também no código, sendo que alterações na tela repercutirão no código e vice-versa.

Se você selecionar a opção “Run My App Run in Emulator” da paleta LIVE DEVELOPMENT TASKS →será aberta uma janela flutuante com as opções do emulador. Essa janela tem as mesmas opções da aba EMULATE.

Primeiro Contato | Novo Projeto | Aba DEVELOP

Page 26: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

26

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

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. É possível realizar testes em vários dispositivos virtuais.

2 – Use os botões da barra de ferramentas para recarregar os arquivos de código fonte e reiniciar a aplicação. É possível ainda iniciar o depurador embutido numa nova janela, exibir e alterar as configurações do emulador e parar de executar a App no emulador.

Primeiro Contato | Novo Projeto | Aba EMULATE

Page 27: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

27

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

3 – Se você clicar no ícone Auto Zoom, a tela do dispositivo se encaixará totalmente na sua janela. É possível ainda aumentar e diminuir o zoom através do controle deslizante.

4 – Use as paletas para configurar vários dispositivos virtuais que ajudam a determinar como sua aplicação vai funcionar em vários tamanhos e orientações de telas. É possível 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.

Primeiro Contato | Novo Projeto | Aba EMULATE

Page 28: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

28

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

Antes de usar a aba TEST, não esqueça de instalar no dispositivo real a App Preview.

Quando acessar a aba TEST pela primeira vez, uma mensagem vai surgir solicitando a sincronização com o servidor: “Please sync with our testing server”.

1 – Utilize a aba TEST para avaliar – através da rede – como sua App funciona num dispositivo real sem precisar realizar uma instalação completa do mesmo. Nesse ponto você também verá como será a aparência da sua App no dispositivo real.

Primeiro Contato | Novo Projeto | Aba TEST

Page 29: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

29

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

2 – Use o botão MOBILE para realizar testes num servidor na nuvem. Requer configuração mínima, evita problemas de firewall da rede, é possível baixar os arquivos do servidor a qualquer hora e em qualquer lugar.

Use o botão WIFI para realizar testes numa rede Wi-Fi onde tanto a máquina de desenvolvimento quando o dispositivo real estejam conetados.

3 – As instruções estão ali para lembrar como as coisas funcionam.

Primeiro Contato | Novo Projeto | Aba TEST

Page 30: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

30

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

4 – Use o botão PUSH FILES para enviar os arquivos mais recentes do projeto de sua máquina para o servidor.

5 – Use o leitor de QR Code do App Preview para executar o teste no dispositivo real.

6 – É possível depurar remotamente a aplicação enquanto ela estiver sendo executada no dispositivo real. Nesse caso é utilizado o console de depuração “weinre”.

Primeiro Contato | Novo Projeto | Aba TEST

Page 31: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

31

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

1 – A aba BUILD fornece várias opções para construir o pacote da aplicação. Nessa aba será possível empacotar a App para que a mesma seja distribuída 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 compilações (builds) anteriores.

Primeiro Contato | Novo Projeto | Aba BUILD

Page 32: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

32

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando a Ferramenta

3 – Na seção CORDOVA HYBRID MOBILE APP PLATFORMS você conseguirá criar um pacote que poderá ser publicado nas lojas da Apple, Google e Microsoft.

4 – A opção LEGACY HYBRID MOBILE APP PLATFORMS continua na ferramenta por conta de APIs antigas. Recomenda-se migrar as aplicações para as APIs atuais e utilizar a opção CORDOVA HYBRID MOBILE APP PLATFORMS.

Veremos em detalhes como funciona cada uma das abas nos capítulos posteriores.

Primeiro Contato | Novo Projeto | Aba BUILD

Page 33: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

33

#Desenvolvendo Aplicações Multiplataforma com o XDK

Licença

A utilização das ferramentas disponibilizadas no site da Intel são regidas pelo TOU – Terms of Use.

É possível 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 usuário 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 à licença 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 não pode ser compartilhado com outro usuário.

Entendendo a Licença do XDK

É possível usar as ferramentas da Intel sem precisar pagar royalties ou qualquer outro valor. É possível distribuir as aplicações 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ê não pode fazer é redistribuir ou vender os materiais da Intel. Ou seja, você não pode sair por aí vendendo o XDK.

Provavelmente essa é a parte da licença que mais interessa, pelo menos para a maioria dos desenvolvedores.

É importante frisar que a leitura dos termos e condições informados no link anterior é imprescindível.

Page 34: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

34

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Uma das melhores formas de aprender uma ferramenta, um framework, uma linguagem, etc é estudando os demos. O XDK vem com vários deles.

Já vimos que ao acessar a opção START A NEW PROJECT teremos acesso à seção “Samples and Demos”.

Nessa seção nós 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”.

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.

Samples e Demos

É importante frisar que as Apps criadas com o XDK são feitas com HTML + JavaScript + CSS. Assim sendo, é preciso ter o mínimo 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 visão geral sobre elas, senão o estudo do XDK será frustrante.

Page 35: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

35

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Depois de criar o projeto, acesse a aba EMULATE e altere várias vezes o dispositivo. Observe como a tela vai se adequando ao tamanho da tela do dispositivo.

Mude também a orientação da tela e observe como a aplicação se comporta.

Samples e Demos | Buttons

Vamos começar com o Sample Buttons. Selecione esse exemplo conforme imagem abaixo e clique no botão “Continue”. Esse é um exemplo básico que mostra como uma tela responsiva com botões.

O projeto em si não tem muito segredo. Dois botões serão exibidos na tela e terão seu tamanho e posição adaptados de acordo com o tamanho e orientação da tela.

Page 36: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

36

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Depois de criar o projeto, acesse a aba EMULATE e altere várias vezes o dispositivo. Observe como a tela vai se adequando ao tamanho da tela do dispositivo.

Mude também a orientação da tela e observe como a aplicação se comporta.

Samples e Demos | Buttons

A aplicação foi salva com o nome “App21”. Dentro da pasta da aplicação estão os arquivos do projeto XDK, conforme observamos na imagem abaixo. O arquivo “.xdke” contém preferências específicas do desenvolvedor para o projeto. O arquivo “.xkd” define o projeto e é compartilhado por todos os membros que trabalham no mesmo projeto. Esses arquivos não devem ser alterados por fora do XDK.

Page 37: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

37

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Samples e Demos | Buttons

Na imagem anterior podemos observar que existe uma pasta “www” dentro da pasta do projeto. Essa pasta contém o projeto HTML. Você pode clicar duas vezes no arquivo “index.html” e verá que ele será aberto no seu navegador padrão. Observe pelo ícone que o navegador padrão da máquina 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” contém um arquivo JSON com algumas informações sobre o projeto.

Page 38: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

38

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Samples e Demos | Buttons

O que existe para estudar nesse Demo? Na verdade, não tem muita coisa. Trata-se de um projeto HTML puro e simples. Se você domina HTML + JavaScript + CSS já possui quase todo o conhecimento necessário relacionado ao exemplo! Sua preocupação no momento deve ser com design e layout responsivo. O que é isso? Em suma, é adaptar a visualização da sua aplicação para qualquer tipo de tela.

Não vamos tratar desse assunto no livro, pois não é o nosso foco. Portanto, se você ainda não 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 necessário pesquisando sobre esse assunto até compreendê-lo e depois volte à leitura do livro.

Page 39: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

39

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Samples e Demos | Geolocation Demonstration

Uma das características mais utilizadas nas aplicações é acessar a localização geográfica do dispositivo. É útil em várias situações.

O XDK possui um demo que trata exatamente disso. Não é um demo “Standard HTML”. Trata-se de um demo “HTML5 + Cordova”. Inicie uma nova aplicação conforme imagem a seguir.

Page 40: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

40

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Samples e Demos | Geolocation Demonstration

O objetivo desse demo é mostrar como criar uma App híbrida que aproveita os serviços de geolocalização da API JavaScript Bridge, bem como se conectar a web services gratuitos de mapeamento.

Essa App vai acompanhar o progresso do usuário durante sua viagem e vai colocar um “pin” no mapa a cada 10 segundos.

Existem duas funções importantes nessa App. Ambos estão no arquivo “js/main.js”.

A primeira é a que detecta a latitude e a longitude do dispositivo a partir de seus serviços de geolocalização, conforme demostrado abaixo.

Page 41: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

41

#Desenvolvendo Aplicações Multiplataforma com o XDK

Explorando os Demos

Samples e Demos | Geolocation Demonstration

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 disponível, incluindo aí os que são apenas HTML, os híbridos e os games.

Concentre-se em testar os demos para observar o que você pode fazer com esse tipo de aplicação. Se desejar, explore também o código. Quanto mais estudar o código, mais vai aprender. Nos capítulos seguintes vamos analisar a fundo as características do XDK.

Page 42: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

42

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Visão 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 realizarão suas operações em cima desse projeto.

2 – Uma lista de projetos conhecidos aparecem no lado esquerdo da tela.

3 – Veja informações sobre o projeto ativo na paleta a direita, na seção Project Info.

4 – As configurações do projeto que aparecem nessa seção vão depender do tipo de projeto que está sendo trabalhado.

Page 43: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

43

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Visão Geral

Para exibir informações sobre um projeto, basta clicar no nome do projeto. Dentre as informações exibidas estão: o tipo de projeto, o caminho raiz e o diretório de origem. Seguem as funções dos botões disponíveis:

Page 44: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

44

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Visão Geral – Tipos de Projetos

Existem dois tipos de projetos: Standard HTML5 e HTML5+Cordova. Existe um terceiro tipo de projeto numa versão específica do XDK: Internet of Things Embedded Applications. Não abordaremos esse tipo de projeto nesse livro.

Page 45: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

45

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Visão Geral – Tipos de Projetos

Existem dois tipos de projetos: Standard HTML5 e HTML5+Cordova. Existe um terceiro tipo de projeto numa versão específica do XDK: Internet of Things Embedded Applications. Não abordaremos esse tipo de projeto nesse livro.

Page 46: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

46

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Habilitando / Desabilitando Plataformas Alvo

Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto “HTML5+Cordova”, se a App requer uma plataforma alvo “Android Crosswalk”, mas não 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 não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo.

Page 47: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

47

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Configurando a App

Para os projetos “HTML5+Cordova”, você deve especificar as configurações na seção CORDOVA HYBRID MOBILE APP SETTINGS. Essas configurações são utilizadas pelo XDK para criar os arquivos de configuração específicos da plataforma que são enviados para o sistema de compilação do XDK. O XDK gera automaticamente esses arquivos de configuração com base nas configurações da aba PROJECTS. Os arquivos “intelxdk.config.<platform>.xml” se encontram na pasta do projeto.

Você deve explorar a seção CORDOVA HYBRID MOBILE APP SETTINGS para compreender como configurar sua aplicação. Observe que existem três opções: Plugin Management, Build Settings e Launch Icons and Splash Screens. Ao clicar no botão [+] você terá acesso a todas as opções de configuração.

Em Plugin Management você conseguirá:

Explorar e adicionar novos plugins. Ver o ID, nome, versão, documentação, dependências e outros detalhes sobre o plugin. Remover plugins.

Em Build Settings você vai configurar aspectosexigidos por cada plataforma.

E na última opção você conseguirá selecionaras imagens que comporão a App.

Page 48: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

48

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Configurando a App – Plugin Management

Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto “HTML5+Cordova”, se a App requer uma plataforma alvo “Android Crosswalk”, mas não 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 não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo.

Page 49: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

49

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Configurando a App – Build Settings

Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto “HTML5+Cordova”, se a App requer uma plataforma alvo “Android Crosswalk”, mas não 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 não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo.

Page 50: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

50

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Configurando a App – Launch Icons and Splash Screens

Através da aba PROJECTS é possível habilitar ou desabilitar certas plataformas alvo. Por exemplo, em um projeto “HTML5+Cordova”, se a App requer uma plataforma alvo “Android Crosswalk”, mas não 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 não vai mais aparecer a opção de construir o pacote pra ela na aba BUILD. Observe a imagem abaixo.

Page 51: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

51

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Criando um Novo Projeto

Abra a aba PROJECTS e clique na seta abaixo, conforme imagem, ou selecione a opção Start a New Project abaixo da lista de projetos.

Após isso, as seguintes opções ficarão disponíveis:

Page 52: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

52

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Criando um Novo Projeto

Caso você opte por criar um novo projeto a partir de um Template, deverá escolher entre as categorias disponíveis: Blank, Layout and User Interface e Games.

Page 53: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

53

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Criando um Novo Projeto

Quando selecionar um dos templates, o XDK apresentará uma breve descrição do mesmo. Será possível 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.

Page 54: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

54

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Criando um Novo Projeto

No caso dos jogos funciona de forma semelhante. Cada template apresentará uma breve descrição.

No caso do Cocos2d, visto na imagem, será possível selecionar entre as versões 2.x e 3.x.

O desenvolvedor também deverá selecionar o tipo de projeto (CODE BASE), de acordo com os tipos que vimos anteriormente.

Nesse momento também será possível selecionar a orientação:Portrait ou Landscape.

Se desejar, poderá localizar os fontes do Demo no GitHub através do botão abaixo.

Depois que analisar e selecionar o projeto desejado, deveráclicar no botão “Continue” para que o projeto seja criado.

Page 55: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

55

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova

Os plugins do Apache Cordova são 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 integração entre o aplicativo e o software/hardware do dispositivo.

Existem centenas de plugins Cordova (e Adobe PhoneGap) disponíveis 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 repositórios 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 são 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 disponíveis no XDK, mesmo que não tenham sido adicionados ao projeto.

Um plugin é um pacote de código 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 não estão disponíveis para Apps que rodam num navegador. As APIs Cordova e do XDK são implementadas como plugins.

Page 56: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

56

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova

Os plugins consistem de APIs JavaScript e módulos de código nativo (para cada plataforma suportada pelo plugin). Em essência, quando a App chama a API JavaScript do plugin, ela é redirecionada para o código nativo subjacente que implementa essa API no dispositivo.

Por exemplo, a API JavaScript é redirecionada para código Java em um dispositivo Android ou para código Objective C em um dispositivo iOS. Plugins podem ser simples ou complexos: tão complexo quanto o mecanismo de persistência do banco de dados ou tão simples como um método para ligar o flash da câmera LED.

Você não 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 características específicas do dispositivo que sua App pode acessar, características que normalmente não podem ser acessadas a partir de um navegador ou WebView padrão.

Page 57: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

57

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova – Observações Já que a maioria dos plugins são bibliotecas de terceiros, o XDK pode não ter conhecimento

explícito de funcionalidades ou do código interno de um plugin específico. As ferramentas de depuração incluídas no XDK apenas fornecem suporte para os plugins do núcleo do Cordova e XDK.

Nem todos os plugins são iguais. Muitos plugins estão disponíveis apenas para as plataformas Android e iOS. Os plugins do núcleo 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 técnicas de detecção de plataformas e de recursos para implementar uma solução alternativa para plataformas não suportadas.

Nem todos os plugins se comportam de maneira igual em todas as plataformas. O funcionamento de um plugin pode variar em função da plataforma, geralmente devido a detalhes de plataforma e não porque o plugin está incompleto ou com problemas. As variações incluem propriedades que não existem em algumas plataformas ou métodos que não funcionam em outras plataformas. Consulte a documentação do plugin para observar esses detalhes.

O XDK não 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 núcleo do XDK são escritos como plugins Cordova. Os plugins de núcleo (core) do Cordova são mantidos pela comunidade de desenvolvimento Cordova CLI. Já os plugins de núcleo do XDK são mantidos pela equipe de desenvolvimento da Intel.

Page 58: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

58

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova – Observações Se você estiver desenvolvendo seu próprio 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 também instalem o sistema Cordova CLI.

O XDK fornece um mecanismo para depurar o código 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 código nativas que são específicas para a plataforma nativa.

A App Preview que você baixou a partir das respectivas lojas para depuração rápida de seus aplicativos HTML5 inclui suporte apenas para plugins de núcleo do Cordova e XDK. Para conseguir depurar os plugins de terceiro, será preciso construir a App, na aba BUILD, e então 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 prática adotar o estilo conhecido como SPA (Single Page Application). Você faz uma página e realiza todo o controle via Ajax. A App ficará mais eficiente, pois ao criar várias páginas, a App precisa recarregar os scripts, assets, etc. Mesmo que tais coisas estejam em cache, ainda assim haverá problemas de desempenho.

Page 59: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

59

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova – Single Page Application [SPA]

As SPAs são aplicações 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 aplicações “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 aplicação web tradicional, as requisições ficam sendo feitas ao servidor, que devolve uma página HTML para o navegador a cada requisição.

Já numa SPA, toda a página é carregadas de uma vez só. As requisições são feitas via Ajax e o servidor retorna os dados em JSON que serão exibidos na página sem que a mesma seja recarregada.

Page 60: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

60

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova

Já vimos anteriormente que a aba PROJECTS contém uma seção para o gerenciamento de plugins chamada Plugin Management.

Os plugins adicionados no XDK serão armazenados como parte de seu projeto e copiados para a pasta “plugins”. Os plugins subirão para o servidor de compilação da Intel junto com o código 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.

Page 61: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

61

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova

Após selecionar um plugin, você pode expandi-lo para ver mais detalhes sobre ele: ID, versão está instalada no projeto, um link para a página de documentação principal e um ícone para modificar a versão do plugin.

Dependendo do plugin que está utilizando poderá ainda observar de quais outros plugins ele depende, quais as versões do Cordova que são compatíveis com o plugin, as permissões Android que o plugin vai precisar e o nome do autor que criou o plugin.

Page 62: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

62

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova

O Plugin Manager armazena os plugins incluídos 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 análise do código e também para depuração.

Page 63: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

63

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova – Whitelist Rules

É através das Whitelist Rules que você poderá especificar quais recursos do dispositivo sua App terá acesso. Antes de publicar a aplicação é preciso determinar quais recursos específicos são exigidos por ela, a fim de maximizar a segurança do seu aplicativo e seus dados.

Page 64: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

64

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova – Whitelist Rules

Quando não existem regras definidas, todos os acessos de rede ficarão bloqueados. Através das regras é possível definir se o acesso ao recurso será feito por meio de uma API (XMLHttpRequest, por exemplo) ou através de marcação (<iframe>, <script>, <img>).

A opção "Block All" bloqueia os acessos externos. Esta é a configuração recomendada se o seu aplicativo não necessita de quaisquer recursos externos.

Essas regras só se aplicam às aplicações que são construídas e publicadas. As abas EMULATE, TEST e DEBUG não tem conhecimento das regras definidas nas configurações do projeto. As ferramentas de depuração são 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 execução, quando uma requisição é feita para acessar um recurso de rede dentro do escopo de execução da App, o WebView compara a requisição com as regras definidas. Conceder acesso a um recurso externo, por conta de de uma regra, significa que o código em execução 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.

Page 65: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

65

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação 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 não 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 página GitHub com o código fonte e a documentação do plugin.

Existem alguns plugins XDK que estão depreciados. Tome cuidado para não utilizá-los na sua aplicação. Prefira sempre utilizar os plugins Cordova.

Observe sempre a documentação do XDK para observar se o plugin está depreciado antes de utilizá-lo.

Page 66: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

66

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

Plugins para a Aplicação Cordova – Configurando

Os detalhes para construir a App no servidor da Intel são 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 configuração será criado automaticamente para cada plataforma. Por exemplo: “intelxdk.config.android.xml.

Já que esse arquivo é gerado automaticamente sempre que um build é realizado, você não pode alterá-lo.

Se você precisar incluir alguma diretiva que não esteja disponível nas opções do XDK, deverá utilizar um arquivo de adições: Additions File. Tal arquivo receberá o nome “intelxdk.config.additions.xml”.

Na maioria dos casos você não usará esse arquivo. Ele é opcional.

Page 67: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

67

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

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

Existem algumas opções que podem estar no arquivo de configuração e não tem como configurar via XDK. A maioria dessas opções são incomuns ou podem ser configuradas pelo valor padrão. Se você for forçado a trabalhar com uma dessas configurações, será o caso de criar o arquivo de adição que mencionamos anteriormente: “intelxdk.config.additions.xml”. Podemos ver um exemplo na imagem abaixo. A primeira diretiva adiciona uma opção de configuração que cria um aplicativo Cordova para Android que pode ser depurado remotamente usando o Google Chrome DevTools.

Page 68: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

68

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

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

As demais diretivas do exemplo acima controlam as opções do plugin Cordova Status Bar. Normalmente essas opções não seriam colocadas nesse arquivo. O fato de elas estarem aí mostram que o desenvolvedor sobrescreveu esses diretivas para alterar o comportamento padrão do plugin.

As diretivas acima serão adicionadas em cada arquivo específico de plataforma: intelxdk.config.<platform>.xml.

Page 69: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

69

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

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

Observe as quatro linhas adicionadas no final do arquivo específico da plataforma android.

Page 70: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

70

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba PROJECTS

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

A seguir veremos alguns exemplos de utilização do arquivo de adição. O primeiro adiciona uma preferência para todos os demais arquivos de construção:

<preference name="Fullscreen" value="true" />

Adiciona uma preferência apenas para o arquivo de construção do Android:

<!-- +Android --><icon platform="android" src="assets/icon-l.png" density="ldpi" /><!-- +Android --><preference name="Fullscreen" value="true" />

Remove um plugin do arquivo de construção do iOS:

<!-- -iOS --><intelxdk:plugin intelxdk:name="Contacts" />

Remove todos os ícones do arquivo de construção do Windows 8:

<!-- -Windows8 --><icon />

Adiciona um plugin de terceiro que precisa de parâmetros em todos os arquivos de construção:

<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>

Page 71: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

71

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Visão Geral

A aba DEVELOPER fornece uma visão completa dos arquivos da pasta do projeto. Você pode editar os arquivos de projeto com o editor de código embutido do XDK ou com o seu editor de código favorito. Você também 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 código externo, por exemplo) e solicita ações adicionais por conta disso. Nessa aba o desenvolvedor tem duas opções de visão (view): CODE – visualiza o editor de código embutido e DESIGN – permite a criação da App de forma visual usando o App Designer.

Page 72: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

72

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Visão Geral

Para alternar entre os modos CODE e DESIGN, utilize os botões com o mesmo nome vistos na imagem anterior. Na imagem anterior você observa o tipo de visão 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 alterações no layout e CSS.

Page 73: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

73

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código

Na barra lateral do lado esquerdo é possível visualizar os arquivos que pertencem ao projeto.

Se você selecionar um dos arquivos, verá o código respectivo no editor de código.

Se estiver na visualização de Design, clique no botão CODE para visualizar o editor de código.

Page 74: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

74

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código

Na barra lateral do lado esquerdo é possível visualizar os arquivos que pertencem ao projeto.

Se você selecionar um dos arquivos, verá o código respectivo no editor de código.

Se estiver na visualização de Design, clique no botão CODE para visualizar o editor de código.

Page 75: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

75

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código

O editor de código 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 não 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 botão direito na árvore de arquivos e selecione a opção “New File”, conforme imagem. Você deve então informar o nome do arquivo com a extensão. Após isso poderá trabalhar no arquivo em branco.

Se desejar deletar o arquivo que criou, selecione o mesmo com o botãodireito do mouse e escolha a opção “Delete”.

É possível que após deletar o arquivo, ele ainda apareça na árvore.Se isso acontecer, clique novamente com o botão direito na árvorepara ter acesso ao menu de contexto e selecione a opção “RefreshFile Tree”.

Como você pode observar, tanto a árvore de arquivos quanto o editor de textos possuem um menu de contexto, que aparece quandovocê pressiona o botão direito do mouse. Realize testes para observaras opções que estão disponíveis nesses menus.

Page 76: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

76

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

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

Para habilitar a visão para múltiplos arquivos:

1 – Para criar uma visão side-by-side, clique View > Vertical Split.2 – Para criar uma visão above-and-below, clique View > Horizontal Split.3 – Para desativar a divisão da tela e fechar o painel que não está em foco, use View > No Split.

Depois de habilitar uma visão de tela dividida (split screen view), as operações realizadas serão aplicadas ao painel que se encontra com o foco. Além disso, a seção “Working Files” será substituída pelas opções Left e Right numa divisão vertical (side-by-side), ou Top e Bottom numa divisão horizontal (above-and-below).

Page 77: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

77

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código

Ao explorar o editor você logo verá que ele se comporta como outros editores de código, como o Notepad++, e que tem suas próprias características, evidentemente. Por exemplo, pressione Control+F (Edit > Find) e digite a string de pesquisa “<script”. O editor realça as ocorrências de “<script” e sua barra de rolagem indica onde a sequência ocorre no arquivo:

Page 78: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

78

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código – Autocompletion Hints

O editor exibe dicas (hints) enquanto você digita o código HTML, CSS ou JavaScript. O editor conhece a maioria dos objetos e métodos da API.

No caso das tags HTML você pode precisar pressionar Control+Espaço ou clicar em “Edit > Show Code Hint”. Seguem algumas dicas relacionadas às tags HTML.

Page 79: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

79

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código – Autocompletion Hints

O editor exibe dicas (hints) enquanto você digita o código HTML, CSS ou JavaScript. O editor conhece a maioria dos objetos e métodos da API.

Page 80: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

80

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código – Autocompletion Hints

O editor exibe dicas (hints) enquanto você digita o código HTML, CSS ou JavaScript. O editor conhece a maioria dos objetos e métodos da API.

Page 81: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

81

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código – Quick Edit

O Quick Edit exibe uma janela pop-up de edição para a definição selecionada dentro da janela atual. Ela aparece com um fundo cinzento e é limitada ao código 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 definição correspondente do arquivo “toh.css” aparece num pop-up com um fundo cinza.

Page 82: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

82

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código – Quick Edit

Após 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 função e pressiona Control+E ou clica em “Navigate > Quick Edit”. Observe o exemplo abaixo no arquivo “toh.js”.

Após chamar o Quick Edit aparecerá o pop-up correspondente.

Page 83: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

83

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Editor de Código – Quick Open

Use o Quick Open para navegar rapidamente por vários arquivos, números de linhas ou definições de funções. Para isso pressione Control+Shift+O ou clique em “Navigate > Quick Open” para abrir um pop-up no canto direito superior da janela de edição.

Page 84: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

84

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer – Visão Geral

O XDK inclui uma ferramenta de layout GUI intuitiva chamada App Designer. Use esse editor para desenhar visualmente as páginas da App.

O App Designer dá ênfase ao design responsivo através da utilização de um sistema de grid e media queries. Isso vai te ajudar a criar layouts de páginas que funcionam bem em diferentes tamanhos e orientações de tela. Esta ferramenta também reduz o trabalho duro e tedioso de desenhar telas HTML responsivas.

O App Designer suporta múltiplos 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 razões:

Se você está desconfortável para escrever na unha o código HTML ou CSS/LESS. Se você não é um especialista no framewok UI que escolheu, ou não quer se tornar um

especialista. Se você prefere que o App Designer faça o trabalho pesado, que exige um monte de código

manual, como as media queries. Quando você precisa fazer rapidamente um protótipo para fins de avaliação.

Page 85: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

85

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer – Visão Geral

O XDK inclui uma ferramenta de layout GUI intuitiva chamada App Designer. Use esse editor para desenhar visualmente as páginas da App.

O App Designer dá ênfase ao design responsivo através da utilização de um sistema de grid e media queries. Isso vai te ajudar a criar layouts de páginas que funcionam bem em diferentes tamanhos e orientações de tela. Esta ferramenta também reduz o trabalho duro e tedioso de desenhar telas HTML responsivas.

O App Designer suporta múltiplos 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 razões:

Se você está desconfortável para escrever na unha o código HTML ou CSS/LESS. Se você não é um especialista no framewok UI que escolheu, ou não quer se tornar um

especialista. Se você prefere que o App Designer faça o trabalho pesado, que exige um monte de código

manual, como as media queries. Quando você precisa fazer rapidamente um protótipo para fins de avaliação.

Page 86: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

86

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer – Visão Geral

1 – Para um projeto criado com o App Designer, use os botões CODE e DESIGN para alternar entre a view do App Designer e do Editor de Código.2 – O botão Arrow exibe ou oculta a árvore de arquivos do projeto.3 – Coluna da esquerda onde é possível 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 disponíveis vai depender do framework UI selecionado para o projeto.4 – Através da barra de ferramentas do App Designer é possível recarregar seu aplicativo, excluir um controle ou elemento selecionado, desfazer ou refazer a última ação, ver o framework UI selecionado, redimensionar a área de trabalho (workspace canvas) e a orientação 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 representação WYSIWYG (What You See Is What You Get - O que você vê é o que você obtém). 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.

Page 87: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

87

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer – Workspace Canvas

Conforme você arrasta um controle da coluna da esquerda para a área de trabalho:

Possíveis á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 – Alças da workspace. Observe que são três alças. Servem para redimensionar a tela (canvas) de acordo com a necessidade.D – Workspace para ver os controles e elementos relacionados que você inseriu na página 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, visualização do código LESS e HTML. É possível editar o código LESS e HTML.

Page 88: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

88

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer – LESS

Abrimos aqui um parêntesis para explicar o que é o LESS. Segundo a Wikipédia:

LESS é uma linguagem de folha de estilos dinâmica desenhada por Alexis Sellier. Ela foi influenciada por Sass e influenciou a nova sintaxe “SCSS” do Sass, que adaptou sua sintaxe de formação de blocos do tipo CSS. LESS é de código aberto. Sua primeira versão foi escrita em Ruby, no entanto em versões posteriores, o uso do Ruby foi depreciado e substituído por JavaScript. A sintaxe indentada do LESS é uma metalinguagem aninhada, uma vez que um código válido em CSS também é válido em LESS e tem a mesma semântica. LESS fornece os seguintes mecanismos: variáveis, aninhamento, mixins, operadores e funções; a principal diferença entre LESS e outros pré-compiladores de CSS é que LESS permite a compilação 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.

Page 89: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

89

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer

O App Designer só estará visível e disponível 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” também contém essa caixa. Alguns Samples e Demos utilizam o App Designer, outros não.

Page 90: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

90

#Desenvolvendo Aplicações Multiplataforma com o XDK

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.

Page 91: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

91

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer

Analise o arquivo de index.html e observe que a seção <body> contém múltiplas tags <div>. O <div> mais externo define o documento principal. Se você tem uma linha com duas colunas, a linha contém tags <div> e aninhadas dentro dela estão as <div> das colunas. Dentro de cada coluna <div> estão os controles que você inseriu aninhados com as tags <div> dessa coluna.

Page 92: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

92

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

App Designer – Diretrizes de Codificação Não modifique o arquivo css/index_main.less.css. Ele é reservado para uso pelo App Designer,

portanto crie seu próprio arquivo CSS para o seu projeto. O App Designer utiliza arquivos LESS e não 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 código e também alterar

o código e isso repercutir nos controles visuais, não altere os labels que contém “UIB”. Evite usar código JavaScript incorporado no layout HTML. Essa abordagem não é recomendada

porque as mudanças que você faz no layout podem modificar ou apagar o código embutido. Além disso, futuras versões 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 código de inicialização, acesse o controle. Exemplo:

el = document.getElementById("myElementID")

Page 93: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

93

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates

O XDK fornece alguns templates para iniciar um projeto de forma mais fácil. 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

Page 94: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

94

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates – SingleView App

Este template pode ser usado para aplicações simples que tem apenas uma view.

Exemplos de Apps que podem ser feitas com esse template:

Calculadora Flash Light

Page 95: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

95

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates – FlipView App

Este template pode ser usado para aplicações utilitárias simples com uma view principal e outra de configurações.

Exemplos de Apps que podem ser feitas com esse template:

Mapas Clima Relógio

Page 96: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

96

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates – ListView App

Este template pode ser usado para aplicações que precisem exibir dados em uma lista simples na tela principal.

O usuário pode navegar na lista e ao selecionar um item acessará uma tela secundária com as informações detalhadas do item selecionado.

Exemplos de Apps que podem ser feitas com esse template:

E-Mail Mensagens Twitter Apps comerciais com acesso a

dados

Page 97: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

97

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates – GridView App

Este template pode ser usado para aplicações de fotos com uma visão em grade (grid) que abrirá o detalhe, ou seja, a visualização da foto selecionada.

Exemplos de Apps que podem ser feitas com esse template:

Aplicações de Fotos Instagram

Page 98: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

98

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates – SideMenu App

Este template pode ser usado para aplicações simples que utilizam um menu lateral que pode ser acessado para navegar entre as views.

Exemplos de Apps que podem ser feitas com esse template:

Youtube Gmail Apps comerciais com acesso a

dados

Page 99: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

99

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates – TabView App

Este template pode ser usado para criar uma aplicação que utiliza abas para navegar entre as views.

Exemplos de Apps que podem ser feitas com esse template:

Facebook Instagram Apps comerciais com acesso a

dados

Page 100: #Desenvolvendo Aplicações Multiplataforma com o XDK · Android – Java iOS ... Studio, conseguirá criar Apps para as três plataformas. ... Pode ser uma calculadora, um jogo,

100

#Desenvolvendo Aplicações Multiplataforma com o XDK

Aba DEVELOPER

Templates – LoginView App

Este template pode ser usado para criar uma aplicação que requisita um login ou um registro antes que a App seja iniciada.

Possui tanto a opção de login quanto a de registro.

Exemplos de Apps que podem ser feitas com esse template:

Facebook Twitter Apps comerciais com

acesso a dados