OFBiz
  1. OFBiz
  2. OFBIZ-3227

Drag'n'Drop update - add directly in the my portal application

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: Trunk
    • Fix Version/s: Trunk
    • Labels:
      None

      Description

      Hi,
      Michael ask to add the Drag'n' Drop Feature directly to the myPortal application. So i did

      Beside this, i made a few fixes in the myportal.js.

      I'm looking foward to your review.

      So long
      Sascha

      1. myPortalDragNDrop_v2_IEpatch.patch
        0.9 kB
        Sascha Rodekamp
      2. myPortalDragNDrop_v2.patch
        21 kB
        Sascha Rodekamp
      3. screen3.gif
        36 kB
        Bruno Busco
      4. screen2.gif
        42 kB
        Bruno Busco
      5. screen1.gif
        40 kB
        Bruno Busco
      6. myPortalDragNDrop_v2.patch
        13 kB
        Sascha Rodekamp
      7. myPortalDragNDrop_v2.patch
        12 kB
        Sascha Rodekamp
      8. myPortalDragNDrop_v2.patch
        12 kB
        Sascha Rodekamp
      9. myPortalDragNDrop_v2.patch
        14 kB
        Sascha Rodekamp
      10. screenshot-1.jpg
        73 kB
        Michael Xu
      11. myPortalDragNDrop_v2.patch
        7 kB
        Sascha Rodekamp

        Activity

        Hide
        Michael Xu added a comment -

        hi Sascha,

        Thanks for your quick and wonderful patch, which Works fine and looks great (in firefox 3.5.5).

        Anyway, still some points for your consideration:

        1. Mouse icon should be changed to another style if its position is within the title bar of any movable portlet (Just like the behavior of igoogle)
        2. The target position is kind of confusing. When I drag a portlet and move around, then dockable area is highlighted with a gray box. However, the box's size and position is about an existing portlet. I think it would be better if you can make it as the attached screenshot-1, where you can find a blue dash line to indicate the position. Another option is the same behavior like igoogle.
        3. Do we still need those arrows used to move portlet around in the set up page? I think with your previous patch, we don't need those arrows any more...to make UI clean and professional.

        Another thing, which doesn't link to drag&drop, is about the portlet style. I don't like the currernt style that all actions are put in the title bar as words, which is very likely to get messed up if the portlet width gets changed. I prefer igoogle style: put all common actions as standard icons (like minimize and close) and other specific actions as drop down menu.

        Thanks again for your great patch!

        Regards,
        Michael

        Show
        Michael Xu added a comment - hi Sascha, Thanks for your quick and wonderful patch, which Works fine and looks great (in firefox 3.5.5). Anyway, still some points for your consideration: Mouse icon should be changed to another style if its position is within the title bar of any movable portlet (Just like the behavior of igoogle) The target position is kind of confusing. When I drag a portlet and move around, then dockable area is highlighted with a gray box. However, the box's size and position is about an existing portlet. I think it would be better if you can make it as the attached screenshot-1, where you can find a blue dash line to indicate the position. Another option is the same behavior like igoogle. Do we still need those arrows used to move portlet around in the set up page? I think with your previous patch, we don't need those arrows any more...to make UI clean and professional. Another thing, which doesn't link to drag&drop, is about the portlet style. I don't like the currernt style that all actions are put in the title bar as words, which is very likely to get messed up if the portlet width gets changed. I prefer igoogle style: put all common actions as standard icons (like minimize and close) and other specific actions as drop down menu. Thanks again for your great patch! Regards, Michael
        Hide
        Michael Xu added a comment -

        BTW: I guess the component of this issue should be "MyPortal" instead of "ProjectMgr"

        Show
        Michael Xu added a comment - BTW: I guess the component of this issue should be "MyPortal" instead of "ProjectMgr"
        Hide
        Michael Xu added a comment -

        I create another issue: https://issues.apache.org/jira/browse/OFBIZ-3230 for the portlet style. I am not a technical guy and hope some hero can fix this issue soon

        Regards,
        Michael

        Show
        Michael Xu added a comment - I create another issue: https://issues.apache.org/jira/browse/OFBIZ-3230 for the portlet style. I am not a technical guy and hope some hero can fix this issue soon Regards, Michael
        Hide
        Sascha Rodekamp added a comment -

        good morning Michael,

        good points.. i think i'll get a coffee right now and then see what i cann do

        So Long
        Sascha

        Show
        Sascha Rodekamp added a comment - good morning Michael, good points.. i think i'll get a coffee right now and then see what i cann do So Long Sascha
        Hide
        Sascha Rodekamp added a comment -

        Hi Michael,
        so heres some new. Sorry but yesterday wasen't time to submit the patch (friday meetings take a lot of time).
        Never the less here it is...

        I added the Mousepointer and something like the iGoogle Drop preview.

        So have a nice day, and if you (or someone) have more suggestions for a better Drag N Drop feeling, let me know

        best regards,
        sascha

        Show
        Sascha Rodekamp added a comment - Hi Michael, so heres some new. Sorry but yesterday wasen't time to submit the patch (friday meetings take a lot of time). Never the less here it is... I added the Mousepointer and something like the iGoogle Drop preview. So have a nice day, and if you (or someone) have more suggestions for a better Drag N Drop feeling, let me know best regards, sascha
        Hide
        Michael Xu added a comment -

        hi Sascha,

        Just tried your new patch and what I can say is GREAT!!!

        Look forward to seeing your patch in the trunck

        Regards,
        Michael

        Show
        Michael Xu added a comment - hi Sascha, Just tried your new patch and what I can say is GREAT!!! Look forward to seeing your patch in the trunck Regards, Michael
        Hide
        Sascha Rodekamp added a comment -

        jea, someone have to check the code... and maybe commit the patch, that would be create :-D

        nice WE
        Sascha

        Show
        Sascha Rodekamp added a comment - jea, someone have to check the code... and maybe commit the patch, that would be create :-D nice WE Sascha
        Hide
        Bruno Busco added a comment -

        OFBiz supports common portals that can then be customized by the user.
        If you choose one of these (i.e. one of the MyPortal portals) and you move the portlets around without having created your private copy this does not work.
        You will see the portlets moved but when you reload the page you will find it as it was before.

        Show
        Bruno Busco added a comment - OFBiz supports common portals that can then be customized by the user. If you choose one of these (i.e. one of the MyPortal portals) and you move the portlets around without having created your private copy this does not work. You will see the portlets moved but when you reload the page you will find it as it was before.
        Hide
        Bruno Busco added a comment -

        Some more comments on the code:
        1) the right cursor should be "move" and not "pointer"
        2) please add the license header to all new files

        Show
        Bruno Busco added a comment - Some more comments on the code: 1) the right cursor should be "move" and not "pointer" 2) please add the license header to all new files
        Hide
        Bruno Busco added a comment -

        Just one more comment:
        When you attach a revised patch please use the same file name, Jira will handle this so that it will be clear which one is the newest leaving all old patch still availble to be downloaded.

        Thank you for your continued contribution on this.

        Show
        Bruno Busco added a comment - Just one more comment: When you attach a revised patch please use the same file name, Jira will handle this so that it will be clear which one is the newest leaving all old patch still availble to be downloaded. Thank you for your continued contribution on this.
        Hide
        Bruno Busco added a comment -

        The actual movement arrows could be used as a fallback if Javascript is not enabled.

        Show
        Bruno Busco added a comment - The actual movement arrows could be used as a fallback if Javascript is not enabled.
        Hide
        Sascha Rodekamp added a comment -

        Hey Bruno,

        ok i will handel it.

        regards
        sascha

        Show
        Sascha Rodekamp added a comment - Hey Bruno, ok i will handel it. regards sascha
        Hide
        Sascha Rodekamp added a comment -

        Hi,

        i changed a few things.. :

        1) the cursor is now 'move'
        2) license header added the new files
        3) choose the same patch name
        4) drag'n'drop will only be enabeld when the user has previously created a personal page.

        I hope the changes will meet your expectation
        Have a nice day
        Sascha

        Show
        Sascha Rodekamp added a comment - Hi, i changed a few things.. : 1) the cursor is now 'move' 2) license header added the new files 3) choose the same patch name 4) drag'n'drop will only be enabeld when the user has previously created a personal page. I hope the changes will meet your expectation Have a nice day Sascha
        Hide
        Sascha Rodekamp added a comment -

        sorry for the many posts, but i added a fix for this 'stupid' div flickering bug

        best regards,
        Sascha

        Show
        Sascha Rodekamp added a comment - sorry for the many posts, but i added a fix for this 'stupid' div flickering bug best regards, Sascha
        Hide
        Michael Xu added a comment -

        Hey Bruno,

        I test the patch and it works very well. Could you help review the patch and commit it into the trunk if no problem?

        Regards,
        Michael

        Show
        Michael Xu added a comment - Hey Bruno, I test the patch and it works very well. Could you help review the patch and commit it into the trunk if no problem? Regards, Michael
        Hide
        Bruno Busco added a comment -

        Sascha,
        I tested your last patch and I found that if I press the "ESC" key during the dragging to cancel it, the dotted rectangle is not removed from the screen.
        If you could please fix this I do not find any other problem to commit it.

        BTW:
        Making a deeper review of what I already committed of your patch I would like to discuss with you if the new service you created updatePortletSeqDragDrop could be merged to the service updatePortalPagePortletSeq that was already there.

        The "mode" attribute could be used to tell the updatePortalPagePortletSeq if a relative ("UP", "DOWN","TOP","BOTTOM") or an absolute movement ir required.
        What do you think about?

        Show
        Bruno Busco added a comment - Sascha, I tested your last patch and I found that if I press the "ESC" key during the dragging to cancel it, the dotted rectangle is not removed from the screen. If you could please fix this I do not find any other problem to commit it. BTW: Making a deeper review of what I already committed of your patch I would like to discuss with you if the new service you created updatePortletSeqDragDrop could be merged to the service updatePortalPagePortletSeq that was already there. The "mode" attribute could be used to tell the updatePortalPagePortletSeq if a relative ("UP", "DOWN","TOP","BOTTOM") or an absolute movement ir required. What do you think about?
        Hide
        Sascha Rodekamp added a comment -

        Hi,

        + cloning effect when draging a portlet.
        + ESC press bug, fixed

        Bruno i decided to create a new service, because i go a different way to replace my portlets. I can't use
        the original implementation.
        In my opinion one big service will become to complex/ confusing, so i created a second one. But if
        it's better to have only one service i see no problem to merge them.
        So what do you think?

        Best regards,
        Sascha

        Show
        Sascha Rodekamp added a comment - Hi, + cloning effect when draging a portlet. + ESC press bug, fixed Bruno i decided to create a new service, because i go a different way to replace my portlets. I can't use the original implementation. In my opinion one big service will become to complex/ confusing, so i created a second one. But if it's better to have only one service i see no problem to merge them. So what do you think? Best regards, Sascha
        Hide
        Bruno Busco added a comment -

        Hi Sascha,
        the ESC key works well now.

        But please see what happens in screen1.bmp, screen2.bmp, screen2.bmp when I drag the second portlet and want to place in the last position.

        -screen1.bmp
        Dragging the System status info portlet over the Week view I would have expected to not see any dotted rectangle yet

        -screen2.bmp
        Dragging the System status info portlet after the Week view I would have expected to see the dotted rectangle

        -screen3.bmp
        Dropping the System status info portlet after the Week view I would have expected to have it in place

        Show
        Bruno Busco added a comment - Hi Sascha, the ESC key works well now. But please see what happens in screen1.bmp, screen2.bmp, screen2.bmp when I drag the second portlet and want to place in the last position. -screen1.bmp Dragging the System status info portlet over the Week view I would have expected to not see any dotted rectangle yet -screen2.bmp Dragging the System status info portlet after the Week view I would have expected to see the dotted rectangle -screen3.bmp Dropping the System status info portlet after the Week view I would have expected to have it in place
        Hide
        Jacques Le Roux added a comment -

        Hi Sascha,

        It seems that, to say the least, you have some skills in js programming. Would you mind to have a look at OFBIZ-1825 ?

        Thanks

        Bruno,

        .bmp is bad (bandwidth, at least it's very slow to download) please use rather the screen-copy feature

        Thanks

        Show
        Jacques Le Roux added a comment - Hi Sascha, It seems that, to say the least, you have some skills in js programming. Would you mind to have a look at OFBIZ-1825 ? Thanks Bruno, .bmp is bad (bandwidth, at least it's very slow to download) please use rather the screen-copy feature Thanks
        Hide
        Bruno Busco added a comment -

        Sorry for the large BMP files I was in a hurry and I did not realize how large they were. Replaced with much smaller gif files.

        Show
        Bruno Busco added a comment - Sorry for the large BMP files I was in a hurry and I did not realize how large they were. Replaced with much smaller gif files.
        Hide
        Sascha Rodekamp added a comment -

        Hi Bruno, yeah i see the problem, last night i had a good idea, how to fix it. I hope i can improve the code today.

        Jacques, i will have a look. Maybe i find some time at the weekend.

        Best Regards and a nice day...
        Sascha

        Show
        Sascha Rodekamp added a comment - Hi Bruno, yeah i see the problem, last night i had a good idea, how to fix it. I hope i can improve the code today. Jacques, i will have a look. Maybe i find some time at the weekend. Best Regards and a nice day... Sascha
        Hide
        Sascha Rodekamp added a comment -

        Hey,
        it takes a little bit more time, but i did a few more changes in the code as i expected.

        Now the bugs are fixed. And the Drag'n'Drop expirence should be better.

        Best Regards
        Sascha

        Show
        Sascha Rodekamp added a comment - Hey, it takes a little bit more time, but i did a few more changes in the code as i expected. Now the bugs are fixed. And the Drag'n'Drop expirence should be better. Best Regards Sascha
        Hide
        Sascha Rodekamp added a comment -

        Hi Bruno,
        i saw in svn you commited the patch, thanks. But ,sorry for that, i found a bug while using the IE.
        I made a separate patch to fix this.

        Best Regards
        Sascha

        Show
        Sascha Rodekamp added a comment - Hi Bruno, i saw in svn you commited the patch, thanks. But ,sorry for that, i found a bug while using the IE. I made a separate patch to fix this. Best Regards Sascha
        Hide
        Bruno Busco added a comment -

        Hi Sascha,
        thank you for your continued work on this topic.
        All your patches are in trunk At revision: 884891

        I close the issue but I look forward to having more improvement on this:
        What about being able to create a new column dragging and dropping a portlet on a side of the portal?

        Thank you,
        Bruno

        Show
        Bruno Busco added a comment - Hi Sascha, thank you for your continued work on this topic. All your patches are in trunk At revision: 884891 I close the issue but I look forward to having more improvement on this: What about being able to create a new column dragging and dropping a portlet on a side of the portal? Thank you, Bruno
        Hide
        Sascha Rodekamp added a comment -

        Hi Bruno, many thanks.

        Hm good point. I will implement it asap.
        Are there more suggestions for imporvements?

        Have a nice WE, best regards
        Sascha

        Show
        Sascha Rodekamp added a comment - Hi Bruno, many thanks. Hm good point. I will implement it asap. Are there more suggestions for imporvements? Have a nice WE, best regards Sascha
        Hide
        Jacques Le Roux added a comment -

        The calendar internationalization would be a great improvement, not a hurry though, it waits for some time now OFBIZ-1825

        Thanks

        Show
        Jacques Le Roux added a comment - The calendar internationalization would be a great improvement, not a hurry though, it waits for some time now OFBIZ-1825 Thanks
        Hide
        Michael Xu added a comment -

        hi Sascha,

        It is very weird that I cannot drag and drop portlets after I refresh data. However, if I click "preference" and configure portlets, then I can drag and drop portlets.

        Very weird. It seems something is wrong there. Maybe you need to look into it

        Thanks,
        Michael

        Show
        Michael Xu added a comment - hi Sascha, It is very weird that I cannot drag and drop portlets after I refresh data. However, if I click "preference" and configure portlets, then I can drag and drop portlets. Very weird. It seems something is wrong there. Maybe you need to look into it Thanks, Michael
        Hide
        Sascha Rodekamp added a comment -

        hi Michael,

        it's not a bug it's a feature :-D

        Before you are able to drag your portlets on the front page, you have to go to the preference screen and create your own (user specific) portal page.
        Thats because every group has it's default portlet configuration. This default will be replaced when you make any changes in your myPortal preferences.
        After this the user has his own myPortal configuration and can modify it in his main page.

        Understand the way?

        So long
        Sascha

        Show
        Sascha Rodekamp added a comment - hi Michael, it's not a bug it's a feature :-D Before you are able to drag your portlets on the front page, you have to go to the preference screen and create your own (user specific) portal page. Thats because every group has it's default portlet configuration. This default will be replaced when you make any changes in your myPortal preferences. After this the user has his own myPortal configuration and can modify it in his main page. Understand the way? So long Sascha
        Hide
        Michael Xu added a comment -

        hi Sascha,

        Understand.

        If I want to customize this behavior to allow user can drag and drop without going to portlet configuration, how to do it? Look forward to your advice.

        Thanks,
        Michael

        Show
        Michael Xu added a comment - hi Sascha, Understand. If I want to customize this behavior to allow user can drag and drop without going to portlet configuration, how to do it? Look forward to your advice. Thanks, Michael
        Hide
        Sascha Rodekamp added a comment -

        Hi Michael,

        hm i think there are two ways to solve your problem.

        1) You create a service that added to every new party an specific portal page in the PortalPage Entity.

        2) You edit the showPortalPage.ftl:

        line 37 -40 from:
        <#-- DragNDrop is only activated, when the portal Page isn't the Default page -->
        <#if portalPage.originalPortalPageId?has_content><script>setMousePointer("$

        {portlet_index}")</script></#if>
        <#if portalPage.originalPortalPageId?has_content><script type="text/javascript">makeDragable("${portlet_index}

        ");</script></#if>
        <#if portalPage.originalPortalPageId?has_content><script type="text/javascript">makeDroppable("$

        {portlet_index}");</script></#if>

        to:
        <script>setMousePointer("${portlet_index}

        ")</script>
        <script type="text/javascript">makeDragable("$

        {portlet_index}");</script>
        <script type="text/javascript">makeDroppable("${portlet_index}

        ");</script>

        That should make the portelets Drag & Droppable everytime.
        Bu there comes the problem: when a user drag the first time and haven't his own portal page the changes will not be saved. After reloading the page the portlets will shown in default order.
        So you have to go to the PortalPageServices.xml and extend the 'updatePortletSeqDragDrop' Service.
        --> if the user changes his page the first time, a user specific portal page have to be created before storing the new portlet order.

        Show
        Sascha Rodekamp added a comment - Hi Michael, hm i think there are two ways to solve your problem. 1) You create a service that added to every new party an specific portal page in the PortalPage Entity. 2) You edit the showPortalPage.ftl: line 37 -40 from: <#-- DragNDrop is only activated, when the portal Page isn't the Default page --> <#if portalPage.originalPortalPageId?has_content><script>setMousePointer("$ {portlet_index}")</script></#if> <#if portalPage.originalPortalPageId?has_content><script type="text/javascript">makeDragable("${portlet_index} ");</script></#if> <#if portalPage.originalPortalPageId?has_content><script type="text/javascript">makeDroppable("$ {portlet_index}");</script></#if> to: <script>setMousePointer("${portlet_index} ")</script> <script type="text/javascript">makeDragable("$ {portlet_index}");</script> <script type="text/javascript">makeDroppable("${portlet_index} ");</script> That should make the portelets Drag & Droppable everytime. Bu there comes the problem: when a user drag the first time and haven't his own portal page the changes will not be saved. After reloading the page the portlets will shown in default order. So you have to go to the PortalPageServices.xml and extend the 'updatePortletSeqDragDrop' Service. --> if the user changes his page the first time, a user specific portal page have to be created before storing the new portlet order.
        Hide
        Michael Xu added a comment -

        hi Sascha,

        Thanks. I will ask our tech team to follow your idea.

        I understand your point why users have to go to configuration before drag&drop in MyPortal. However, per my experience of using other portals as end customer, it seems I can always drag&drop portlets immediately after registration, like liferay, jboss portal, etc.

        What's your thought?

        regards,
        Michael

        Show
        Michael Xu added a comment - hi Sascha, Thanks. I will ask our tech team to follow your idea. I understand your point why users have to go to configuration before drag&drop in MyPortal. However, per my experience of using other portals as end customer, it seems I can always drag&drop portlets immediately after registration, like liferay, jboss portal, etc. What's your thought? regards, Michael

          People

          • Assignee:
            Bruno Busco
            Reporter:
            Sascha Rodekamp
          • Votes:
            1 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development