Android/ Blackberry/ Flex/ Flex Mobile Framework/ HTML 5/ HTML5 / CSS3/ JQuery/ JQuery Mobile

Criando uma lista de scroll infinito para seu próximo projeto Mobile

scroll_inifinito_1

Coisa boa na vida é ter desafios, puxa daqui e puxa dali, e acabamos com uma idéia nova em um novo projeto não é verdade? Outra coisa melhor é você ter alunos onde você dá suporte o tempo todo, é o que acabou motivando a criação desse artigo.

Independente de qual é seu próximo projeto, você vai acabar querendo implementar isso uma vez na vida no seu próximo projeto mobile.

Sorte sua se seu próximo projeto for escrito em Flex Mobile ou JQuery Mobile.

Como funciona o Scroll Inifinito?

Independente do tamanho da tela de seu dispositivo, você pode calcular a altura da tela disponível no aparelho vs. altura que o conteúdo produziu para ser disponibilizado, sendo que você pode pegar a posição atual da barra de rolagem “scroller” quando ela atingir a altura  total do conteúdo ou seja, quando ela não tiver mais para onde deslizar até o final.

É ai onde entra o scroll inifinito, você pegando essas variáveis e fazendo o calculo direito, você pode fazer um Append ou incrementar os elementos de uma lista existente, seja Array, Lista, Datalist não importa, você pode implementar isso de maneira fácil usando o seguinte calculo.

 

posicaoAtualDoScroll == ( tamanhoAtualDaLista – tamanhoDisponivelNaTela)

 

Assim, você pode ir incrementando a lista se a barra de rolagem atinge o tamanho máximo disponível na tela e com isso vai paginando os resultados, tanto localmente quanto via chamada de processo remoto RESTful,RTMP,Ajax.

 

Versão Flex Mobile

Para fazer no Flex Mobile, você precisa conhecer bem a arquitetura Spark, uma vez que é desacoplada, a interface do componente, você pode começar investigando o Skin atual do componente <s:List/> até chegar duas propriedades importante do Skin que fazem menção ao componente em sí, dataGroup e scroller , ambos são peça fundamental para começar a implementar tal tarefa.

O dataGroup é onde os dados são guardados na lista e scroller é o componente que faz a barra de rolagem, é com ele que observamos a mudança acontecendo da posicaoAtualDoScroll e assim fazer o uso da formula  de condição e carregar mais itens.
Já que eu observo a mudança de posição do Scroller, eu tenho que chegar até o componente e escutar via EventListener qual é a propriedade que está sendo modificada, para isso o framework do Flex tem o evento PropertyChangeEvent, ele me dá o novo valor que a propriedade sofreu.

As propriedades em questão do scroller que eu quero saber são “verticalScrollPosition” para posição vertical e “horizontalScrollPosition” para posição horizontal.

Então sabendo qual é as propriedades que eu tenho que olhar eu procuro alinhar a formula usando o novo valor menos o tamanho atual da lista sobre o tamanho da tela.

Acabei criando o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?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="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import mx.events.PropertyChangeEvent;
 
 
			[Bindable]private var dados:ArrayList = new ArrayList();
			private var proxima_pagina:int = 20; // numero de itens para carregar
 
			protected function loadItens(event:FlexEvent):void
			{
				for (var i:int = 0; i <19; i++) 
				{
					var item:Object = new Object();
					item.label = "Item "+i;
					dados.addItem(item);
				}
				lista.scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,getPosicao);
 
			}
 
			private var posicao_anterior:int;
 
			protected function getPosicao(event:PropertyChangeEvent	):void
			{	
 
				if(event.property == "verticalScrollPosition"){
 
					if(event.newValue == (event.currentTarget.measuredHeight - event.currentTarget.height)){
							carregarMaisItens();
					}
				}
			}
 
			private function carregarMaisItens():void
			{
				var indice:int = dados.length;
 
				for (var i:int=0;i<=proxima_pagina;i++) 
				{
					var item:Object = new Object();
					item.label = "Item Carregado "+(i+indice);
					dados.addItem(item);
					trace(item['label']);
				}
 
 
			}
 
		]]>
	</fx:Script>
	<s:List id="lista" dataProvider="{dados}" creationComplete="loadItens(event)" width="100%" height="100%">
 
	</s:List>
</s:View>

 

Veja que além do scroller me dá as propriedades de posição do verticalScrollPosition e horizontalScrollPosition, você precisa usar a propriedade reservada dele para pegar essas mudanças acontecendo, é como se fosse uma caixa onde a barra de rolagem vai indo porém é pre-definido um espaço onde isso pode acontecer, que é o caso da variável viewport.

 

Versão JQuery Mobile

Para fazer em JQuery mobile, é também a mesma técnica, porém uma ressalva, o componente de lista do JQuery Mobile requer que você dê um refresh no listView, é uma espécie de renderização dos itens para aplicar os estilos padrões de CSS.

A diferença entre Flex Mobile e JQuery Mobile é que no Flex eu adiciono direto ao componente, já que o pai View não é passível de ter o Scroller, já no caso do JQuery Mobile como tudo é HTML e o DOM é manipulado diretamente no documento, eu escuto as mudanças do $(window) que é a janela ou tamanho da tela disponível, assim comparo através da mesma fórmula o scrollTop que basicamente é equivalente a verticalScrollPosition e diminuo do tamanho da lista menos o tamanho disponível da tela.

O código acabou ficando assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function($) {
 
 
 
 
 
	carregarItens(20); // 20 itens 
 
 
 
 
	$(window).scroll(function()
	{
	    if($(window).scrollTop() == $(document).height() - $(window).height())
	    {
	    	  carregarItens(20); // carrega sempre 20 itens
	    }
	        
	    	
	});
 
 
 
 
});
 
 
 
 
function carregarItens(pagina){
	var tamanhoLista = $("#lista li").length; // tamanho atual da lista
	for (var i = 1; i < pagina; i++) {
		var indice = i + tamanhoLista;
		$("#lista").append('<li data-theme="c"><a href="#page1" data-transition="slide"> Item '+indice+'</a></li>');
		$("#lista").listview('refresh');
	};
}
</script>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="d" data-role="header" data-position="fixed">
        <h3>
            Exemplo Lista
        </h3>
    </div>
    <div data-role="content" style="padding: 15px">
        <ul id="lista" data-role="listview" data-divider-theme="d" data-inset="false">
            <li data-theme="c">
                <a href="#page1" data-transition="slide">
                    Item
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Da próxima vez que você ver no Twitter ou no Dzone uma lista de scroll infinito, você já saberá como implementa-la.

 

Cursos/ Flex/ Flex Mobile Framework

Ajudando alunos a inovarem e empreenderem

Já faz pouco mais de 1 ano desde o lançamento dos cursos de Mobile na RIACycle, onde eu e o Stefan ministramos treinamentos para nossos mais de 6 mil alunos nos últimos 3 anos.

Dentre esse curto intervalo de tempo tivemos cases de sucesso de nossos alunos, muitos deles retornam e nos comentam como foi fundamental aprender conosco para empreender e sonhar alto.

Esse é o caso do nosso aluno Luis Fernando Kalfels ( ex-aluno do curso de Flex Mobile), que fundou a iPro Tecnologia, junto com seu sócio. Ele nos mandou um e-mail para lá de positivo, Veja abaixo.

———- Mensagem encaminhada ———-
De: Luis Fernando Kalfels
Data: 11 de abril de 2012 15:32
Assunto: O curso de Flex Mobile rendeu nova empresa.
Para: Igor Costa

Boa tarde professor Igor.

Primeiramente venho agradecer pelo curso que realizei contigo no ano passado de desenvolvimento para Android e iOS com Flex Mobile.

E comentar que já rendeu frutos, estamos eu e meu sócio com o primeiro aplicativo lançado e publicado na Apple Store e Google Play Store.

Trata-se do aplicativo Itajaí Stopover, desenvolvido totalmente no Adobe Flex para o evento da Volvo Ocean Race no Brasil que está acontecendo neste momento em Itajaí – SC

Gostaria de lhe informar que tudo ocorreu bem, desde o término do desenvolvimento até a publicação, ou seja, tudo que foi aprendido no curso foi aplicado na prática.

Gostaria se possível, que o professor pudesse dar uma força pra gente divulgando nosso aplicativo em seu site e entre seus contatos.

Agradeço por toda ajuda.

Luis Fernando Kalfels
iPro Tecnologia Ltda.

Até na imprensa local saiu, veja

É bastante motivador, você receber e-mails de seus ex-alunos e saber que eles estão brilhando lá fora e colocando em prática o que foi ensinado.

Quando a tecnologia, associada ao comprometimento de ajudar meus alunos a sonhar mais alto e conquistar seu espaço, nada é mais gratificante que isso.

Parabéns Luis e Gorge, continuem brilhando. São os votos positivo da RIACycle e meus.

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.

AIR 2.7/ AIR Mobile/ Android/ Flex/ Flex 4.5/ Flex Mobile Framework

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

Depois de muito tempo sem tempo, olha que controvérsia, acabei com algumas horas livres essa tarde e aproveito para escrever esse post.
Quer criar Apps para Android com o Adobe AIR e Flex? Siga a receita abaixo para isso.

Ja é sabido de sua parte que o Flex cria apps nativas para Android de forma hiper simples. Se você é acostumado ao seu workflow de componentes, ciclos de vidas, você irá facilmente criar Apps elegantes, rápidas e intuitivas para dispositivos móveis.

O Framework do Flex, que usaremos é o Flex 4.5 com overlay do Adobe AIR 2.7, que conta com 4x mais performance do que o AIR 2.6. Em suma, o Flex roda em dispositivos móveis por que o AIR Run-time roda no Android.

Só que antes de você sair comprando ai seus dispositivos xing-lings ou baratinhos com o Android para testar suas criações artisticas, aconselho ler esse POST.

Para começar a brincadeira, você vai precisar de alguns ingredientes, vamos aos itens:

Antes de configurar alguma coisa, é super importante que você tenha em mente a seguinte afirmação. Eu entendo os riscos e serei um bom garoto(a), e nunca irei portar nenhum App meu com Datagrid de 100 registros dentro de uma App móvel, não farei Zilhões de operações.

Ok! Agora pode continuar.

Criando uma conta no Google e no Android Market

Esse passo é o mais simples que você encontrará nesse post, duvido que você não tenha uma conta no Google, vai dizer pajé que tu não tem um @gmail.com ? Uma continha perdida do Orkut? Ah! você vive em outro mundo que não é esse, volta para lá de onde tu veio vai! Esqueça isso de Mobile.

Ok, animos acalmados, criou a conta? Ah! Já tem? Ótimo, o próximo passo é registra-se no Android Market e se tornar um publicador de Apps lá. O processo é mega simples, entre no endereço https://market.android.com/publish/Home
android_publish_home.

Coloque seu login e senha e clique em Login, como você ainda é novato, vai aparecer outra tela perguntando seu Developer Name, dados de contato e telefone. Lembre-se coloque um nome de guerra, nome profissional, nada de vitinho, Vikky, Fofinha, LindinhadoAndroid, algo que passe credibilidade aos seus futuros usuários, Caso você seja uma empresa nem preciso fazer essas recomendações, basta colocar o nome da empresa que você quer usar como Developer Name no formulário.

android_publish_info

Clique agora em Continue.

Depois disso, você precisará dos

US$25 dolares

para fazer a sua inscrição no programa por 1 ano, se você tem conta no Google Checkout basta gastar por lá, caso contrário use algum cartão de crédito de qualquer bandeira que aceite transações internacionais.

android_publish_pagamento

Pronto, você está com a conta no Google Android Market criada e é só aguardar a liberação. Em média esse processo é quase imediato, em outros pode levar cerca de 1 dia no máximo. A coisa é rápida, então fica de olho no e-mail de boas vindas quando tudo for aceito pelo Google.

Aqui está minha dashboard no Android Market.

android_publish_dashboard

Configurando o Flex 4.5.1 SDK para usar o AIR 2.7 SDK

Como o SDK do Flex 4.5.1 ainda vem com suporte ao Adobe AIR 2.6 que é cerca de 4.x mais lento tanto no Android quanto no IOS, você vai precisar configurar seu SDK, esse processo agente chama de “SDK Overlay”, que é basicamente um CTRL+C e CTRL+V em alguns diretórios que sobrepõem arquivos antigos do AIR 2.6.

Baixou o AIR 2.7 SDK? Ok, feito isso extraia ele para um diretório de sua confiança, que seja simples de acessar. O pacote contendo o AIR 2.7 SDK tem os seguintes diretórios e arquivos.

air_2.7_sdk

Se você tem um igual, sinal que vai dar tudo certo, meio caminho andado.

Baixou o Flex 4.5.1 SDK? Ótimo, faça o mesmo processo do AIR 2.7 SDK e descompacte ele no seu diretório predileto, eu particularmente sempre deixo em um diretório meu chamado SDKs, porém nesse exemplo tem pessoas que gostam de deixar no mesmo diretório dos já existentes SDK do Flash Builder 4.5.1.

Ok, se você tem o SDK já descompactado, basta copiar o conteúdo da pasta onde você descompactou o AIR 2.7 SDK dentro da pasta do Flex 4.5.1. SDK. A idéia é sobrescrever os já existentes.

Feito? Ok, próximo passo é instalar o Flash Builder, a ferramenta perfeita para você criar suas apps, não só para Android como para outros devices, ios, BlackBerry Playbook, Web e Desktop.

Flash Builder Instalado? Perfeito, vamos agora configurar o ambiente Android para rodar sua app no console nativo que o próprio google disponibiliza.

Configurando o Android Console

Já tem o Java instalado em sua máquina? Então pule essa etapa, ela só serve mesmo para quem nunca usou o JDK ou tem apenas o JRE.

Para você testar no console, você precisa do JDK(Java Development Kit), que já vem tudo em um, então dependendo de seu sistema operacional, você precisará fazer alguns processos manuais, já no Windows é meio for dummies, é next-> next-> finish.

Baixou o correto referente ao seu OS? Instalou? Ótimo, pois agora precisamos definir as variáveis de ambiente do JAVA_HOME nas configurações globais do sistema operacional.

No Windows, vá em Iniciar – > Computador -> Botão direito do mouse -> Escolha propriedades -> Escolha aba Configurações Avançadas -> Variáveis de ambiente.

Adicione um novo registro na suas variáveis de ambiente com o nome JAVA_HOME. Olhe o exemplo abaixo.

jdk_java_home

Se você configurou tudo certinho, você pode testar no prompt do DOS do windows digitando java -version. Vai aparecer isso aqui ó.

java_version_console

Agora você está pronto para o Android SDK.

Baixando e configurando o Android SDK

Baixou o SDK? Então descompacte em um diretório de fácil acesso, eu coloquei o meu em C:/android-sdk. Para facilitar digitação de comandos.

Execute o SDK Manager, que é o carinha responsável por baixar todos os arquivos necessários do Android SDK da nave mãe Google.

android_avd

Pela primeira vez, esse processo dependendo de sua conexão com a internet, leva uma média de 1 hora para baixar todos os arquivos para seu computador.
Depois disso ele fica como o meu aqui.

android_sdk_dir

Ok, tudo configurado e instalado, vamos verificar se está mesmo. Com o mesmo comando que fiz para o java -version, usarei agora o comando adb version que é o Android Debug Bridge , para ver se executa corretamente.

android_adb

Se aparecer como na imagem acima, é sinal que tudo está correto e perfeito para criarmos nosso Android Emulator, onde iremos simular o sistema operacional Android. Prontos para esse passo?

Ah! Que esqueci, que depois que ele instalar tudo, ele vai pedir para você fechar o SDK Manager e abrir novamente, para que as alterações sejam aplicadas.

Criando o Android Emulator

Ok, volte agora ao SDK Manager e escolha a opção Virtual Devices.

android_virtual_devices

Veja que nesse meu eu já possuo 2 devices virtuais, para criar outro basta clicar em “New…”.

android_new_console

Preencha os dados de seu virtual device, assim como mostra na imagem acima, veja que eu não esqueci de criar usando o Android 2.2 API level 8, que é o necessário para o Adobe AIR rodar e consecutivamente o Flex. Como eu quero apenas testar a App nativa no dispositivo virtual eu deixei as outras configurações padrão, salvo apenas para a memória alocada de 100mb para esse console. Agora clique em “Create AVD”.

O AVD foi criado, só que agora falta executar, esse processo é bem gastante se você tem pouca memória na máquina, típicos 2GB, demora aproximadamente 20min até 30min para ele começar realmente executar, Eu por exemplo tenho 8Gb de memória e leva uma média de 5min. Se você tiver problemas na hora de executar veja se o JVM está setado corretamente.

Para executar, basta clicar em “Start…”.

android_starting

Essa tela preta é demorada, então aproveita e vai tomar um café, falar com sua tchutchuca.

….
……………
Passados alguns minutos. E eis que temos a tela inicial do Android rodando.

android_started

Android rodando, navegando na Web, agora só temos um problema, não temos o Adobe AIR instalado para testar a App, como fazer?

Instalando o Adobe AIR APK no seu emulador

Se você é por natureza curioso, dúvido você não ter bisbilhotado o SDK do Flex que você fez o overlay(Sobreposição) do AIR 2.7 no Flex 4.5.1 SDK. Abra esse diretório para você navegar nele, dentro do SDK você vai encontrar o nosso famoso AIR.apk que é necessário para rodar suas Apps.

air_apk_folder

Veja que eu fiz um mapinha de onde você vai achar o run-time do AIR para seu emulador Android, existem dois, para o Device e para o Emulador, você deve usar a versão Emulador, que é com ela que você vai conseguir emular alguma coisa. Resumindo eis aqui o caminho completo em minha máquina.

C:Program Files (x86)AdobeAdobe Flash Builder 4.5sdks4.5.1_air2.7runtimesairandroidemulator

Lembre-se seu índio, que o diretório na sua máquina pode ser diferente, se não você vai reclamar depois nos comentários que não consegiu achar o tal APK.

Eu copiei o meu para esse exemplo para o diretório raiz, C:/ para facilitar agora o processo de digitação pelo prompt de comando.

Abra o CMD(MS-DOS), e digite o comandos abaixo.

adb devices

adb_devices_list

Se aparecer o nosso Emulador em execução,é por que está tudo OK.

Para instalar é super simples, digite o comando.

adb install {NOME-DO-EMULADOR} c:/Runtime.apk

adb_devices_install_sucess

Finalmente terminamos essa parte chata de configurar a máquina, seu Adobe AIR está funcionando perfeitamente no seu device, Só que como é que eu sei que ele está instalado? Tem 2 formas, vê se o resultado do comando de instalar deu certo e também indo no Emulador, clicar em
Settings -> Applications-> Manage Applications; E você vai ver o Adobe AIR instalado lá.

air_installed

Tudo pronto, agora só abrir o Flash Builder já instalado e começar com sua App Hello World. Nos vemos na próxima Etapa.

Aproveite e participe do grupo de discussão Flex-Mobile

Android/ Flex/ Flex 4.5/ Flex Mobile Framework

Novo grupo on-line para discutir Flex em dispositivos móveis

Hoje abrimos um espaço para tirar dúvidas relacionadas ao Flex só que com foco em mobilidade.

O grupo é uma extensão do atual Flex-Brasil, onde fica mais fácil focar e ajudar desenvolvedores que queiram utilizar o Flex em dispositivos móveis.

Já tem 45 inscritos, então se você quer discutir sobre Flex em Smartphones e Tablets, lá será o melhor lugar.


http://groups.google.com/group/flex-mobile

Participe, é grátis!

Flex/ Flex 4.5/ Flex Mobile Framework

Problemas para atualizar Flash Builder 4.5 para 4.5.1 ?

Você já tinha suporte nativo para criar apps para Android no Flash Builder 4.5, porém com o recém lançado 4.5.1 você não faz apenas Android, mas para ios e BlackBerry Playbook.

E isso tem atraído muita gente na esperança de criar apps Flex para mobile, tanto é que alguns colocam defeito no Flex, achando que só serve para Android, o fato é que se você não atualiza, você vai passar batido.

O grande problema é que para atualizar, muita gente acostumada com o Eclipse vai em Help > Search Product Update. Vai ver que não é bem por ai.

Especialmente no Flash Builder a Adobe em conjunto com a suite CS 5.5 criaram um mecanismo que se atualiza. Basta usar o menu corretamente.

help_flex

Siga os passos corretamente e você terá atualizado o seu Flash Builder.

Existem casos especiais que nem assim funciona, nesse caso você baixa manualmente o update e instala, Lembre-se de fechar o Flash Builder antes de fazer isso.
Acesse esse link e baixa a versão que corresponde ao seu OS.

AIR Mobile/ Flex/ Flex 4/ Flex Builder 4/ Flex Mobile Framework/ iPad/ Iphone

Novo curso da RIACycle Flex para dispositivos móveis

Como vocês viram no último post a Adobe recentemente lançou o Flex 4.5 e Flash Builder 4.5 para criação de aplicações móveis usando o Flex.

Criação de aplicações móveis com Flex tem sido um debate pertinente em nosso dia-a-dia, assim como várias palestras.
bannerflexmobile

E através disso, acabamos de lançar o curso Flex para dispositivos móveis na RIACycle onde eu sou o instrutor.

Participe, são vagas limitadas.

AIR Mobile/ Android/ Eventos/ Flash/ Flex/ Notícias

Aplicativo do Flashcamp Brasil agora no Android Market

Aqui na RIACycle a coisa tem tido um ritmo frenético, e aguentar esse baque é coisa para poucos, por isso passo pouco tempo aqui no blog como gostaria e havia prometido no inicio de 2011 que isso mudaria.

Felizmente não é por falta de vontade, é falta de tempo. Essa semana, ou melhor hoje lançamos no Android Market um aplicativo temático para todos os participantes do Flash Camp Brasil que acontece agora dia 8 e 9 de Abril.
header
02

O Aplicativo foi feito inteiramente em Flex 4.5 SDK utilizando o Hero Build que está disponível no Labs da Adobe, com algumas modificações extras que fizemos internamente para deixar ele mais maduro para o aplicativo.

O resultado desse trabalho de 3 dias duro, você pode conferir em seu dispositivo Android.

Recursos do Flex 4.5 SDK que utilizamos:

ResourceBundle para coloca-lo multiplo idioma
Bind de recursos
JSON para tráfego de dados
StageWebView e não google maps para os mapas, o Maps do google ainda não estão optimziados em sua biblioteca para o Flash. Então utilizamos o StageWebView com o Javascript V3 do API do maps para dar aquele tchan!
Usamos RTMP para o recurso de bate-papo. Utilizando RED5, você pode usar também o FMS
Recursos de 3D, tem 1 único efeito em 3D. A performance ainda é lenta, devido o Flex SDK não tem a opção de rodar parte dos efeitos na GPU
Persistencia com SharedObject para pequenas coisas
Persistencia com SQLite

A ferramenta utilizada foi o Flash Builder Burrito que está disponível no site da Adobe Labs juntamente com o Adobe AIR 2.6 SDK recém lançado.

AIR Mobile/ Android/ Eventos/ Flex/ Flex 4/ Flex Mobile Framework/ iPad/ Iphone/ Open-source

Gravação/Slides/Codigo fonte do Flex Mobile no Campus Party Brasil 2011

Quem perdeu ou não teve a oportunidade de ir até o Campus Party 2011. Não fique triste, na TV Campus Party existe todas as gravações de cada palestra que rolou por la; Inclusive a minha.

Então quem quer aprender um pouco, rir e se interter , aqui vai a gravação publicada no youtube.

No do próximo ano você deve ir, é um evento gigante com várias pessoas do Brasil inteiro, eu achei que o público era apenas adolescentes com vontade de baixar torrents pela velocidade da internet, pelo contrário, tem vários networks rolando durante o evento e a probabilidade de sair uma start-up nova é gigantesca.

Slides da palestra: http://slideshare.net/igorcosta
Código fonte da aplicação demonstrada: Código fonte
Baixar o Flash Builder “Burrito” : http://labs.adobe.com
Baixar o PlayBook SDK e Emuladores: http://us.blackberry.com/developers/tablet/

Notícias

13 e 14 de Novembro FlashCamp Rio de Janeiro

Eu vou! e você?

No sábado as 09:00 eu inicio com uma palestra sobre o Flex 4.5 “Hero” e as novidades do Flex para hoje, amanhã e paras as próximas gerações de Experiencia rica.

Pelo que eu ja ouvir falta meia dúzia de vaga, quase lotação total o evento.

Vai perder? Visite www.flashcamprio.com.br . Tem vários palestrantes que juntos podem enviar um foguete para o espaço.

E o resto que eles fazem, fazem no dia-a-dia 😀