HTML 5/ HTML5 / CSS3

HTML5 e SSE

sse

Se você nunca fez um loop ou um timer para sempre consultar uma determinada URL e atualizar informações, então você nunca passou por um processo de criação de software.

Atualmente temos vários protocolos de transferência de dados entre o lado cliente e servidor. Hoje como é mais conhecido como “Nas nuvens”, o sujeito faz requisições a um determinado serviço e a resposta é enviada “polling”, você requisita e espera que o callback da sua requisição traga a mensagem de volta.

Tanto no Flash Player quanto no AIR, nós tinhamos diversas opções de protocolos de transferência de dados: RTMP,RTMPF, Sockets, XMLSockets, HTTPRequest.

Assim, poderimos fazer long-polling, real time data transfer (RTDF) e deixariamos muitos usuários contentes.

O problema é que se você quer fazer algo totalmente ao vivo, a coisa complica, esbarramos em altos preços de softwares, diversas modificações nos canais de comunicação e em fim conseguir a tal adaptação do model. Ok até ai você faz isso de letra, já que não é tão trabalhoso quanto parece.

É ai aonde entra o SSE ( Server Sent Events ) “eventos enviados pelo servidor”, trata-se de uma nova especificação publicada no W3C por um Ian Hickson engenheiro do Google onde torna as coisas mais simples.

Long polling, short polling, todos querendo ou não sempre vão ficar dependentes das requisições do cliente em um canel multiplo, o SSE já atua um pouco diferente dessa forma. A idéia é trazer para o cliente a resposta mesmo sem sua requisição ser feita.
Pera ai?! Eu estou no ano certo? Em fim, isso já existia à um certo tempo, a galera do Java que o diga, mais agora é legal saber que você com puro javascript pode fazer isso sem ter que re-inventar a roda.

[browser_suporte ie=”no”] [pullquote align=”left”]Na plataforma Mobile Funciona no Firefox OS, iOS e Blackberry 7/10[/pullquote]

O SSE apesar de novo já dá suporte a várias plataformas, afinal quem não quer algo simples como esse. Todos querem dados via stream para seus clientes de maneira fácil.

 

Exemplo prático.

sse

Ok, já que eu não fujo a regra, eu escrevi um exemplo prático com gráficos, os dados vem em forma de json, e no meu lado cliente html5 eu faço o parse deles e gero um gráfico bonitão, igual esse abaixo.

 

Código do PHP stream:

<?php
//header('Content-Type: text/event-stream; charset=utf-8'); // importante ter
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // só pra prevenir cache
 
 
$dados = array(
		array('empresa' => 'GFSA3','valor' => mt_rand (1.7*10, 40*10) / 10),
		array('empresa' => 'PETR4','valor' => mt_rand (4.3*10, 30*10) / 10)
	);
echo "data: " . json_encode($dados) . "\n\n";
flush();
?>

 

Código do lado cliente:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<meta charset="utf-8">
<title>Exemplo de HTML 5 com Server Sent Events</title>
<style type="text/css">
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
#graph {
	text-align: center;
	margin:0 auto;
}
</style>
<script type="text/javascript">
 
var chart;
 
 
 
 	$(document).ready(function() {
 
 	chart = new Highcharts.Chart({
      chart: {
        renderTo: 'graph',
        type: 'areaspline',
        marginRight: 10,
        marginBottom: 50,
        zoomType:'x'
      },
      title: {
        text: 'Portifolio de Ações'
      },
      xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
        },
 
      yAxis: {
        labels: { 
          enabled: true 
        },
        gridLineWidth: 1,
        title: {
          text: 'Valor',
        },
        plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
      },
      series: [
      {
        name: 'Gafisa ON',
        data: [4.3,4.0,19.3]
      }, 
      {
        name: 'Petrobras ON',
        data: [4,18,3]
      }],
      plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, 'rgba(2,0,0,0)']
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                                radius: 5
                            }
                        }
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            }	
    });
 
 
	  if(typeof(EventSource)!=="undefined")
	  {
		var source=new EventSource("cotacoes_stream.php");
		source.onmessage = function(e){
      		var result = $.parseJSON(e.data);
      			chart.series[0].addPoint([(new Date()).getTime(),Number(result[0].valor)], true, true);
      			chart.series[1].addPoint([(new Date()).getTime(),Number(result[1].valor)], true, true);
		}
	 	}else{
	 		alert('Server Sent Events não é suportado pelo seu navegador');
	 	}
 	});
 
</script>
</head>
 
<body>
	<div id="graph"></div>
 
</body>
</html>

Existem várias outras opções mais completas, como o próprio webSocket, só que devido a sua falta de suporte em determinadas plataformas, fica inviável usa-lo.

Porém a grande vantagem do SSE é praticamente coisas simples que vão te tirar do sufoco quando você precisar fazer algo para prototipação com dados reais.

Esse é um exemplo de um material de curso que estou preparando. Aconselho também você dá uma estudada na especificação e verificar as outras configurações que o SSE possui.

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.

 

HTML 5/ HTML5 / CSS3/ JQuery

Criando tags do HTML 5 nos navegadores IE 9

Se você desenvolve em HTML e está migrando para HTML 5, provavelmente você pode ter atribuido algum tag que não seja suportado no IE 9, que a Microsoft insiste em não dá suporte padrão.

Porém nada está perdido, você pode forçar o navegador a aceitar os novos tags, basta escrever os elementos caso seja necessário.

Aqui vai um snippet salvador nessas horas.

<!--[if lt IE 9]>
<script type="text/javascript">
	var e = ("abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video").split(',');
	for (var i = 0; i < e.length; i++) {
		document.createElement(e[i]);
	}
</script>
<![endif]-->

Fácil não? O DOM model do IE permite escrever o que os gênios da Microsoft não fazem por padrão.

HTML 5/ HTML5 / CSS3/ JQuery/ Web 2.0

10 mitos da incompatibilidade nos navegadores para HTML/CSS/JS

Quem anda de cabresto, sempre tende a olhar para baixo, excluindo a curiosidade de olhar o mundo exterior ao seu redor, depois que eu saltei da minha zona de conforto a 10 meses atrás, eu tinha a notória sensação de que eu descobria coisas novas a cada segundo, e as lembranças da zona de conforto me acomodaram mal, muito mal por sinal.
Uma das coisas que te deixam infeliz é a tal preguiça de inovar, justamente por que confortavelmente você acha que nunca precisa mudar, e nessa migração constante deparamos com mitos criados ou expurgados por quem não dá a mínima atenção em inovar e ser competitivo.

Quando eu comecei a estudar HTML5/CSS3/JS, eu tinha aquela sensação de mal estar adquirido, achando que nada prestava, tudo precisava melhorar, CSS então era a brincadeira de estica e puxa,Deus nos acuda!

Ao passar das semanas eu fui percebendo que os navegadores evoluíram bastante, frameworks e desenvolvedores de padrões web colaboraram para essas evoluções e no final percebi que quem estava atrasado na história era eu mesmo.

Então somei o que eu achava mito e decidi escrever esse post para você abrir sua mente e se liberar de seus medos.

10 Mitos da incompatibilidade nos navegadores

MITO 1 – HTML e CSS é feito para fazer sites e não sistemas.

Resposta: Então você nunca usou o Hotmail, Gmail, adWords, adSense na vida, você nunca usou itaú bankline, Bradesco on-line e por ai vai. o HTML e CSS é poli valente, funciona para tudo.

MITO 2 – Tenho que fazer vários ifs e elses para suportar N navegadores

Resposta: Não há necessidade, já que existem N frameworks no mercado que fazem a manipulação perfeita entre engines de navegadores, grande parte dos navegadores usam webkit/gecko e o único a usar um engine diferente é o IE com seu msie, porém na última versão 8, já vem com suporte a padrões web.

Frameworks que podem te ajudar a quebrar esse mito: JQuery, MooTools, EXT Js, Script.aculo.us, ProtoType.

Ou seja, alternativas é o que não falta para esse mito, já que todos peleijam em achar que irá voltar a época das cavernas por manipular DOM de cada engine de navegador.

MITO 3 – HTML5 é incompatível com navegadores

Respota: Desde quando HTML é incompatível com navegadores? HTML5 nada mais é que uma nova versão do HTML, existem alguns recursos como WebGL, Canvas, Audio, Video, codecs de audio e video que são específicos de cada navegador, que ao total 93% de todos os recursos que você vai usar em um único projeto é compatível com todos os navegadores.

Caso você ainda tenha problemas em achar que o HTML5 pode não rodar perfeitamente no IE7,8 você pode usar bibliotecas já prontas para isso. Uma delas inclusive é amplamente utilizada, a Modernizr.

MITO 4 – Não posso usar MVC em uma aplicação web feita em Javascript e HTML

Resposta : Mito detonado, no bom estilo caçadores de mitos, desde que javascript é javascript, e tudo é Objeto. Então eu manipulo qualquer objeto aplicando qualquer padrão existente, Aconselho você usar esse slides para te influenciar a pensar diferente.

MITO 5 – Não consigo criar interfaces com facilidade como no Flex

Resposta: É por que você não conhece o JQuery UI, YUI, Prototype UI, UKI, MochaUI, Livepipe UI, Alloy UI e GWT. Ou seja, alternativas para você criar interfaces não faltam.

MITO 6 – Aplicações Web feitas em HTML 5 e CSS3 não são cross-plataforma.

Resposta: Navegadores hoje são cross-plataformas, rodam no Linux, MAC, Windows, ios, Android e Windows Phone. Se sua aplicação fica na caixinha de areia do navegador então ela também será cross-plataforma, não tendo a necessidade absoluta de portar seu aplicativo para diferentes plataformas. Assim como no Flash Player ser cross-plataforma, é por que ele tira proveito dos navegadores.

MITO 7 – Aplicações feitas em HTML5 e CSS3 são lentas

Resposta: Uma vez que sua aplicação pronta, ela trafega muito mais rápido para o navegador do usuário do que seu SWF, já que não é compilável, é apenas lida.
O Flex compila o que você escreve em um SWF, esse SWF é binário, como uma imagem em JPEG ou PNG é. A diferença é que uma vez baixado ele se torna mais rápido por que não é interpretado. Já com HTML, CSS e JS ele é interpretado sempre que você manipula.

A grande vantagem está no tráfego de dados e na re-utilização do sistema, á que por padrão ele tem cache ativo. roda muito mais macio no navegador e não depende de plug-in.

MITO 8 – Em aplicações Web eu não consigo fazer Sockets, usar o AMF

Resposta: Você consegue sim, WebSockets são novidade, são feitos em js, veja o Node.JS. E AMF conheça o AMFJs.

MITO 9 – As IDE atuais são péssimas, produtividade ZERO

Resposta: Mito detonado também, existem N IDEs excelentes uma delas é as IDEs feitas pela JetBrains, compatíveis com os padrões do mercado e cheia de recursos, outras tão boas são para o Eclipse como o Aptana. E claro o Dreamweaver CS5.

MITO 10 – Meus aplicativos são re-escritos sempre que for criar uma versão mobile deles.

Resposta: Existem 2 posibilidades de você usar HTML, CSS e JS em aplicações Móveis, uma é usar os Media-Queries de CSS, fazendo o layout de suas aplicações responsivas. Ou criando um aplicativo específico para Mobile usando o mesmo HTML 5 e CSS3 feito para versão Web/Desktop.

Então se você chegou até aqui, é sinal que alguns mitos já passaram por sua cabeça e a dúvida pairava no ar. A minha sugestão é, ajude outras pessoas a se libertar desses mitos.

Flex/ Notícias/ Pessoal

Onde está o futuro do Flex?

Wow! Que semana foi aquela heim?! Muito se foi dito, muito ainda estará por ser. E eu faço a pergunta, onde você quer estar?

No apagar das luzes da última semana na sexta-feira, o time de desenvolvimento do Flex SDK, fez uma declaração um tanto assustadora para todos aqueles que gostam de ficar sempre na zona de conforto. E logo em seguinda (Ontem), fez uma atualização esclarecendo melhor o que fora escrito, acalmando mais os ânimos daqueles que estavam assustados.

Curiosamente, nada disso me colocou em cheque! Ou amarelado pelo fato das declarações feitas por parte do time do Flex ou Adobe. É ai onde eu explico minha história com o Flex.

Onde?
Tudo começou em Outubro de 2003, quando nos pre-releases da Macromedia existia um produto chamado Royale(Flex SDK) e Brady(Flex Builder). Nessa época eu já criava hotsites com o Flash e tinha feito 2 jogos muito utilizado no Flash Lite para dispositivos Nokia.
Eu estava em minha zona de conforto quando apareceu o Flex e a proposta que me chamou mais atenção, naquele produto em teste foi o gráfico comparativo do Apps 1998 client/server, HTML/js e Rich Internet Applications.

Eu já tinha feito apps no Flash MX, e foi nessa época que começou o termo RIA, só que existia um grande problema, o fato de não dá suporte totalmente a uma linguagem mais poderosa, deixava esse termo enfraquecido, já que surgia no mercado outros compiladores mais robustos para Actionscript 2.0 o Motion Tween e um outro chamado SWFMill. Ambos até hoje existem.

Foi ai que surgiu o Flex, a grande proposta dele era criar Apps usando sintaxe MXML e o recém lançado Actionscript 3.0. Nossa! Que mudança eu pensei, saímos da água suja do esgoto para os melhores frascos de perfumes da França.

Então, decididamente eu larguei tudo que eu fazia em Flash, era meu porto seguro e cair de cabeça no Flex, foi assim que surgiu a 3 lista sobre Flex no mundo a Flex-Brasil. Ainda hoje é a 2th maior. Eu finalizei minha frase de boas vindas com a mensagem

“E Deus disse, vão e se ploriferem” <-- vamos fazer isso

Como eu era um poeta e apaixonado heim! E não é que foi justamente isso que aconteceu? Foi dai que surgiu a comunidade Flex no Brasil, foi dai que saíram grandes profissionais e foi dai que muitas empresas tomaram por base para adotar o Flex como tecnologia.

Esse foi o Onde.

Quem?

Quem realmente cresceu a comunidade? Todos, uma comunidade precisa de apenas uma idéia e alguém que a defenda, se você tiver isso, você consegue constrúir uma comunidade, foi e é hoje uma grande comunidade, não feita por mim, mais feita de uma ídeia, quantas pessoas hoje não vivem de Flex por que começaram ali?
De lá para cá, eu consegui ser sortudo o bastante para treinar aproximadamente 3 mil pessoas, ter viajado por todo o Brasil menos no estado do MT, preciso conhecer esse lugar, tudo através da tecnologia Flex. Tem horas que eu me pergunto, valeu a pena? Até hoje vale a pena, quantas dessas 3 mil pessoas não treinaram outras ? e essas outras, outras também?

Uma comunidade é baseada em 3 pilares, Auto sustentável, colaborativa e continuidade.

Auto sustentável, é que gere receita para quem escolhe a tecnologia adotada.
Colaborativa, que os membros da comunidade se ajudem.
Continuidade, é que as pessoas acreditem na idéia que comparam, querendo ou não são idéias que movem o mundo.

Fantástico todos esses últimos anos, sem falar a quantidade de pessoas que eu conheci, fui e sou muito feliz por isso. Em cada canto desse país eu tenho um amigo, eu acredito que sou milhonário por isso. Tudo isso proporcionado por uma idéia lançada a 7 anos atrás.

Eu sou referência no Flex? Não, eu sou referência em amar o que faz.

Nunca fui apegado a tecnologia, eu fui sempre apegado a idéias, amo minha esposa, a família, meus amigos e até meus inimigos. Eu sou bastante apegado ao que eu faço, eu amo todos os dias acordar e tentar resolver problemas, geralmente dos outros.

Tive sorte o bastante de achar aquilo que eu gosto de fazer logo cedo. E minha mãe achando que eu me tornaria um cardiologista, nada a ver né? Hoje sento todo dia, ligo minha parafernalha tecnologia, faço algumas ligações diariamente e continuo ganhando o dia.

Tem dias que é um saco, mais ao final dele você sabe que fez algo de melhor, colaborou para um mundo menos complexo. Organizou mais as coisas e aos poucos você vai matando o papel e tudo que é tocavelmente simples.(A moda antiga).

Esse foi o Quem.

Quando?

Toda a minha empolgação com uma tecnologia Flex, veio acabando naturalmente a medida que tecnologias emergentes vem à tona. De 1 ano para cá, eu sempre venho estudando aquilo que me deixa confortável, que tenha um mesmo nível de raciocínio que o Flex possui.

Flex veio em uma boa época onde navegadores eram lentos, existiam apenas 3 players grandes no mercado ( M$ IE e Mozilla Firefox, Safari). Somente quando o Google entrou no campo de navegadores com o chrome eu percebi que muita coisa boa ia acontecer aos padrões Web. O que de fato aconteceu nos últimos 2 anos.
Novas engines, novos frameworks Javascript, padronização ironizada do HTML5. E de fato um novo mercado tinha surgido, meio que tímido, mais com uma tecnologia não tão compreendida.

Foi quando a Apple, entrou na briga e falou que o Flash era da era dos PCs, foi onde começou toda a murmurização do assunto.

Defensores dos padrões, cairam matando uma tecnologia que mal eles sabiam era a mesma utilizada nos caixas eletronicos do Itaú, Unibanco. Mal sabiam eles que as companhias aéreas faziam uso deles, mal eles sabiam que os primeiros infográficos no mundo eram feitos em Flash.

O grande problema do Flash Player foi ter como mãe a Adobe, ela nunca foi boa em manter um nível competitivo da tecnologia, suas IDEs então nem se fala, ela é boa em efeitos visuais, ferramentas para designers. Desde então ela deu mais ouvidos à concorrência do que sua própria capacidade de ser criativa.

Foi ai que aos poucos ela mesmo foi matando a tecnologia, por que a idéia de um Player para todas os navegadores foi enfraquecendo, a idéia de uma tecnologia robusta para criação de melhores UX e UI foi morrendo, muita gente desacreditando e isso foi tornando cada vez mais relevante para mim a frase.
Está na hora de mudar.

Mudar para onde?Por quê? Eu me fiz essa pergunta centenas de vezes, fiquei por 1 ano e meio sem rumo, comecei a trabalhar com outras coisas não ligadas a tecnologia, pensei até em abandonar de vez, sabe aquela sensação de vazio que fica? Seria excesso de informação? Decidi que era hora de parar. E parei por longos 6 meses, não escrevi uma linhazinha se quer de código. Estava farto, afinal o fiasco do lançamento do Flex 4x me deixou furioso, a Adobe estava tentando colocar o SDK amarrado a suas soluções de suíte CS e esquecendo de ficar competitiva.

O mesmo compilador usado por 6 anos e nenhuma mudança drástica, foi quando em Março desse ano eu decidi que era meu último treinamento pessoal em Floripa, nunca mais eu treinaria alguém pessoalmente ou viajaria por causa do Flex.

De lá para cá eu dei atenção as tecnologias emergentes, HTML5, CSS3, Javascript,JQuery para criação de interfaces, algo que me completasse como desenvolvedor, o que o Flex já não fazia mais. Estudei muita coisa e criei muita coisa na RIACycle com essas tecnologias, até compartilhei algumas semelhanças.

Só que ai, vi que realmente não importava qual tecnologia usar, já que o próprio Flex gerava um HTML, JS,CSS para embarcar meu SWF gerado. Já que meu cliente não dava e nunca deu a mínima para qual tecnologia eu usei para criar, ele quis e sempre vai querer o produto funcional, bonito e com uma boa experiência.

É onde caiu a ficha. Tecnologia é o produto do meio e não o produto final. Você é um modelo de tecnologia ou faz dela um modelo de negócio?

É onde entra o Futuro.

A Adobe decidiu que era melhor fazer a doação do SDK para a fundação Apache(ASF), lá o SDK terá melhor visibilidade não só na fundação, mais na comunidade, outras empresas tornaram a tecnologia melhor e mais competitiva do que nunca, lá a colaboratividade será mais rápida, as respostas vão funcionar melhor.

Por que a Apache e não a fundação Spoon? Eu não acredito na fundação Spoon por 3 motivos.

1 – É baseada em 4 pessoas. Se todos estiverem no mesmo carro e por desgraça do destino sofrerem um acidente, já era o projeto.
2 – Os 4 caras são excepcionais, criadores do Robotlegs, Swiz framework, mas uma coisa é manter um framework, outra coisa é manter um SDK inteirinho.
3 – Flex SDK é baseado na tecnologia Java, quem domina o Java tirando a Oracle? Quem tem um modelo de negócio sustentável pela tecnologia Java e que o mundo inteiro usa?

O expersite da Fundação Apache é bem melhor, por que tem mais pessoas colaborando, a visibilidade do projeto será sem dúvida, notórida, já que mais e mais desenvolvedores vão colaborar com o SDK.

E quando eu me refiro ao SDK, eu me refiro aos compiladores, aos testes automatizados, a possibilidade de usar o MXML e AS3 no lado servidor, a possibilidade de compilar para JS/HTML, coisa que já está em fase de testes pela Adobe com o novo compilador Falcon.

O Fato é, Flex tem ou não tem futuro? TEM FUTURO, e seu futuro será brilhante, desde que o Flex 3.0 entrou como produto Open-source, ele foi muito mais adotado por grandes empresas, por que temos 2 fatores, 1 depender apenas de uma corporação para cria-lo e outra é depender apenas da comunidade.

Tem que ter 2 pilares fundamentais para que uma tecnologia se sustente, seja ela Flex ou outra qualquer, é a forma híbrida da coisa, tanto uma organização séria e respeitada e uma comunidade inteira que acredita em um ideal sobre um produto.

Não é atoa que até hoje o Windows XP é utilizado em grande escala, mesmo a Microsoft afirmando que parou de dar suporte.

O Flex é o produto do meio, ele terá sempre um espaço e seu espaço tende a crescer mais ainda com seus concorrentes, ele continua sendo inovador, criando Apps móveis, criando Apps desktop e criando Web Apps.

O que você como desenvolvedor não pode ficar esperando é que tudo venha pronto, nada vem de graça, tem que tomar na marra, na garra, você tem que colaborar, tem que incentivar, tem que acreditar naquilo que você faz. Seja você empregado ou empregador.

A tecnologia Flex tem sído uma grande ferramenta que não depende apenas do Flash Player, ela depende da boa vontade de quem a faz.

Se seus gerentes lê matérias sensacionalistas e tomam decisões baseadas nelas, cabe a você acreditar naquilo que você faz, e não em mera expeculações, ele provavelmente tomará decisões que pode afetar sua vida pessoal e profissional.

Continuem apostando em tecnologias emergentes, continuem vivos e alívidos com o Flex SDK e BlazeDS nas mãos da fundação Apache, continue apaixonados elo que vocês adoram fazer, Softwares.

Não percam a empolgação, não se deixem descabídos por decisões mal feitas pela Adobe, ou pronunciamentos mal elaborados. Continuem amando o que faz, tecnologias emergentes são excepcionais oportunidades de novos negócios, de novos modelos de negócios de novas fronteiras para você.

Seja criativo, nunca deixe de elaborar novas idéias, de acreditar naquilo que você ama, quando você aprender e começar a se conhecer, você vai ver que tudo é do ponto de vista de alguém, e que nem sempre esse alguém tem razão.

Que venha o futuro do Flex, da Web, das tecnologias emergentes, eu estarei sempre de braços abertos e fazendo o que eu sei de melhor, Desenvolver, ensinar e compartilhar.

Por que eu ainda tenho muito a colaborar.

Flex/ Flex 4/ Flex Builder 4/ HTML 5

Flex 4 e Geolocation usando no navegador do seu desktop

Mundo moderno, Web moderna, querendo ou não você vai acabar criando ou vendo em algum site, a integração da sua localização com o aplicativo, e isso acaba virando regra em algumas opções que temos por ai. Imagine você ter formulários mais inteligentes, que ao invés de pegar o endereço completo do cliente, você pega sua latitude, longitude e o número da residência e complemento. Bingo! Você cativa inúmeros usuários.

O HTML 5, ou melhor HTML, tem uma API em Javascript padronizada pela W3C, que possui essa funcionabilidade, pegar sua localização através de IP ou registro do seu ponto de acesso wi-fi caso esteja cadastrado na base do NIC ou coisa parecida.

Essa API ao menos funciona nos seguintes navegadores (Firefox 3.5+, Chrome 8+, IE9+,Opera 10.6+,Safari 5), conseqüentemente se seu usuário tiver um navegador anterior a essas versões, peça-o gentilmente para atualizar, assim você consegue usar essa funcionabilidade.

Infelizmente, o Flash Player ainda não tira proveito disso. Logo em breve acredito que ele utilize esse artifício. Hoje o Adobe AIR 2.5 possui API pronta para isso, só que para celular, para Desktop você tem que fazer um workaround, ou no popular brasileiro, da-se um jeito.

O Flash Player comunica-se muito bem com o Javascript, e vice-versa. Por que não usar esse canal de comunicação e criarmos nosso aplicativo Flex que tire proveito da API do navegador já padronizada e usar a classe External Interface do Flash Player para pegar a latitude, longitude e por ai vai.

Mão na massa, ou melhor no código!

Supondo que você já tenha o Flash Builder devidamente instalado. você pode seguir o passo-a-passo.

1. Crie um novo Projeto em seu Flash Builder
2. geo

Analise a extrutura de nosso projeto, veja que existe uma pasta chamada html-template, abra ela e você vai ver que existe 3 arquivos e 1 diretório, index.template.html, playerProdutInstall.swf, swfobject.js e o diretório history

O que nos interesse nesse momento é o index.template.html, caso você esteja usando o Flash Builder puro sem nenhum editor de HTML, você pode clicar sobre o botão direito do mouse em cima do arquivo, escolher a opção Open With- > Text Editor.

Como a publicação do Flash Builder é inteiramente dinâmica, queremos que nossa função de pegar o geolocation seja dinamica. Ou melhor, respeite a execução do projeto sempre que você der um build ou run.

3. Próximo passo é criar a função em javascript nesse arquivo de index.template.html para pegar o geolocation.

Para inserir o código em Javascript, coloque no intervalo .

        

Criei 2 funções, 1 que fará a requisição, para o navegador, e automaticamente ele vai pedir ao seu usuário para permitir ou não o uso de sua posição para aquela aplicação em questão. Aparecendo um pequeno alerta do navegador. É interessante notar ou avisar ao seu usuário sobre isso, por que o alerta de pedido de geolocation é um alerta similar a barra de lembrar senha do navegador, e poucos podem não prestar atenção a essa barra e ficar sem saber o que fazer em algum determinado momento em sua aplicação.

geo2

Preste atenção na função document.getElementById, eu uso o js para aplicar o envio automático da minha localização através da passagem de parametro do meu swf, aplicando a sintaxe básica do SWFObject.

Não esqueça de marcar a opção , caso contrário ele não vai enviar a posição ou se comunicar com o js.
Por que alterar o index.template.html?

Por que sempre que você publica ou executa o Run no Flash Builder ele gera novamente um arquivo de html, swf, js sempre. Então se você altera ele uma única vez no template, você não precisará fazer isso sempre.

Okay, feito isso. Vamos ao Flex.

Crie uma nova Classe e estenda da classe EventDispatcher, eu chamei minha classe de GeoLocation.as.

package
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.external.ExternalInterface;

	public class GeoLocation extends EventDispatcher
	{

		private var _lat:String = "";
		private var _long:String = "";


		public function GeoLocation()
		{
			super();
			//adiciono primeiro o callback
			ExternalInterface.addCallback("enviarLatLong",geoInfo);
			// Chamo posteriormente o requisitarGeo
			ExternalInterface.call("requisitarGeo");
		}


		[Bindable(event="change")]
		public function get latitude():String
		{
			return _lat;
		}

		public function set latitude(value:String):void
		{
				_lat = value;
		}

		[Bindable(event="change")]
		public function get longitude():String
		{
			return _long;
		}

		public function set longitude(value:String):void
		{
				_long = value;

		}

		private function geoInfo(lati:String,longi:String):void
		{
			_lat = lati;
			_long = longi;
			dispatchEvent(new Event(Event.CHANGE));
		}

	}
}

Com a classe GeoLocation, eu consigo agora pegar as informações de localização, embora eu não tratei nenhum erro, é importante você notar isso quando for implementar, lembrando que essa classe não é visível, ela é apenas para exemplo.

Feito isso, como implementar a classe na sua aplicação Flex?

Simples, dentro do tag , eu instancio a classe, já que a chamada do processo de externo chamei no construtor. Então veja como podemos usar.




	
		
		
	
		
				
		

		
		


E voilá, temos as coordenadas estabelecidas.

geo3

Ok, com a latitude e longitude eu consigo usar o Google Maps for Flash e criar um mapa que aponte.