Vamos criar um app hibrido completo usando o UI framework Phonon. O Phonon Framework ajuda bastante no que se refere a interface de usuário, isto é, ele não faz tudo, mas ele facilita todo o trabalho permitindo que você desenvolva um aplicativo Android, IOs, Windows Phone e Web usando a mesma interface visual.
Definindo a ideia do app
A primeira coisa que você precisa fazer é definir a ideia de como será o app, saber exatamente quais telas ele precisa ter e o que cada tela deve fazer, ou seja, as funções disponíveis em cada tela. Neste exemplo iremos desenvolver um app para pedidos de pizza, então, teremos 2 telas:
- Principal
Uma lista de todos os sabores disponíveis. - Pedido
Uma tela com detalhes da pizza escolhida e botões para confirmar o pedido ou cancela-lo.
Na pratica o aplicativo não irá realmente fazer o pedido, este app é apenas para fundamentos didáticos, mas você pode adicionar os recursos restantes ou modifica-lo da forma que preferir.
Criando a aplicação
Como nossa aplicação vai utilizar o Phonon a primeira coisa que precisamos é definir um arquivo JavaScript com as configurações do aplicativo. Neste exemplo irei dar o nome de app.js, mas poderia ser qualquer outro nome 😉
https://gist.github.com/John-Henrique/230638f43b8384b9a947
Basicamente configurei o funcionamento básico da aplicação, não tem muito o que comentar, basta ler os comentários no código. Então, vamos partir para as telas do aplicativo.
Criando as telas
Aplicativos híbridos são basicamente paginas HTML com JavaScript e XML, sendo assim, para criar telas você precisará apenas criar algumas páginas, mas seguindo conceitos de desenvolvimento para dispositivos móveis, isto é, você não precisa achar que tudo que funciona na web irá funcionar no celular, encare a web como uma plataforma diferente assim como é Android, IOs e Windows Phone diferentes uma das outras.
Como nossa aplicação possui apenas 2 telas, não irei criar um arquivo HTML para cada tela, vou fazer tudo num arquivo, neste caso farei no arquivo index.html.
https://gist.github.com/John-Henrique/a957b007e577981c06c3
O corpo deste arquivo HTML é bem simples de entender, está escrito usando tags HTML 5, mas temos duas tags ‘personalizadas’ (principal e pedido) que definem as páginas, são estas marcações que definem para o Phonon onde uma tela inicia e onde ela termina.
Agora com temos nosso app para pedidos de pizza, pronto para uso, basta rodar no navegador para ver o resultado. Você também pode ver o resultado do aplicativo rodando neste endereço.
Phonon e convenções
As convenções são padrões de como usar ou fazer coisas, são muito comuns e muito usadas em programação principalmente em bibliotecas e frameworks, no caso do Phonon, as convenções são bem simples. Veja…
Eventos de tela
Eventos de tela no Phonon são baseados em atividades do Android, logo, podemos usar estes eventos para realizar ações na tela, veja…
| Evento | Descrição |
|---|---|
| onCreate() | Chamado quando a atividade é iniciada pela primeira vez. É a primeira atividade a ser executada. É aqui onde você irá colocar suas ações estáticas, até porque, esta atividade só será executada uma vez. |
| onReady() | Chamado quando a atividade está se tornando visível para o usuário. Esta atividade será executada sempre que a tela for acessada. |
| onTransitionEnd() | Chamada quando a transição de tela é finalizada, ou seja, quando a animação de troca da tela termina. Esta atividade é executada sempre que a transição terminar. |
| onClose() | Chamado quando a tela é desativada, ou seja, a tela continua existindo (aberta), mas não está em foco. Em outras palavras a tela foi visualmente fechada. Esta atividade é executada sempre que alguma ação “fechar” janela for ativada. |
| onHidden() | Chamado quando a atividade não está mais visível para o usuário, ou seja, quando a tela deixa de ser exibida. Esta atividade é executada sempre que a tela deixa de ser exibida. |
| onHashChanged() | Chamado quando o hash da URL for alterado. |
| onTabChanged() | Chamado quando o usuário alterar a aba de uma tela que possua o componente Tab (abas) em uso. Em outras palavras este evento será disparado quando o usuário trocar de aba. |
Marcações de tela
Para criar telas usando HTML 5 você precisa marcar onde e o que é o conteúdo de uma tela, para isso o Phonon precisa identificar certos marcadores dentro do HTML.
<principal data-page=”true”></principal>
<pedido data-page=”true”></pedido>
Toda tela deve ser definida usando uma tag ‘personalizada’, neste exemplo, utilizei “principal” e “pedido“, mas esta tag precisa ter também um parâmetro data-page com o valor true. Sem estas 2 convenções o Phonon irá ignorar a tela.
Conteúdo de telas
Existem 2 formas de criar conteúdo de telas usando o Phonon. Este primeiro modelo você deve usar quando o HTML da tela for definido em arquivos separados, neste caso, teríamos um arquivo principal.html
<principal class=“app-page“>
<header class=“header-bar“>
<h1 class=“title“>Principal</h1>
</header>
<div class=“content“>
<!– Conteúdo da tela vai aqui –>
</div>
</principal>
Este modelo você deve usar quando o HTML da tela for definido todo dentro da index.html, note o parâmetro data-page
<principal data-page=“true“>
<header class=“header-bar“>
<h1 class=“title“>Principal</h1>
</header>
<div class=“content“>
<!– Conteúdo da tela vai aqui –>
</div>
</principal>
Você pode utilizar o HTML que quiser mas é recomendado utilizar este modelo porque reduz o tamanho dos arquivos HTML e o navegador do dispositivo irá carregar este conteúdo dinamicamente, então, quanto menor o conteúdo HTML mais rápido será carregado na tela.
Navegação entre telas
Basicamente a navegação entre telas se dá utilizando links HTML, mas eles também devem seguir uma convenção. Tags “a” devem ter o parâmetro href iniciado com “#!”, link ficaria assim:
<a href=”#!pedido”>Pedido</a>
Você também pode usar botões para criar navegação entre telas, basta atribuir o parâmetro data-navigation e informar como valor o nome da tag que você definiu a tela HTML.
<button data-navigation=”principal”>Principal</button>
Também existe a possibilidade de criar botões dinâmicos para ações “voltar”. Neste exemplo estamos usando um botão, mas poderíamos usar um link (tag a), tudo que precisaríamos seria adicionar a variável $previous-page como valor do parâmetro href.
<button data-navigation=”$previous-page”>Voltar</button>
Por hoje é só…
Bom, se você chegou até aqui, tenho quase certeza de que você já está apto a desenvolver um aplicativo móvel. De qualquer forma, continue acompanhando as novidades do blog.
