ICEfaces
  1. ICEfaces
  2. ICE-7032

DOM difference handle sub-component rendering

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.0.2
    • Fix Version/s: 2.1-Beta, 3.0
    • Component/s: Framework
    • Labels:
      None
    • Environment:
      ICEfaces 2, ACE 2.1
    • Assignee Priority:
      P2
    • Workaround Exists:
      Yes
    • Workaround Description:
      Disable the DOM differencing of this component, or of all partial updates.

      Description

      Some of the new ACE components use a technique whereby they render a portion of themselves, instead of their full selves. For example, when sorting, the new data table will only render out the table contents, and not the headers and footers. Or, the tabView component, with dynamic="true", cache="true" and a tabChangeListener, will only render the newly visited tab contents, when they have not yet been shown, instead of the whole tabView, since it is caching the other already loaded tab contents.

      In org.icefaces.impl.context.DOMPartialRenderCallback.visit(-), around line 458, we find the position of the root of the component, by assuming the component clientId is the id of the root DOM element. We then remove the whole DOM sub-tree corresponding to that component, and setup the DOM cursor so that the component may fully render itself in the vacated space. We then search for the new elements by the clientId, so that we can compare the old sub-tree to the new sub-tree. But if the newly rendered output is not of the whole component, the search for the clientId fails, and we get a NPE.

      What needs to be done, is to allow the component to render itself first, adjacent to the old rendering of itself. And then the id of the top-most newly rendered element should be used to find the corresponding old element. If the new top-most element does not have an id, or if it's not found in the old rendering, then the update should just be sent to the browser, without any DOM differencing, and the bridge will deal with it. If the corresponding old element is found, then that old sub-tree may be scraped out, the new sub-tree supplanted in it's place, and the differencing done, so that the optimal change set can be transmitted. In most cases, the top element ids will be the clientId, and it will be the whole component being swapped in, but in special new ACE scenarios, it will be the sub-component regions.
      1. screenshot1.jpg
        91 kB
      2. screenshot2.jpg
        78 kB

        Activity

        Hide
        Ted Goddard added a comment -

        This should now be fixed – the component was not indicating that it required customUpdate, causing the response to corrupt the component. (Inspecting the renderer shows that containing div elements are rendered.)

        Show
        Ted Goddard added a comment - This should now be fixed – the component was not indicating that it required customUpdate, causing the response to corrupt the component. (Inspecting the renderer shows that containing div elements are rendered.)
        Hide
        Ken Fyten added a comment -

        To verify that this feature is working as expected we should create a new ace:dataTable regression test:

        Make test for dataTable row selection that will result in a custom update extension in the response, as well as use the onRowSelectUpdate to specify a region of the page to get a regular jsf update (make sure it changes so dom diff won't suppress), and also make the server side listener use JavascriptRunner to make the response also have an eval section. This way we can test all 3 types of things in the response.

        Show
        Ken Fyten added a comment - To verify that this feature is working as expected we should create a new ace:dataTable regression test: Make test for dataTable row selection that will result in a custom update extension in the response, as well as use the onRowSelectUpdate to specify a region of the page to get a regular jsf update (make sure it changes so dom diff won't suppress), and also make the server side listener use JavascriptRunner to make the response also have an eval section. This way we can test all 3 types of things in the response.
        Hide
        Carmen Cristurean added a comment -

        These changes have been tested for the ace accordionPanel component using code Rev# 25567, on tomcat6, and this works well in Firefox 3.6, Firefox 6 and Gchrome 14.

        In IE8 browser, the dynamic attribute still doesn't work: after setting dynamic=true, when clicking on one of the closed tabs, the accordionPanel component disappears from the page.

        Show
        Carmen Cristurean added a comment - These changes have been tested for the ace accordionPanel component using code Rev# 25567, on tomcat6, and this works well in Firefox 3.6, Firefox 6 and Gchrome 14. In IE8 browser, the dynamic attribute still doesn't work: after setting dynamic=true, when clicking on one of the closed tabs, the accordionPanel component disappears from the page.
        Hide
        Nils Lundquist added a comment -

        Completed test. Works as expected.

        Show
        Nils Lundquist added a comment - Completed test. Works as expected.
        Hide
        Carmen Cristurean added a comment -

        Tested again the ace accordionPanel - dynamic attribute using code rev#25636, and found the issue described above has been fixed.
        This has been verified on browsers: IE8, IE7, Firefox 3.6, Gchrome 14, using tomcat6 as server.

        Show
        Carmen Cristurean added a comment - Tested again the ace accordionPanel - dynamic attribute using code rev#25636, and found the issue described above has been fixed. This has been verified on browsers: IE8, IE7, Firefox 3.6, Gchrome 14, using tomcat6 as server.

          People

          • Assignee:
            Nils Lundquist
            Reporter:
            Mark Collette
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: