Entendendo o AS3.0

Olá novamente Flex-maníacos,

Nas partes anteiores aprendemos:

Primeira Parte - As vantagens/desvantagens/Showcases/Cursos/Preços/Produtos e Aplicacoes/Referencias, etc

Segunda Parte - Os nomes dos paineis mais usados e a descricao do que fazem

Terceira Parte - Como criar uma primeira aplicacao no Flex e testando

Quarta Parte – Como é montada a estrutura de programação do Flex, explicando as tags e o MXML.

Agora na Quinta Parte veremos como usar o Action Script 3.0.

Para começar utilizarei o mesmo exemplo da aula4 e vamos adicionar o AS3.0 nele.

Abaixo o modelo que usaremos…

Que gera o seguinte resultado…

Bom, vamos começar,

Vale ressaltar que o FLEX e o FLASH CS3 está trabalhando com AS3.0.

O AS3.0 tem sua linha de desenvolvimento OOP, ou seja, Programacao Orientada a Objeto, que dá um tom de limpeza e organização dentro do projeto, que torna muito mais rápido seu desenvolvimento.

Uma boa diferença do AS2 é que agora é obrigatório que as variáveis, argumentos e funções sejam declarados, que antes era opcional, antes era assim:

function minhaFuncao( ) { }

Agora é assim:

function minhaFuncao( ):void { }

Se tratando de eventos, agora ficou mais interessante, todo mundo consegue fazer o famoso “listener”.

Outra coisa interessante que achei do AS3, é que ele permite a criacao de objetos e caracteristicas muito mais fácil, como:

var meuObjeto:Object = new Object();

meuObjeto.parametro1=33;

meuObjeto.parametro2=false;

meuObjeto.parametro3=null;

Bom, vamos a parte prática, pra que não curte muito ler e sim botar a mão na massa.

Acho importante mostrar aos leitores que o AS3 deve ser escrito dentro de tag especifica, isto quer dizer, nao dá pra sair escrevendo as3 em qualquer lugar, pra isso tem que criar uma tag especial que o FLEX chama de SCRIPT, abaixo definindo:

Bem, pra testar o AS 3.0 vamos ver uma classe chamada alert, bem parecida com o alert do JAVASCRIPT, do HTML….

Observe que somente estamos usando as3.0 dentro da tag mx:Script.

Explicando melhor o codigo:

-Eu defini um método “minhaFuncao” que mostrará a janela de alerta dentro da tag mx:Script.

-Depois na criacao do botao eu disse que no “clique” dele sera chamado “minhaFuncao”

Apartir disto podemos melhorar mais o codigo criando mais um botao, com outro metodo novo direcionado e que mostre outro alerta “diferente” observe o exemplo abaixo:

Boa sorte!

HTTP Service

Talvez alguns se perguntarão, porque HTTP-SERVICE ja no nível iniciante?

Respondo já, é algo prático que mostra resultado de forma a mostrar o que o flex pode fazer, com poucas linhas de código.

Bom, pra muitos só as palavras “HTTP-SERVICE” já dá um nó no cérebro, mas aqui falarei um pouco dele e mostrarei como usar.

Primeiro defino que utilizarei a idéia de componentes, onde voce cria um componente dentro do mesmo projeto e depois em sua aplicacao chama este componente para facilitar o desenvolvimento.

(Obs, ainda nao sei formatar no WordPress de forma que fique bunito que nem nos blogs pagos, se alguem souber, dá um apoio.)

Utilizarei então dois arquivos principais:

• photosFLK
• componenteFLK

Primeiro passo

-Crie um projeto (chamarei de photosFLK), isso gera uma aplicacao com o mesmo nome (File > new > flexProject)

- Após criado o projeto, digite este código dentro de sua aplicação:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundGradientColors=”[0xFFFFFF, 0xAAAAAA]“
horizontalAlign=”left”
verticalGap=”15″
horizontalGap=”15″ creationComplete=”addListenerToControls()”><mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var photoFeed:ArrayCollection;

// add a event listener to textInput control using the Event Listeners
// You can search more at addEventListeners on this site
private function addListenerToControls():void {
searchTerms.addEventListener(FlexEvent.ENTER,requestPhotos);
}
// Request photos based on keyword criteria you insert
private function requestPhotos(event:Event):void {
// if the photoService is still loading we cancel to prevent errors
// then we call again.
photoService.cancel();
var params:Object = new Object();
params.format = ‘rss_200_enc’;
params.tags = searchTerms.text;
photoService.send(params);
}
// Handler the result function from HTTPService request you did
// and convert the result into a Array Collection
private function photoHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as ArrayCollection;
}
// If the HTTPService had errors, we handle it here show an alert message
// like we have in Javascript
private function photoFaultHandler(event:FaultEvent):void {
Alert.show(“Impossible to load or reach photos from services”,”Error”);
}
]]>
</mx:Script>

<mx:HTTPService id=”photoService” showBusyCursor=”true”
url=”http://api.flickr.com/services/feeds/photos_public.gne”
result=”photoHandler(event)” fault=”photoFaultHandler(event)”
/>

<mx:HBox>
<mx:Label text=”Flickr tags or search terms:” />
<mx:TextInput id=”searchTerms” />
<mx:Button label=”Search”
click=”requestPhotos(event)” />
</mx:HBox>

<mx:TileList width=”100%” height=”100%”
dataProvider=”{photoFeed}”
itemRenderer=”componentFlk”>
</mx:TileList>

</mx:Application>

Segundo passo

Agora crie um componente do tipo VBOX, renomeando ele para “componenteFlk”

Digite o código abaixo dentro dos códigos do component.

<?xml version=”1.0″ encoding=”utf-8″?> <mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”

width=”125″ height=”125″

paddingBottom=”5″ paddingLeft=”5″ paddingTop=”5″ paddingRight=”5″

horizontalScrollPolicy=”off” verticalScrollPolicy=”off”

horizontalAlign=”center”>

<mx:Image width=”75″ height=”75″

source=”{data.thumbnail.url}”/>

<mx:Text text=”{data.credit}”/>

</mx:VBox>

Terceiro passo

Pronto, agora é só rodar o projeto, clicando no “Play”.

Como este tutorial é somente para ilustar o uso do HTTP Service, defino que:

1-Criamos um projeto e uma aplicacao

2-Criamos um component

3-Definimos de onde viria os dados via HTTP Service. (exemplo abaixo)

<mx:HTTPService id=”photoService” showBusyCursor=”true”
url=”http://api.flickr.com/services/feeds/photos_public.gne”
result=”photoHandler(event)” fault=”photoFaultHandler(event)”
/>

Agora os dados são puxados do site da FLICKR, onde ja possui uma lista de imagens e as respectivas no servidor.

E nosso TileList está usando o componentFlk criado

<mx:TileList width=”100%” height=”100%”
dataProvider=”{photoFeed}”
itemRenderer=”componentFlk”>
</mx:TileList>

Pronto, espero ter ajudado. Passando como utilizar o HTTP Service.

Observe o exemplo de como ficou abaixo…

Boa Sorte!

Tutorial iniciante parte4 – Entendendo o código MXML

Olá novamente Flex-maníacos,

Nas partes anteiores aprendemos:

Primeira Parte - As vantagens/desvantagens/Showcases/Cursos/Preços/Produtos e Aplicacoes/Referencias, etc

Segunda Parte - Os nomes dos paineis mais usados e a descricao do que fazem

Terceira Parte - Como criar uma primeira aplicacao no Flex e testando

Agora na Quarta Parte veremos como é montada a estrutura de programação do Flex, explicando as tags e o MXML.

Confesso novamente que ao ver os códigos do FLEX no primeiro momento achei que era um monstro de setenta e sete cabeças. Mas após ir com calma aprendendo de pouco a pouco eu ja estava bem familiarizado.

Imagino que quem esteja neste nivel tentando aprender FLEX ja deve ter passado por HTML, por isso presumo que entendam TAG`s. Mas mesmo assim, vamos lá.

TAG`s servem para delimitar a programacao, e funcionam assim, sempre deve ser aberto e fechado uma tag e fechado com um sinal de “/”, por exemplo:

<inicio> </inicio>

Então dessa forma vamos acrescentando novas tags:

<inicio> <meio></meio></inicio>

E para ficar mais legivel colocamos assim:

<inicio>

<meio>

</meio>

</inicio>

Para continuar a explicacao mostrarei um código simples que adiciona 2 objetos no stage. Lembrando que cada objeto agora é visto como tags tambem, obs:

Experimente ir digitando este código no Flex, apague tudo e faça igual ao meu exemplo, observe que ao digitar algumas palavras especiais o FLEX ja sabe o que voce quer e vai completando, legal não?

Isso gera o seguinte resultado:

EXPLICACAO DO CODIGO

Agora vamos a explicacao do codigo,

-Na linha1 temos uma tag que “dá o tom” do arquivo dizendo que ele é do tipo XML usando a versao 1 e o encoding “utf-8″.

-Na linha 2 e 9 temos as tags de application para indicar o inicio e o fim da aplicacao

-Na linha 3 e 7 temos as tags que indicam a contrucao de um painel com suas caracteristicas, como largura(width), altura(height), x, y, titulo, etc.

-Na linha 4 e 6 temos as tags que criam um botao, com suas configuracoes, obs que o que esta em “label” aparecerá no botao como texto.

Agora vamos ver como ficou… novamente

Experimente alterar os valores de largura(width), altura(height), x, y, titulo e veja o que acontece no modo design.

Bom, o codigo do FLEX nao é tão dificil assim se formos pensar, lógico que na hora que entrar mais itens complexos e programacao especifica vai deixar mais complexo, mas nada que voce nao consiga acompanhar, boa sorte e até o próximo tutorial.

Tutorial iniciante parte3

Olá Flex-maníacos,

Bem voltando ao nosso tutorial, na parte1 vimos detalhes sobre o que o flex pode fazer, na parte2 vimos os nomes das ferramentas principais e pra que servem. E neste momento vamos ver como se cria a sua primeira aplicacao em FLEX (Wow!) .

Presumindo que voce ja tenha conseguido baixa o FlexBuilder3, instalado o mesmo e ja esta abrindo e tentando fazer alguma coisa. Vamos botar a mao na massa (no bom sentido).

Abrindo o Flex teremos que criar um novo projeto para ele entender que estamos querendo criar uma nova aplicacao, para isso faça:

Clique no menu: File > new > flex project .

Ele lhe pedirá para dar um nome para o projeto, eu escolherei "primeiroProjeto".

Neste primeiro momento nao alteraremos nada, simplismente clique em FINISH.

o

Observe que neste momento no painel da esquerda (flex navigator), ja aparece a estrutura do projeto, obs.

Observe tambem que foi criado um arquivo primeiroProjeto.mxml, quando eu vi "mxml" eu quis fechar o programa pois achei que era muito dificil e estranho ver uma extensao com 4 digitos (tudo bem que HTML tem 4), mas nunca tinha visto mxml antes, mas depois olhei com calma e vi que tinha "xml" ai ficou mais suave, pois eu manjava de XML, quem nao manja vai atras porque eh importante.

Bom, continuando, no meio do programa tem o que chamo de palco, e na lateral esquerda embaixo tem o painel dos components, vamos escolher alguns itens e vamos arrastar para o palco.

Eu quero 1 Label, 2 RadioButton e 1 Button, e para alterar os textos de dois cliques dentro de cada item. Ficará como a tela a seguir:

Agora chegou o momento mágico, de ver o bicho funcionando…

Ops, percebi que faltou faze um relacionamento entre o item "masculino" e "feminino", ao selecionar o primeiro defina no painel de propriedades que oele percente ao grupo "sexo" e tabem com o "masculino".

Agora sim, como dizia o menino do CRUJ a uns 5 anos atras, "dá o play Máka!"

Pronto voce neste momento pode dizer que fez sua primeira aplicacao no FLEX! (Se fizer tudo certo, deverá abrir uma janela do browser com sua aplicacao rodando dentro do Flash Player).

E vou revelar um segredo interessante, olha onde foi parar o que criamos…

Bom, espero que tenham gostado e tenha conseguido acompanhar o passo-a-passo para criar sua primeira aplicacao.

Logicamente voces tem muito mais criatividade do que eu para criar outras aplicacoes básicas, mas acho que o exemplo deu para ter nocao de como os itens se relacionam e como inserir itens no palco configurando-os.

Boa Sorte! E até o proximo tutorial, nao esqueça de comentar o que achou, para eu poder melhora-lo ou altera-lo.

 

Tutorial iniciante parte2

Olá Flex-maniacos,

Na primeira parte deste tutorial vimos toda a parte de possibilidades, vantagens, desvantagens, showcases e todas as coisas que o flex pode fazer.

Neste post, pretendo explicar as ferramentas e janelas do flex, para tirar as duvidas de quem esta comecando, como eu estava e nao tinha material em portugues nenhum.

Pra uma explicacao mais clara e bem facinha pra quem esta comecando é que o flex é um software da ADOBE, que faz aplicacoes que rodam como se fosse o flash, usando até o mesmo plug-in (FLASH PLAYER), pra isso precisamos de um programa que edite esta aplicacao e no final voce “salva” e o arquivo “salvo” voce coloca em uma pagina na WEB como se fosse uma imagem, um swf do flash, etc…

Gostaria de resaltar que não é difícil usar o FLEX, como todo programa temos o primeiro momento onde não conhecemos nada do assunto, depois vamos comecando ver um pouco aqui e outro tanto ali e logo ja sabemos o suficiente pra desenvolver coisas legais e quem sabe ganhar uma grana com isso.

Primeiro acho interessante voce saber que pra usar o Flex deve ter uma IDE de desenvolvimento, eu estou utilizando o FLEXBUILDER 3, nao usei nenhum outro, nao conheco as versoes anteriores mas leio muito sobre esta versao estar muito boa e conheco o eclipse que tem plug-in para flex, logico estamos falando de tecnologias inovadoras e que tem visao de mercado bem a frente.

Quem ainda não baixou a versao de desenvolvimento saiba que tem que acessar o site da ADOBE, procurar por downloads e localizar o flexbuilder, pra facilitar clique aqui…

Entendendo os paineis…

O primeiro painel que quero resaltar é o Flex Navigator, este é o painel de navegação de arquivos, onde vc visualiza e altera os arquivos que esta trabalhando nomento.

O segundo painel é o que esta no centro do flex, vou chamar ele de palco, tambem conhecido como stage. Onde montamos noss layout e definimos a aparencia de nossa aplicacao.

O terceiro painel que quero resaltar é o que mostra as Abas de desenvolvimento, neste caso eu peguei uma imagem que mostra um arquivo com o nome de primeiro e com duas abas de desenvolvimento, uma de SOURCE (código) e outra DESIGN (projeto, visual). Quando voce quer alternar entre ver o codigo do que voce esta fazendo ou poder arrastar os objetos voce escolhe estes botoes.

O quarto painel que quero resaltar é o Flex Properties, que mostra as propriedades de todos os objetos colocados em seu projeto (somente quando voce seleciona o objeto), por exemplo se eu quero mecher na cor de um texto, eu seleciono o texto e altero a cor na janela de Propriedades, como no Word e afins…

O quinto painel que quero resaltar é o de Components, este é muito legal, voce pode escolher os itens que quer em seu projeto simplismente arrastando para dentro do palco de seu projeto.

O quinto painel é o de ajustes do palco, porcentagem da visualizacao, maozinha para arrastar a janela, seta pare selecionar os objetos.

E o nosso topo, onde esta a barra de menu basica, onde vc abre novos arquivos, edita configuracoes, altera projetos… Tem tambem este botao verde, que parece um “play”, este é o essencial, que “roda” o seu projeto, onde voce testa o que ja fez.

E o painel Problems, que mostra quando algo esta errado na compilacao do projeto.

Outros paineis sao importantes tambem, mas para iniciar os mais interessantes sao esses.

Bem, espero que tenha sido proveitoso conhecer os paineis e o que eles fazem, até o proximo tutorial. Não esqueçam de comentar o que acharam e os erros cometidos.