Adobe AIR 101/ AIR 2.7/ AIR 3.0

Adobe AIR 101 – Como posicionar a tela do meu App no sistema operacional?

Hoje inicio uma série de posts sobre Adobe AIR, eu venho prometendo isso faz séculos, mesmo depois de ter colocado dois cursos de Adobe AIR on-line, sempre faltava aquele tempinho extra.
Nada melhor como uma ótima sexta-feira ensolarada de Sampa para começar essa série. O que é 101 séries?
Basicamente são 101 receitas de como você faz isso ou aquilo, seja em qualquer tecnologia.

O post inaugural da série seria, como posicionar a janela do meu App no sistema operacional?

É muito simples a solução. Como explicar essa facilidade? Quando você cria uma nova App no Flash Builder para a plataforma AIR, você geralmente usa o componente WindowedApplication, o WindowedApplication é a Raiz do App, você pode até trocar mais basicamente cada nova Janela Window ou Windowed que você adiciona no AIR, ele acaba indo para o systemManager, onde você pode administrar facilmente.

Cada classe Window fica armazenda no momento em que ela é criada, sendo assim o systemManager recebe elas e o NativeApplication, onde SystemManager é gerenciado pelo run-time AIR, ai é só fazer a continha básica da herança que você chegará ao resultado.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   width="555" height="381">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import spark.components.Window;
 
 
 
 
			protected function changeWindowPosition(event:MouseEvent):void
			{
				if(_x.text != '' && _y.text != ''){
					nativeApplication.activeWindow.x = Number(_x.text);
					nativeApplication.activeWindow.y = Number(_y.text);
				}
			}
 
		]]>
	</fx:Script>
	<s:Button x="62" y="134" width="137" height="31" label="Mover"
			  click="changeWindowPosition(event)"/>
	<s:Form x="32" y="15">
		<s:FormItem label="x">
			<s:TextInput id="_x"/>
		</s:FormItem>
		<s:FormItem label="y">
			<s:TextInput id="_y"/>
		</s:FormItem>
	</s:Form>
</s:WindowedApplication>

Veja o código acima, como eu sei que a Janela Atual é o Próprio App, então eu não preciso instanciar ela, já que ela está visível, basta eu usar a propriedade nativeApplication e janela ativa (activeWindow) e eu consigo chegar onde eu quero para move-la de posição.

Outro exemplo bem legal que se pode fazer é o uso de efeitos, veja o mesmo código abaixo, só que agora com efeitos.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   width="555" height="381" xmlns:interfaces="com.riacycle.interfaces.*">
	<fx:Declarations>
	<interfaces:JanelaInterpolator id="interpola"/>
 
		<s:Sequence id="mover" target="{this}" duration="1000">
				<s:Fade duration="300"/>
				<s:Animate>
					<s:SimpleMotionPath property="tamanho" valueTo="{rect}" interpolator="{interpola}"/>
				</s:Animate>
		</s:Sequence>
 
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			private var rect:Rectangle = new Rectangle();
 
			public function get tamanho():Rectangle
			{
				return nativeWindow.bounds;
			}
			public function set tamanho(value:Rectangle):void
			{
				nativeWindow.bounds = value;
			}
			protected function changeWindowPosition(event:MouseEvent):void
			{
 
				rect.width = nativeWindow.width;
				rect.height = nativeWindow.height;
				rect.x = Number(_x.text);
				rect.y = Number(_y.text);
				mover.play();
			}
 
		]]>
	</fx:Script>
	<s:Button x="62" y="134" width="137" height="31" label="Mover"
			  click="changeWindowPosition(event)"/>
	<s:Form x="32" y="15">
		<s:FormItem label="x">
			<s:TextInput id="_x"/>
		</s:FormItem>
		<s:FormItem label="y">
			<s:TextInput id="_y"/>
		</s:FormItem>
	</s:Form>
</s:WindowedApplication>

Explicando o código:

Veja bem, quando você usa efeitos na própria janela onde você está chamando a ação, basicamente ela vai dar estouro de pilha e não funciona, justamente por que o intervalo de tempo entre a chamada e a execução acaba sendo no mesmo momento, nem que você tenha que chamar por callLater, o que na prática nunca vai funcionar. Foi ai que acabei criando o interpolador para facilitar, a execução do efeito, pegando valores anteriores do nativeWindow e aplicando os novos valores do Rect que o efeito irá aplicar.

Aqui está o código do Interpolador.

package com.riacycle.interfaces
{
	import flash.geom.Rectangle;
 
	import spark.effects.interpolation.IInterpolator;
 
	public class JanelaInterpolator implements IInterpolator
	{
		public function JanelaInterpolator()
		{
		}
 
		/**
		 *
		 * Funciona assim:
		 *
		 * Você começa com o valor x = 200 e y= 200;
		 * E soma a fração em Delta que sofre mudanças repetidas entre o valor final e o valor inicial.
		 *
		 * Basicamente se um objeto começa na posição x=200 e y=200;
		 * E você quer mudar para x=300 e y= 300;
		 *
		 * Você faz a interpolação do efeito somando o valor inicial + fração (valor Final - valor Inicial)
		 *
		 * Isso dá um incremento a posição inicial do objeto.
		 *
		 * A fração é a velocidade com que essas mudanças ocorrem, você pode incrementar elas ou não.
		 * */
		public function interpolate(fraction:Number, startValue:Object, endValue:Object):Object
		{
			return new Rectangle(startValue.x + fraction * (endValue.x - startValue.x),
				startValue.y + fraction * (endValue.y - startValue.y),
				startValue.width + fraction * (endValue.width - startValue.width),
				startValue.height + fraction * (endValue.height - startValue.height));
		}
 
		public function increment(baseValue:Object, incrementValue:Object):Object
		{
			return new Rectangle(baseValue.x + incrementValue.x,baseValue.y + incrementValue.y,
				baseValue.width + incrementValue.width,baseValue.height + incrementValue.height);
		}
 
		public function decrement(baseValue:Object, decrementValue:Object):Object
		{
			return new Rectangle(baseValue.x - decrementValue.x,
				baseValue.y - decrementValue.y,
				baseValue.width - decrementValue.width,
				baseValue.height - decrementValue.height);
		}
	}
}

Outro problema é que você tem que criar um retangulo para re-posicionar a tela que você está fazendo as mudanças, uma vez que você cria essas proporções a própria nativeWindow ou nativeApplication sempre que muda de posição é alterado os valores, então o mais correto é pegar os bounds, área da janela atual e corrigir isso através de uma propriedade própria sua, retardando o processo.
Já que as mudanças sofridas pelo nativeWindow são imediatas, devido não ter o immediatePropagation(); Impedindo que elas ocorram, você tem que recorrer ao fato do Rect para se salvar desse pequeno problema.

Esse efeito acaba valendo também para modificar o tamanho da janela em si, assim como redimencionar o tamanho de acordo com o conteúdo.

Blackberry/ Playbook/ Tablets

BlackBerry Playbook lançado no Brasil

playbook
Wow, Adriano meu filho está me ouvindo?! É amigos, finalmente o Playbook da RIM, chegou ao mercado Brasileiro, como era previsto para seu lançamento ser hoje dia 19, de fato ocorreu.

A indústria Brasileira estava bem anciosa por esse lançamento, tanto é que o Tablet já vem preparado com conteúdo nacional, Apps Brasileiras e está bem vendido.

Vem com vários Apps Brasileiros, como da Revista Exame, Cinemark, Buscapé, TAM, UOL Notícias, Rádio CBN, Guia Mais, Documents to Go e uma infinidade de Apps bem bacanas, a loja conta com mais de 40 mil Apps prontos para seu tablet, isso mostra que a RIM possui uma séria posição no mercado para de fato concorrer de igual peso com o iPad; E se ela fizer com o tablet como fez com seus smartphones é garantia de sucesso no mundo corporativo quanto no público geral.

Existem 3 modelos do tablet, a diferença mesmo se dá por conta da capacidade, 16GB, 32GB e 64GB. Vem com camera de 3 Mega Pixel e filma em 1080p, coisa que só agora o Iphone 4S faz. Conta também com uma camera frontal, bateria bem duradoura.

Uma coisa que notei bastante no meu Playbook é a velocidade com que a bateria carrega usando seu carregador de tomada, via USB demora um pouco, porém via plug normal de tomada a coisa é ultra rápida.

Os preços do Playbook no modelo de 16GB sai por R$1.299,00 e vai até R$2.999,00.

Você vai encontrar nas Americanas.com, Lojas Saraiva,Submarino, FNAC e Claro Brasil. Dentre outras grandes lojas de varejo no mercado Brasileiro.

Algumas caracteristicas técnicas dele:

Tela de LCD de 7″, 1024×600 WSVGA, tela de touch-screen com suporte a multi-toque e gestos.
OS com suporte a multiprocessamento simétrico.
Processador de 1 GHz com núcleo duplo (dual core).
1 GB RAM.
Dual câmera HD (3MP frente e 5MP a de traz). Suporte a gravação de vídeo HD1080p.
Reprodução de vídeo: 1080p HD Video, H.264, MPEG, DivX e WMV.
Reproduz Audio: MP3, AAC, WMA.
Saída de vídeo HDMI.
Wi-Fi – 802.11 a/b/g/n.
Bluetooth 2.1 EDR.
Conectores: microHDMI, microUSB, carregador.
Abre, a plataforma de aplicação flexível, com suporte para WebKit/HTML-5, o Adobe Flash Player 10.1, Adobe AIR Mobile, o Adobe Reader, POSIX, OpenGL, Java.
Formato ultra fino e portátil, medindo: 5.1″ x 7.6″ x 0.4″ (130mm x 193mm x 10mm)

Pesa aproximadamente 425 gramas.

Eu tenho um em mãos e prometo fazer um review dele bem bacana, mostrando alguns recursos dele.

Dev. Software/ Eventos/ Negócios/ Notícias

Acontecendo hoje o #soudevcon on-line e grátis

Estou super empolgado com o evento #soudevcon, a conferência on-line para desenvolvedores de software no Brasil.
A RIACycle está apoiando o evento, essa primeira edição conta com 8 palestras incríveis.

O evento foi uma idéia dos fundadores do site www.soudev.com.br o Janderson e o Erkoo e a coisa foi amadurecendo e hoje conta com um evento on-line e gratis. Quem sabe o que pode acontecer daqui para frente. Boa sorte Janderson e Erkoo, estou presente no evento e estou adorando.

Entre, é gratis e está acontecendo agora.

Pessoal

Obrigado Dennis Ritchie

dennis-ritchie

Infelizmente perdemos outro gênio, morreu hoje Dennis Ritchie, pelo nome provavelmente você pode não lembrar, mais como criador da linguagem de programação C você deve. Se você já foi ou é estudante universitário, tenho quase 90% de chance que você vai ler algum livro sobre C.

Além de criar a linguagem de programação mais utilizada no mundo até hoje C, Ritchie foi co-criador do sistema operacional UNIX, digamos que esse cara foi o responsável nada menos o ator principal da evolução tecnológica no mundo.

Depois de sua linguagem de programação se tornar tão humanamente possível, outras linguagens até hoje usam sua mesma estrutura, Objective-C, C++, Java, C#, Ruby. Todas essas linguagens “modernas atuais”, tem seu laço sanguíneo com o C.

Foi através de sua linguagem de programação que tudo que temos hoje realmente começou.

Ritchie, obrigado por deixar seu legado. Você realmente transformou nosso mundo de uma maneira silenciosa,discreta e genial.

Flex/ Oportunidades de emprego

Vagas para Dev. Flex para o mês de Outubro

Oportunidade na Amil para São Paulo e região

Atuamos no segmento de saúde e estamos contratando 3 profissionais com sólidos conhecimentos em Flex para trabalhar em tempo integral, a forma de contratação é PJ por tempo indeterminado.

Requisitos: Conhecimento do framework Swiz, Flex 4, ter participado de projetos complexos

Desejável conhecimento UX, ferramentas gráficas, Oracle e delphi

Local de trabalho: Alphaville

Empresa oferece salário compatível, fretado, ótimo ambiente, propício a troca de experiências.

Interessados enviar CV com pretensão PJ mensal para mim.

Grato!
Laerte Martins
Coord Desenv Sistemas

Laerte Martins
Amil Assistência Médica Internacional S/A.
LaerteMartins@amil.com.br
+55 (11) 3638-1803

———————————————————————————————–
Vaga para todo o Brasil

Pessoal,

Bom dia, a jobconvo.com esta procurando/precisando de parceria para projeto
em flex, foco será atuar no corte e montagem do front-end.

Em qualquer lugar do brasil, para trabalho em home office.

Mande curriculum/portifolio para daniel@jobconvo.com

Abraços,

Daniel Romualdo
Skype: daniel.romualdo26

———————————————————————————————–

PHP

Classe em PHP para Geolocation

Tem coisa mais legal do que você compartilhar alguma coisa com uma outra comunidade ao qual você não faz parte.

Essa aqui é minha mínima contribuição para o pessoal do PHP que gostaria de transcodar um endereço e pegar suas coordenadas ou simplesmente a latitude e longitude.

A classe é hiper simples e de uso genérico, se você está em busca de coisas mais sofisticada eu aconselho você visitar esse site.

Como funciona?

 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
 
<title>Geo Localização</title>
</head>
 
<body>
 
<?php
		include("GeoLocation.php");
 
        $geo = new GeoLocation();
       $resposta =  $geo->getGeoInfo("Sao Paulo,SP");
 
 
		print_r(var_dump($resposta)); // faz o output em Array do geo
 
 
 ?>
</body>
</html>

Código fonte da classe

 
<?php
date_default_timezone_set('America/Sao_Paulo');
 
/**
 
 Geolocation Class is stupid simple it's uses Google Maps Webservice to grab geo location or just simple
 Latitude and Logitude from requested address
 
   We have two simple methods getGeoInfo and getLatLong
 
    getGeoInfo - Returns all Data from requested address
	getLatLong - Returns only coordinates of Latitude and Longitude
 
 
	This class is provided by twitter.com/igorcosta
 
	For more info on Google geocoding visit http://code.google.com/apis/maps/documentation/geocoding
 */
class Geolocation {
 
 
			/**
			Return all geo information against requested address
			*/
 
			public function getGeoInfo($endereco)
			{
				$url = "http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($endereco). "&sensor=false&language=pt-BR";
				$retorno = false;
 
				if(!is_string($endereco))
					die('Precisa ser em String');
				else
					$resultado = file_get_contents($url);
 
					$retorno = json_decode($resultado);
 
				return $retorno;
			}
 
			/**
			 Status : "OK"  indicates that no errors occurred; the address was successfully parsed and at least one geocode was returned.
			 Status : "ZERO_RESULTS" indicates that the geocode was successful but returned no results.
			 Status : "OVER_QUERY_LIMIT" indicates that you are over your quota.
			 Status : "REQUEST_DENIED" indicates that your request was denied, generally because of lack of a sensor parameter.
			 Status : "INVALID_REQUEST" generally indicates that the query (address or latlng) is missing.
			*/
			public function getLatLong($endereco)
			{
				$url = "http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($endereco). "&sensor=false&language=pt-BR";
				$retorno = false;
 
					$resultado = file_get_contents($url);
					$retorno = json_decode($resultado);
					if($retorno->status == "OK")
					{
						foreach ($retorno->results as $item)
						{
							$loc = $item->geometry;
							foreach ($loc as $location)
							{
								$lat = $loc->location->lat;
								$long = $loc->location->lng;
							}
						}
						$coordenadas = array($lat,$long);
						$retorno = $coordenadas;
					}else{
						$resp['resposta'] = $retorno->status;
						$retorno = $resp;
 
					}
 
				return $retorno;
			}
 
}
?>
AIR 2.7/ Flex/ Flex 4.5/ Flex Mobile Framework

Criando seu primeiro aplicativo Flex 4.5 Mobile para smartphones Android parte (2 de 3)

Caso você tenha chegado direto nessa matéria, ela é uma série de 3 partes, essa é a segunda. Se quiser ler do começo, clique aqui.

A estrutura de uma aplicação Android

Uma aplicação Android é como um arquivo .zip, de fato sua extensão .apk é um pacote com a mesma estrutura de um arquivo .zip, onde tem todos os elementos necessários para serem identificados no sistema operacional e assim sua aplicação existir e ter funcionabilidade.

Então, assumindo a premissa que um arquivo .apk seja uma aplicação Android, sua estrutura parte de 3 pilares básicos.

  • Código fonte escrito em Java e usando API do Android SDK
  • Estrutura de organização do projeto
  • Arquivos de mídia

filestructure

Com essa estrutura simplificada você consegue entender facilmente onde vai caber o arquivo de .swf que é embarcado dentro de seu pacote .apk, Na pasta de arquivos de mídia.

Essa pasta guarda o swf compilado com o Flex Framework e as suas classes em um único SWF, evitando assim os preloads, ou erros de fuga que possam ocorrer durante o processo de uso da app, garantindo não só a solidez de uma aplicação flex mobile como sua portabilidade entre diferentes telas e requisitos de sistema Android.

flex_apk_estrutura

Na imagem acima, você pode ver que o time do Flex conseguiu adotar o padrão “assets”, amplamente usado por apps RIA. Vai dizer que você nunca colocou seus ícones dentro desse diretório? A pasta assets substitui naturalmente a pasta /res que guarda esses recursos.

Já que você viu a estrutura de onde vão as coisas, que tal se aprofundar agora no arquivo de maior importância para a estrutura de um app Android?

O arquivo AndroidManifest.xml é a espinha dorsal que faz com que um App seja um App, é o mesmo que sua coluna vertebral, embora você só lembre dela quando está com dores nas costas, a coluna vertebral nos ajuda a definir nossas capacidades musculares, andar hereto e também ter dores 😀

Em fim, o arquivo AndroidManifest.xml ele é uma espécie de coluna vertebral + nervos especiais que definem funções do que sua aplicação mobile vai acessar, requisitar, armazenar e interagir.

Tudo que você faz no AndroidManifest.xml é mapear acessos, requisições e o mais importante permissões, tudo a base de tag de XML. E uma das coisas bem fantásticas disso tudo é que o pessoal da Adobe fez isso de uma forma bem legal, deixando apenas agente se preocupar com os acessos, o que sua App vai acesssar, como GPS, Acelerometro, cartão de memória, Camera e por ai vai. O resto eles cuidam para gente.

Então você sabendo com o que você vai lhe dar, é ultra simples encarar o desafio, veja aqui as permissões existentes no Android, onde nem todas são acessíveis pelo Adobe AIR, algumas apenas são possíveis de acessar por padrão, dentre elas:

air_permissions_by_default

Ufa, chega de explicações, então está preparado para começar a criar seu primeiro projeto Flex Mobile no Flash Builder 4.5.1 ? Vamos lá.

Para criar um novo projeto é simples, existem 3 maneiras:

  • CTRL+N Cria um novo projeto pelo Wizard escolhendo a categoria Flex e depois Flex Mobile Project
  • Vá ao menu File -> New -> Flex Mobile Project
  • Ou usando o Navigator do Flash Builder com o botão direito File -> New -> Flex Mobile Project

De todas as opções, a mais rápida e que praticamente desenvolvedores usam é a terceira, por que economiza tempo na criação e atalhos.

new_flexmobile_project

Lembre-se de setar o SDK que você fez o overlay para a versão Flex 4.5.1 SDK com o AIR 2.7, é super simples de fazer isso, basta clicar na opção Configure SDKs e adicionar o diretório onde você tem o SDK com overlay.

Quando você dá um nome ao projeto, ele particularmente vira o nome da App que você está publicando para o Android Market, então dê nomes simples sem acentos para que você consiga alcançar não só a Android Market Brasileira mais a mundial.

A idéia do nome para App.

Meu aplicativo será um pesquisador de tags do twitter, onde eu vou analisar em diferentes intervalos e tags o que anda rolando na rede social, vou chamar ele de TagsMonitor.

Dado o nome da App de TagsMonitor, eu vou clicar em Next.

config_flexmobile_project

Essa próxima tela é a essência da configuração de sua App.Para não deixar de explicar cada passo, separei por tópicos para você não perder o raciocínio.

Escolhendo a plataforma de publicação

target_platforms

Com configurações extras e exatas você consegue fazer para as outras. Como agente só vai fazer para Android deixo apenas marcado Android.

Escolhendo o template para a aplicação

Existem 3 tipos de aplicação Flex Mobile que você pode fazer, esses templates definem o comportamento de como ela apresenta para o usuário final, os tipos são:
Blank – Uma tela branca onde você tem liberdade de fazer o que quiser, semelhante ao que o Flash também proporciona.
View-Base – Uma tela com um sistema de navegação para N Views(telas). Semelhante ao ViewStack do Flex 2/3.
Tabbed – Que é como o antigo TabNavigator do Flex 2/3 e semelhante ao View-Base, a diferença é que você terá abas prontas para navegar.

view_base_app

Essas diferenças são aplicadas em variados tipos de aplicações e em qual o propósito de sua aplicação. O template mais comum que usaremos é o View-Base. Marque essa opção e pulamos para o próximo tópico.

Permissões acessadas

permissions_config

Como você sabe que para consultar a internet do seu aplicativo dentro de um dispositivo Android você precisa permissões, o Flash Builder por padrão já entende isso e deixa marcado já para você. Se você quiser acessar os outros recursos basta marcar aquele que você deseja. Próximo passo.

Densidade dos dispositivos

Cada fabricante tem seu próprio formato de densidade, até mesmo usando o mesmo OS como é o Android. Uma soma geral de densidades e tipos de telas você pode achar aqui. Que é a referência básica que o Android dispõe baseado em estatísticas coletadas.

google_densidades

A coisa mais legal do Google é que eles atualizam constantemente essas densidades e tamanhos de telas;Felizmente grande parte dos 550mil dispositivos ativados diariamente são normais, tanto no tamanho da tela quanto em sua densidade, que pode variar pouco entre um fabricante e outro. Até por que existe o mundo dos tablets Android e você pode considerar também a criação para ele.

No geral a média é de 240dpi. O que já facilita para gente, que é basicamente o padrão de mercado consideramos assim.

density_config

As outras partes, acredito eu que você vai deduzir que sejam Auto-reorientação que por padrão vem marcado, isso faz sua app ficar responsiva em trabalhar tanto com o device na horizontal ou na vertical.
FullScreen marcando essa opção ele vai esconder a parte do relógio e status, rodando sempre em primeiro plano e deixando o resto da interface gráfica do sistema em segundo plano.
E a última opção que vem é auto escalonar sua aplicação para os padrões de DPI, a Adobe acredita que 160dpi está ótimo, eu discordo dessa abordagem e considero mais padrão 240dpi do que os 160dpi padrão. Seja esperto e marque essa opção e mude de 160dpi para 240dpi.

Clique em Finish. E seu projeto já está pronto para você começar a elaborar sua navegação.

Para fazer a prototipação desse App, usarei o Balsamiq Mockup, bem simples para você prototipar suas apps ou qualquer coisa. Se você tem a licença do Balsamiq, aqui está o código gerado do meu mockup, basta importar para a ferramenta e dá continuidade ou alterar.

mockup

Eu acabei chegando nessa configuração para esse novo App, é bem simples e funcional. O propósito desse App é ajudar você acompanhar hashtags ou termos utilizados no Twitter em um intervalo de tempo, ajudando você acompanhar as reações.

Navegando entre as views

Navegar entre as telas de uma App móvel é muito simples, e o pessoal da API bolou um esquema bem funcional, quando você imagina em telas você imagina a navegação saindo de um ponto A na tela A para um ponto B na tela B.
Apps móveis é 90% parecida com esse esquema de navegação, só que existem 2 fatores essenciais que as mudam, uma que a API só te leva de um ponto A da tela A para Tela B, não existe esse certo centrismo de um ponto específico para a outra tela; E o segundo fator que leva essa navegação é a maneira como você interage com ela, seja por toque ou seja por gesto, inverso do tradicional clique ou duplo clique de mouse.

navigator

Na imagem acima, você pode ver que a API utilizada pelo Flex para navegar entre Views, que é o componente principal de uma aplicação Flex Mobile é uma exclusiva palavra reservada que faz toda a diferença e dinâmica para trazer à vida sua App.

O “navigator”, é a palavrinha mágica que faz essa navegação, digamos que ela seja um Array que guarda o registro de cada tela, onde você executa alguns comandos básicos para navegar entre as views através dela. Esses comandos básicos são:

  • navigator.pushView(viewClass,data,context,transition);
  • navigator.popAll(transition);
  • navigator.popToFirstView(transition);
  • navigator.popView(transition);

Se você conhece bem de Array, sabe que comandos do tipo Pop, push, geralmente são associados a remoção e adição. É justamente isso que esses comandos faz, o primeiro o pushView, adiciona uma nova View ao navigator, o popAll, remove todas as Views do navigator, o popToFristView remove todas as telas, exceto a primeira, e o popView remove a View atual e volta para View anterior.

Definindo suas Views

Eu já sei como funciona a navegação, então vamos criar nossas Views, a primeira coisa que você deve pensar é em organiza-las, o Flash Builder deixa já por padrão dentro de um diretório views, eu particularmente gosto dessa configuração, deixando as views em um só diretório e colocando o inverse domain suas classes que irão manipula-la é quase perfeita sem precisa nenhum design pattern.

Minha primeira tela é a HomeView.mxml

home_view

Ela tem o seguinte código.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		actionBarVisible="false" title="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Rect width="100%" height="100%">
		<s:fill>
			<s:SolidColor color="#52a2cb"/>
		</s:fill>
	</s:Rect>
	<s:Image x="74" y="48" source="assets/logo.png"/>
	<s:Label x="56" y="357" color="#FFFFFF" text="20 Tags"/>
	<s:Label x="304" y="357" color="#FFFFFF" text="30 Menções"/>
	<s:Button x="73" y="428" width="333" height="65" label="Novo hashtag"
			  icon="assets/tag_add_48.png" skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Button x="73" y="505" width="333" height="65" label="Hashtags pesquisadas"
			  icon="assets/book_bookmark_48.png" skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Button x="73" y="580" width="333" height="65" label="Configurações"
			  icon="assets/gear_48.png" skinClass="com.riacycle.skins.WhiteButtonSkin"/>
</s:View>

A próxima tela que eu preciso criar é a NovaView.mxml

nova_view

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Nova hashtag">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:navigationContent>
		<s:Button icon="assets/arrow_left_48.png"/>
	</s:navigationContent>
	<s:Button x="231" y="157" width="218" height="66" label="Adicionar" icon="assets/plus_48.png"
			  skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Label x="43" y="51" color="#3A74CC" text="Termo"/>
	<s:TextInput x="42" y="82" width="403" height="64"/>
</s:View>

A próxima tela HashtagView.mxml é onde eu vou acompanhar as menções feitas pelos usuários do twitter.

hashtag_view

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Termo: #exemplo">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:navigationContent>
		<s:Button icon="assets/arrow_left_48.png"/>
	</s:navigationContent>
	<s:actionContent>
		<s:Button icon="assets/arrow_circle_right_48.png"/>
	</s:actionContent>
	<s:List left="2" right="2" top="2" bottom="2"></s:List>
</s:View>

E a última View necessária para montarmos nossa App é a ConfigView.mxml onde, algumas configurações básicas serão adicionadas ao nosso App, para deixar ele um pouco personalizado.

config_view

Com o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Configurações">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:navigationContent>
		<s:Button icon="assets/arrow_left_48.png"/>
	</s:navigationContent>
	<s:actionContent>
		<s:Button icon="assets/checkmark_48.png"/>
	</s:actionContent>
	<s:HSlider x="20" y="158" value="4"/>
	<s:Label x="19" y="37" text="Configurações gerais do App"/>
	<s:Label x="19" y="123" text="Intervalo entre consultas"/>
	<s:Label x="318" y="215" fontStyle="italic" text="Em minutos"/>
	<s:Button x="88" y="354" height="65" label="Apagar todo o histórico"
			  skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Label x="22" y="317" text="Histórico de pesquisas"/>
</s:View>

Bem, até aqui nós definimos todas as Views que esse App pode apresentar, assim como um preview de cada dela, elas podem mudar no decorrer do artigo com algumas modificações simples e essenciais.

Para você acompanhar como ficou a organização do projeto, compartilho aqui o código fonte do projeto para você importar para seu Flash Builder.

Dica: Para salvar basta clicar no link com botão direito do mouse e escolher salvar como…

Até a próxima e última parte do artigo onde eu vou mostrar como codificar isso e publicar no Android Market.

Pessoal

Obrigado Steve Jobs

steve_jobs

Mesmo sendo um grande usuário do Windows e sempre sendo um grande fã de padrões extras Apple, eu tenho muito que agradecer ao senhor Steve Jobs, sua visão e sua contribuição para a era digital.
Não foi só os “i” que me influenciaram, mais tipografia, fontes, ambiente gráfico, mouse, bateria de lithium, música portátil em formato mp3, touch screen, simplicidade nas coisas, animações em computador, efeitos FX em filmes e o mais importante, amar aquilo que você faz. Essa foi a grande influência que Steve Jobs deixou marcado para mim e para minha visão do que eu acho e acharei para o futuro por adiante.

Assim como Steve Jobs, um outro grande homem me inspira diariamente, Randy Pausch.

Assista sua última palestra para universidade de Stanford.

Minhas sinceras condolencias e pêsames para sua esposa, filhos e todos seus colaboradores da Apple.