59
angular.module('minhaApp',
['ionic'])
.controller('PopupCtrl',fun
ction($scope, $ionicPopup,
$timeout) {
(P VHJXLGD FULD VH D IXQ©¥R H
determina-se uma trigger (gatilho) a
Sartir de um FliTue em um Eot¥o (ou
link, como for necessário):
$scope.showPopup =
function() {
$scope.data = {}
Agora, a variável que referencia
o componente:
var myPopup = $ionicPopup.
show({
Finalmente, é preciso ajustar
os par¤metros que ser¥o usados na
conígura©¥o da janela pop up:
title: '', // String. O
título da popup.
subTitle: '', // String
(opcional). O subtítulo da
popup.
template: '', // String
(opcional). Um template em
html para colocar no corpo
da popup.
templateUrl: '', // String
(opcional). Uma URL do html
colocado a ser colocado na
popup.
scope: null, // Scope
(opcional). O escopo para
servir de link para o
conteúdo da popup.
buttons: [{ //
Array[Object] (opcional).
Botões para o rodapé da
popup.
text: 'Cancelar',
type: 'button-default',
onTap: function(e) {
// e.preventDefault()
parar a popup a partir do
clique nela.
e.preventDefault();
}
}, {
text: 'OK',
type: 'button-positive',
onTap: function(e) {
// Retornar um valor
torna possível resolver algo
com o valor dado.
return scope.data.
response;
}
}]
}
Pronto, um código rápido
para interagir com o usuário do
aplicativo com janelas pop up e
entrada de dados.
Pode-se citar outros
componentes interessantes em
JavaScript do Ionic, muito úteis
em aplicativos móveis. Um dos
casos é o Slide Box, que permite
criar painéis deslizantes na tela do
dispositivo. Outro, o componente
Modal, gera um painel sobre a tela
principal do usuário, permitindo
uma escolha ou intera©¥o com o
usuário, ou a edi©¥o de um item
ou elemento do aplicativo. O
componente Action Sheet também
chama a aten©¥o: ele cria um painel
tipo slide-up (deslizante, de baixo
para cima) e apresenta uma série
de op©·es de controle. Por ím, o
Loading informa ao usuário que
há uma atividade ocorrendo e ao
mesmo tempo bloqueia o acesso ao
aplicativo.
HTML5 Inputs Types
(ntradas de dados no padr¥o
+7ML s¥o muito úteis para criar
formulários simples, a partir de um
código básico. O quadro a seguir
apresenta uma caixa de texto para
inserir o nome do usuário e outra
para o e-mail:
<label class="item item-
input">
<span class="input-
label">Username</span>
<input type="text">
</label>
<label class="item item-
input">
<span class="input-
label">Email</span>
<input type="email">
</label>
Ao clicar/tocar em um desses
campos, o aplicativo apresentará o
teclado para a entrada de dados do
sistema, no formato texto.
O código a seguir apresenta um
campo de texto para o telefone. Por
isso, o teclado virtual apresentado
muda para se adequar a essa nova
necessidade que surge:
<label class="item item-
input">
<span class="input-
label">Telefone</span>
<input type="tel">
</label>
O código a seguir apresenta
Sobre o autor
Homero Ottoni é programador e
VµFLR SURSULHW£ULR GD HPSUHVD 0DNH
Media de desenvolvimento web.
uma lista de meses para o
usuário escolher:
<label class="item item-
input">
<span class="input-
label">Month</span>
<input type="month">
</label>
Conclusão
O Ionic é uma ferramenta
poderosa e muito útil para
complementar o desenvolvimento
de aplicativos móveis para
smartphones e tablets. Ele é
de grande ajuda na cria©¥o de
interfaces gráícas amigáveis,
limpas e agradáveis. Além disso,
acelera o tempo de projeto e
cria©¥o. 9ale a pena o tempo gasto
em estudar seus recursos, antes de
iniciar o desenvolvimento de
um novo aplicativo.
IONIC
LW
Na página oficial do Ionic (
,
há muitas informações sobre o framework
REVISTA LOCAWEB
