ICEfaces
  1. ICEfaces
  2. ICE-5255

Optimize drag and drop DOM update markup

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2-EE-GA
    • Fix Version/s: 1.8.2-EE-GA_P01, 1.8.3
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      -
    • Assignee Priority:
      P1

      Description

      For example, re-ordering panelGroups that are both draggable and a dropTarget within a dataTable results in additional markup being added to the DOM update. The DOM update that occurs as a result of this drag and drop includes references to Droppables.add, which is a javascript call used by addDropTarget() (com.icesoft.faces.context.effects.DragDrop.java) to make an HTML element droppable. Here is one such update as logged by Firebug:

      <updates><update address="statcomForm:stringTable:5:id" tag="span"><attribute name="class"><![CDATA[iceOutTxt]]></attribute><attribute name="id"><![CDATA[statcomForm:stringTable:5:id]]></attribute><attribute name="style"><![CDATA[float:left;font-weight:bold;]]></attribute><content><![CDATA[String1_8]]></content></update><update address="statcomForm:stringTable:8:id" tag="span"><attribute name="class"><![CDATA[iceOutTxt]]></attribute><attribute name="id"><![CDATA[statcomForm:stringTable:8:id]]></attribute><attribute name="style"><![CDATA[float:left;font-weight:bold;]]></attribute><content><![CDATA[String1_2]]></content></update><update address="Bg4a5OHjo38unau3UK1-QA:1:dynamic-code" tag="script"><attribute name="id"><![CDATA[Bg4a5OHjo38unau3UK1-QA:1:dynamic-code]]></attribute><attribute name="type"><![CDATA[text/javascript]]></attribute><content><![CDATA[Droppables.add('statcomForm:stringTable:0:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:1:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:2:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:3:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:4:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:5:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:6:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:7:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:8:j_id17',{mask:'1,2,3,4,5'});Droppables.add('statcomForm:stringTable:9:j_id17',{mask:'1,2,3,4,5'});Ice.Focus.setFocus('undefined');//261087250]]></content></update></updates>

      It has been recommended that we review optimizing these drag and drop DOM updates and remove markup such as Droppables.add().

      A test case (intended for deployment on tomcat 6) containing 3 sample pages is attached.

      1. http://localhost:8080/sc8858/dnd_demo1.iface
      2. http://localhost:8080/sc8858/dnd_demo2.iface
      3. http://localhost:8080/sc8858/dnd_demo2_no_dnd.xhtml

      Pages' 1 and 2 are very much the same and can be used to reproduce the extra markup included in the send-receive-updates-request. The third page does not exhibit the issue as dropTarget is set to false which means that we do not keep track of droppable elements.

        Activity

        Hide
        Ted Goddard added a comment - - edited

        The customer reports that the Droppables JavaScript is added to the page even when no other page changes take place, for instance, when Ajax Push occurs.

        Show
        Ted Goddard added a comment - - edited The customer reports that the Droppables JavaScript is added to the page even when no other page changes take place, for instance, when Ajax Push occurs.
        Hide
        Adnan Durrani added a comment -

        The D&D component is using JavascriptContext.addJavascriptCall() to register dropTargets. Which means the registration call will be sent to client on each render cycle.

        • To resolve this issue, first we tried to rendered out the script node for the registration of dropTarget. That would allow script node to be sent only on panelGroup updated. It worked fine until there was a panelGroup level update, where all listeners were lost.
        • We tried registering dropTarget on mouseover events, which also be sent only when panelGroup update was required. It works fine in most cases but in one condition the target doesn't drop when you drag so fast and drop the target before it gets registered.
        • In last we tried the hybrid solution which using both above techniques. Rendering script node to register dropTarget for first render and register dropTarget on mouseover only if dropTarget was not registered already. It gave better user experience.
        Show
        Adnan Durrani added a comment - The D&D component is using JavascriptContext.addJavascriptCall() to register dropTargets. Which means the registration call will be sent to client on each render cycle. To resolve this issue, first we tried to rendered out the script node for the registration of dropTarget. That would allow script node to be sent only on panelGroup updated. It worked fine until there was a panelGroup level update, where all listeners were lost. We tried registering dropTarget on mouseover events, which also be sent only when panelGroup update was required. It works fine in most cases but in one condition the target doesn't drop when you drag so fast and drop the target before it gets registered. In last we tried the hybrid solution which using both above techniques. Rendering script node to register dropTarget for first render and register dropTarget on mouseover only if dropTarget was not registered already. It gave better user experience.
        Hide
        Adnan Durrani added a comment - - edited

        Trunk:
        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js
        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java
        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js
        Completed: At revision: 20813

        EE:
        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js
        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java
        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js
        Completed: At revision: 20814

        Show
        Adnan Durrani added a comment - - edited Trunk: Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js Completed: At revision: 20813 EE: Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\GroupRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\panelpopup\PanelPopupRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js Completed: At revision: 20814
        Hide
        Joanne Bai added a comment -

        Position panel regression failures found on CEfaces-1.8.2-ee revision: 20826 - the second drag and drop is not working

        ICE-3060
        ICE-3020
        ICE-3019

        Show
        Joanne Bai added a comment - Position panel regression failures found on CEfaces-1.8.2-ee revision: 20826 - the second drag and drop is not working ICE-3060 ICE-3020 ICE-3019
        Hide
        Adnan Durrani added a comment -

        Joanne the logging messages you wrote about are always there. So don't worry about it.

        This commit should fix the panelPoistion and related demos.

        Trunk:
        Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js
        Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js
        Completed: At revision: 20837

        EE
        Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js
        Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js
        Completed: At revision: 20838

        Show
        Adnan Durrani added a comment - Joanne the logging messages you wrote about are always there. So don't worry about it. This commit should fix the panelPoistion and related demos. Trunk: Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\droppable_ext.js Completed: At revision: 20837 EE Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\droppable_ext.js Completed: At revision: 20838
        Hide
        Joanne Bai added a comment -

        Those three Panel Position tests have been verified successfully with the new fix (ICEfaces-ee-1.8.2 revision 20840)
        Tested on Tomcat 5 + FF3.5 and IE8.

        Thanks, Adnan. Close it!

        Show
        Joanne Bai added a comment - Those three Panel Position tests have been verified successfully with the new fix (ICEfaces-ee-1.8.2 revision 20840) Tested on Tomcat 5 + FF3.5 and IE8. Thanks, Adnan. Close it!
        Hide
        Isuru Perera added a comment -

        Can you give support for more options in Draggable?

        http://wiki.github.com/madrobby/scriptaculous/draggable

        Show
        Isuru Perera added a comment - Can you give support for more options in Draggable? http://wiki.github.com/madrobby/scriptaculous/draggable

          People

          • Assignee:
            Adnan Durrani
            Reporter:
            Tyler Johnson
          • Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: