Technocil

Apresento-lhes o Titanium Appcelerator, uma plataforma de desenvolvimento de aplicações mobile em javascript, como o próprio site diz:

Crie aplicações nativas para IOS e Android usando uma SDK que tem como linguagem base de desenvolvimento o Javascript!

Eu tive um contato com esse projeto a algum tempo atrás mas, naquele tempo, a falta de algumas ferramentas fazia o desenvolvimento ficar meio complexo e lento, ontem a tarde estava passeando pela internet e me deparei com as novidades desse projeto e vi que atualmente as coisas ficaram mais simples e práticas e o projeto se tornou (pelo menos pra mim) muito interessante. A documentação é rápida e muito explicativa e durante os meus testes iniciais tudo me pareceu muito bom e funcional.

Fiz um app-teste e instalei no meu Samsung S2 que, embora não tenha nada demais e seja um pouco mais que um hello world, eu gostei muito do resultado. Segue abaixo o passo a passo dessa brincadeira.

Primeiro passo é baixar o Titanium SDK/Studio,

mas para isso você precisa fazer um pequeno cadastro,

Após preencher o formulário e se cadastrar você pode baixar a SDK para seu sistema operacional.

Depois de baixar é só acessar esse link e seguir as instruções de configuração.

Abaixo segue o código do meu app, cuja a unica funcionalidade é animar uma série de imagens, mais precisamente esse gif.

Meu código app.js

Titanium.UI.setBackgroundColor('#000');

var windowOptions = {  
    title:'Troll',
    backgroundColor:'#fff'
}

if (Ti.Platform.name == 'android') 
	windowOptions.navBarHidden = true;

var window = Titanium.UI.createWindow(windowOptions);

var troll = Titanium.UI.createImageView();
var trollAnimFrames=10;
var trollAnimIndex=1;

function trollAnimate(){
	troll.image = "shared/media/troll/troll-frame-" + trollAnimIndex + ".png";
	trollAnimIndex++;
	
	if ( trollAnimIndex == trollAnimFrames )
		trollAnimIndex = 1;
}
 
var trollAnimateLoader = setInterval(trollAnimate,70);

window.add(troll);
window.open();

Recomendo que acessem a API do Titanium SDK para ver o funcionamento de cada uma das funções, ela é muito prática e detalhada.

Então gente é isso, o artigo não se aprofunda muito no assunto para não ficar muito cansativo e extenso, mas vale a pena dar uma olhada nessa plataforma. só recapitulando, alguns links úteis que estão espalhados pelo post:

• Home da plataforma Titanium SDK
• Página de cadastro
• Download do Titanium Studio e SDK
• Guia de configuração
• Documentação / API Oficial

Por hoje é só, assim que eu descobrir mais coisas sobre o titanium eu mando pra cá.

Depois de algum tempo de tela branca no blog consegui um pouco de tempo livre para arrumar o blog, pelomenos agora ele voltou, o problema era um upgrade do wordpress que simplesmente falhou e quebrou o site todo

Hoje eu estava fazendo umas pesquisas no guru e acabei caindo de paraquedas num post muito excelente do blog Flex.etc.br.

Segue o link: http://www.flex.etc.br/traducoes/10-coisas-que-um-bom-programador-flex-deve-saber/

Leitura muito mais que obrigatória.

E ae blz,

Primeiro post da nova era Technocil, o assunto desse post é uma forma simples de posicionar itens ao redor de um círculo ou elipse, é simples curto e bem objetivo e vai abrir caminho pra alguns outros posts com temas relacionados como, animar itens e textos ao redor de circulos.

Antes de mais nada é bom deixar claro que você precisa ter algum conhecimento de Adobe Flex e AS3 para entender os termos e o post em si, mas é óbvio que pra tirar dúvidas é só comentar.

Requisitos:
CasaLib – download – site

Essa biblioteca é muito poderosa e faz um bocado de coisa que eu sinceramente desconheço, só vamos usá-la para facilitar os calculos com a elipse.

Nosso objetivo é posicionar uma lista de itens ao redor de uma elipse de forma dinâmica independente do número de itens ou do tamanho da elipse, algo que gera um resultado assim:

Bom vendo o resultado, vamos ao código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" creationComplete="{arrangeItens()}">

	<mx:Script>
		<![CDATA[
		
		import org.casalib.math.geom.Ellipse;
		
		[Bindable] protected var dataProvider:Array = new Array(8);
		
		protected var ellipse:Ellipse;
		protected var _width:Number = 120;
		protected var _height:Number = 120;
		
		protected function arrangeItens():void
		{
			//CENTRALIZANDO A ELLIPSE NO STAGE
			var __x:Number = width / 2 - _width / 2;
			var __y:Number = height / 2 - _height / 2;
			
			//CRIANDO UMA INSTANCIA DE ELLIPSE DA LIB CASA
			ellipse = new Ellipse(__x, __y, _width, _height);
			
			if (images != null)
			{
				var count:int = images.length;
				
				for (var i:int = 0; i < count; i++)
				{
					//RECUPERANDO A POSICAO X E Y PARA CADA UM DAS IMAGENS DO REPEATER
					var coords:Object = ellipse.getPointOfDegree((360 / count) * i);
					
					//POSICIONANDO AS IMAGENS AO REDOR DO CÍRCULO
					images[i].x = coords.x - (images[i].width / 2);
					images[i].y = coords.y - (images[i].height / 2);					
				}
			}
		}
		
		]]>
	</mx:Script>
	
	<mx:Repeater id="rep" dataProvider="{dataProvider}">
		<mx:Image id="images" source="@Embed(source='assets/img/item.png')" 
			width="30" height="30" smoothBitmapContent="true" />
	</mx:Repeater>
	
</mx:Application>

Explicando o que realmente importa no código:

import org.casalib.math.geom.Ellipse;
		
[Bindable] protected var dataProvider:Array = new Array(8);
		
protected var ellipse:Ellipse;
protected var _width:Number = 120;
protected var _height:Number = 120;

Nesse trecho o código importa a biblioteca CasaLib, cria um Array de 8 itens só pra servir como dataProvider para o repeater, e define a largura e altura total da elipse.

Vamos ao método que posiciona os itens na tela:

		protected function arrangeItens():void
		{
			//CENTRALIZANDO A ELLIPSE NO STAGE
			var __x:Number = width / 2 - _width / 2;
			var __y:Number = height / 2 - _height / 2;
			
			//CRIANDO UMA INSTANCIA DE ELLIPSE DA LIB CASA
			ellipse = new Ellipse(__x, __y, _width, _height);
			
			if (images != null)
			{
				var count:int = images.length;
				
				for (var i:int = 0; i < count; i++)
				{
					//RECUPERANDO A POSICAO X E Y PARA CADA UM DAS IMAGENS DO REPEATER
					var coords:Object = ellipse.getPointOfDegree((360 / count) * i);
					
					//POSICIONANDO AS IMAGENS AO REDOR DO CÍRCULO
					images[i].x = coords.x - (images[i].width / 2);
					images[i].y = coords.y - (images[i].height / 2);					
				}
			}
		}

Muito código pouca explicação…

ellipse = new Ellipse(__x, __y, _width, _height);

Primeiro a instancia da elipse criada pela classe não é nada visual, é simplesmente um ponto de referência para posicionar coisas na tela, não confunda achando que vai ver uma elipse na tela só por que instanciou a classe, ela não faz isso.

//RECUPERANDO A POSICAO X E Y PARA CADA UM DAS IMAGENS DO REPEATER
var coords:Object = ellipse.getPointOfDegree((360 / count) * i);

O loop for percorre os itens criados pelo repeater e posiciona cada um em seu específico x e y, que são recuperados pelo método getPointOfDegree da classe Ellipse (o verdadeiro objetivo de todo o post na verdade)

E as linhas abaixo estão corrigindo o posicionamento, anh?… isso mesmo, como o alinhamento base do Flex é no topo a esquerda, fazer algo se alinhar pelo centro pode ser um tanto quanto, trabalhoso (nos próximos posts eu ensino um macete), por isso vamos da uma leve corrigida na posição para os itens não ficarem estranhos.

//POSICIONANDO AS IMAGENS AO REDOR DO CÍRCULO
images[i].x = coords.x - (images[i].width / 2);
images[i].y = coords.y - (images[i].height / 2);	

Bom por hoje é só isso, dúvidas é só postar nos comentários.

E ae blz,

Não que seja realmente relevante mas eu tive escrever esse post, não pra explicar o por que do site sair do ar e perder TODOS OS POSTS mas sim pra avisar que voltamos (pelomenos eu). É eu também fiquei puto mas no fim de tudo não tinha muito mais a fazer a não ser sentar e chorar.

Quem venham mais posts e é isso.