Titanium, criando uma intent no OS Android

Pessoal, nesse tutorial vou mostrar como é simples criar uma “intent” do Android pelo Titanium e iniciar a “activity” através da “intent“.

Vamos supor que eu preciso acessar o recurso de geolocalização do device do usuário. Para acessar esse recurso pelo Titanium é bem simples, basta verificar se o serviço de geolocalização esta ativa no device acessando a propriedade: Ti.Geolocation.locationServicesEnabled. Para saber mais acesse aqui.
Ao verificar a propriedade, se ela estiver desativada retornando “false“, você não vai conseguir capturar a latitude e a longitude referente a posição do device. Como o serviço esta desativado, você pode informar o usuário através de um “alert“, para que ele ative o serviço de geolocalização e volte ao app. Mas lidar com o usuário é complicado, pois alguns não vão nem saber como habilitar esse serviço e você como desenvolvedor tem que tentar facilitar esse trabalho ao máximo no aplicativo que você estiver desenvolvendo.

Hora de botar a mão na massa! Criei um projeto clássico no Titanium apenas com foco no Android. No arquivo “app.js”, vamos criar uma window e um button, no button vou adicionar um evento de “click” para verificar se a geolocalização esta ativa. Se estiver ativa vou mostar a latitude e a longitude onde o device se encontra, senão, por agora vou exibir um alerta informando o usuário que a geolocalização está desativada.

//criando uma função anônima
( function(){
    var win = Ti.UI.createWindow({
		backgroundColor:'#fff'
	});

	var buttonShowLocation = Ti.UI.createButton({
		title:'show location',
		width:140,
		height:80
	});
	win.add( buttonShowLocation );

        buttonShowLocation.addEventListener( 'click', clickButtonShowLocation );
	function clickButtonShowLocation (e)
	{
		// verificando se geolocalização está ativa
		if( Ti.Geolocation.locationServicesEnabled )
		{
                        //define a precisão requerida da geolocalização
			Ti.Geolocation.accuracy = Ti.Geolocation.ACCURACY_BEST;

			// caso a geolocalização esteja ativa tente capturar a posição do device
			// o método getCurrentPosition, recebe como parâmetro uma função de callback
			// Caso "e.success" seja verdadeiro é mostrado um alerta com a latitude e longitude
			// que o device se encontra. Senão, é exibido um alerta para o usuário sobre o erro ocorrido
			Ti.Geolocation.getCurrentPosition( function( e ){
				if ( e.success )
				{
					alert( 'latitude: ' + e.coords.latitude + ' longitude: ' + e.coords.longitude );
				}
				else
				{
					alert( 'Error get current position:' + e.error );
				}
			});
		}
		else
		{
			alert( 'GPS disabled.' );
		}

	}

} )();

Vou executar esse exemplo direto no meu nexus e printar aqui os resultados com a geolocalização ativada e desativada.

GPS desativado

GPS desativado

GPS ativado

GPS ativado

Agora, ao invés de mostar um “alert” ao usuário que o serviço de geolocalização está desativado, vamos abrir a tela específica do Android para que ele consiga habilitar o serviço de GPS.

Basta comentar a linha 40 e adicionar o seguinte trecho de código.

var intent = Ti.Android.createIntent({
	action:"android.settings.LOCATION_SOURCE_SETTINGS"
});
Ti.Android.currentActivity.startActivity( intent );

Ao testar o exemplo e ele estiver com o gps desativado, e você clicar no botão, a tela que deve aparecer deve ser semelhante ao print abaixo.
IMG_20140413_224834

Segue o código completo.


( function(){

	var win = Ti.UI.createWindow({
		backgroundColor:'#fff'
	});

	var buttonShowLocation = Ti.UI.createButton({
		title:'show location',
		width:140,
		height:80
	});
	win.add( buttonShowLocation );

	buttonShowLocation.addEventListener( 'click', clickButtonShowLocation );

	function clickButtonShowLocation (e)
	{
		// verificando se geolocalização está ativa
		if( Ti.Geolocation.locationServicesEnabled )
		{
                        //define a precisão requerida da geolocalização
			Ti.Geolocation.accuracy = Ti.Geolocation.ACCURACY_BEST;
			// caso a geolocalização esteja ativa tenta capturar a posição do device
			// o método getCurrentPosition, recebe como parâmetro uma função de callback
			// Caso "e.success" seja verdadeiro é mostrado um alerta com a latitude e longitude
			// que o device se encontra. Senão, é exibido um alerta o usuário sobre o erro ocorrido
			Ti.Geolocation.getCurrentPosition( function( e ){
				if ( e.success )
				{
					alert( 'latitude: ' + e.coords.latitude + ' longitude: ' + e.coords.longitude );
				}
				else
				{
					alert( 'Error get current position:' + e.error );
				}
			});
		}
		else
		{
			//alert( 'GPS disabled.' );

			var intent = Ti.Android.createIntent({
				action:"android.settings.LOCATION_SOURCE_SETTINGS"
			});
			Ti.Android.currentActivity.startActivity( intent );

		}

	}

	//open window
	win.open();

} )();

Você pode abrir qualquer janela do OS Android, basta definir a “action” certa. Para abrir as definições de rede wifi, altere a “action” do nosso exemplo para a linha abaixo.

action:"android.settings.WIFI_SETTINGS"

Veja o vídeo de exemplo que demonstra o código desse exemplo em execução.

Qualquer dúvida ou sugestão, poste um comentário.

Como criar uma sequência de imagens com o Adobe Flash para seu App.

A plataforma Flash é bastante conhecida no mercado Web, por produzir um conteúdo mais interativo que o convencional Html & Css. Mas, isso tem mudado bastante.

Hum, tudo bem, mas que importância isso tem pra mim que sou um programador que utiliza o Titanium Studio?

Com o Flash você pode criar uma sequência animada de imagens (SpriteSheet) e importá-las para seu projeto feito no Titanium, deixando o seu projeto com um diferencial bem atrativo.

Se você não tem experiência com o Flash, não se preocupe. Pois, o que vou demostrar, não exige nenhum conhecimento e detalharei todos os passos, basta seguir com atenção.

Se você não tem o Flash instalado, você poderá baixar uma versão trial direto do site da Adobe. Se você tem o Flash instalado e for superior ou igual a versão “CS 3″ acredito que também não terá nenhum problema eu usarei a versão “CS 6″.

Primeiro baixe a imagem abaixo, pois criaremos uma animação de um coração pulsando.

Fígura 1.

Figura 1.

Abra o Flash e crie um novo documento com 278px de largura por 215px de altura, frame rate com 24 fps.  A versão do ActionScript não faz nenhuma diferença.

Figura 2.

Figura 2.

Agora importe a “Figura 1” para o palco com as teclas command + r no Mac ou ctrl + r no Windows, a “Figura 1″ deve ter aparecido no palco. A imagem está bem maior que o palco, pois nem estamos visualizando-o. Clique na imagem importada pressione command + k ou ctrl + k aparecerá a janela “Transform” em “Scale Width” e “Scale Hight” deixe em 31%.

Fígura 3.

Figura 3.

O palco é esse retângulo branco que você está visualizando, senão aperte command + 2 ou ctrl + 2 para visualiza-lo.

Clique na imagem, pois vamos centralizá-la no centro do palco. Pressione command + K ou ctrl + k, aparecerá uma janela “Align” então selecione a segunda e a quinta opção de “Align” e se a opção “Align to Stage” não estiver marcada marque-a.

Fígura 3

Fígura 3

A imagem está centralizada no palco, vamos converte-la em um símbolo. Clique direito sobre ela, escolha a opção “Convert to Symbol” nomeie para “coracao” em “Type” deixe como “Movie Clip” em “Registration” marque o pontinho branco  no centro caso ele esteja desmarcado.

Fígura 4.

Fígura 4.

Nosso símbolo está pronto para ser animado. Poderíamos criar uma animação de forma manual, mas vamos utilizar uma animação já definida pelo Flash. Vá em Window da barra de tarefa e escolha “Motion Presents” dentro da pasta “Default Presents” escolha “pulse” e clique no botão “apply“.

Fígura 5.

Fígura 5.

Observe que foi adicionado alguns quadros na timeline e você pode clicar em um deles e pressionar “Enter” para reproduzir a animação de “pulse” escolhida.

Se por algum motivo a imagem escolhida não estiver em uma resolução satisfatória, vá na “Library”. Se essa janela não estiver visível, vá em Window e clique em “Library“. Na “Library” você vai visualizar a imagem importada e o símbolo criado. Clique direito sobre a imagem e depois em “Properties…“, marque a opção “Allow smoothing” e em “Compression” escolha “Photo (JPEG)” em “Quality” deixa marcado a opção “Use imported JPEG data“.
Dessa forma, a imagem não vai ter nenhum tipo de compressão e ainda vai suavizar os pixels quando estiverem em movimento.

Fígura 6.

Fígura 6.

Agora vamos exportar essa animação em uma sequência de imagens para utilizarmos no Titanium. Na barra de ferramentas click File -> Export -> Export Movie escolha “PNG” como formato e nomeie como “coracao” e click em “save” aparecerá a janela “Export PNG” deixe-a como abaixo e click em “Export

Figura 7.

Figura 7.

Observe que foi gerado 24 imagens “coracao0001.png”, “coracao0002.png”… Pois a animação tem duração de 1 segundo a 24 fps. Se você precisar de mais frames por segundo basta aumentar o fps no Flash.

Ok, agora que temos a sequência de imagens vamos criar nosso projeto no Titanium. Estarei disponibilizando todos os arquivos, então se você não tem o Flash instalado e também não o instalou pode iniciar a partir daqui.

No Titanium crie um novo projeto do tipo “Default Project” ou outro de sua preferência. Eu estou usando a versão 3.0.2 do SDK e vou exportar apenas para iPhone e Android.

Abra o arquivo “app.js” apague todo código e o deixe como abaixo.

//create window
var window = Ti.UI.createWindow();

//create view
var view = Ti.UI.createView({
	backgroundColor:'#ffffff',
	layout:'vertical'
});

//label
var label = Ti.UI.createLabel({
	color:'#000000',
	text:'Sequência de imagens',
	height:'auto',
	width:'auto',
	top:'10dp'
});

//add label in view
view.add( label );

//add view in window
window.add( view );

// open app
window.open();

Esses passos são bem básicos, então acho que você não vai ter nenhuma dificuldade. Isso é o que temos até o momento.
Figura 8.Vamos adicionar a sequência de imagens criada no app. Para isso, vamos criar um objeto do tipo ImageView. Mas, antes de tudo, criei uma pasta “images” dentro da ”Resources” e adicione as imagens.

Precisamos de uma array para setarmos o caminho de todas as imagens, que nesse caso são 24, com os seguintes nomes: ‘coracao0001.png’, ‘coracao0002.png’…
Não seria nem um pouco elegante criar uma array e setar todos esses valores na mão. Utilizaremos então, uma estrutura de repetição que todos já devem conhercer, o famoso “for”.

// images
var images = [];
for( var i = 1; i < 25; i++ )
{
	var path = '/images/coracao0' + (i < 10 ? '00' : '0') + i + '.png';
	images.push( path );
}

var image = Ti.UI.createImageView({
	images:images,
	width:'278dp',
	height:'215dp',
	top:'15dp',
	repeatCount:0, // 0 repetição infinita
	duration:(1/24) // configurando frame-rate
});

// add image in view
view.add( image );

Observe que fiz uma condição para verificar quantos zeros são necessários antes de concatenar o valor do “i” a “string“. Se for menor que 10, utilizo 2 zeros, senão apenas um. Se você executar o app nesse estágio, não vai visualizar nada diferente da última execução. Precimos adicionar um evento para saber quando todas as imagens foram carregadas e iniciar a animação com o método “resume“.

image.addEventListener('load', function(e){
	image.resume();
});

Execute novamente e o coração estará pulsando no seu app. Esse resultado deve ser praticamente o mesmo para o emulador Android.

Figura 8.

Figura 8.

Segue abaixo todo o código do app.

//create window
var window = Ti.UI.createWindow();

//create view
var view = Ti.UI.createView({
	backgroundColor:'#ffffff',
	layout:'vertical'
});

//label
var label = Ti.UI.createLabel({
	color:'#000000',
	text:'Sequência de imagens',
	height:'auto',
	width:'auto',
	top:'10dp'
});

var images = [];
for( var i = 1; i < 25; i++ )
{
	var path = '/images/coracao0' + (i < 10 ? '00' : '0') + i + '.png';
	images.push( path );
}

var image = Ti.UI.createImageView({
	images:images,
	width:'278dp',
	height:'215dp',
	top:'15dp',
	repeatCount:0, // 0 repetição infinita
	duration:(1/24) // configurando frame-rate
});

image.addEventListener('load', function(e){
	image.resume();
});

var changeStatus = Ti.UI.createButton({
	title:'clange-status',
	top:'15dp',
	color:'#ff0000'
});

changeStatus.addEventListener('click', function(e){
	image.animating ? image.pause() : image.resume();
});

//add label in view
view.add( label );

// add image in view
view.add( image );

//add button
view.add( changeStatus );

//add view in window
window.add( view );

// open app
window.open();

Vlw galera, até a próxima.

Baixe aqui os arquivos