You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Neil McT <ne...@yahoo.co.uk> on 2008/10/16 12:04:05 UTC
DHTML DnD best practice?
Hi,
I'm wondering what would be the best way to enable dhtml drag n drop in
Wicket.
Its a fairly typical use-case.... I have 2 divs, one is a container of
draggables, the other is a container of droppables - i.e. where the
draggables will be dragged to. This is not an ajax question as there is no
need for any server side round-trip on each drop - only some kind of submit
button once the user is happy with what they have dragged on.
I have the front-end component working (using jquery ui drag n drop) but my
question is... what would be the recommended way to communicate the dropped
objects to the server side using wicket? I.e. what would be the recommended
component to bind the 'droppable' container (or individual droppable
objects) to and how would you guys recommend that I reconstruct the dropped
objects on the server side?
I have thought of various ways I can enable this, but none of these seem
particularly like the 'right' Wicket way - and kind of smack of the way I
would have done things in, say, struts.
Thanks in advance.
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20010633.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: DHTML DnD best practice?
Posted by aditsu <ad...@yahoo.com>.
Look at wicketstuff-jquery, especially DnDSortableBehavior.
It's not perfect, but at least it can give you some ideas.
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20031872.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: DHTML DnD best practice?
Posted by Ernesto Reinaldo Barreiro <re...@gmail.com>.
Nice presentation: I didn't know about it.
Cheers,
Ernesto
Neil McT wrote:
> Thanks for the reply. This is just the starter-for-ten I was looking for.
> I also found one of the London Wicket groups presentations (
> http://londonwicket.org/content/LondonWicket-ListEditor.pdf
> http://londonwicket.org/content/LondonWicket-ListEditor.pdf ) to be of great
> use.
>
> It actually became less about the immediate problem and more about a gap in
> my (albeit basic) understanding of Wicket. Having messed around for the last
> couple of hours, given some of the pointers on here, I am feeling far more
> comfortable with the Ajax / dhtml side of wicket.
>
> Cheers.
>
>
>
> reiern70 wrote:
>
>> Sorry, maybe I do not fully understand what you want to do but why won't
>> you
>> update the state of the server once a div is dropped.
>> I have my own components that use drag and drop (e.g. tables with
>> draggable/dropable columns) and what I do at the JavaScript side is
>> something like:
>> XXX.onDrop() {
>> var url = this.url+ '&sourceId=' + parseInt(td.style.width) +
>> '&targetId=resize' + '&number=' + this.number
>> wicketAjaxGet(url);
>> }
>> ...
>>
>>
>
>
Re: DHTML DnD best practice?
Posted by Neil McT <ne...@yahoo.co.uk>.
Thanks for the reply. This is just the starter-for-ten I was looking for.
I also found one of the London Wicket groups presentations (
http://londonwicket.org/content/LondonWicket-ListEditor.pdf
http://londonwicket.org/content/LondonWicket-ListEditor.pdf ) to be of great
use.
It actually became less about the immediate problem and more about a gap in
my (albeit basic) understanding of Wicket. Having messed around for the last
couple of hours, given some of the pointers on here, I am feeling far more
comfortable with the Ajax / dhtml side of wicket.
Cheers.
reiern70 wrote:
>
> Sorry, maybe I do not fully understand what you want to do but why won't
> you
> update the state of the server once a div is dropped.
> I have my own components that use drag and drop (e.g. tables with
> draggable/dropable columns) and what I do at the JavaScript side is
> something like:
> XXX.onDrop() {
> var url = this.url+ '&sourceId=' + parseInt(td.style.width) +
> '&targetId=resize' + '&number=' + this.number
> wicketAjaxGet(url);
> }
> ...
>
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20033321.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: DHTML DnD best practice?
Posted by Ernesto Reinaldo Barreiro <re...@gmail.com>.
Sorry, maybe I do not fully understand what you want to do but why won't you
update the state of the server once a div is dropped.
I have my own components that use drag and drop (e.g. tables with
draggable/dropable columns) and what I do at the JavaScript side is
something like:
XXX.onDrop() {
var url = this.url+ '&sourceId=' + parseInt(td.style.width) +
'&targetId=resize' + '&number=' + this.number
wicketAjaxGet(url);
}
and this URL is the URL to certain AjaxBehaviour on the server. Then I just
read those parameters on the server side, so that UI is in synchrony the
server.
Just take a look at YUI and Scriptaculous integration projects for
inspiration.
Best,
Ernesto
On Fri, Oct 17, 2008 at 11:28 AM, Neil McT <ne...@yahoo.co.uk>wrote:
>
> Ok, so I had a look at the Palette component. Its very nice, but I don't
> think it really helps me as it uses a select box (i.e. a pre-existing
> wicket
> component) as a 'bin' for the droppables. This really abstracts out the
> main
> part of my problem - how to bind and manipulate a bunch of divs with a
> custom component.
>
> To explain further: what I will end up with is a droppable 'bin' (a div)
> which the user has been happily dragging stuff (other divs) onto - and
> possibly sorting etc. The hole in my knowledge here is how to associate
> these inner divs (the things that have been dropped) with some Wicket
> component on the server side. I can associated the 'bin' div with a
> MarkupContainer or something but I'm not sure how to dynamically keep track
> of its inner divs once the user has submitted.
>
> I've tried a solution using a ListView nested within a form but I'm not
> entirely happy with it. For example, the number of 'slots' to drag things
> onto has to be known at construction time - i.e. the user can not drag on
> 11
> things if only 10 slots (say, nested textfields) have been created at
> construction time (also I would prefer not to have pre-determined 'slots' -
> just an area onto which many divs can be dragged). I would like to use
> Jquery to do all the fancy front-end stuff (creating new 'slots' on the
> fly,
> sorting etc) and just bind the results (all the dragged-on divs) to some
> component in Wicket.
>
> I've been playing about with wicket for about a month and this question
> actually reflects an area of the Framework that I am not really getting so
> far - how markup is bound to components at the lower level. I've read many
> examples and the excellent Wicket in Action book but, understandably, they
> seem to focus on how to use existing components and only briefly touch on
> how to create your own components and how to really 'get at' the underlying
> markup.
>
> Any help, hints or pointers to further reading would be much appreciated
> as,
> my current problem aside, I feel this is an area I need to crack before I
> go
> any further.
>
> Thanks - Neil.
>
>
>
> Serkan Camurcuoglu wrote:
> >
> > it seems like you're talking about the DnD version of the Palette
> > component in wicket extensions.. See its source code, maybe it will give
> > you some idea..
> >
>
> --
> View this message in context:
> http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20029961.html
> Sent from the Wicket - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: DHTML DnD best practice?
Posted by Neil McT <ne...@yahoo.co.uk>.
Ok, so I had a look at the Palette component. Its very nice, but I don't
think it really helps me as it uses a select box (i.e. a pre-existing wicket
component) as a 'bin' for the droppables. This really abstracts out the main
part of my problem - how to bind and manipulate a bunch of divs with a
custom component.
To explain further: what I will end up with is a droppable 'bin' (a div)
which the user has been happily dragging stuff (other divs) onto - and
possibly sorting etc. The hole in my knowledge here is how to associate
these inner divs (the things that have been dropped) with some Wicket
component on the server side. I can associated the 'bin' div with a
MarkupContainer or something but I'm not sure how to dynamically keep track
of its inner divs once the user has submitted.
I've tried a solution using a ListView nested within a form but I'm not
entirely happy with it. For example, the number of 'slots' to drag things
onto has to be known at construction time - i.e. the user can not drag on 11
things if only 10 slots (say, nested textfields) have been created at
construction time (also I would prefer not to have pre-determined 'slots' -
just an area onto which many divs can be dragged). I would like to use
Jquery to do all the fancy front-end stuff (creating new 'slots' on the fly,
sorting etc) and just bind the results (all the dragged-on divs) to some
component in Wicket.
I've been playing about with wicket for about a month and this question
actually reflects an area of the Framework that I am not really getting so
far - how markup is bound to components at the lower level. I've read many
examples and the excellent Wicket in Action book but, understandably, they
seem to focus on how to use existing components and only briefly touch on
how to create your own components and how to really 'get at' the underlying
markup.
Any help, hints or pointers to further reading would be much appreciated as,
my current problem aside, I feel this is an area I need to crack before I go
any further.
Thanks - Neil.
Serkan Camurcuoglu wrote:
>
> it seems like you're talking about the DnD version of the Palette
> component in wicket extensions.. See its source code, maybe it will give
> you some idea..
>
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20029961.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: DHTML DnD best practice?
Posted by Neil McT <ne...@yahoo.co.uk>.
lol... fair enough. Thought it sounded too good to be true :)
Serkan Camurcuoglu wrote:
>
> sorry for the misunderstanding, I meant to say "you're trying to build a
> DnD version of the palette" (which doesn't exist yet :)..
>
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20016826.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: DHTML DnD best practice?
Posted by Serkan Camurcuoglu <se...@telenity.com>.
sorry for the misunderstanding, I meant to say "you're trying to build a DnD
version of the palette" (which doesn't exist yet :)..
Neil McT wrote:
>
> Hmm... I can only find the non-DnD version of the palette. Any idea where
> the DnD version lives?
>
>
>
> Serkan Camurcuoglu wrote:
>>
>> it seems like you're talking about the DnD version of the Palette
>> component in wicket extensions.. See its source code, maybe it will give
>> you some idea..
>>
>>
>>
>
>
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20016823.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: DHTML DnD best practice?
Posted by Neil McT <ne...@yahoo.co.uk>.
Hmm... I can only find the non-DnD version of the palette. Any idea where the
DnD version lives?
Serkan Camurcuoglu wrote:
>
> it seems like you're talking about the DnD version of the Palette
> component in wicket extensions.. See its source code, maybe it will give
> you some idea..
>
>
>
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20016818.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: DHTML DnD best practice?
Posted by Serkan Camurcuoglu <se...@telenity.com>.
it seems like you're talking about the DnD version of the Palette component
in wicket extensions.. See its source code, maybe it will give you some
idea..
Neil McT wrote:
>
> Hi,
>
> I'm wondering what would be the best way to enable dhtml drag n drop in
> Wicket.
>
> Its a fairly typical use-case.... I have 2 divs, one is a container of
> draggables, the other is a container of droppables - i.e. where the
> draggables will be dragged to. This is not an ajax question as there is no
> need for any server side round-trip on each drop - only some kind of
> submit button once the user is happy with what they have dragged on.
>
> I have the front-end component working (using jquery ui drag n drop) but
> my question is... what would be the recommended way to communicate the
> dropped objects to the server side using wicket? I.e. what would be the
> recommended component to bind the 'droppable' container (or individual
> droppable objects) to and how would you guys recommend that I reconstruct
> the dropped objects on the server side?
>
> I have thought of various ways I can enable this, but none of these seem
> particularly like the 'right' Wicket way - and kind of smack of the way I
> would have done things in, say, struts.
>
> Thanks in advance.
>
--
View this message in context: http://www.nabble.com/DHTML-DnD-best-practice--tp20010633p20012188.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org