Adobe Flex a partir do zero
Escrito por Mário Santos on Janeiro 5, 2008 – 3:06 pm
Bom, como já várias pessoas me tem pedido, mesmo não tendo muito tempo livre nem sendo um profissional vou iniciar aqui uma série de tutoriais para quem deseja começar do zero a construir os seus projectos em Flex, focando essencialmente o Adobe Flex Builder
Como já devem saber o Adobe Flex é uma plataforma de desenvolvimento de RIA’s (pt.wikipedia.com/ria) em flash. A grande diferença do convencional flash e esta plataforma é mesmo o estilo de programação e a diversidade do conteúdo que é possível criar com o Flex, ja que cada vez mais são disponibilizadas API’s para o Flex de aplicações como o flicker, google maps, yahoo maps, youtube entre tantas outras.
O Flex por si não é o mais indicado para construir animações frame-by-frame, para isso podem usar o flash e usar a vossa animação dentro do Flex, mas sim para a construção de RIA’s.
Vou tentar dividir este tutorial em varias secções, abrangendo o mais básico desde a instalação até ao desenvolver uma pequena aplicação de inserção de dados numa base de dados, animações/transições simples, ou criação de uma aplicação para desktop via Adobe AIR.
Utilizarei o Flex Builder 3 beta 2 (Trial, Windows), já que para iniciação é o mais indicado, já que o Flex SDK (Free) é muito mais "elaborado" e o Flex Builder 3 alpha (linux) ainda não tem parte de componentes drag & drop.
Este tutorial será dividido pelas seguintes secções :
(podendo focar mais opções dentro de cada um deles)
Actualizado: Ver topico Flex Book.
Como devem imaginar pelo titulo do post, este tutorial vai dividir-se por várias partes, visto que vou utilizar ilustrações e código fonte em cada uma delas.
Tenham paciência, se entrarem no espiríto, sei que vai ser difícil esperar mas vou tentar demorar o menor número de dias possível, vao ver que vale bem a pena.
Qualquer duvida no decorrer do tutorial, coloquem-na usando o sistema de comentários identificando bem a vossa dúvida e sejam claros, mas antes leiam atentamente o tutorial porque muitas duvidas podem ter como origem uma má leitura do tutorial. Podem também recorrer ao fórum http://www.xtechpt.com onde coloquei ja o tutorial com as devidas secçoes e também esta disponível um tópico para duvidas. Acedam directamente aos tópicos aqui
Comentários e sugestões são sempre bem vindos.
Entretanto quem desejar seguir este tutorial, recomendo vivamente que vejam os link’s Adobe Flex Explorers que ja indiquei aqui no blog (http://msdevstudio.com/blog/2007/12/02/rias-onde-encontrar-suportetutoriais/) para se inteirarem melhor com a estrutura dos componentes do flex.
Bom, se ainda não tiverem feito o download do Flex Builder beta 2, façam o download para adiantar trabalho, disponível aqui: http://labs.adobe.com/technologies/flex/flexbuilder3/ no link Get Flex Builder do lado direito do site, é necessário o registo (gratuito) para fazer o download (de cerca de 300mb de flex builder ) Retirem a versão stand alone para Windows. E instalem-o com os parâmetro default. Não vou usar o flash debugger para já, mas se vos for proposto na instalação instalem-o também… dependendo da versão do flash player do vosso computador, pode ser-vos proposto para instalar os plug-in’s para o Internet Explorer e Mozilla, por isso instalem-os também.
Até já.
Como no desenvolver do tutorial comecei já por ser muito extenso, disponibilizarei a sua versão em partes (*.pdf) assim que forem sendo concluídas, e assim também se torna mais fácil para vocês seguirem o tutorial.
A primeira parte ja está completa.
Download aqui: Adobe_Flex_a_partir_do_zero_1.pdf
A Segunda também:
Download aqui: Adobe_Flex_a_partir_do_zero_2.pdf
A terceira:
Download aqui: Adobe_Flex_a_partir_do_zero_3.pdf
A Quarta
Download aqui: Adobe_Flex_a_partir_do_zero_4.pdf
A Quinta
Index e Download: Adobe Flex a partir do Zero Parte 5
Noticias fresquinhas.
Quem estiver interessado pode fazer o download de todo o conteudo dos 4 tutoriais (Partes I, II, III, IV) em apenas um ficheiro e agora com permissão para copiar e imprimir já que muita gente pediu com jeitinho :=)
aqui está: Flex Book Parte I, II, III, IV (actualizado, ver topico)
abraço!
Cumprimentos.
Tags: Adobe, Adobe Flex, Adobe Flex Builder do zero, builder, Flex, flex a partir do zero, flex do zero, flex para iniciantes, flex tutorial, iniciantes, iniciantes em flex, Tutorial flex, tutorial flex builder, zero
Colocado em Flex, Tutoriais |
Janeiro 13th, 2008 at 3:10 pm
cara estou a mais de um mes procurando material de estudo para flex, e acabei chegando no seu site, seu tutorial ta ficando muito bom coisa de profissional, parabens, espero q continue assim.
Janeiro 14th, 2008 at 7:28 am
É sempre bom ouvir comentários desses, como disse iniciei-me no flex também procurando na net, mas era bem dificil encontrar documentação que iniciava mesmo do zero, foi por isso que comecei este tutorial. Talvez no meio desta semana coloque a segunda parte que ja estou escrevendo.
Obrigado pelo comentário.
Janeiro 31st, 2008 at 11:00 am
[...] Disponivel em: http://msdevstudio.com/blog/2008/01/05/adobe-flex-a-partir-do-zero/ [...]
Janeiro 31st, 2008 at 11:07 am
[...] Em continuação com o meu tutorial Adobe Flex a partir do Zero : http://msdevstudio.com/blog/2008/01/05/adobe-flex-a-partir-do-zero/ disponibilizo agora a segunda parte deste tutorial, que já tinha sido previamente colocada em [...]
Fevereiro 1st, 2008 at 11:39 am
cara!
parabens mesmo…
td q eu precisava.
já tá nos favoritos!!!
Março 1st, 2008 at 12:59 pm
[...] do Flex Alert Box em Action Script (1)Adobe Flex a partir do zero (5)Ria’s, Onde encontrar [...]
Março 1st, 2008 at 1:06 pm
Já aí está a terceira parte do tutorial!!
Vejam: http://msdevstudio.com/blog/2008/03/01/adobe-flex-a-partir-do-zero-parte-iii/
Abraços!
Março 19th, 2008 at 1:26 pm
[...] Post: Adobe Flex a partir do zero [...]
Março 19th, 2008 at 8:14 pm
Gostaria de deixar registrado o quanto seu trabalho tem colaborado. Meus mais sinceros agradecimemtos, espero que continue com este trabalho, pois não imagina o quanto esta colaborando.
Muito obrigado !!!
Março 26th, 2008 at 6:32 pm
Parabens pela sua dedicação e disponibilidade para ajudar aos iniciantes e amantes da programção.
Parabens ……………………
Março 28th, 2008 at 2:22 pm
Noticias fresquinhas.
Quem estiver interessado pode fazer o download de todo o conteudo dos 3 tutoriais (Partes I, II, III) em apenas um ficheiro e agora com permissão para copiar e imprimir já que muita gente pediu com jeitinho :=)
aqui está: http://www.msdevstudio.com/mywork/FlexTutor/Flex_Book_Part_1_2_3.pdf
abraço!
Março 29th, 2008 at 4:34 pm
[...] TSW (No Ratings Yet) Loading [...]
Abril 7th, 2008 at 1:07 pm
Tutoriais muito bons, quando vai sair a parte IV, estou aguardando…
Abraço.
Abril 8th, 2008 at 5:34 pm
Boas notícias para os seguidores do meu tutorial, aqui fica disponível a quarta parte com 14 paginas do tutorial que cada vez mais pessoal estava a pedir.
Vejam em: http://msdevstudio.com/blog/2008/04/08/adobe-flex-a-partir-do-zero-parte-iv/
Abraço.
Maio 5th, 2008 at 2:48 pm
Companheiro,
Tenho que agradecer.
Muito Obrigado
Maio 16th, 2008 at 3:06 am
Parabéns pela excelência no trabalho!
Maio 16th, 2008 at 6:32 am
Obrigado
Maio 16th, 2008 at 4:22 pm
[...] Adobe Flex Builder a partir do zero - Parte 1 [...]
Junho 4th, 2008 at 12:32 pm
Olá amigo, estou entrando nesse tal de Flex a pouco tempo, fiz um curso, porem ainda me restam muitas duvidas e sinceramente, creio que seram sanadas com esses tutoriais, pois já trabalho com PHP a algum tempo e esse tutorial vai de encontro a exatamente o que eu quero. Parabens mais uma vez, sao pessoas como você qe fazem a internet um lugar mais agradavel e sem duvida melhor. Abracos e fique com deus!
Junho 4th, 2008 at 2:53 pm
Mário eu estava olhando a imagem do seu flex builder Milestone. Ele é free totalmente para baixar e usar??
O registro é gratuito mesmo ?
Outra coisa … pelo fato de ser beta, quando for alpha será pago ?
O que eu tenho aqui é :
Flex Builder Core - 3.0.194161
Flex Builder Satandalone - 3.0.194161
Outra pergunta: você sugere retirar a versão standalone para Windows mas meu sistema operacional é Windows ou não tem nada aver??
Abraço e muito obrigado pelos tutos !@
Junho 4th, 2008 at 3:08 pm
Boas!
O meu flex actual é o Flex Builder Professional, com licensa paga.
Mas pode fazer o download da ultima versão no http://labs.adobe.com e pedir uma licensa se for esudante ou trabalhador de escolas/faculdades gratuitamente em http://www.flexregistration.com tendo apenas que apresentar um cartão de estudante ou certificado da escola.
Sugeri essa versão (windows) por sugerir… não tem que ser obrigatórimente essa
Abraço.
Junho 4th, 2008 at 5:55 pm
[...] será um falhanço?? » demorou? hehehe, era só para começar qua…» Boas! O meu flex actual é o Flex Builde…» Opa … demorou mestre Mário ! Era isso …» Mário eu estava olhando a imagem do seu [...]
Junho 8th, 2008 at 2:52 am
[...] desenvolvedor Mário Santos criou um guia completo para quem quer iniciar a desenvolver usando a tecnologia do Flex para aplicações web. O guia [...]
Junho 10th, 2008 at 4:26 am
[...] aqui para acessar o blog com os [...]
Junho 16th, 2008 at 6:51 pm
Muito bom estes tutorias!!! Obrigado! Parabéns pelo excelente trabalho!
Junho 17th, 2008 at 2:26 pm
[...] Leonardo… Não vou sequer duvidar…» Eu vou te falar que o flex vai se tornar…» Muito bom estes tutorias!!! Obrigado! Pa…» opah…estive verificando tudo de novo, …» Olá Mario, consigo fazer o download dos [...]
Junho 20th, 2008 at 1:12 am
Velho… parabéns…
Impressionante sua dedicação para com os iniciantes !… Precisamos de mais pessoas assim …
Junho 26th, 2008 at 5:19 pm
Muuuuuuuito bom mesmoo está de parabéns Mario, ja estou na expectativa da parte 5!! obrigado!
Junho 26th, 2008 at 5:58 pm
Opa revisando acabei de achar a parte 5 hehe, mais ela não esta na versão final, hunn ao começar a ler não vi o tópico 8 do tutorial na parte 4 vai até o 7 depois na parte 5 pula pro 9…vou mais ja vou começar a estudar, quaisquer novas duvidas eu te passo por e-mail valeu Mário está muuito bom, parabéns!
Junho 27th, 2008 at 6:10 am
Victor, Slakcmod, Obrigado!.
LeviJr, a parte 5 segue a actualização feita pelo flex book que reune as 4 partes anteriores com algumas correções e ajustes, houve algumas alterações na sua estrutura, mas nada de mais…
http://msdevstudio.com/blog/2008/04/30/tutorial-adobe-flex-a-partir-do-zero-actualizado/
Abraço.
Julho 21st, 2008 at 3:58 pm
Muito bom trabalho, para quando a parte 3?
A proposito, testei o preenchimento de uma datagrid com webservice asxm e funcionou, no entanto usando webservice wcg obtive o seguinte erro, podia dar uma ajudinha ja que nao encontro exemplos com WCF e Flex! Obrigado!
[RPC Fault faultString="Unrecognized binding style 'null'. Only 'document' and 'rpc' styles are supported." faultCode="EncodingError" faultDetail="null"]
at mx.rpc.soap::Operation/http://www.adobe.com/2006/flex/mx/internal::invokePendingCall()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\soap\Operation.as:774]
at mx.rpc.soap::Operation/send()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\soap\Operation.as:688]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.rpc.soap.mxml::Operation/send()
Julho 21st, 2008 at 4:50 pm
Oupa… tudo bem? obrigado pelo comentário…
O tutorial já tem a parte 3, 4 e 5
Vá ao menu no topo em post-list e veja que encontra os devidos posts com os devidos downloads
Quanto ao WCF você está usando como backend .net certo? tenho pena, mas não tenho muita experiencia na area do .net, mas posso informar que existem já handlers para .net, no estilo de amfPHP (php) ou BlazeDS (java..), veja qual o será mais util:
WebOrb para .net
http://www.themidnightcoders.com/weborb/dotnet/
FluorineFX .net
http://www.fluorinefx.com/
Espero que ajude!
Abraço.
Julho 22nd, 2008 at 8:46 am
Ah obrigado, eu já tinha tentado com o IE mas nao salvava como pdf nao sei pq, com firefox consegui.
Exacto, o meu webservice é .net, obrigado pelos links, vou investigar por ai.
Continuacao de bom trabalho, abraço!
Julho 22nd, 2008 at 5:24 pm
Olá Mário, seus tutoriais estão otimos, porém estou tendo dificuldades na parte 5 na função “insere()”, o objeto enviado para a classe do php está chegando nullo, ou seja ao gravar na base com ‘”.$dados->nome.”‘ todos os registros estão ficando em branco, você tem ideia do que possa ser? ja pesquisei mais não conseguir solucionar ainda, aguardo uma orientação obrigado e parabéns pelo ótimo trabalho, abraço!
Julho 22nd, 2008 at 6:13 pm
Esperimente ver se o objecto dados.nome antes de enviar paa o remoteObject tem algum valor, e depois no php verifique se têm a funçâo toda correcta e se por final não funcionar experimente usar $dados['nome'] em vez de $dados->nome;
depois me informe o que aconteceu…
Abraço.
Julho 22nd, 2008 at 6:46 pm
Olá Mário então eu cheguei a testar e estava enviando o objeto corretamente porém quando ele chegava na classe so tinha o valor nulo, mais agora esta perfeito troquei o código como vc disse por $dados['nome'] e perfeito, so estou tentando agora arrumar a atualização do datagrid ele so faz uma nova busca na base quando dou um refresh na pagina quando insiro um novo registro ele o datagrid não está atualizando, vou tentar resolver aqui, mais obrigadão pela ajuda Mário, abraço!
Julho 22nd, 2008 at 7:04 pm
opa so corrigindo, ja corrigi o refresh do datagrid, foi distração minha acabei comentando o metodo buscaDados, fica uma observação quando eu insiro um registro com ‘ por exemplo levi’s da erro de syntax de sql tem como eu tratar isso? obrigado
Julho 23rd, 2008 at 5:09 pm
Olá Mario estou com um probleminha terminei com sucesso a 5 parte da sua apostila terminei a aplicação com sucesso tb, porém so estou conseguindo acessar ela localmente quando tento acessar a aplicação de outra maquina o browser me da essa mensagem de erro,
[RPC Fault faultString="Send failed" faultCode="Client.Error.MessageSend" faultDetail="Channel.Security.Error error Error #2048: Security sandbox violation: ip/olaMundo/bin-debug/olaMundo.swf cannot load data from localhost/olaMundo/amfphp/gateway.php. url: 'localhost/olaMundo/amfphp/gateway.php'"]
aonde posso alterar esse valor ‘localhost/olaMundo/amfphp/gateway.php’”] ?? ja tentei em varios lugares mais sem sucesso, pode me ajudar? obrigado abraço.
Julho 23rd, 2008 at 6:39 pm
LeviJr. Esse erro deve-se à conhecida protecção de dominio do flash.
Esse valor deve ser alterado no services-config.xml e indicar a pasta amfphp (que deve estar no mesmo servidor onde a aplicação princiapl corre) e o seu gateway..
depois de alterado esse services config.xml deve compilar de novo a sua aplicação.
Veja se resolveu.
Abraço.
Julho 23rd, 2008 at 7:30 pm
Exatamente Mário consegui resolver o problema alterando o services-config.xml, queria agradecer o tutorial que foi de grande utilidade e lhe dar os parabens pelo ótimo trabalho, obrigado e qualquer novidade é bem vinda.
abraço.