Apache Flex

Flex é aceito na fundação Apache

Uffa! No apagar das luzes de 2011, a fundação Apache aprovou o pedido da Adobe para incubar o Flex como projeto open-source.

Eu sou o único brasileiro no meio do SDK que irá ajudar a manter organizado o SDK daqui para frente, você também pode se tornar um colaborador, enviando bugs, criticas na página oficial do projeto que entrará no ar ainda nesse trimestre.

Tem muito trabalho pela frente, mover código para o SVN da fundação apache, arquivos de ajuda, documentação, a idéia é de fato ter um SDK 100% open-source, fora das garras de uma unica empresa.

Em contra partida, aproveito a ocasião para pedir para vocês assinarem a lista de discussão na fundação Apache.

Basta enviar um e-mail para flex-dev-subscribe@incubator.apache.org e você já está dentro da lista.

O que eu vejo daqui para frente?

Novos componentes estão sendo preparados pela própria Adobe, para ser a primeira contribuição em massa para o SDK, sob o controle da fundação Apache.

Apache Flex/ Flex

Flex SDK submetido para fundação Apache

Pelo andar da carruagem, o Flex em fim começa a andar com suas próprias pernas. E eu fico feliz com a notícia de que o SDK não vai morrer não mão de uma dúzia de pessoas que decidiram seguir apenas um caminho de seguir com a maré ao invés de continuar progredindo com seu próprio software.

Recentemente teve o Adobe Flex Summit, diferente de todos os summits que eu estive, nesse eu não consegui participar presencialmente. Mais pelo que eu fiquei sabendo foi muito bom a receptividade de quem foi.

Foram diversas notícias, a mais geral é que a Adobe ARREGOU para o HTML5, essa você já está sabendo pelo Twitter, Blogs post, Forum e/ou listas. Outra má idéia é sobre o fechamento do projeto Adobe Flash Catalyst, FELIZMENTE ela caiu a ficha que uma ferramenta feita para monetizar um SDK open-source ao extremo não deu certo; Agora eu fico imaginando, o que ela poderia ter feito com o $$ gasto para criar o Flash Catalyst, imagine a IDE que teriamos.

Falando em IDE o Flash Builder agora não tem mais interface gráfica, drag e drop dá adeus aos sobrinhos. Na minha opinião foi a melhor mudança para quem não tem saco algum de usar aquilo, agora para quem é iniciante é uma grande perca na IDE. Ao contrário do Google que quer melhorar mais ainda o Drag N Drop da IDE para criar Apps para Android, Adobe não foi gentil ou sábia em dar uma melhorada, ela simplesmente abandona.

Em fim, mudanças boas, eu até estava desmotivado, e continuo apenas com a Adobe, que jogou anos de investimentos de seus clientes pelo vento e apostou em uma tendência, Que a Adobe continue fazendo seu melhor, criar softwares para agências de propaganda, por que para enterprise ela perdeu o respeito total.

Um dos aspectos bem bacanas fora essa raiva estampada pela Adobe e sua maneira ingênua de só faturar com postscript, Ela vai fazer um excelente movimento em definitivamente doar o SDK para a fundação Apache.

Você ver isso como um grande problema?

Imagine comigo o Eclipse IDE só é hoje o que é, por que foi doado, entre outros produtos que existem por ai no mundo open-source. O diferencial se faz quando é doado o SDK e clientes o mantém, não é atoa que o Eclipse tem mais de 120 mil plug-ins para ele.

Qual próximo passo? Daqui para o dia 23 deste ano, a fundação apache vai analisar e verificar a proposta da Adobe para incubar o projeto, se ele for aceito, Aleluia! Se não for? Bom só a Adobe pode se pronunciar.

Depois que for aceito, existe um time seleto de pessoas que irão iniciar o processo de analisar e comitar código de colaboradores, você pode ser um colaborador do SDK e enviar patchs, correções.

Dentre os primeiros committers, eu estou entre eles, e farei o melhor para ajudar o SDK e a uma tecnologia que eu vejo que está muito além da realidade atual em termos de qualidade e mantenabilidade.

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/ 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

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

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.

Flex/ Flex 4/ Flex 4.5

Flex comunicando com o Skins

É possível fazer isso no mundo de duas formas, sendo um super herói ou sendo um framework do Flex. 😀

Criar skins é maravilhoso no Flex, você faz seu sistema ganhar vida, uma vida não só fantástica mais uma vida dinamica. Alguns tem dúvidas quanto e como fazer isso fluir de forma simples.

A explicação mais clara e objetiva que eu posso dar é : Veja o Camaleão. Sua pele é altamente camuflável e adaptada a qualquer terreno. Skins no Flex é justamente isso, adaptar o feio em bonito. Embora o camaleão continue feio, mudando só sua cor.

Vejamos o exemplo vivo abaixo

Requer o Flash Player

Agora veja como é feito, eu crio um novo Skin no Flash Builder com as seguintes caracteristicas.

Arquivo MySkin.mxml

<?xml version="1.0" encoding="utf-8"?>
 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
 
    <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyContainer")]
    ]]>
    </fx:Metadata>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Ellipse width="{hostComponent.raio}" height="{hostComponent.raio}" id="background" verticalCenter="0" horizontalCenter="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="{hostComponent.color}"/>
        </s:fill>
    </s:Ellipse>
 
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
 
</s:Skin>

A comunicação do skin com o componente que vai usa-lo, se dá pela palavrinha reservada hostComponent, veja que no meu tag Ellipse, eu uso ele para mudar a largura e altura usando a propriedade raio que é uma propriedade do componente que eu tenho e irei usar.

Outro detalhe é que esse skin eu seto quem será o host, ou seja quem hospedará ele.

   <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyContainer")]
    ]]>
    </fx:Metadata>

No Caso eu tenho o componente MyContainer

Que tem o seguinte código:

Arquivo MyContainer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer 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="400" height="300"
					  skinClass="MySkin">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
 
 
			[Bindable]private var _color:uint = 0x000000;
			[Bindable]private var _raio:Number = 100;
 
 
			[Bindable]
			public function get raio():Number
			{
				return _raio;
			}
 
			public function set raio(value:Number):void
			{
				_raio = value;
			}
 
			[Bindable]
			public function get color():uint
			{
				return _color;
			}
 
			public function set color(value:uint):void
			{
				_color = value;
			}
 
		]]>
	</fx:Script>
</s:SkinnableContainer>

E para usar basta eu arrastar meu Container para tela e setar via CSS ou até mesmo direto no container a propriedade skinClass.

<s:SkinnableContainer 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="400" height="300"
					  skinClass="MySkin">

E aqui é o código de App que você viu lá em cima.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:ns1="*"
			   width="385" height="340" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			protected function changeMyCompInnerSize(event:Event):void
			{
				MyComp.raio = radioChanger.value;
			}
		]]>
	</fx:Script>
 
	<s:HSlider id="radioChanger" x="143" y="303"
			   change="changeMyCompInnerSize(event)" maximum="500" minimum="10"
			   stepSize="1"/>
 
	<ns1:MyContainer color="#84C239" id="MyComp" x="59" y="35" width="265" height="229">
		<s:Label text="hello World" verticalCenter="0" horizontalCenter="0"/>
	</ns1:MyContainer>
 
</s:Application>

Fácil não? Os skins realmente são salvadores da pátria, você consegue absorver muita e transformar o que era complexo em simples. Vejamos outro exemplo abaixo.

Nesse exemplo eu usei de forma bem simples o Gauge Chart , uma pequena demonstração de como Skins podem nos ajudar e muito, principalmente criar gráficos.

Requer o Flash Player

Aqui abaixo você ver o código fonte da App de cima.

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:ns1="*"
			   width="581" height="362" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			protected function mudarValor(event:Event):void
			{
				// TODO Auto-generated method stub
				grafico.value = valorChanger.value;
			}
 
			protected function mudarPressao(event:Event):void
			{
				// TODO Auto-generated method stub
				pressaoChart.value = pressaoValor.value;
			}
 
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<ns1:MyGauge id="grafico" x="30" y="70" width="240" height="240">
	</ns1:MyGauge>
	<s:HSlider id="valorChanger" x="108" y="330" change="mudarValor(event)" maximum="360" minimum="0"
			   stepSize="1" value="90"/>
	<s:HSlider id="pressaoValor" x="399" y="331" change="mudarPressao(event)" maximum="360" minimum="0"
			   stepSize="1" value="90"/>
	<s:Label x="321" y="330" text="Valor"/>
	<s:Label x="30" y="329" text="Valor"/>
	<s:Label x="39" y="41" fontSize="22" text="Análise do Dosador"/>
	<s:Label x="313" y="40" fontSize="22" text="Pressão no catalizador"/>
	<ns1:MyGauge value="220" fillColors="{[0xe70505,0xb40909]}" id="pressaoChart" x="301" y="70" width="240" height="240">
	</ns1:MyGauge>
</s:Application>

O Componente MyGaugue.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer skinClass="GaugeSkin" xmlns:fx="http://ns.adobe.com/mxml/2009"
					  xmlns:s="library://ns.adobe.com/flex/spark"
					  xmlns:mx="library://ns.adobe.com/flex/mx" >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
 
			[Bindable]private var _value:Number = 90;
			[Bindable]private var _ponteiroColor:uint = 0x000000;
			[Bindable]private var _fillColors:Array = [0x6FC9FF,0x5380D0];
 
 
 
			[Bindable]
			public function get fillColors():Array
			{
				return _fillColors;
			}
 
			public function set fillColors(value:Array):void
			{
				_fillColors = value;
			}
 
			[Bindable]
			public function get ponteiroColor():uint
			{
				return _ponteiroColor;
			}
 
			public function set ponteiroColor(value:uint):void
			{
				_ponteiroColor = value;
			}
 
			[Bindable]
			public function get value():Number
			{
				return _value;
			}
 
			public function set value(value:Number):void
			{
				_value = value;
			}
 
		]]>
	</fx:Script>
</s:SkinnableContainer>

E finalmente o código do GaugeSkin.xml

<?xml version="1.0" encoding="utf-8"?>
 
<!--
 
    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.
 
    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.
 
-->
 
<!--- The default skin class for a Spark SkinnableContainer container.
 
     @see spark.components.SkinnableContainer
 
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
 
    <fx:Metadata>
    <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("MyGauge")]
    ]]>
    </fx:Metadata>
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!--- Defines the appearance of the SkinnableContainer class's background. -->
	<s:Group width="100%" height="100%">
 
 
	<s:Ellipse width="100%" height="100%">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry alpha="1.0" color="{hostComponent.fillColors[0]}" ratio="0"/>
				<s:GradientEntry alpha="1.0" color="{hostComponent.fillColors[1]}" ratio="1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Ellipse>
	<s:Rect x="{Math.ceil(hostComponent.width*0.5)}" y="0" width="10" height="{hostComponent.width/2}"
			rotation="{hostComponent.value}" transformX="5"
			transformY="{Math.ceil(hostComponent.width*0.5)}">
		<s:fill>
			<s:SolidColor color="{hostComponent.ponteiroColor}"/>
		</s:fill>
	</s:Rect>
	<s:RichText  horizontalCenter="0" y="30" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold"
				tabStops="S0 S50" text="{hostComponent.value}"/>
	</s:Group>
    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
 
</s:Skin>

Até a próxima e bons estudos com Skins.

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/ Flex 4.5/ JQuery

Redescobrindo o gosto pelos padrões Web : JQuery para devs Flex – Parte 4

Estou fascinado como ambas tecnologias possuem suas particularidades e ao mesmo tempo compartilham tantas coisas em comum. Se por um lado aprender Javascript é parte fundamental para seu progresso com JQuery, serve a mesma deixa para Flex, que depende exclusivamente de Actionscript.

Embora a zona de conforto que o Flex lhe proporciona como design padrão já pre-definido, layout Manager já ajustadinho para qualquer tela, composição de componentes, arquitetura componentizada, tudo isso acarreta na escolha de se adotar ou não JQuery e padrões Web em seus projetos e em sua carreira profissional.

Fato é, que da uma preguiça fora de sério aprender tudo isso novamente, como denominar dependências e heranças com DOM, live encoding. É deverás complicado para quem sai de outro idioma programático e cai de pará-quedas no ambiente do navegador.

Nessa quarta parte, quero mostrar em diante como é a estrutura padrão de eventos no JQuery e como isso pode encurtar pontos no aprendizado.

Eventos

A gramática de eventos no Flex é composta por pacotes e mais pacotes definhados por componentes e seus containers, tanto que é muito bem distribuído, é como se fosse 1 caixa de palito de fósforo, contendo palitos com respectivas funções programáticas, um para cada tipo de fogo que se pretende ascender.
É estimado que por padrão no Flex 4.5 existam cerca de 98 tipos de evento, boa parte eles são herdeiros do evento chave que fica no pacote flash.events.Event os demais são de uso exclusivo de cada plataforma como AIR e Flash Player.

Já a gramática de eventos do JQuery, é um tanto simplificada, onde não passa mais que 36 tipos eventos, todos herdeiros de um só evento pai que é amarrado ao HTML, o DOM Object.

Porém, essa maneira simplista da coisa tem seu certo fundo técnico, uma vez que você tem N tipos de navegadores com N tipos de engine, ou você simplifica a coisa ou acaba fadado ao fracasso. Não tão distante, por mais que você queira relutar, os eventos no Flex também seguem um padrão cronológico ou técnico possa se dizer, do modelo de DOM level 3. Onde há uma certa semelhança em nomenclatura e a estrutura de como funciona, tal como adicionar listener, remover listener.

O que o JQuery fez foi pegar tudo isso e simplificar o máximo possível, trazendo ao desenvolvedor maior facilidade nessa execução de eventos. Porém em contra partida ele pecou pela exclusão do processo de fase, o que é umas das partes fundamentais em aplicações que tomam por base eventos.

Exemplo prático:

Criar um Div ( Bloco), onde ele siga a posição do mouse. Uns dos segredos desse exemplo é o CSS, com seu subselector position:relative;

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
.bloco {width:200px; height:200px; background:#000; display:block; position:relative;}
</style>
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
		// começar a brincadeira com JQuery
 
			$(document).mousemove(function(e) {
                	$(".bloco").css("left",e.pageX);
					$(".bloco").css("top",e.pageY);
					var nova_cor = 'rgb(' + (Math.floor((-256)*Math.random()) + 200) + ','
                     + (Math.floor((-55)*Math.random()) + 200) + ','
                     + (Math.floor((-55)*Math.random()) + 200) + ')';
					$(".bloco").css("background",nova_cor);
            });
			$(document).mouseout(function(e) {
               setInterval(loop,4000);
            });
 
			function loop()
			{
				$(".bloco").animate({left:Math.random()*  screen.availWidth/2},1000);
				$(".bloco").animate({top:Math.random()* screen.height/2},1000);
			}
 
    });
</script>
</head>
 
<body>
			<div class="bloco"></div>
</body>
</html>

Se eu fizer esse exemplo no Flex, como seria?

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init(event)">
 
	<fx:Declarations>
		<s:Move id="mover" target="{bloco}" duration="4000" />
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.events.FlexMouseEvent;
 
			protected function init(event:FlexEvent):void
			{
				this.addEventListener(MouseEvent.MOUSE_MOVE,mudarBloco);
				this.addEventListener(MouseEvent.ROLL_OUT,randomizar);
				this.addEventListener(MouseEvent.ROLL_OVER,pegarListeners);
 
			}
 
			protected function mudarBloco(event:MouseEvent):void
			{
				bloco.x = mouseX;
				bloco.y = mouseY;
				cor.color = Math.random()*0xffffff;
			}
 
			protected function randomizar(event:MouseEvent):void
			{
				mover.xTo = Math.random()* screen.width/2;
				mover.yTo = Math.random()* screen.height/2;
				mover.play();
				this.removeEventListener(MouseEvent.ROLL_OUT,randomizar);
 
			}
 
			protected function pegarListeners(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
 
				this.addEventListener(MouseEvent.ROLL_OUT,randomizar);
			}
 
		]]>
	</fx:Script>
	<s:Rect id="bloco" width="200" height="200">
		<s:fill>
				<s:SolidColor id="cor"/>
		</s:fill>
	</s:Rect>
</s:Application>

Viu que tudo não passa de mousemove, mouseOut, posição do mouse. Tudo é igual, o que realmente muda nesse exemplo é a nomenclatura das palavras chaves usadas.

Uma simples lista de tarefa no JQuery

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
			$("#btn").click(function(e) {
                	// adicionar itens
					$("#tarefas").append('<li><input name="Tete" type="checkbox" value="'+$('input').val()+'"><label>'+$('input').val()+'</label></li>');
					$('input').val('');
					$('input').focus();
            });
    });
</script>
</head>
 
<body>
<input class="input" name="tarefa" type="text" lang="pt" value="Digite sua tarefa" size="30" maxlength="50">
<a id="btn" class="button green large">+</a>
 
<ul id="tarefas" class="lista">
</ul>
</body>
</html>

Até ai tudo bem, e se você quiser dinamicamente adicionar um evento sempre que um novo item é adicionado, você faz através do evento bind (), que é próprio para isso.

					$('li input').bind('change',function (e){
						if($("li input").is(':checked')){
							$(this).toggle();
						}
					});

O código fica no final

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
	$(document).ready(function(e) {
 
			$("#btn").click(function(e) {
                	// adicionar itens
					$("#tarefas").append('<li><input name="Tete" type="checkbox" value="'+$('input').val()+'"><label>'+$('input').val()+'</label></li>');
 
					$('li input').bind('change',function (e){
						if($("li input").is(':checked')){
							$(this).toggle();
						}
					});
					$('input').val('');
					$('input').focus();
            });
 
    });
</script>
</head>
 
<body>
<input class="input" name="tarefa" type="text" lang="pt" value="Digite sua tarefa" size="30" maxlength="50">
<a id="btn" class="button green large">+</a>
 
<ul id="tarefas" class="lista">
</ul>
</body>
</html>

E com isso você pode partir para exemplos mais sofisticados como um dataGrid por exemplo:

Veja abaixo

jquerytabela

Tem editar, selecionar tudo, soma de valores.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="css/padrao.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
 
 
 
	$(document).ready(function(e) {
		editable();
		disable();
 
 
 
		$("#checkAll").change(function(e) {
 
			 $("table td input").each(function(index, element) {
 
								if($("#checkAll").is(':checked')){
									$(element).attr("checked",true);
								}
								else{
									$(element).attr("checked",false);
								}
							///	alert($(element).val());
 
					});
        });
 
		var count = 1;
		$("#addMaisButton").click(function(e) {
			if(count == 1){
  			$("table").append('<tr class="d1"><td><input class="checkbox" type="checkbox"></td><td></td><td></td></tr>');
			count++;
			}else if(count == 2)
			{
				$("table").append('<tr class="d2"><td><input class="checkbox" type="checkbox"></td><td></td><td></td></tr>');
				count--;
			}
			editable();
        });
 
    });
 
	function disable()
	{
			$("table tr td:first-child").each(function(index, element) {
                	$(element).unbind('dblclick');
					$(element).unbind('keyup');
					$(element).unbind('focusout');
            });
 
	}
	function editable(e)
	{
		$("table tr td").each(function(index, element) {
 
				$(element).bind("dblclick",function edit(){
					$(element).html('<input class="input" type="text" value="'+$(element).text()+'" size="30" maxlength="50">');
					$('input').bind('focus',function focusEdit(){this.select()});
				});
 
				$(element).bind("keyup",
						function closeEdit(e){
							if(e.keyCode == 13){
							$(element).text($(element).find('input').val());
							somarTotal();
							}
				});
            });
 
	}
 
	function somarTotal()
	{
			var somageral = 0;
			$("table tr td:nth-child(3)").each(function(index, element) {
					//	somageral += ;
						if(!isNaN(parseInt($(element).text()))){
							somageral += parseInt($(element).text());
							//alert($(element).text());
						}
 
            });
			//alert(total);
		$(".total").text(somageral + ',00');
	}
</script>
</head>
 
<body>
<a class="button green large" id="addMaisButton">Adicionar +</a>
<table class="grid" width="650" border="0" cellpadding="10">
  <tr>
    <th width="26" scope="col">
      <input name="checkAll" type="checkbox" class="checkbox" id="checkAll"></th>
    <th width="340" scope="col">Descrição dos itens</th>
    <th width="184" scope="col">Valor</th>
  </tr>
  <tr class="d1">
    <td class=""> <input name="checkAll1" type="checkbox" class="checkbox" id="checkAll1"></td>
    <td>q</td>
    <td>10</td>
  </tr>
  <tr class="d2">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll2" id="checkAll2"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d1">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll3" id="checkAll3"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="d2">
    <td class=""><input class="checkbox" type="checkbox" name="checkAll4" id="checkAll4"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>Soma Total:R$<span class="total"></span></p>
</body>
</html>

Estude o código e veja como fiz, eu gastei uma média de 4 horas para fazer isso. Embora o código não esteja optimizado.

Abraços e até o próximo.