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.

 

AIR Mobile/ Blackberry/ Flex Mobile Framework/ iPad/ Iphone/ Negócios/ Notícias

Flex, Dinheiro e Mobile venha a ver no Campus Party 2012

campusparty2012

Fala meus queridos leitores. Como foi o mês de janeiro para vocês? Muita coisa bacana rolando na IDE, Git, celular?

Deixa eu te contar, hoje começa o Campus Party 2012. O maior evento da TI da América Latina, com muito nerd por metro quadrado já visto. Se bem que essa visão de Nerd já é ultrapassada, alias, lá você verá muito empreendedor jovem, cheios de idéias brilhantes para colaborar com o futuro do país. É assim que eu vejo o evento.

Esse ano dentre várias novidades, uma delas a minha favorita Michio Kaku, e também os 20G/s de conexão. Quem sabe um dia não temos uma conexão dessas por R$9,99??

O Campus Party mudou de lugar, agora está no pavilhão do Anhembi, o mesmo que acontece o Salão do Automóvel. Bem melhor mesmo, visto que é mais fácil de chegar de metrô ou taxi.

Ano passado eu palestrei lá, quem não viu, pode assistir novamente aqui. Passou-se o ano e o David me chamou para palestrar mais uma vez no evento. Eu aceitei o desafio e vou levar comigo 2 palestras.

No dia 10/02 será as duas palestras, a primeira sobre Flex 4.6 e os avanços no SDK, além de falar também um pouco da mudança para fundação Apache.

Adobe Flex 4.6: três plataformas e um só código fonte.

E a outra palestra tem mais a ver com ganhar dinheiro no mundo móvel

Como ganhar dinheiro no mundo mobile?

Nessa palestra, eu vou falar de minhas frustrações e alívios em diferentes plataformas, diferentes SDK e diferentes políticas de distribuição de Apps. Além disso, claro, como tirar proveito e ser lucrativo com Apps.

Eu vejo vocês na área de Inovação(Ala Azul) da Campus Party 2012.

Até breve.

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.

AIR Mobile/ Blackberry/ Flex Mobile Framework

Porte sua app para o tablet da BlackBerry e ganhe um (Playbook tablet) novinho em folha

É, você não ouviu errado, a BlackBerry está com uma ótima promoção para desenvolvedores adotarem sua plataforma de uma vez por todas.
Tanto é que agora no Blackberry DevCon Américas, todos os participantes da conferencia irão sair com um tablet novinho em folha.

A promoção é a seguinte:

Você se registra como membro de parceiros da Blackberry pela bagatela de US$699, usando o código DSTSH5. Ou seja 2 coelhos com 1 paulada só.
Registre-se para a conferência até o dia 17 deste mês de Outubro,2011. E sai com um Tablet novinho para portar sua App.

A Blackberry tem um excelente ecosistema que tem atraído muitos desenvolvedores para adotar a plataforma, tanto é que suporta Adobe AIR, Flex, Flash, Actionscript, Java,tecnologias Web em geral.

Acesse agora e registre-se para o Blackberry DevCon Américas.