can I do the following with the Behaviour/Delegator framework ?

5 views
Skip to first unread message

ragra

unread,
Nov 7, 2011, 8:13:57 AM11/7/11
to Clientcide
HI,

I have a tree structure of links I display on client side, scattered
around in the DOM. The structure is still persistent to that on the
server side, but on the client side I have numerous containers around
sub-part of the tree structure. Through drag and drop in the UI I can
reorganize the link tree structure all the way down to single link
elements. Every time I drag&drop a link to a new position, I want to
save the structure through AJAX. I have been looking at Behavior/
Delegator framework and the closest I come to possible out of the box
use of that is that I wrap the part on the client DOM in a form tag
with Behavior.FormRequest and use Delegator.SumbitLink, but as I
understand it, I will only get the extradata for the link that I
click, attached to my get/post in the request on form submit. (I would
also have to submit the form my self when handling the event onDrop
and trigger a click event on the link I was dragging). It doesn't seem
to handle my needs 100% cleanly.

What I would like was all the extraData on ALL my links appended to my
form submit when dropping the link in a different container, as well
as the new relative parent link, and I would like this to be done in
the most elegant way with the right triggers/events ect..(ex. 'drop').
Does this mean that I have to make my own Delegator implementation
with the right drop event registered - and then reuse
Behavior.FormRequest) ? or would I have to implement a Behavior as
well with my own data-behavior defined ect., or is there a whole third
and even more elegant and maybe more simple way to accomplish this
using the framework ? Any suggestions would be much appreciated :)
Hope my scenario explanation and the following question is clear
enough to be understood. :)

Cheers,
ragra

Aaron Newton

unread,
Nov 8, 2011, 6:48:00 AM11/8/11
to clien...@googlegroups.com
Just had my first child today. Will try and answer this in depth in a
few days. Short answer:

Behavior instantiates classes. Delegator invokes actions. That's all
they do (albeit in a sort of "live" way). Before you write either you
have to go write classes. Your problem is going to likely require that
you write some code unique to your problem.

> --
> You received this message because you are subscribed to the Google Groups "Clientcide" group.
> To post to this group, send email to clien...@googlegroups.com.
> To unsubscribe from this group, send email to clientside+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/clientside?hl=en.
>

ragra

unread,
Nov 8, 2011, 7:46:16 AM11/8/11
to Clientcide
Well, first congratulation with your new born child. :)
I will look more at the mootools Class and Class.Extras docs, as well
as the doc for the Behavior/BehaviorAPI while I await your long
answer.

I have though, been trying to work it out by using
Behavior.FormRequest and then writing my own Delegator action handler
based on Delegator.SubmitLink, but I still run into short commings
with regards to relative parents and adding extraData "on the fly" to
the element that triggers the event through the Delegator without
breaking the framework - or the way it's meent to be used - it seems.
So I guess a deeper understanding will be required in order to solve
my problem cleanly.

Thank you for your "short answer" :)

Cheers,
ragra

On Nov 8, 12:48 pm, Aaron Newton <anut...@gmail.com> wrote:
> Just had my first child today. Will try and answer this in depth in a
> few days. Short answer:
>
> Behavior instantiates classes. Delegator invokes actions.  That's all
> they do (albeit in a sort of "live" way). Before you write either you
> have to go write classes. Your problem is going to likely require that
> you write some code unique to your problem.
>

daKmoR

unread,
Nov 9, 2011, 9:31:24 AM11/9/11
to Clientcide
Hey,

here is a simplified example how I do it...
for changeing the name of an element

https://gist.github.com/1351574

now what does it do:
- there is a link and it has the Flexo Behavior which actually let's
you change the text of the link like it's an input
- after a change the "change" event is fired
- the sync Behavior checks for this event and if fired it updates the
input and submit's the form

if you wish to do this with ajax just add an ajax behavior to the form

now to your concrete example:
- you sure have some ordering field in your db/php model?
- so add it as an input and change it accordingly on drag-drop, drag-
end...
- submit via button or automatically and you are done

it's no drop in solution but should point you in the right
direction :)

cheers

Rasmus Grauballe

unread,
Nov 9, 2011, 10:11:57 AM11/9/11
to clien...@googlegroups.com

Thanks for your suggestion - will look at it right away :)
Cheers,
ragra

2011/11/9 daKmoR <daK...@lesspixel.com>

Aaron Newton

unread,
Nov 9, 2011, 11:42:21 AM11/9/11
to clien...@googlegroups.com
Nice work Dakmore!

My only feedback:

1) for actions - events - use Delegator if you can. Behavior has a startup cost that you may not want to pay. This same code would probably work as well as a delegator given that all you do is call addEvent on the thing. You can also defer a Behavior's startup costs with the delayUntil option, but it's still cheaper to do with Delegator by far.

2) int's generally a good idea for behaviors to know how to clean up after each other, esp in ajaxy apps. This one should remove its events on cleanup...

i realize that this is just an example for Rasmus though, so don't take this as criticism. The example is pretty spot on on how to use Behavior.

daKmoR

unread,
Nov 9, 2011, 12:13:09 PM11/9/11
to Clientcide
hey Aaron,

thx :)

iirc I tried doing it with Delegators but it failed to catch the
change event...
probably due to the fact that it's not a "natural" event but something
I only fire with MooTools
this.wrap.fireEvent('change'); // in Flexo.js where this.wrap is the
html element it edits

if you think it should work I will try again and toss the problem at
you :p

and about the cleaning - that is definitely true... :)

Aaron Newton

unread,
Nov 9, 2011, 12:57:52 PM11/9/11
to clien...@googlegroups.com
change is a standard event fired on inputs. mootools' fireEvent method doesn't propagate, so if you're invoking the event yourself then delegation won't work. As of MooTools 1.4 delegation does work on form input events though.

daKmoR

unread,
Nov 9, 2011, 2:01:24 PM11/9/11
to Clientcide
yeah... it's not an input so I will stay with the Behavior and will
add the cleanup :)

thx for the description :)

ragra

unread,
Nov 10, 2011, 10:19:48 AM11/10/11
to Clientcide
Hi again and thanks for suggestions and answers both of you.
I ended up going with the Delegator solution after trying out the
Behavior solution suggested by daKmoR. I use Behavior.FormRequest out
of the box, and then ended up writing my own delegator based on
Delegator.SubmitLink. I did this because I found out that I wanted
just to sumbit per. drop, for which I needed only the id of the link
and the id of the new container link that contains the leaf links.
Still need to handle drop functionality changes on container level,
but this first step has helped me to better understand/grasp the
Behavior/Delegator setup - as well as the Class concept in mootools/
clientcide plugin. (I have first started using it on this project and
it's the first ajax framework I use in general. Haven't done web
development for some years now :) ).

Anyways, thanks so much for your quick responses. I'm sure I will be
back with more questions as I go along :)

Cheers,
Rasmus
Reply all
Reply to author
Forward
0 new messages