RE: [flexcoders] Flex Messaging Service + Drag and Drop List Component
You can put anything you like into the body, or headers, of an AsyncMessage; a string, a number, an anonymous Object, a typed Object (if you use a typed Object be sure to tag it with [RemoteClass] metadata). You can control which subscribed Consumers receive the message by using the Consumer.selector property (a SQL-92 expression evaluated on the server against the headers of incoming messages; if the message headers satisfy the expression the message will be delivered to the Consumer), or by using the Consumer.subtopic property to subscribe to a subtopic (or range of subtopics) within a destination and using the Producer.subtopic property to control which specific subtopic sent messages go to. When building 'screen-sharing' style applications like this, you need to really keep network latency in mind. Some GUI frameworks will 'summarize' events before handing off to even local processing (i.e. collapsing a bunch of individual key strokes into a summary string containing all the characters typed since the last event dispatch and just dispatching that single event). This becomes even more important when you're considering sending lots of high frequency events over the network to peers. In this case, I'd recommend sending a single message to subscribed peers on drop complete, indicating which component was dragged and dropped along with its final location. You can then either just reparent the corresponding component immediately on the receiving peer, or animate it along a simple path. There are lots of options with this sort of thing, but you shouldn't try to generate and send a message for each pixel it is dragged. Hope that helps, Seth From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of jeffreyr6915 Sent: Wednesday, May 14, 2008 11:01 PM To: flexcoders@yahoogroups.com Subject: [flexcoders] Flex Messaging Service + Drag and Drop List Component I have a 2 list components in which I have enabled drag and drop (dragEnabled=true dropEnabled=true dragMoveEnabled=true dragDrop=dragDropHandler(event)). So, I am able to drag and drop the List items (which I have a custom itemRenderer for). I am also using flex messaging service (Flex data services) so that a change made in one connected client/browser is propagated to all other connected browsers. I would like to be able to drag an item from one list to another (in one browser) and see that drag and drop happen (as it is happening) in all other connected browsers. I know that I need to send an AsyncMessage to the server via a producer, and receive from the server via a consumer. Question: What do I include in the async message in order to see the list items drag/drop as it is happening in all connected browsers? Can someone help me with code/example? Thanks
Re: [flexcoders] Flex Messaging Service + Drag and Drop List Component
Thanks Seth, this helps a lot. But I am unclear on exactly what should be
sent to the server inside of AsyncMessage. Below I have my drop handler and
message handler. I am very new to Flex and I do not understand what to do in
the message handler (i.e., where to set the received data) so that the
consumers can actually see the drag an drop action happening. What do you
mean by animate the item dragged along the simple path? I am using the built
in drag and drop capabilities of ther List component. Can you please help me
with my code? Thanks
private function dragDropHandler(event:DragEvent):void
{
// Get the drop target component
var dropTarget:List = event.currentTarget as List;
//Get dragged item
var draggedItem:CustomImageRenderer = event.draggedItem as
CustomImageRenderer;
//Send the message to the server
message = new AsyncMessage();
message.headers.dropTarget = dropTarget;
message.headers.draggedItem = draggedItem;
producer.send(message);
}
private function messageHandler(event:MessageEvent):void
{
//WHAT DO I DO HERE?
}
-- Jeffrey
On Thu, May 15, 2008 at 3:14 PM, Seth Hodgson [EMAIL PROTECTED] wrote:
You can put anything you like into the body, or headers, of an
AsyncMessage; a string, a number, an anonymous Object, a typed Object (if
you use a typed Object be sure to tag it with [RemoteClass] metadata). You
can control which subscribed Consumers receive the message by using the
Consumer.selector property (a SQL-92 expression evaluated on the server
against the headers of incoming messages; if the message headers satisfy the
expression the message will be delivered to the Consumer), or by using the
Consumer.subtopic property to subscribe to a subtopic (or range of
subtopics) within a destination and using the Producer.subtopic property to
control which specific subtopic sent messages go to.
When building 'screen-sharing' style applications like this, you need to
really keep network latency in mind. Some GUI frameworks will 'summarize'
events before handing off to even local processing (i.e. collapsing a bunch
of individual key strokes into a summary string containing all the
characters typed since the last event dispatch and just dispatching that
single event). This becomes even more important when you're considering
sending lots of high frequency events over the network to peers.
In this case, I'd recommend sending a single message to subscribed peers on
drop complete, indicating which component was dragged and dropped along with
its final location. You can then either just reparent the corresponding
component immediately on the receiving peer, or animate it along a simple
path. There are lots of options with this sort of thing, but you shouldn't
try to generate and send a message for each pixel it is dragged.
Hope that helps,
Seth
From: flexcoders@yahoogroups.com flexcoders%40yahoogroups.com [mailto:
flexcoders@yahoogroups.com flexcoders%40yahoogroups.com] On Behalf Of
jeffreyr6915
Sent: Wednesday, May 14, 2008 11:01 PM
To: flexcoders@yahoogroups.com flexcoders%40yahoogroups.com
Subject: [flexcoders] Flex Messaging Service + Drag and Drop List Component
I have a 2 list components in which I have enabled drag and drop
(dragEnabled=true dropEnabled=true dragMoveEnabled=true
dragDrop=dragDropHandler(event)). So, I am able to drag and drop the
List items (which I have a custom itemRenderer for). I am also using
flex messaging service (Flex data services) so that a change made in
one connected client/browser is propagated to all other connected
browsers. I would like to be able to drag an item from one list to
another (in one browser) and see that drag and drop happen (as it is
happening) in all other connected browsers. I know that I need to send
an AsyncMessage to the server via a producer, and receive from the
server via a consumer.
Question: What do I include in the async message in order to see the
list items drag/drop as it is happening in all connected browsers?
Can someone help me with code/example? Thanks
RE: [flexcoders] Flex Messaging Service + Drag and Drop List Component
Hi Jeffrey,
You shouldn't attempt to send UI components from one app to another; you just
need to send enough info to the peer for it to simulate the same behaviors as
you're doing locally. There's no out-of-the-box support for synchronizing the
UI of your Flex app across peers.
Try sending identifiers for the component you're dragging, as well as for the
drop target. In your messageHandler() method in the receiving app, use these
identifiers to get references to the local UI components that match, and
reparent the 'dragged' component under the local 'drop target' component. The
reparenting could be simple and direct, and you could try to animate it once
you get the basic scenario working if you wanted (you know where the 'dragged'
component starts and where it ends up so maybe you could do a straight line
animation to simulate the original drag and drop). Sorry, don't have time to
code up anything at the moment.
Seth
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Jeffrey
Walker
Sent: Thursday, May 15, 2008 3:33 PM
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Flex Messaging Service + Drag and Drop List Component
Thanks Seth, this helps a lot. But I am unclear on exactly what should be sent
to the server inside of AsyncMessage. Below I have my drop handler and message
handler. I am very new to Flex and I do not understand what to do in the
message handler (i.e., where to set the received data) so that the consumers
can actually see the drag an drop action happening. What do you mean by animate
the item dragged along the simple path? I am using the built in drag and drop
capabilities of ther List component. Can you please help me with my code? Thanks
private function dragDropHandler(event:DragEvent):void
{
// Get the drop target component
var dropTarget:List = event.currentTarget as List;
//Get dragged item
var draggedItem:CustomImageRenderer = event.draggedItem as
CustomImageRenderer;
//Send the message to the server
message = new AsyncMessage();
message.headers.dropTarget = dropTarget;
message.headers.draggedItem = draggedItem;
producer.send(message);
}
private function messageHandler(event:MessageEvent):void
{
//WHAT DO I DO HERE?
}
-- Jeffrey
On Thu, May 15, 2008 at 3:14 PM, Seth Hodgson [EMAIL PROTECTED] wrote:
You can put anything you like into the body, or headers, of an AsyncMessage; a
string, a number, an anonymous Object, a typed Object (if you use a typed
Object be sure to tag it with [RemoteClass] metadata). You can control which
subscribed Consumers receive the message by using the Consumer.selector
property (a SQL-92 expression evaluated on the server against the headers of
incoming messages; if the message headers satisfy the expression the message
will be delivered to the Consumer), or by using the Consumer.subtopic property
to subscribe to a subtopic (or range of subtopics) within a destination and
using the Producer.subtopic property to control which specific subtopic sent
messages go to.
When building 'screen-sharing' style applications like this, you need to really
keep network latency in mind. Some GUI frameworks will 'summarize' events
before handing off to even local processing (i.e. collapsing a bunch of
individual key strokes into a summary string containing all the characters
typed since the last event dispatch and just dispatching that single event).
This becomes even more important when you're considering sending lots of high
frequency events over the network to peers.
In this case, I'd recommend sending a single message to subscribed peers on
drop complete, indicating which component was dragged and dropped along with
its final location. You can then either just reparent the corresponding
component immediately on the receiving peer, or animate it along a simple path.
There are lots of options with this sort of thing, but you shouldn't try to
generate and send a message for each pixel it is dragged.
Hope that helps,
Seth
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of
jeffreyr6915
Sent: Wednesday, May 14, 2008 11:01 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Flex Messaging Service + Drag and Drop List Component
I have a 2 list components in which I have enabled drag and drop
(dragEnabled=true dropEnabled=true dragMoveEnabled=true
dragDrop=dragDropHandler(event)). So, I am able to drag and drop the
List items (which I have a custom itemRenderer for). I am also using
flex messaging service (Flex data services) so that a change made in
one connected client/browser is propagated to all other connected
browsers. I would like to be able to drag an item from one list to
another (in one browser
