Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 4 of 4 total
Thread Drag & Drop Concepts
Sun, Oct 21 2018 5:06 AMPermanent Link

Eivind

Gents

So I have just gotten a requirement to implement a large personnel scheduling app. The basic concept is that the user first search for an available person in the database (with lots of search field for skills, location, rating, etc). This is the easy part. Then I need to create a timeline for a full year and schedule the work rotations for multiple positions.Typical a person should have 9 work trips during one year. So on the X scale I have a time line with 365 days and the Y scale are various positions. So for example for positions you have "Captain", "1'st Engineer", "Navigator", "Cook", etc. Now after finding the persons in the personnel database they should be dragged on to that time line. For example, the "Captain" should work from the 1'st to the 15'th of January. Then he should be home for 4 weeks and then be dragged to the time line form the 15'th of February again. This repeats itself for the rest of the year. I have just been prototyping a bit by building the timeline by using panels and that looks fine. I then build the dates dynamically when the user selects what year this is for. Also, I have built a list for the personnel positions on the Y scale also using panels.

I have based on a previous post from Tim created a new component called TFXPanel that decends from TBasicPanel and overridden the three functions for drag and drop. I can now drag my new panel around. However, now I need to sense where the user drops the panel and possible highlight the timeline he tries to drop in on. So far I'm not able to sense where the user drops the panel. Once the user drops the panel I need to set a new parent for this panel so I can scan all timelines later for TFXPanel and figure out what dates they are for and possible fine-tune them to snap to dates. So my big question is. How do I get the component I drop this panel on to?

Another thing is I have some labels on the new new panel showing the name and from / to date. If I try to click and drag on those label, the panel will not drag. Do I have to create my own labels as well and override the drag and drop functions there as well?

And the last thing. When I start the drag from a row in the grid will I also have to create my own grid with drag and drop support so I can initiate the drag from there? Once the drag starts I will show default time piece of lets say 14 days. Once that is dropped onto the timeline it can be adjusted.

Please see attached the mockup I have created in EWB to give you a rough idea on how it should look like.

Looking forward hearing from you drag and drop ninjas Smile

Eivind



Attachments: EWB Time Schedule.png
Sun, Oct 21 2018 6:15 AMPermanent Link

Huseyin Aliz

myBiss ApS

Avatar

Hi Eivind,

I am very interested in following this thread. I have in the past asked=20
for the possibility of coding something like devexpress scheduler for=20
ewb, as i can see from your post, your issue seems to be exactly the same=
Smile

Regards,
H=C3=BCseyin

Den 21-10-2018 kl. 11:06 skrev Eivind:
> Gents
>
> So I have just gotten a requirement to implement a large personnel sche=
duling app. The basic concept is that the user first search for an availa=
ble person in the database (with lots of search field for skills, locatio=
n, rating, etc). This is the easy part. Then I need to create a timeline =
for a full year and schedule the work rotations for multiple positions.Ty=
pical a person should have 9 work trips during one year. So on the X scal=
e I have a time line with 365 days and the Y scale are various positions.=
So for example for positions you have "Captain", "1'st Engineer", "Navig=
ator", "Cook", etc. Now after finding the persons in the personnel databa=
se they should be dragged on to that time line. For example, the "Captain=
" should work from the 1'st to the 15'th of January. Then he should be ho=
me for 4 weeks and then be dragged to the time line form the 15'th of Feb=
ruary again. This repeats itself for the rest of the year. I have just be=
en prototyping a bit by building the timeline by using panels and that lo=
oks fine. I then build the dates dynamically when the user selects what y=
ear this is for. Also, I have built a list for the personnel positions on=
the Y scale also using panels.
>
> I have based on a previous post from Tim created a new component called=
TFXPanel that decends from TBasicPanel and overridden the three function=
s for drag and drop. I can now drag my new panel around. However, now I n=
eed to sense where the user drops the panel and possible highlight the ti=
meline he tries to drop in on. So far I'm not able to sense where the use=
r drops the panel. Once the user drops the panel I need to set a new pare=
nt for this panel so I can scan all timelines later for TFXPanel and figu=
re out what dates they are for and possible fine-tune them to snap to dat=
es. So my big question is. How do I get the component I drop this panel o=
n to?
>
> Another thing is I have some labels on the new new panel showing the na=
me and from / to date. If I try to click and drag on those label, the pan=
el will not drag. Do I have to create my own labels as well and override =
the drag and drop functions there as well?
>
> And the last thing. When I start the drag from a row in the grid will I=
also have to create my own grid with drag and drop support so I can init=
iate the drag from there? Once the drag starts I will show default time p=
iece of lets say 14 days. Once that is dropped onto the timeline it can b=
e adjusted.
>
> Please see attached the mockup I have created in EWB to give you a roug=
h idea on how it should look like.
>
> Looking forward hearing from you drag and drop ninjas Smile
>
> Eivind
>

Mon, Oct 22 2018 4:02 AMPermanent Link

Matthew Jones

I thought I'd blogged on this, but can't find it, so must have posted. I think you are on the right track - the rest is not hard.

First, you can get the relevant component by traversing the tree of components, seeking the one that is in the X,Y of the mouse. I forget the exact details, but ask if you need me to dig it up.

It helps if you are using custom panels, but not necessary if you can work out other mechanisms. I tried to keep the dragging part away from the reaction part, so I'd work out the panel I was over, and then call a function to tell it so, and it could choose how to highlight itself or react etc. And don't forget to tell it when you leave too! And of course what to do when you let go and drop.

The labels, I solved IIRC by setting the events to the same as the panel. In the panel event handlers, I check if the sender is not a panel, and if not, set the sender to the parent of the sender until it is the panel. Then it all works out.

I expect you already have this, but remembering the original drag start, and the offset from that, helps a lot. Otherwise the movements are relative to the last move and get awkward.

Hmm, I just checked my "FindPanelAt" function, and I cheated. All the targets are on a single panel, and are the same height. So it is easy to take the X,Y, and then subtract the top of the parent, and divide by the child heights.

I also have classes that manage the various parts of each "line/panel". Thus each actual UI component has the tag set to an index into an array of that class, and you can then operate on it as a whole by deferring to the class which owns the UI elements etc.

--

Matthew Jones
Tue, Oct 23 2018 5:43 AMPermanent Link

Eivind

@ Matthew

Awesome reply! The next days will be spent trying out various functions for finding, highlighting and accepting dragged panels. As you seems to have done a lot of this before, do not be surprise if I hit you up for some further info Smile

Eivind
Image