Hello Titanium - First App

Fala galera, tudo bom com vocês.

Bom agora com tudo no jeito para desenvolver vamos criar nosso primeiro projeto.

Para isso vá em File > New > Mobile Project e então você verá uma tela parecida com essa abaixo:

Escolha o template Classic > Default Project para começarmos e então clique em Next e então você visualizará a seguinte tela:

Nessa tela vamos dar um nome para o Projeto, no meu caso irei colocar como myFirstApp no campo de Project Name, na opção de Location podemos usar o default ou escolher um local específico para salvarmos nosso projeto, e então devemos escolher obrigatóriamente um App Id que deve seguir o seguinte template: com.myCompanyName.myApp, a versão do SDK que no meu caso estou utilizando a 3.1.0GA, vale a pena lembrar que podemos ter e usar outras versões do SDK. Agora iremos escolher os targets que nossa aplicação irá ser desenvolvidas, temos as opções de iPad, iPhone (Caso você possua um Apple e tenha configurado) temos também as opções Android, BlackBerry, Mobile Web e Tizen, irei fazer a minha app para iPhone e Android, mas caso você esteja usando Windows, escolha Android e  nesse primeiro momento vamos desabilitar a opção de Clould-enable this application. Se ocorreu tudo bem vocês estarão visualizando a tela de configuração do seu projeto.

É nessa tela que fazemos todas as configurações de um Projeto Titanium, desde targets de min-sdk até configurações de módulos externos. Nesse primeiro momento não irei entrar mais em detalhes desse arquivo, mais pra frente irei escrever um post apenas para tratar algumas configurações desse arquivo.

Vamos abrir o arquivo app.js, esse é o primeiro arquivo a ser executado pelo SDK do Titanium. Então vamos fazer o seguinte, para entendermos como as coisas funcionam, vamos apagar todo o código de dentro dele.

Nossa meta aqui é criar uma tela com os seguintes componentes:

- 1 Window com backgroundColor branco;

- 1 View com backgroundColor preto que servirá de "conteiner" para inserirmos os componentes: TextFiel e Button e essa View será adicionada dentro da Window;

- 1 TextField com backgroundColor branco;

- 1 Button com Title "Clique-me" que terá a função de quando clicado, exibir o conteúdo digitado no TextField em uma caixa de diálogo

Seguindo as informações acima seu código deverá ficar como a imagem abaixo:

Agora pode executar seu app para checar como ficou, para isso clique na "setinha" preta em e escolha o Titanium Android Emular ou Titanium Iphone Simulator (Caso possua MAC e tenha configurado) como a imagem abaixo:

Executando o app você obterá algum desses resultados abaixo:

Você deve estar se perguntando, nossa o layout ficou todo quebrado, os elementos ficaram todos "encavaldos". Isso ocorreu porque não configuramos nenhuma propriedade dos elementos com relação a layoult, tamanho e posicionamento. Agora vou ensinar a vocês como configurar essa propriedades no Titanium. Primeiro vamos alterar a View que criamos e definir o layoult como vertical, significa que todo elemento adicionado a ela será na vertical, ou seja, um embaixo do outro, agora vamos definir a altura(height) como sendo "20%" e a largura(width) como "90%" em relação seu seu pai que no nosso caso é a window, isso faz com que o largura e a altura seja do tamanho necessário para mostrar os elementos contidos dentro dela. Com essas novas configuração o código da sua view ficou dessa forma:

Agora vamos alterar as propriedade de largura(width) para "80%" e top para 10 do TextField, a propriedade top é o valor do afastamento do elemento com o elemento acima dele. Fazendo essas alterações o código do TextField ficou assim:

Vamos alterar também alterar o Button, adicionando o valor 10 na propriedade top, para que ele fique afastado do TexField. fazendo isso seu código ficará assim:

Agora falta a ultima parte que é a ação para o clique do botão. Para isso vamos adicionar um listener para o evento "click", esse listener irá pegar o valor do TextField e mostrar em um Pop-up sendo assim o código fica dessa forma:

Executando o app você deverá visualizar algo desse tipo:

Se conseguiu chegar até aqui Parabéns, você acaba de dar um grande avanço na sua carreira.

Se tiverem alguma duvida, sujestão, reclamação é só colocar aqui nos comentário.

Um abraço a todos e até a próxima.