11 de agosto de 2012

Hello World! com Titanium Mobile

Por Breno Leonardo

Fala galera! Agora que todos já sabem o que é o Titanium Mobile (quem não souber clique aqui), vamos começar a codificar um pouco, e para isso, nada melhor que nosso velho e famoso “Hello World!”.

Ao abrir o Titanium Studio pela primeira vez, o SDK Mobile ainda não estará instalado, mas automaticamente ele inicia o download e já o deixa tudo pronto para o desenvolvimento.

Primeiramente, vamos criar o projeto lá em File > New > Titanium Mobile Project;

Preencha os dados do seu aplicativo e em seguida clique em Finish:

A tela com os dados básicos do aplicativo é parecida com esta.

O Titanium automaticamente cria uma estrutura de aplicativo com duas abas e alguns ícones padrões, daremos destaque aos arquivos tiapp.xml e app.js.

tiapp.xml nada mais é que um arquivo de projeto no qual o Titanium entende, é lá onde se encontra os dados básicos do aplicativo, como:

  • Plataforma no qual ele rodará;
  • ID do aplicativo;
  • Nome do aplicativo;
  • Autor, site, ícone;
  • Orientações de tela que suportará como horizontal direita, horizontal esquerda, vertical ou vertical invertida;
  • Se será tela cheia, se usará WiFi, se terá statusbar;
  • Ou seja, quase tudo que pode existir de setagens padrões.

Já o app.js é o arquivo inicial do aplicativo, é tipo o main() da linguagem C (R.I.P. Dennis Ritchie), onde tudo começará a funcionar como mágica.

O aplicativo inicial gerado pelo Titanium é igual a este:

Agora que você já viu como funciona mais ou menos, pode abrir o arquivo app.js e apagar tudo que tem lá que vamos começar nosso “Hello World”.

Inicialmente vamos criar uma janela na qual vamos inserir os demais componentes. Ela janela terá o título de “Janela Inicial” e terá sua cor de fundo preta:

[code lang=”js”]
var winHello = Titanium.UI.createWindow({
title: ‘Janela Inicial’,
backgroundColor: ‘#000000’
});
[/code]

Agora que já temos nossa janela criada, vamos criar o nosso label que exibirá a famosa frase, mas no momento vamos deixar sem texto, que será na cor branca, fonte tamanho 32 e alinhado ao centro:

[code lang=”js”]
var lblHello = Titanium.UI.createLabel({
text: ”,
color: ‘#FFFFFF’,
font:{fontSize:32},
textAlign: ‘center’,
width: ‘auto’
});
[/code]

Só rode o aplicativo quando eu mandar, ok? Pois senão você poderá ficar frustrado, pois não irá funcionar como queremos ainda.

Bom, agora seria legal colocar um botão para fazer o texto aparecer, não é? Veja como faz:

[code lang=”js”]
var btnExibir = Titanium.UI.createButton({
title: ‘Exibir’,
top: 20,
height: 60,
width: 120
});
[/code]

Pronto! Já temos a janela, o texto e o botão, porém se você rodar o aplicativo, aparecerá apenas uma janela com o logo da Appcerator. Isso acontece porque devemos adicionar os componentes à janela e, obviamente, abrí-la. É o que vamos fazer agora:

[code lang=”js”]
winHello.add(btnExibir);
winHello.add(lblHello);
winHello.open();
[/code]

Legal! Agora teste aí e veja se funciona. Ainda não? Putz, faltou “falarmos” para o botão o que ele deverá fazer, observem a simplicidade:

[code lang=”js”]
btnExibir.addEventListener(‘click’,function(){
lblHello.text = ‘Hello World!’;
});
[/code]

Agora sim está funcionando 100%, e agora você pode estar se perguntando:

Mas como é que eu vou saber quais propriedades cada componente possui?

É só dar uma lida na documentação que está disponível no site da Appcelerator (clique aqui) e logo com o tempo você terá as manhas das propriedades mais usadas e tudo mais.

Segue o código completo do aplicativo criado neste post e a cara dele depois de pronto:

[code lang=”js”]
var winHello = Titanium.UI.createWindow({
title: ‘Janela Inicial’,
backgroundColor: ‘#000000’
});

var lblHello = Titanium.UI.createLabel({
text: ”,
color: ‘#FFFFFF’,
font:{fontSize:32},
textAlign: ‘center’,
width: ‘auto’
});

var btnExibir = Titanium.UI.createButton({
title: ‘Exibir’,
top: 20,
height: 60,
width: 120
});

winHello.add(btnExibir);
winHello.add(lblHello);
winHello.open();

btnExibir.addEventListener(‘click’,function(){
lblHello.text = ‘Hello World!’;
});
[/code]

Bom pessoal, é isso aí! Espero que tenham gostado e desculpem a demora em postar.

Obrigado e até mais.

Fonte: O Bigola