Olá Pessoal,
Neste post veremos como criar nossa primeira aplicação Titanium Mobile utilizando o Titanium Studio.
Iniciamos então selecionando em File -> New -> Titanium Mobile Project no menu do Titanium Studio conforme figura 1.
Figura1. Criando um novo projeto Titanium Mobile
Na tela de New Project preencha conforme a figura 2.
Figura 2. New Project Wizard
Em Project Name preenchemos com o nome do projeto que será criado. Deixamos marcado Use default location para que o projeto sejá criado no workspace padrão, caso deseje criar o projeto em outra pasta é só desmarcar esta opção e informá-la no campo Location.
Em Project Settings nós temos as seguinte opções:
- App Id – identificador da aplicação, esse valor deve ser único por aplicação
- Company/Personal URL – URL pessoal ou da sua empresa
- Titanium SDK – Versão do Titanium SDK que será utilizado na sua aplicação (até o momento da escrita deste posta a última versão era a 1.7.3)
- Deployment Targets – quais os dispositivos que serão suportados por sua aplicação. No nosso caso escolhemos iPad, iPhone (iPod) e Android. A opção Mobile Web está desabilitada pois a Appcelerator ainda está trabalhando nesta feature.
Figura 3. Tela exibida ao criar uma aplicação
Neste momento a tela da figura 3 é exibida com o arquivo tiapp.xml aberto no editor. Tal arquivo é utilizado para definir diversas configurações para o nosso aplicativo, incluse as que foram definidas na tela anterior de New Project. Como exemplo podemos citar: versão da aplicação, modo full screen, configurações específicas de cada plataforma (iOS e Android), módulos e etc. Para visualizar o conteúdo completo do arquivo clique na aba tiapp.xml na parte inferior do editor conforme a figura 4.
Figura 4. Exibindo o conteúdo completo do arquivo de configuração
Na parte central do Titanium Studio temos o editor, é nele onde editamos o código fonte da nossa aplicação. No lado esquerdo temos o App Explorer que exibe os arquivos do nosso projeto e onde podemos alternar entre projetos conforme a figura 5.
Figura 5. Alternando entre projetos
Voltando ao nosso projeto, expanda a pasta Resource e clique duas vezes no arquivo app.js para abri-lo no editor. Podemos perceber que o Titanium Studio cria automaticamente um template de uma aplicação conforme figura 6.
Figura 6. Template de uma nova aplicação
Vamos agora executar a aplicação template e verificar como ela se comporta no iPhone e no Android. Para isso clique no ícone de Run e selecione Android Emulator e em seguida repita o passo para o iPhone Simulator conforme figuras 7 e 8.
Figura 7. Executando no Android Emulator
Figura 8. Executando no iPhone Simulator
Ao executar a aplicação teremos o seguinte resultado conforme exibido na figura 9.
Figura 9. Aplicação padrão sendo executada
Podemos comprovar que o Titanium Mobile utiliza componentes de UI nativos da plataforma onde a aplicação está executando, sendo esse seu grande diferencial comparado a outras soluções cross-platform.
Neste momento vamos criar nossa aplicação de Olá Mundo. Para isso exclua o conteúdo do arquivo app.js e digite o seguinte código abaixo.
var win = Ti.UI.createWindow({
backgroundColor:'#fff',
layout:'vertical'
});
var button = Ti.UI.createButton({
title:'Clique',
width:120,
height:40,
top:140
});
var label = Ti.UI.createLabel({
width:'auto',
height:'auto',
top:40
});
button.addEventListener('click', function(e){
label.text = 'Olá Mundo!';
});
win.add(button);
win.add(label);
win.open();
Na linha 1 estamos criando uma Window, definindo a cor de fundo para branco, e definindo seu layout como vertical, o que significa que todos os componentes adicionados dentro da mesma ficarão um abaixo do outro.
Na linha 6 estamos criando um Button, definindo seu título para “Clique” e em seguida suas dimensões e posicionamento.
Na linha 13 estamos criando um Label com o texto vazio, e em seguida suas dimensões e posicionamento.
Na linha 19 estamos adicionando um manipulador para o evento click do Button criado na linha 6. Onde quando o usuário “clicar” no mesmo o texto do Label criado na linha 13 será definido para a string “Olá Mundo”.
Nas linhas 23 e 24 estamos adicionando o Button e o Label a nossa Window.
E finalmente na linha 25 nossa Window é exibida para o usuário. O resultado pode ser visualizado na figura 10.
Figura 10. Aplicação OlaMundo sendo executada.
Com isso finalizamos nossa primeira aplicação! Nosso objetivo foi fornecer apenas um primeiro contato com o framework. Em posts futuros estaremos detalhando melhor seus fundamentos.
Até a próxima pessoal!
Olá pessoal,
Vamos aprender a instalar o Titanium no Linux Ubuntu. O primeiro passo é baixar a versão 1.6 do Java SDK (até o momento da escrita deste post a versão 1.7 ainda não é suportada) executando o seguinte comando:
sudo vi /etc/apt/sources.list
Descomente as seguintes duas linhas e salve o arquivo:
deb http://archive.canonical.com/ubuntu/ natty partner
deb-src http://archive.canonical.com/ubuntu/ natty partner
Em seguida execute os seguintes comandos:
sudo apt-get update
sudo apt-get install sun-java6-jdk
Proceda com a instalação.
Iremos agora instalar o SDK do Android. Para isso acesse o seguinte endereço:
http://developer.android.com/sdk/index.html
E baixe a versão do Android SDK para o Linux conforme figura 1.
Figura 1. Download do SDK do Android
Execute os seguintes comandos para descompactar e executar o instalador do SDK.
tar -zxvf android-sdk_r12-linux_86.tgz
cd android-sdk-linux_86/tools
./android
Selecione o item Available packages na lista da esquerda, expanda o item Third party Add-ons na lista da direita e marque a opção Android API 7 (obrigatória) e qualquer outra versão do SDK que você deseja trabalhar e em seguida clique em Install Selected, conforme figura 2.
Figura 2. Instalação dos SDKs do Android
Dica: Para descobrir qual versão do SDK a API corresponde, expanda o nó Android Repository, nela você visualizará a versão do SDK junto com a versão da API. Exemplo: SDK Platform Android 2.1, API 7, revision 3. Ou seja a API 7 corresponde a versão 2.1 do Android.
Um tela com todos itens selecionados mais suas dependências é exibida, selecione Accept All em seguida clique em Install conforme figura 3.
Figura 3. Pacotes que serão instalados
Agora aguarde o download e a instalação dos pacotes, ao final clique no botão Yes na pergunta “Do you want to restart ADB now?”.
Faça o download do Titanium Studio no seguinte endereço (será preciso criar uma conta na appcelerator caso não possua):
http://www.appcelerator.com/products/download/
Selecione a versão para Linux compatível com sua plataforma conforme figura 4.
Figura 4. Download do Titanium Studio versão Linux
Descompacte e execute-o. No primeiro processo de inicialização será solicitada uma autenticação com sua conta da Appcelerator, conforme figura 5.
Figura 5. Tela de login do Titanium Studio
Assim que iniciar serão realizados alguns downloads e atualizações. Aguarde a finalização deste processo.
Atualizações finalizadas, vamos agora definir as configurações necessárias no Titanium Studio.
- Clique em Window -> Preferences.
- Selecione Titanium em Titanium Studio.
- Na seção Android clique em Browse… e selecione a pasta onde o Android SDK foi descompactado e selecione o SDK default (Figura 13).
- Clique em OK.
Figura 6. Configurando o Android SDK no Ti Studio
Seguindo estes passos seu Ambiente de Desenvolvimento para Linux estará configurado.
Olá pessoal,
Vamos aprender a instalar o Titanium no Windows. O primeiro passo é baixar a versão 1.6 do Java SDK (até o momento da escrita deste post a versão 1.7 ainda não é suportada) no endereço:
http://www.oracle.com/technetwork/java/javase/downloads/index.html
Clique no link download JDK do Java SE conforme figura 1.
Figura 1. Download do Java JDK 1.6
Outro ponto importante é que o Titanium Studio só é compatível com a versão 32bits do JDK, então selecione esta versão para download conforme figura 2.
Figura 2. Download da versão 32 bits do JDK
Após o download e instalação do JDK, iremos instalar o SDK do Android. Para isso acesse o seguinte endereço:
http://developer.android.com/sdk/index.html
E baixe a versão recomendada do Android SDK conforme figura 3.
Figura 3. Download do SDK do Android
Caso ao executar o instalador ele não detecte o Java JDK ai vai a dica: clique em Back e em seguida Next, misteriosamente ele vai detectar. Defina a pasta de destino para um path sem espaços conforme figura 4, caso contrário teremos problemas futuros na execução do ambiente. Prossiga com a instalação.
Figura 4. Configurando o path de instalação do Android SDK
Na tela final de instalação deixe marcada a opção Start SDK Manager (to download system images, etc.) para abrir o SDK Manager e clique em Finish. Caso tenha esquecido de marcar tal opção entre na pasta onde você instalou o SDK do Android e execute o SDK Manager.exe. Ao executar pela primeira vez o SDK Manager, serão mostrados vários pacotes para serem instalados. Clique em Cancel para fechar essa janela conforme figura 5.
Figura 5. Cancelando instalação de todos os pacotes
Selecione o item Available packages na lista da esquerda, expanda o item Third party Add-ons na lista da direita e marque a opção Android API 7 (obrigatória) e qualquer outra versão do SDK que você deseja trabalhar e em seguida clique em Install Selected, conforme figura 6.
Figura 6. Instalação dos SDKs do Android
Dica: Para descobrir qual versão do SDK a API corresponde, expanda o nó Android Repository, nela você visualizará a versão do SDK junto com a versão da API. Exemplo: SDK Platform Android 2.1, API 7, revision 3. Ou seja a API 7 corresponde a versão 2.1 do Android.
Um tela com todos itens selecionados mais suas dependências é exibida, selecione Accept All em seguida clique em Install conforme figura 7.
Figura 7. Pacotes que serão instalados
Agora aguarde o download e a instalação dos pacotes, ao final clique no botão Yes na pergunta “Do you want to restart ADB now?”.
Neste momento já temos o Java SDK e o Android SDK instalados em nosso sistema. Precisamos agora criar uma variável de ambiente e atualizar outra, nas quais serão utilizadas pelo Titanium Studio. Para isso clique em Variáveis de ambiente nas Propriedades do sistema conforme Figura 8.
Figura 8. Adicionando variáveis de ambiente
Na tela de Variáveis de ambiente clique no botão Nova em Variáveis do sistema conforme figura 9.
Figura 9. Adicionando uma variável de ambiente
Entre JAVA_HOME no nome da variável e o path completo da pasta de instalação do Java SDK no campo Valor da variável (Ex. C:\Arquivos de programas\Java\jdk1.6.0_27) e clique em OK. Veja figura 10.
Figura 10. Adicionando a variável de ambiente JAVA_HOME
Agora selecione a variável de ambiente PATH, clique em Editar e adicione ;%JAVA_HOME%\bin no final do Valor da Variável e clique em OK.
Atenção para o símbolo de ; antes do %JAVA_HOME
Faça o download do Titanium Studio no seguinte endereço (será preciso criar uma conta na appcelerator caso não possua):
http://www.appcelerator.com/products/download/
Selecione a versão para Windwos conforme figura 11.
Figura 11. Download do Titanium Studio versão Windows
Execute normalmente a instalação do Titanium Studio. E execute-o após a instalação. No primeiro processo de inicialização será solicitada uma autenticação com sua conta da Appcelerator, conforme figura 12.
Figura 12. Tela de login do Titanium Studio
Assim que iniciar será solicitado o caminho de um cliente do git, utilizado para controle de versão, caso não tenha em sua máquina selecione PortableGit e aguarde a instalação. Em seguida serão realizados alguns downloads e atualizações. Aguarde a finalização deste processo.
Atualizações finalizadas, vamos agora definir as configurações necessárias no Titanium Studio.
- Clique em Window -> Preferences.
- Selecione Titanium em Aptana Studio.
- Na seção Android clique em Browse… e selecione a pasta onde o Android SDK foi instalado e selecione o SDK default (Figura 13).
- Clique em OK.
Figura 13. Configurando o Android SDK no Ti Studio
Seguindo estes passos seu Ambiente de Desenvolvimento para Windows estará configurado.
Se no Windows XP apresentar a mensagem Hint: use ‘@foo’ to launch a virtual device named ‘foo’. ao executar o emulador, veja a dica de como resolver em http://goo.gl/GO3WZ
