http://msdevstudio.com/blog/2008/10/09/o-poder-da-api-draw-do-as3-exemplo-em-flex/

venho agora publicar o seu código fonte e informar que foram alterados alguns pontos, o que permite agora usar separadamente ambas as classes.

A class GraphDependency permite agora ser usada para criar dependencia em qualquer objecto baseado em UIComponente como imagens ou botões, disponibilizando o método update() pode inclusive redesenhar a dependencia entre objectos estando eles a ser arrastados no ecrã ou sujeitos a uma animação.

A class Poper permite criar um popup informativo em qualquer objecto UIComponente, podendo também ser usada em imagens ou botões.

As restantes classes podem ser uteis em mais alguns pontos para desenhar circulos ou  rectangulos. O sistema de dependencia permite definir as cores da linha, recebendo como array os objectos a criar dependencia (linha grafica)

Podem ver o exemplo online aqui com o código fonte disponivel bem como o projecto pronto a importar no flex builder 3 (File->Import->Flex Project Archive)

Entretanto o projecto sofreu algumas alterações e o seu código foi devidamente comentado para que seja mais facil entender o exemplo. (Foi comentado em inglês saiba o porque em baixo)

Finalmente, um noticia, este exemplo foi previamente aceite para ser colocado no tour de flex pelo Greg, ou seja, brevemente estará disponivel também nessa aplicação, e espero que seja o primeiro de muitos exemplos do msdevstudio presentes no aplicativo. Daí o exemplo em cima ter sido comentado em inglês, mas o exemplo é de facil compreensão e qualquer duvida: http://forum.msdevstudio.com.

Abraços a todos e espero que seja util.

Decidi colocar mãos à obra e fazer o mesmo exemplo mas sem recurso a imagens, usando apenas a API draw do flex, ainda com alguns pontos a melhorar mas já sairam os primeiros testes do forno…

Este sistema uma uma class preparada para criar ligações a qualquer componente gráfico (UIComponent), criando uma dependencia entre varios, até mesmo centenas, elementos gráficos, mas no exemplo uso apenas circulos criados com o graphics (quem obteu e leu o tutorial parte II completo já o consegue fazer simplesmente) e ligados entre si com uma linha.

Vejam:

E mais um exemplo:

Todos os objectos podem ser arrastados que a sua linha de dependencia mantêm-se… esperimentem arastar um deles.

Testem no exemplo online aqui

Brevemente disponibilizarei o código fonte, já que quero implementar alguns pontos…

E que tal? o AS3 faz mesmo maravilhas… 

Edit: Código fonte e exemplo actualizados, veja aqui.

Abraço.

Todo o código explicado passo a passo encontra-se no tutorial, bem como implementação de muitos conceitos OOP do AS3.

Entrando já na parte mais avançada, para ser entendido por iniciantes devem antes ler a Parte I deste tutorial que nos indica as bases do AS3 bem como a sua organização.

Vejam então o que foi feito:

Cliquem nas imagens para verem o exemplo online.

Os códigos fonte e index são disponibilizados com a versão completa:
http://msdevstudio.com/blog/2008/10/04/tutorial-action-script-3-parte-ii/

Abraços.

O exemplo que fiz é muito simples e apenas apresenta o conceito base deste tipo de criação, usando 2 canvas, uma para a toolbar  outro para o design, uma reciclagem (para eliminar o desnecessário), uma area de stockagem temporaria.

Utilizando os metodos drag&drop é possivel criar uma aplicação bem profissional. Vejam a imagem e o exemplo online com o código fonte disponivel.

Podem ver o exemplo online aqui com o código fonte disponivel.

É possivel adicionar campos de imagem e de texto, com ou sem bordo, podendo todos os objectos incluidos na area de design serem movidos ou eliminados. Para adicionar items basta arrasta-los do topo para a area de desenho.

Espero que seja util, principalmente para o Nando que estava à procura disto

p.s. Usem e abusem, mas deixem um link no código aqui para o blog em projectos open source.

Abraços.

 Uma coisa é certa, o flex está cada vez mais na “moda” e disso não tenho duvida, até porque cada vez mais artigos e informações são colocadas na web e em listas de discussão com cada vez mais participantes.

Apesar de aqui no blog esforçar-me para divulgar apenas conteudo na lingua Portuguesa, existem sempre muito bons artigos e tutoriais na lingua inglesa… para quem se entende um pouco com o inglês posso afirmar que não se vão arrepender em ver estes (para já) 6 screencasts que o site www.theflexshow.com está a disponibilizar, e para quem percebe bem o inglês este blog é uma perola, porque todas as semanas nos presenteia com excelentes podcasts bem descontraidos abordando variados assuntos sobre flex e ria’s.

 Mas vamos à lista,

O ”15 minutes with flex” é uma série de screencasts apoiados pela adobe que além de algumas tecnicas bem profissionais, nos explica passo a passo como trabalhar com as mais variadas coisas que às vezes são tão comuns na maior parte das aplicações.

Episodio 1 – Setting a flex project – Definindo um projecto flex – Veja online

Episodio 2 – Using the flex debugger – Usando o debugger do flex – Veja Online

Episodio 3 – Understanding data binding – Entendendo o data binding – Veja Online

Episodio 4 – Creating Component Properties – Criando propriedade de componentes – Veja Online

Episodio 5 – Using XML with Flex – Usando XML no flex – Veja Online

Episodio 6 – Drag & Drop Lists -  Drag & Drop em Listas - Veja Online

Como disse em cima esse blog possiu alguns podcasts bem interessantes, contando mesmo já com 52, que variam um pouco de tamanho, mas que todos eles têm alguns pontos de interesse.

Espero que seja util.

Abraço.

Datagrid
List
HorizontalList
PrintDatagGrid
TileList
Tree

Vamos então usar neste momento duas datagrid’s, e fazer um exemplo de um simples sistema de carrinho de compras, criando um novo projecto e colocando o código seguinte:

Em que muito possivelmente ficarão com o design grafico como a imagem:

Parte 1

 
O nosso objectivo é passar elementos da datagrid “Mercado” para a datarid “Carrinho de compras”, para isso podemos usar os metodos drag & drop nativos destas mesmas datagrid’s, mas para isso temos que efectuar algumas alterações no código, indicando que eles vão suportar operações desse tipo. Vamos então alterar na datagrid da esquerda (mercado) para isso adicionando o parametro dragEnabled e defini-lo como true.:

e fazendo o mesmo na datagrid da direita, mas com o parametro dropEnabled:

e pronto, as nossas datagrids estão prontas a enviar e receber items, e podem salvar e correr a vossa aplicação que verão já o drag & drop em funcionamento.

O funcionamento do drag & drop em componentes que já têm o seu suporte nativo é tão simples como aqui foi explicado, mas vamos agora fazer algo mais elaborado, usando o mesmo código. Vamos colocar uma lixeira no nosso layout para poder-mos eliminar items do nosso carrinho de compras. Para isso a seguir à ultima colocamos o seguinte:

e ficamos com algo muito parecido ao seguinte:

Parte 2

Sendo que como uma imagem não têm nativamente suportado o drag & drop temos que arranjar maneira de o fazer. Primeiro temos que indicar à datagrid que também pode ser objecto de drag, e vamos também permitir selecionar varias linhas ao mesmo tempo, para isso acrescentamos na datagrid “carrinho” 3 parametros como o dragEnabled=”true” , o allowMultipleSelection=”true” e dragMoveEnabled=”true” ficando a nossa datagrid assim:

Com estes parametros estou a indicar que essa datagrid (alem de já aceitar drop) está a aceitar drag também, bem como muiltipla selecção de items e a quando do drag&drop dessa datagrid para outro alvo, ela vai permiter que o seu conteudo selecionado seja movido e não copiado como acontecia antes…

Se repararem nos parametros da tag mx:image existem alguns elementos Drag, que permitem que nós possamos fazer com que o objecto lide com darg & drop, e é precisamente uma dessas propriedades que vamos utilizar, escrevendo na tag da nossa imagem lixeira, o seguinte:
dragEnter=”lidaEnter(event)”

ficando a tag mx:image assim:

Estes dois parametros dragEnter e dragDrop são eventos que são disparados quando o objecto é alvo de operações drag&drop, neste caso a função lidaEnter() será chamada quando um objecto alvo de drag passar em cima da nossa imagem, aqui temos que indicar ao flex que ela se encontra apta para drag.

Falta apenas criar a funçao para lidar com este evento, mais precisamente a lidaEnter() para isso colocamos o seguinte código logo a seguir à 2 linha (a seguir à tag mx:application):

import mx.events.DragEvent;
import mx.managers.DragManager;

private function lidaEnter(event:DragEvent):void{
var dropTarget:Image = event.currentTarget as Image;
DragManager.acceptDragDrop(dropTarget);
DragManager.showFeedback(DragManager.MOVE);
}

]]>

E pronto, temos o nosso Mercado com carrinho de compras e lixeira para eleminar um ou mais items do carrinho de compras.

Como podem reparar não têm nenhuma dificuldade, Por isso, usem e abusem!

Código Final:




import mx.events.DragEvent;
import mx.managers.DragManager;

private function lidaEnter(event:DragEvent):void{
var dropTarget:Image = event.currentTarget as Image;
DragManager.acceptDragDrop(dropTarget);
DragManager.showFeedback(DragManager.MOVE);
}

]]>

Podem ver o resultado final online com o código fonte disponivel aqui

Abraço e espero que seja util e esclarecedor.