Académique Documents
Professionnel Documents
Culture Documents
Pblico alvo
Este ebook foi escrito para voc que est comeando no mundo do desenvolvimento de
aplicativos mveis e tem interesse em aprender sobre uma tecnologia hbrida. No
iremos abordar padres de desenvolvimento e no vamos utilizar lgicas de
programao complexas para facilitar o aprendizado e ter um pblico mais amplo, tendo
em vista que iniciantes tambm no mundo da programao podem estar lendo este
ebook.
Este material no dever ser seu nico ponto de referncia e guia, pois existem outros
ebooks, livros e blogs que falam sobre Ionic Framework e podem ampliar seu
conhecimento.
Sobre o autor
Fbio Rogrio da Silva Jos
, conhecido como Fbio Rogrio SJ nas redes sociais,
desenvolvedor de aplicaes web e mobile desde quando o
Internet Explorer 7 er um
pesadelo e desenvolver aplicativos hbridos com tecnologias web era um trabalho rduo,
ou seja, desde 2007.
Atualmente Fbio Rogrio trabalha com consultoria e treinamento em desenvolvimento
de aplicaes web e mobile utilizando tecnologias hbridas. E tambm professor, de
curso superior, onde ministra as disciplinas de desenvolvimento
frontend,
desenvolvimento de aplicativos mveis, web design, design de interao e lgica de
programao.
Sumrio
Introduo
Apache Cordova
AngularJS
ngCordova
Ionic 2.0
Instalando ambiente
NodeJS
Git
Sublime Text
10
config.xml
10
www
11
Componentes
12
Header
12
Content
14
Footer
15
SubHeader e SubFooter
16
Cores
16
Icons
17
Buttons
17
List
20
Cards
25
2
Forms
28
Toggle
30
Checkbox
31
Radio Buttons
32
Range
33
Select
34
Tabs
36
Grid
38
41
Empacotando o aplicativo
42
Android
42
iOS
48
Prximo passo
50
Introduo
Desenvolver aplicativos mveis geralmente divertido e, em muitos casos, uma tarefa
complexa dependendo dos requisitos do projeto. Escolher qual tecnologia utilizar um
ponto altamente discutido nas comunidades e a etapa principal do ciclo do
desenvolvimento, pois se voc escolher a tecnologia errada o custo para migrar toda a
aplicao pode ser alto. Acredito que no existe uma tecnologia errada, mas sim
pessoas que no dominam tal tecnologia.
O Ionic um
framework
open source e um dos
frameworks
, para desenvolver aplicativos
hbridos, mais utilizado no mundo, tendo mais de 23 mil
stars
e mais de 4 mil
forks
no
Github.
Sua premissa utilizar tecnologias web, como HTML5, CSS e JavaScript, para
desenvolver aplicativos mveis hbridos, ou seja, aplicativos que usam tecnologias web e
tambm nativas. Se voc sabe criar um site voc conseguir criar um aplicativo sem
muito esforo.
O diferencial do Ionic Framework sua preocupao com a performance e ganho de
produtividade no desenvolvimento. Voc vai comprovar isto no decorrer desde material
enquanto for criando os projetos exemplos.
O Ionic utiliza como base o projeto Apache Cordova e dispe de uma seria de
componentes e um CLI (
command-line interface)completo para criar, testar e publicar
aplicativos com apenas alguns comandos.
Apache Cordova
Em um evento chamado iPhoneDevCamp, ocorrido em So Francisco em 2006, trs
jovens criaram uma plataforma para criar aplicativos com HTML5/CSS/JS denominado
PhoneGap. Em 2010 a Apple confirmou que a plataforma estava de acordo com os
parmetros da licena para desenvolvedores iOS.
Em 2011 a Adobe comprou o PhoneGap e doou o cdigo fonte do projeto para a
fundao Apache, porem o nome PhoneGap ficou exclusivo para a Adobe e o projeto
foi renomeado para Apache Cordova.
O Apache Cordova tambm
open source e utilizado pelo Ionic para acessar as
funcionalidades nativas dos aparelhos mveis como acelermetro, cmera e geo
localizao. Ele tambm tem como requisito gerar o aplicativo para diferentes
plataformas como Android, iOS, Windows Phone, blackberry entre outros.
AngularJS
AngularJS um
framework escrito em JavaScript
open source
, mantido pela Google, e
tem por objetivo facilitar o desenvolvimento de aplicaes web estendendo o HTML
tradicional para trabalhar com contedo dinmico, com a ligao direta e bidirecional
dos dados (
twoway databinding)
que permite sincronizao automticaentreoHTMLeo
objetoemJavaScript.
ngCordova
Como j foi dito anteriormente o Ionic utiliza o Apache Cordova para disponibilizar os
recursos nativos para a aplicao, mas quando se utiliza o AngularJS seu aplicativo pode
no funcionar como deveria, pois o
bind
do objeto pode no ser atualizado na
view
quando no passa pelo
apply do AngularJS. Se voc no conhece o AngularJS essa
explicao ficou vaga, no se preocupe pois no futuro voc ir entender.
O ngCordova apenas um atalho para chamar os
plugins
nativos do Apache Cordova, de
forma que seja escutado pelo AngularJS.
Ionic 2.0
No momento em que foi escrito este ebook o Ionic havia lanado recentemente uma
nova verso do seu
framework
, com vrias melhorias e com a implementao do
AngularJS 2.0, algumas lgicas que so feitas no Ionic 1.0 so bem diferentes da verso
2.0, sendo assim irei aguardar a estabilidade desta nova verso e tratar o contedo em
um novo ebook, focado apenas no Ionic 2.0.
Instalando ambiente
Todos os comandos do Ionic, como criar um novo projeto, testar e distribuir, so feitos
direto no terminal atravs de um CLI (
command-line interface
) chamado Ionic CLI. O
Ionic CLI utiliza o NodeJS para executar tarefas e o Git para baixar alguns pacotes.
Para instalar o Ionic Framework voc precisa ter instalado o NodeJS, Git e um editor de
cdigos.
O Ionic pode ser instalado em Windows, Linux ou Mac, os passos seguintes so os
mesmos para os trs sistemas operacionais.
NodeJS
NodeJS, ou Node.js, uma plataforma construda sobre o motor JavaScript do Google
Chrome para facilmente construir aplicaes rpidas e escalveis. Para instalar o NodeJS
baixe a ltima verso, no site oficial, escolhendo seu sistema operacional:
https://nodejs.org
.
Git
Git um sistema de controle de verso distribudo e um sistema de gerenciamento de
cdigo fonte, com nfase em velocidade. O Git foi inicialmente projetado e desenvolvido
por
Linus Torvalds para o desenvolvimento do kernel Linux, mas foi adotado por muitos
outros projetos.
Como outros projetos
open source o Ionic esta hospedado no
GitHub
, que um servidor
de Git gratuito para projetos abertos, sendo assim precisamos do Git instalado na
maquina. Para instalar entre no link:
https://git-scm.com/downloads e baixe a verso
para seu sistema operacional.
6
Sublime Text
Sublime Text um editor de cdigo simples, rpido e eficiente, porem este passo no
obrigatrio caso voc j utilize um outro editor. Para baixar o Sublime Text acesse o link:
https://www.sublimetext.com/3
.
sidemenu
tabs
maps
salesforce
complex-list
Para testar nosso primeiro aplicativo entre na pasta que foi criada com o nome do seu
aplicativo, via linha de comando:
cdPrimeiroApp
Em seguida digite o comando para rodar o aplicativo no
browser
:
ionicserve
Na primeira vez que voc executa este comando o Ionic ir perguntar em qual IP voc
deseja deixar acessvel seu projeto, para este momento escolha
localhost
. Voc ver
seu aplicativo executando no navegador.
Vamos discutir cada arquivo no seu devido momento, por enquanto precisamos apenas
conhecer o config.xml e a pasta www.
config.xml
Neste arquivo definido os principais parmetros de inicializao e permisses que o
Cordova precisa para startar e compilar, para diferentes plataformas, seu aplicativo.
Se voc estiver utilizando o Sublime Text abra seu projeto e verifique o arquivo
config.xml:
10
A segunda linha define o pacote do projeto e a verso do seu aplicativo, voc precisar
trocar esta verso toda vez que for disponibilizar uma nova verso do seu aplicativo nos
marketplaces
como Play Store e Apple Store. Veremos mais detalhes de como publicar
em outro momento.
<widgetid="com.ionicframework.primeiroapp117395"version="0.0.1"
Da linha trs at a linha nove podemos ver o nome do aplicativo, que ira aparecer nos
atalhos do
device
, a descrio e os dados do altor.
As demais linhas so configuraes de inicializao, habilitao de
plugins e permisses,
iremos discutir sobre elas quando chegar o momento.
www
Nesta pasta
wwwvoc ir encontrar os arquivos HTML/CSS e JavaScript do seu aplicativo
e todos os arquivos contidos, ou criados por voc, nesta pasta podero ser utilizados
pelo seu aplicativo. Vamos entender a estrutura que o Ionic criou dentro desta pasta:
www
css
style.css
img
ionic.png
js
app.js
lib
ionic
index.html
No arquivo
style.cssiremos codificar os estilos personalizados dos elementos quando
necessrio. Na pasta
img
iremos colocar todas nossas imagens. O arquivo
app.js o
principal arquivo JavasScript do aplicativo, nele iremos configurar as rotas (telas) e criar
os controles. O arquivo i
ndex.html
nossa primeira tela do aplicativo (view
).
11
Componentes
O Ionic Framework disponibiliza diversos componentes para criar seu aplicativo, estes
componentes nada mais so que classes em CSS para renderizar da melhor forma seu
elemento em HTML. Voc pode adicionar mais atributos em CSS nos componentes ou
at mesmo criar seu prprio componente.
Existem duas formas de utilizar alguns dos componentes do Ionic:
Utilizar elementos nativos do HTML e adicionar as classes CSS
<ul
class
=
"list"
>
<li
class
=
"item"
>
...
</li>
</ul>
<ionlist>
<ionitem>
...
</ionitem>
</ionlist>
O resultado das duas formas so os mesmos. Neste material vamos utilizar, na maioria
dos casos, os nomes de elementos do Ionic, para reduzir a digitao de cdigos.
Header
Header um componente que fica sempre fixo no topo, utilizado para adicionar ttulo e
botes de aes sobre a tela aberta.
Lembrando que voc pode adicionar novos elementos no CSS para modificar de forma
diferente ao que o Ionic disponibiliza ou at mesmo criar um Header totalmente novo
com o seu prprio CSS.
Crie um novo projeto chamado AppHeader, no se esquea de sair da pasta do projeto
criado anteriormente, para que no gere confuso nas pastas.
Para voltar uma pasta anterior por linha de comando, digite:
cd..
12
class
=
"barpositive">
<h1
class
=
"title"
>
AppExemplo1
</h1>
</ionheaderbar>
Alteramos o estilo do Header e alteramos o seu ttulo. Veremos como adicionar botes
na sesso Buttons.
Quando voc faz alguma alterao no seu projeto e salva, o aplicativo no
browser
automaticamente recarregado. Voc ver um resultado igual a este:
Por padro os ttulos em Android fico ao lado esquerdo, j no iOS ao centro, porem
possvel forar o ttulo ficar no centro em ambos sistemas adicionado o atributo
aligntitle="center"
nocomponenteheader:
<ionheaderbar
class
=
"barpositive"
aligntitle
=
"center"
>
<h1
class
=
"title"
>
AppExemplo1
</h1>
</ionheaderbar>
Content
Content a rea de contedo do Ionic, apenas o que estiver dentro deste elemento ir
receber rolagem, ou seja, o Header fixo no topo e o Content utiliza o restante da
pgina, caso tenha mais elementos do que pode ser exibido na interface ele ir criar uma
barra de rolagem.
Ainda no aplicativo AppHeader adicione a classe
paddingno elemento
ioncontent
,
para adicionar um espao interno, e adicione os elementos dentro de
ioncontent
como mostra o exemplo abaixo:
<body
ngapp
=
"starter">
<ionpane>
<ionheaderbar
class
=
"barpositive">
<h1
class
=
"title"
>
AppExemplo1
</h1>
</ionheaderbar>
<ioncontent
class
=
"padding"
>
<h1>
ExemplodecontedoIonic
</h1>
<h2>
Apenasumademonstraodarolagem
</h2>
<h3>
Aslinhasabaixosoexemplos
</h3>
<img
src
=
"img/ionic.png">
<p>
pargrafo1
</p>
<img
src
=
"img/ionic.png">
<p>
pargrafo2
</p>
<img
src
=
"img/ionic.png">
<p>
pargrafo3
</p>
<img
src
=
"img/ionic.png">
14
<p>
pargrafo4
</p>
<img
src
=
"img/ionic.png">
<p>
pargrafo5
</p>
<img
src
=
"img/ionic.png">
<p>
pargrafo6
</p>
</ioncontent>
</ionpane>
</body>
Footer
Footer tambm um componente fixo porem fica sempre posicionado no rodap da
pgina. Adicione o cdigo abaixo aps o componente
</ioncontent>
:
<ionfooterbar
class
=
"barbalanced">
<div
class
=
"title"
>
Rodapdoapp
</div>
</ionfooterbar>
15
SubHeader e SubFooter
Bastante utilizado para combinar botes de ao, o SubHeader e SubFooter tambm so
fixos e ficam como secundrios, ou seja, abaixo do Header, para o SubHeader e a cima do
Footer, para o SubFooter, altere seu Header e Footer seguindo o cdigo abaixo:
...
<ionpane>
<ionheaderbar
class
=
"barpositive">
<h1
class
=
"title"
>
AppExemplo1
</h1>
</ionheaderbar>
<ionheaderbar
class
=
"barsubheaderbardark">
<h1
class
=
"title"
>
SubHeader
</h1>
</ionheaderbar>
<ioncontent
class
=
"padding">
...
</ioncontent>
<ionfooterbar
class
=
"barbarbalanced">
<div
class
=
"title"
>
Rodapdoapp
</div>
</ionfooterbar>
<ionfooterbar
class
=
"barsubfooterbarassertive">
<div
class
=
"title"
>
Rodapsecundrio
</div>
</ionfooterbar>
</ionpane>
...
Cores
O Ionic vem com um conjunto de cores e uma nomenclatura onde podemos ver abaixo:
16
Icons
Ionic dispe de um coleo de cones baseado em fonte
open source
, com mais de 500
cones para ser utilizado em seu aplicativo. Para utilizar basta adicionar a classe do cone
desejado, que pode ser encontrado no site
http://ionicons.com
, em um elemento
<i></i>
:
<i
class
=
"iconionstar"
></i>
No site
ionicons ao clicar sobre um determinado cone voc ver a classe que deve ser
adicionado no elemento.
Buttons
Os botes so elementos essenciais de um aplicativo, no Ionic possvel escolher o
tema, estilo e adicionar cone. Crie um novo projeto chamado appButtons:
ionicstartappButtonsblank
Adicione o componente boto utilizando o tema a
ssertive
:
<button
class
=
"buttonbuttonassertive"
>
Primeiroboto
</button>
seja completo, ou seja, sem bordas arredondadas nas laterais pode utilizar a classe
buttonfull
:
<button
class
=
"buttonbuttonassertive
buttonblock
">
Primeiroboto
</button>
Os Buttons
tem classes para tratar botes de diferentes tamanhos como pequenos,
normais e grandes:
<button
class
=
"button
buttonsmall
buttonbalanced">
Botopequeno
</button>
<button
class
=
"buttonbuttondark">
Botonormal
</button>
<button
class
=
"button
buttonlarge
buttonroyal">
Botogrande
</button>
Outro estilo bem utilizado boto com apenas bordas ou apenas textos:
<button
class
=
"buttonbuttonoutlinebuttonpositive">
Botoapenasborda
</button>
<button
class
=
"buttonbuttonclearbuttonpositive">
Botoapenastexto
</button>
Porem sem dvida o que traz mais elegncia para um aplicativo, e uma melhor
experincia com o usurio, um boto com cone. Podemos customizar de diferente
formas os botes com os cones, basta adicionar o nome da classe do cone desejado:
<button
class
=
"buttoniconleftionhome">
Home
</button>
<button
class
=
"buttoniconleftionstarbuttonpositive">
Favoritos
</button>
<button
class
=
"buttoniconrightionchevronrightbuttoncalm">
Saibamais
</button>
<button
class
=
"buttoniconleftionchevronleftbuttonclearbuttondark">
Voltar
</button>
<button
class
=
"buttoniconiongeara"
></button>
<button
class
=
"buttonbuttoniconiconionsettings"
></button>
<button
class
=
"buttonbuttonoutlineiconrightionnaviconbuttonbalanced">
Aes
18
</button>
O Header e Footer tambm aceitam botes e voc apenas precisa adicionar antes, ou
depois, do elemento
title
para deixar a esquerda ou direita:
<ionheaderbar
class
=
"barbalanced">
<button
class
=
"buttoniconionnavicon"
></button>
<h1
class
=
"title"
>
AppButtonsexemplos
</h1>
<button
class
=
"button"
>
Editar
</button>
</ionheaderbar>
class
=
"barbalanced">
<button
class
=
"button
buttonicon
iconionnavicon"
></button>
<h1
class
=
"title"
>
AppButtonsexemplos
</h1>
<button
class
=
"button
buttonclear
"
>
Editar
</button>
</ionheaderbar>
E por fim, na rea de contedo, possvel criar um barra de botes, onde eles ocupam
100% da largura da pgina e divide o tamanho de cada boto por igual:
<div
class
=
"buttonbar">
<button
class
=
"buttonbuttondark"
>
Boto1
</button>
<button
class
=
"buttonbuttondark"
>
Boto2
</button>
<button
class
=
"buttonbuttondark"
>
Boto3
</button>
</div>
19
List
O componente List uma lista de itens e muito comum sua utilizao em aplicativos
mveis, e podem conter textos simples, botes, cones, rtulos e imagens. Crie um novo
aplicativo chamado appList:
ionicstartappListblank
Na rea de contedo adicione um ttulo (H1) e um subttulo (H2), em seguida crie a lista
(ion-list) com cinco elementos de item (ion-item). Cada elemento tem um ttulo (H2) e
um pargrafo (p). Vamos ao cdigo:
<ioncontent
class
=
"padding">
<h1>
Ascincocidadesmaistopsparaseviver!
</h1>
<h4>
SegundositeWalletHub.com
</h4>
<ionlist>
<ionitem>
<h2>
ColoradoSprings,CO
</h2>
<p>
ColoradoSpringsumacidadenorteamericana,localizadanoestadodo
Colorado,noCondadodeElPaso.
</p>
</ionitem>
<ionitem>
<h2>
Denver,CO
</h2>
<p>
Denveracapital,acidademaispopulosaeumdos64condadosdoestado
norteamericanodoColorado.
</p>
</ionitem>
<ionitem>
<h2>
Denver,CO
</h2>
<p>
OmahaumacidadelocalizadanoestadoamericanodoNebraska,noCondado
deDouglas.
</p>
</ionitem>
<ionitem>
<h2>
Tampa,FL
</h2>
<p>
Tampaumacidadelocalizadanacostalestedoestadonorteamericanoda
Flrida,nocondadodeHillsborough,doqualsede.
</p>
</ionitem>
<ionitem>
<h2>
SanDiego,CA
</h2>
<p>
SanDiegoumacidadedosEstadosUnidoslocalizadanosuldoestadoda
Califrnia.
</p>
</ionitem>
</ionlist>
</ioncontent>
O Ionic tem algumas tratativas fixas para as listas e, quando necessrio, preciso
customizar via CSS demais contedos e elementos. Veremos sobre customizao de
elementos no prximo ebook como informado no final deste material.
20
class
=
"
itemdivider
">
CidadesdoBrasil
</ionitem>
<ionitem>
RiodeJaneiro
</ionitem>
<ionitem>
Florianpolis
</ionitem>
Dentro de cada item pode ser adicionado os principais componentes do Ionic, mas para
eles serem exibidos da melhor forma precisamos adicionar as classes que iro tratar sua
exibio. Vamos comear pelos cones, adicionando o elemento
<i>dentro de um dos
itens:
<ionitem>
<i
class
=
"iconionlocation"
></i>
<h2>
Tampa,FL
</h2>
<p>
Tampaumacidadelocalizadanacosta...
</p>
</ionitem>
21
Podemos observar que o cone ficou pequeno, e no ficou ao lado direito, como
comum ser utilizado. Agora vamos adicionar a classe
itemiconleft
, que altera o
estilo do cone dentro do item ficando assim:
<ionitem
class
=
"
itemiconleft
">
<i
class
=
"iconionlocation"
></i>
<h2>
Tampa,FL
</h2>
<p>
Tampaumacidadelocalizadanacosta...
</p>
</ionitem>
Voc ir perceber, com o tempo, que a maioria dos elementos do Ionic so customizados
desta forma, ou seja, adicionando classes para compor com outros elementos.
Alterando a classe do item para
itemiconright
o cone passa a ser exibido na direita:
<ionitem
class
=
"
itemiconright
">
Destacar uma determinada rea comum de ver em listas, em Ionic chamamos esse
atributo de Badge. Altere outro item adicionando um
<span>
com as classes abaixo:
<ionitem>
<h2>
Denver,CO
</h2>
<p>
Omahaumacidadelocalizadanoestado...
</p>
<span
class
=
"badgebadgeassertive"
>
3
</span>
</ionitem>
22
<ionitem>
Rio
de
Janeiro
<span
class
=
"itemnote">
Popular
</span>
</ionitem>
class
=
"
item
">
<h2>
ColoradoSprings,CO
</h2>
<p>
ColoradoSpringsumacidadenorteamericana...
</p>
</
a
>
Perceba que quado clicamos neste item um efeito de fundo cinza exibido.
Vamos inserir um boto em um dos itens que tem apenas um texto, adicionando a classe
itembuttonleft
ou
itembuttonright
:
<ionitem
class
=
"itembuttonright">
Florian
polis
<button
class
=
"buttonbuttonpositive">
<i
class
=
"iconioniostelephone"
></i>
</button>
</ionitem>
23
As listagem que aprendemos acima bem utiliza para telas de parmetros, formulrios e
aes, vamos agora ver listagem com exibio de imagens. Para isso vamos criar um
novo projeto chamado appListImage:
ionicstartappListImageblank
Na pasta img do seu projeto adicione trs imagens diferentes para usarmos como
exemplo, voc pode usar as imagens utilizada neste material que esto no
GitHub
. Salve
todas as imagens na pasta img.
Na rea de contedo adicione a lista abaixo e trs itens com a classe
itemavatar
, para
que a exibio das imagens sejam aredondadas:
<ioncontent>
<ionlist>
<ionitem
class
=
"itemavatar">
<img
src
=
"img/city_1.jpg">
<h2>
SanFrancisco,CA
</h2>
<p>
SoFranciscoaquartacidademaispopulosadoestadodaCalifrnia.
</p>
</ionitem>
<ionitem
class
=
"itemavatar">
<img
src
=
"img/city_2.jpg">
<h2>
Lexington,KY
</h2>
<p>
Lexingtonasegundacidademaispopulosadoestadoamericanodo
Kentucky.
</p>
</ionitem>
<ionitem
class
=
"itemavatar">
<img
src
=
"img/city_3.jpg">
<h2>
Washington,DC
</h2>
<p>
Washington,D.C.acapitaldosEstadosUnidos.
</p>
</ionitem>
</ionlist>
</ioncontent>
24
class
=
"itemthumbnailleft">
<img
src
=
"img/city_4.jpg">
<h2>
Victoria,BC
</h2>
<p>
VictoriaacapitaldaprovnciacanadensedeColmbiaBritnica.
</p>
</ionitem>
<ionitem
class
=
"itemthumbnailright
itemtextwrap
">
<img
src
=
"img/city_5.jpg">
<h2>
Sacramento,CA
</h2>
<p>
SacramentoacapitaldoestadonorteamericanodaCalifrniaesededo
condadodeSacramento.
</p>
</ionitem>
O resultado esperado:
Cards
comum ver este componente sendo utilizado nas aplicaes mais recentes, pois com
ele podemos exibir informaes com um design ldico de um carto. Embora dentro do
Card pode ser adicionado qualquer estrutura de elementos, indicado utilizar itens
como utilizamos em listas.
Crie um novo aplicativo com o nome appCard:
ionicstartappCardblank
Adicione o componente Card e um item de texto sem limitao:
25
<ioncontent>
<div
class
=
"card">
<ionitem
class
=
"itemtextwrap">
EsteumsimplesCardcomumtextoparavisualizarocomportamentodo
componente.
</ionitem>
</div>
</ioncontent>
O resultado:
class
=
"listcard">
<div
class
=
"itemitemdivider">
Opesdousurio
</div>
<div
class
=
"itemitemtextwrap">
Escolhaumadasopesabaixo
</div>
<a
href
=
"#"
class
=
"itemitemiconleft">
<i
class
=
"iconionhome"
></i>
Definirendereo
</a>
<a
href
=
"#"
class
=
"itemitemiconleft">
<i
class
=
"iconioniostelephone"
></i>
Editarnmerodetelefone
</a>
<a
href
=
"#"
class
=
"itemitemiconleft">
<i
class
=
"iconionwifi"
></i>
Escolherumaredepreferencial
</a>
<a
href
=
"#"
class
=
"itemitemiconleft">
<i
class
=
"iconioncard"
></i>
Alterardadosdepagamento
</a>
</div>
26
O resultado:
class
=
"listcard">
<div
class
=
"itemitemavatar">
<img
src
=
"img/user1.png">
<h2>
FbioRogrioSJ
</h2>
<p><b>
32min
</b>
Compartilhouumafoto
</p>
</div>
<div
class
=
"itemitembody">
<img
class
=
"fullimage"
src
=
"img/maringa.jpg">
<p>
Pensaemumlugarshow!RecomendotodosiremvisitaragrandeMaringno
Paran:)
</p>
<p>
<a
href
=
"#"
class
=
"subdued"
>
1Curtida
</a>
<a
href
=
"#"
class
=
"subdued"
>
5Comentrios
</a>
</p>
</div>
</div>
O resultado:
27
Forms
Formulrios so componentes essenciais para diferente aplicativos e tambm um
grande desafio, pois pesquisas revelam que usurios de aplicativos mveis no gostam
de preencher formulrios grandes em seus d
evices.
Ionic fornece uma estrutura de formulrios que so utilizados com as listas e itens,
sendo assim cada campo um item de uma lista composto por um
label
. Como os
outros componentes estes tambm podem ser combinados com os demais
componentes do
framework.
importante definir correto o tipo do campo, para que o teclado virtual seja
customizado, dependendo do tipo. Para saber quais tipos so suportados veja na
documentao oficial do Ionic Framework
ou outros documentos sobre tipos em HTML5.
Vamos aos cdigos, crie um novo aplicativo chamado appForms:
ionicstartappFormsblank
Na rea de contedo vamos criar trs campos e um boto. Cada campos deve estar
dentro de um
labelque recebe a classe
iteme
iteminputpara que os campos ocupe
100% do espao do item da lista e definimos um valor para a propriedade
placeholder
,
do HTML5, para quando um valor for digitado no campo o rtulo oculte. O boto est
em uma outra
div
com a classe p
adding
para no ficar colado nas laterias.
<ionlist>
<label
class
=
"itemiteminput">
<input
type
=
"text"
placeholder
=
"Nomecompleto">
</label>
<label
class
=
"itemiteminput">
<input
type
=
"email"
placeholder
=
"Email">
</label>
<label
class
=
"itemiteminput">
<textarea
placeholder
=
"Comentrio"
></textarea>
</label>
</ionlist>
<div
class
=
"padding">
<button
class
=
"buttonbuttonblockbuttonpositive">
Enviarcomentrio
</button>
</div>
28
O resultado esperado :
class
=
"itemiteminput">
<span
class
=
"inputlabel"
>
Username
</span>
<input
type
=
"text">
</label>
class
=
"itemiteminputitemstackedlabel">
<span
class
=
"inputlabel"
>
Primeironome
</span>
<input
type
=
"text"
placeholder
=
"Fbio">
</label>
utilizar
classe
<label
class
=
"itemiteminputitemfloatinglabel">
<span
class
=
"inputlabel"
>
Sobrenome
</span>
<input
type
=
"text"
placeholder
=
"Digiteseusobrenome">
</label>
class
=
"itemiteminputinset">
<label
class
=
"iteminputwrapper">
<input
type
=
"email"
placeholder
=
"Email">
</label>
<button
class
=
"buttonbuttonsmallbuttonbalanced">
Enviar
</button>
</div>
<label
class
=
"itemiteminput">
<i
class
=
"iconionsearchplaceholdericon"
></i>
<input
type
=
"text"
placeholder
=
"Procurar...">
</label>
Toggle
Toggle um componente criado especificamente para aplicativos mveis, hoje tambm
podemos ver em aplicaes web. Crie um novo projeto com o nome appToggle:
ionicstartappToggleblank
Vamos criar uma lista de opes sendo cada item um toggle marcado com a classe
itemtoggle
, sendo assim o texto fica ao lado esquerdo e o boto toggle ao lado
direito. As cores de cada toggle pode ser customizado conforme os temas do Ionic.
Para complementar nosso exemplo vamos adicionar um card como pergunta:
<ioncontent
class
=
"padding">
<div
class
=
"cardpadding">
Quaistecnologiasvocestaaprendendo?
</div>
<ionlist>
30
<ionitem
class
=
"itemtoggle">
HTML5
<label
class
=
"toggletogglebalanced">
<input
type
=
"checkbox">
<div
class
=
"track">
<div
class
=
"handle"
></div>
</div>
</label>
</ionitem>
<ionitem
class
=
"itemtoggle">
CSS
<label
class
=
"toggletogglebalanced">
<input
type
=
"checkbox">
<div
class
=
"track">
<div
class
=
"handle"
></div>
</div>
</label>
</ionitem>
<ionitem
class
=
"itemtoggle">
JavaScript
<label
class
=
"toggletogglebalanced">
<input
type
=
"checkbox">
<div
class
=
"track">
<div
class
=
"handle"
></div>
</div>
</label>
</ionitem>
</ionlist>
</ioncontent>
O resultado:
Checkbox
Os checkbox permitem que o usurio selecione um nmero de itens em um conjunto de
opes. Crie um novo projeto chamado appCheckbox:
31
ionicstartappCheckboxblank
Este componente tambm usa como base o componente lista onde cada item recebe um
checkbox. Voc pode customizar as cores utilizando os temas, para exemplo vamos
deixar o ltimo item com uma cor diferente:
<ionlist>
<ionitem
class
=
"itemcheckbox">
<label
class
=
"checkbox">
<input
type
=
"checkbox">
</label>
HTML5
</ionitem>
<ionitem
class
=
"itemcheckbox">
<label
class
=
"checkbox">
<input
type
=
"checkbox">
</label>
CSS
</ionitem>
<ionitem
class
=
"itemcheckbox">
<label
class
=
"checkboxcheckboxassertive">
<input
type
=
"checkbox">
</label>
JavaScript
</ionitem>
</ionlist>
O resultado:
Radio Buttons
Radio Buttons, ao contrario dos checkbox, permite selecionar apenas uma opo dentre
a listagem enquanto os checkbox permitem selecionar mais de uma opo. Crie um novo
projeto chamado appRadioButtons:
ionicstartappRadioButtonsblank
32
Vamos criar um subHeader e uma lista, na lista vamos adicionar alguns radio buttons. o
body
da pgina dever estar assim:
<body
ngapp
=
"starter">
<ionpane>
<ionheaderbar
class
=
"barpositive"
aligntitle
=
"center">
<h1
class
=
"title"
>
ExemploRadioButtons
</h1>
</ionheaderbar>
<ionheaderbar
class
=
"barsubheaderbarcalm"
aligntitle
=
"center">
<h1
class
=
"title"
>
Qualtecnologiavocmaisdomina?
</h1>
</ionheaderbar>
<ioncontent>
<ionlist>
<ionradio>
PHP
</ionradio>
<ionradio>
Java
</ionradio>
<ionradio>
JavaScript
</ionradio>
<ionradio>
.NET
</ionradio>
<ionradio>
Ruby
</ionradio>
<ionradio>
Python
</ionradio>
<ionradio>
Go
</ionradio>
</ionlist>
</ioncontent>
</ionpane>
</body>
O resultado:
Range
O componente Range utilizado para definir um intervalo de valores com o clicar e
arrastar do toque. possvel customizar seus cones e cores.
Crie um novo projeto com o nome appRange:
ionicstartappRangeblank
33
Adicione na rea de contedo algumas opo com cores diferente para exemplificar o
componente:
<ionlist>
<ionitem
class
=
"rangerangepositive">
<i
class
=
"iconioniossunnyoutline"
></i>
<input
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"12">
<i
class
=
"iconioniossunny"
></i>
</ionitem>
<ionitem
class
=
"rangerangecalm">
<i
class
=
"iconionioslightbulboutline"
></i>
<input
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"25">
<i
class
=
"iconionioslightbulb"
></i>
</ionitem>
<ionitem
class
=
"rangerangebalanced">
<i
class
=
"iconioniosboltoutlineassertive"
></i>
<input
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"38">
<i
class
=
"iconioniosboltassertive"
></i>
</ionitem>
</ionlist>
O resultado:
Select
O componente de seleo listada muito utilizado em sistemas desktop e web, o Ionic
no customiza muito este componente pois os prprios
browsers,de cada sistema
operacional mvel, j customizam a visualizao com o seu padro. Neste momento
vamos testar apenas no
browser
do desktop.
Crie um novo projeto com o nome appSelect:
ionicstartappSelectblank
Adicione uma lista com um item contendo um
input
de s
elect
:
34
<ioncontent>
<ionlist>
<ionitem
class
=
"iteminputitemselect">
<div
class
=
"inputlabel">
Qualflutavocmaisgosta?
</div>
<select>
<option>
Laranja
</option>
<option
selected
>
Maa
</option>
<option>
Banana
</option>
<option>
Caqui
</option>
<option>
Goiaba
</option>
</select>
</ionitem>
</ionlist>
</ioncontent>
No Android:
No iOS:
35
Tabs
O componente tabs permite uma navegao entre telas simulando uma seleo de abas.
Muitos aplicativos em iOS utilizam este padro de navegao. Crie um novo projeto
chamado appTabs:
ionicstartappTabsblank
Este componente melhor utilizado com as rotas em AngularJS, mas como neste
material veremos apenas o essencial dos componentes ento vamos criar algo mais
simples apenas para conhecer o componente.
As tabs podem ser apenas texto, apenas cone ou texto e cone. Tambm podemos
escolher a posio do cone e as cores conforme temas do ionic.
Cada tab tem sua prpria rea de contedo, ento vamos adicionar trs tabs com texto e
cone, e vamos definir diferentes cones para quando a aba estiver selecionada ou no.
Vamos ao cdigo:
<body
ngapp
=
"starter">
<ionpane>
<ionheaderbar
class
=
"barassertive">
<h1
class
=
"title"
>
Exemplotabs
</h1>
</ionheaderbar>
<iontabs
class
=
"tabsassertivetabsicontop">
<iontab
title
=
"Home"
iconon
=
"ioniosfiling"
iconoff
=
"ioniosfilingoutline">
<ionview>
<ioncontent
class
=
"padding">
ContedodotabHome
</ioncontent>
</ionview>
</iontab>
<iontab
title
=
"Sobre"
iconon
=
"ioniosclock"
iconoff
=
"ioniosclockoutline">
<ionview>
<ioncontent
class
=
"padding">
ContedodotabSobre
</ioncontent>
</ionview>
</iontab>
<iontab
title
=
"Configuraes"
iconon
=
"ioniosgear"
iconoff
=
"ioniosgearoutline">
<ionview>
<ioncontent
class
=
"padding">
ContedodotabConfiguraes
</ioncontent>
</ionview>
36
</iontab>
</iontabs>
</ionpane>
</body>
Por ser um componente muito utilizada para navegao, o Android e iOS exibem
diferente, podemos testar utilizando o Ionic lab, que tem por objetivo mostrar nos dois
sistemas a aplicao. Para utilizar o Ionic lab digite
labno final do comando para
testar o aplicativo no
browser
:
ionicserve
lab
Ser exibido desta forma no seu
browser
:
37
Grid
As grids em Ionic so simples e fceis de implementar, pois o componente utiliza o
recurso
FlexBox do CSS3 para desenhar os elementos. Crie um novo projeto chamado
appGrid:
ionicstartappGridblank
Vamos criar uma grid simples com duas linhas e duas colunas, adicione na rea de
contedo o componente:
<ioncontent>
<div
class
=
"row">
<div
class
=
"col"
>
1
</div>
<div
class
=
"col"
>
2
</div>
</div>
<div
class
=
"row">
<div
class
=
"col"
>
3
</div>
<div
class
=
"col"
>
4
</div>
</div>
</ioncontent>
Para ser possvel verificar com mais clareza nossos exemplos vamos alterar a cor de
fundo de cada coluna e adicionar uma borda, editando o s
tyle.css
da pasta css:
/*Empty.AddyourownCSSifyoulike*/
.
col{
background
color
:
#CCC;
border
:
2px
solid
#fff;
}
possvel definir um tamanho fixo para uma determinada coluna. Adicione uma nova
linha:
<div
class
=
"row">
<div
class
=
"colcol50"
>
5
</div>
<div
class
=
"col"
>
6
</div>
<div
class
=
"col"
>
7
</div>
38
</div>
Perceba que a primeira coluna est ocupando 50% do espao da linha, e as demais
colunas, que esto sem tamanho fixo, ocupam o espao que sobrou:
Tamanho ocupado
.col10
10%
.col20
20%
.col25
25%
.col33
33.3333%
.col50
50%
.col67
66.6666%
.col75
75%
.col80
80%
.col90
90%
Outro recurso deixar uma coluna em branco, ou seja, reservar o espao porem no
exibir nenhum elemento, adicione uma nova linha:
<div
class
=
"row">
<div
class
=
"colcol33coloffset33"
>
8
</div>
<div
class
=
"col"
>
9
</div>
</div>
Resultado:
39
class
=
"row">
<div
class
=
"colcoltop"
>
10
</div>
<div
class
=
"colcolcenter"
>
11
</div>
<div
class
=
"colcolbottom"
>
12
</div>
<div
class
=
"col"
>
13
<br>
14
<br>
15
<br>
16
</div>
</div>
Veja os alinhamentos:
class
=
"row
rowtop
">
<div
class
=
"col"
>
10
</div>
<div
class
=
"col"
>
11
</div>
<div
class
=
"col"
>
12
</div>
<div
class
=
"col"
>
13
<br>
14
<br>
15
<br>
16
</div>
</div>
Utilizar nmeros fixos de colunas pode no ser apropriado se voc precisa de um layout
responsivo, nestes casos voc pode utilizar trs classes para tamanhos diferentes.
Vamos ver isso na prtica, adicione uma nova linha com quatro colunas:
<div
class
=
"rowresponsivesm">
<div
class
=
"col"
>
17
</div>
<div
class
=
"col"
>
18
</div>
<div
class
=
"col"
>
19
</div>
<div
class
=
"col"
>
20
</div>
</div>
Vejam no resultado que o tamanho da tela validado e conforme existe mais espao as
colunas so exibidas lado a lado, caso seja menor elas so exibidas uma em baixo da
outra.
40
Tela menor:
Tela maior:
Os tamanhos validados podem ser visto na tabela a baixo juntamente com suas
respectivas classes de utilizao:
Classe
Quebrar quando
.responsivesm
.responsivemd
.responsivelg
41
Empacotando o aplicativo
O processo de
build
, tambm conhecido como empacotamento, utilizado para testar e
publicar o aplicativo final.
Neste material vamos abordar apenas os comandos para gerar o aplicativo para testar
nos diferentes
devices
. Para publicar nas
Stores
iremos ver em outro ebook.
Android
Para criar o aplicativo final na plataforma Android precisamos do Android SDK, que
todas as ferramentas para criar o aplicativo final (.apk) e poder ser testado em
emuladores e
devices
.
Primeiro passo baixar o Android SDK no site oficial do Android Developer
(
http://developer.android.com/intl/pt-br/sdk/index.html)
. Role at o final da pgina e
baixe apenas o SDK para linha de comando, como mostrado na imagem abaixo. Escolha o
seu sistema operacional e faa o download:
Para usurios Linux o processo bem parecido com algumas diferenas nas definies
de variveis de ambiente. Neste material vamos abordar a instalao do Android SDK em
ambiente Windows.
42
Se voc tiver o Java JDK instalado o instalador ir seguir para a instalao do Android
SDK, caso contrario ser exibido esta tela solicitando a instalao do Java JDK:
Clique em
Visitjava.oracle.com
e siga os passos abaixo:
43
Aps o download concludo siga os passos abaixo para instalar o Java JDK e suas
dependncias:
44
Escolha um caminho de fcil acesso para a instalao, pois em alguns momentos voc
ter que entrar nesta pasta para executar o
Update
do Android:
45
Em seguida clique em
Accept License e
Install
para o download comear. Este processo
pode demorar alguns minutos.
Vamos agora adicionar algumas variveis de ambiente para que o Ionic encontre o local
onde est instalado o Android SDK. Entre nas
propriedades
do seu computador e vai em
Configuraes avanadas do sistema
e
Variveis de Ambiente:
46
47
iOS
Para gerar o aplicativo final para a plataforma iOS (.ipa), utilizando o Ionic Framework,
precisamos estar em um ambiente Mac, ou seja, em uma maquina com o sistema
operacional iOS.
O Ionic.io, que a plataforma de solues em nuvem para aplicativos implementados em
Ionic Framework, fornece uma soluo para compilar o projeto para iOS sem precisar de
uma maquina Mac, porem este servio
free com limitaes. Iremos falar sobre o
Ionic.io em outro ebook.
Para compilar nosso projeto vamos precisar do
iossim
, um mdulo NPM escrito em
JavaScript rodando via NodeJS responsvel por rodar aplicaes via linha de comando
direto no emulador iOS.
Para instalar digite:
npminstallgiossim
Em seguida, dentro da pasta do projeto, digite:
ionicbuildios
Este processo ira compilar nosso aplicativo e agora podemos abri-lo via Xcode para
emular ou rodar em um
device
com iOS.
Dentro da pasta platforms/ios foi criado um arquivo
AppListImage.xcodeproj
, que o
arquivo inicializador do projeto em Xcode:
48
49
Prximo passo
Este ebook abordou os recursos introdutrios e essenciais para se iniciar no Ionic
Framework, agora vamos aprender como customizar os componentes para criar um
design mais proprietrio e melhorar a experincia do usurio.
Veja o
#2 Ionic Framework - Customizando e criando componentes
:
50