Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 3.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 2.1, Advanced Component Environment (ace:)
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration

      Description

      Create a new ace:accordion (panel) component with display, behavior and performance customization options.

      1. accordionAceTabSet-IE8.jpg
        188 kB
      2. accordionCompatPanelTabSet-IE8.jpg
        163 kB
      3. accordionInDataTbl-IE8.jpg
        168 kB
      4. accordionRepeatDtTable1-IE8.jpg
        195 kB
      5. accordionRepeatDtTable2-IE8.jpg
        196 kB
      6. accordionRepeat-IE8.jpg
        186 kB
      7. collapsible-IE8.jpg
        168 kB
      8. Push1.jpg
        65 kB
      9. Push2.jpg
        141 kB

        Activity

        Hide
        Arturo Zambrano added a comment -

        fixed at revision 25240

        Show
        Arturo Zambrano added a comment - fixed at revision 25240
        Hide
        Carmen Cristurean added a comment -

        This component has been tested using code rev# 25567 on tomcat6 server using as browsers: IE8, Firefox 3.6/6.0.1, Gchrome14.

        General problems found:

        • attribute 'collapsible' is not working- this has been tested in all major browsers. ('collapsible' works ok if testing accordionPanel in ui:repeat with FF3.6).
          User cannot collapse open tab if collapsible=true, and in IE8 there is a JS error when clicking on the open tab to close (screenshot collapsible-IE8.jpg attached).
        • attribute 'dynamic' not working in IE8 browser only (dependent on ICE-7032):
          After setting dynamic=true, when clicking on one of the closed tabs, the accordionPanel component disappears from the page.
        • attribute 'fillSpace' does not display the scroll bars in IE8 when fillSpace=true (if this is the desired behaviour).

        Page specific problems:
        In IE8 there are JS errors and in some cases not correct behavior I suppose, when testing the accordionPanel in specific pages:

        1. AccordionPanel in ace:dataTable:
        IE8 issue only (FF3.6 ok): JS error when clicking first time on a closed tab of one of the accordionPanels in the table (screenshot attached - accordionInDataTbl-IE8.jpg).

        2. Accordion in ace:tabSet:
        IE8 issue -> JS error when first time trying to open a closed tab, afterwards doesn't open any of the closed tabs (screenshot attached - accordionAceTabSet-IE8.jpg).

        3. AccordionPanel in compat:PanelTabSet:
        IE8 issues (FF3.6 and FF6 ok): page loads with first tab open, correctly displaying content, there is no scroll bar visible inside tab 1.
        a) when first time clicking on a closed tab - tab 2 , this opens with a scroll bar, content is hidden and must scroll to see content.
        b) when clicking on the next closed tab - tab 3 - of the accordionPanel, this opens with a scroll bar, content is hidden and must scroll to see content.
        c) When clicking second time on tab 2 which is closed -> this opens tab 2 and there is no scroll bar, tab 3 is not being closed, plus JS error (screenshot attached -
        accordionCompatPanelTabSet-IE8.jpg)

        4. AccordionPanel with Push
        IE8 issues (FF3.6 ok):
        a) When adding an accordionPanel component: first accordionPanel component added on the page has a vertical scroll bar, while all newly added components afterwards have a horizontal scroll bar (image Push1.jpg attached)
        b) When trying to open a closed tab in the added accordionPanel, it opens the new tab but doesn't close the previous tab, plus JS error (image Push2.jpg attached).

        5. AccordionPanel in UI:Repeat
        In IE8, this works correctly only if autoHeight = false (FF 3.6 ok).
        If autoHeight=true, clicking on a closed tab -> opens this tab without closing the previous open tab, plus JS error; afterwards no other tab can be closed/open (screenshot accordionRepeat-IE8 attached).

        6. AccordionPanel in ui:Repeat and DataTable
        IE8 - issues:
        a) When changing tabs -> JS error (accordionRepeatDtTable1-IE8.jpg attached)
        b) When trying to close the open tab (collapsible was set to true) -> JS error (accordionRepeatDtTable1-IE8.jpg attached)

        The test application war file (accordionPanel.war) is attached as well.

        Show
        Carmen Cristurean added a comment - This component has been tested using code rev# 25567 on tomcat6 server using as browsers: IE8, Firefox 3.6/6.0.1, Gchrome14. General problems found: attribute 'collapsible' is not working- this has been tested in all major browsers. ('collapsible' works ok if testing accordionPanel in ui:repeat with FF3.6). User cannot collapse open tab if collapsible=true, and in IE8 there is a JS error when clicking on the open tab to close (screenshot collapsible-IE8.jpg attached). attribute 'dynamic' not working in IE8 browser only (dependent on ICE-7032 ): After setting dynamic=true, when clicking on one of the closed tabs, the accordionPanel component disappears from the page. attribute 'fillSpace' does not display the scroll bars in IE8 when fillSpace=true (if this is the desired behaviour). Page specific problems: In IE8 there are JS errors and in some cases not correct behavior I suppose, when testing the accordionPanel in specific pages: 1. AccordionPanel in ace:dataTable: IE8 issue only (FF3.6 ok): JS error when clicking first time on a closed tab of one of the accordionPanels in the table (screenshot attached - accordionInDataTbl-IE8.jpg). 2. Accordion in ace:tabSet: IE8 issue -> JS error when first time trying to open a closed tab, afterwards doesn't open any of the closed tabs (screenshot attached - accordionAceTabSet-IE8.jpg). 3. AccordionPanel in compat:PanelTabSet: IE8 issues (FF3.6 and FF6 ok): page loads with first tab open, correctly displaying content, there is no scroll bar visible inside tab 1. a) when first time clicking on a closed tab - tab 2 , this opens with a scroll bar, content is hidden and must scroll to see content. b) when clicking on the next closed tab - tab 3 - of the accordionPanel, this opens with a scroll bar, content is hidden and must scroll to see content. c) When clicking second time on tab 2 which is closed -> this opens tab 2 and there is no scroll bar, tab 3 is not being closed, plus JS error (screenshot attached - accordionCompatPanelTabSet-IE8.jpg) 4. AccordionPanel with Push IE8 issues (FF3.6 ok): a) When adding an accordionPanel component: first accordionPanel component added on the page has a vertical scroll bar, while all newly added components afterwards have a horizontal scroll bar (image Push1.jpg attached) b) When trying to open a closed tab in the added accordionPanel, it opens the new tab but doesn't close the previous tab, plus JS error (image Push2.jpg attached). 5. AccordionPanel in UI:Repeat In IE8, this works correctly only if autoHeight = false (FF 3.6 ok). If autoHeight=true, clicking on a closed tab -> opens this tab without closing the previous open tab, plus JS error; afterwards no other tab can be closed/open (screenshot accordionRepeat-IE8 attached). 6. AccordionPanel in ui:Repeat and DataTable IE8 - issues: a) When changing tabs -> JS error (accordionRepeatDtTable1-IE8.jpg attached) b) When trying to close the open tab (collapsible was set to true) -> JS error (accordionRepeatDtTable1-IE8.jpg attached) The test application war file (accordionPanel.war) is attached as well.
        Hide
        Ken Fyten added a comment -

        JIRA created (ICE-7243) for "ace:accordionPanel dynamic and cache properties cause panel not to render its tabs properly. The onTabChangeUpdate attribute is also affected by those parameters."

        Show
        Ken Fyten added a comment - JIRA created (ICE-7243) for "ace:accordionPanel dynamic and cache properties cause panel not to render its tabs properly. The onTabChangeUpdate attribute is also affected by those parameters."
        Hide
        Carmen Cristurean added a comment -

        Tested this component on IE7 browser: all errors found for IE8 occur as well for IE7, with a difference for the AccordionPanel in ace:tabSet, where there was no JS error, however selecting any of the closed tabs of the component will collapse all tabs.

        Show
        Carmen Cristurean added a comment - Tested this component on IE7 browser: all errors found for IE8 occur as well for IE7, with a difference for the AccordionPanel in ace:tabSet, where there was no JS error, however selecting any of the closed tabs of the component will collapse all tabs.
        Hide
        Carmen Cristurean added a comment -

        The same behavior was found on Gchrome 14 browser for the AccordionPanel in ace:tabSet (collapsing all tabs when selecting a closed tab).

        Show
        Carmen Cristurean added a comment - The same behavior was found on Gchrome 14 browser for the AccordionPanel in ace:tabSet (collapsing all tabs when selecting a closed tab).
        Hide
        Carmen Cristurean added a comment -

        Updated tag name in QA pages (<ace:accordionPanel> => <ace:accordion>.)

        Show
        Carmen Cristurean added a comment - Updated tag name in QA pages (<ace:accordionPanel> => <ace:accordion>.)
        Hide
        Ken Fyten added a comment -

        The ace:Accordion component still has attributes that reference the "Tab" naming convention. These attributes should be changed to use "Pane" in place of "Tab", since the component uses accordionPane's now, and not Tabs.

        Show
        Ken Fyten added a comment - The ace:Accordion component still has attributes that reference the "Tab" naming convention. These attributes should be changed to use "Pane" in place of "Tab", since the component uses accordionPane's now, and not Tabs.
        Hide
        yip.ng added a comment -

        Done, including comp-suite.

        Revision: 25806


        Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/Accordion.java
        Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionHandler.java
        Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionMeta.java
        Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionRenderer.java

        Revision: 28866


        Modified : /applications/comp-suite/trunk/comp-suite/src/main/java/org/icefaces/samples/showcase/example/ace/accordionpanel/AccordionPanelDynamicBean.java
        Modified : /applications/comp-suite/trunk/comp-suite/src/main/java/org/icefaces/samples/showcase/example/compat/tab/TabEvents.java
        Modified : /applications/comp-suite/trunk/comp-suite/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        Modified : /applications/comp-suite/trunk/comp-suite/src/main/webapp/resources/examples/ace/accordionpanel/accordionPanelDynamic.xhtml
        Modified : /applications/comp-suite/trunk/comp-suite/src/main/webapp/resources/examples/compat/tab/tabEvents.xhtml

        Show
        yip.ng added a comment - Done, including comp-suite. Revision: 25806 Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/Accordion.java Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionHandler.java Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionMeta.java Modified : /icefaces-ee/scratchpads/grimlock/icefaces/ace/component/src/org/icefaces/ace/component/accordion/AccordionRenderer.java Revision: 28866 Modified : /applications/comp-suite/trunk/comp-suite/src/main/java/org/icefaces/samples/showcase/example/ace/accordionpanel/AccordionPanelDynamicBean.java Modified : /applications/comp-suite/trunk/comp-suite/src/main/java/org/icefaces/samples/showcase/example/compat/tab/TabEvents.java Modified : /applications/comp-suite/trunk/comp-suite/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties Modified : /applications/comp-suite/trunk/comp-suite/src/main/webapp/resources/examples/ace/accordionpanel/accordionPanelDynamic.xhtml Modified : /applications/comp-suite/trunk/comp-suite/src/main/webapp/resources/examples/compat/tab/tabEvents.xhtml
        Hide
        Carmen Cristurean added a comment -

        QA test app has been updated with new attributes names of the ace:Accordion component.

        Show
        Carmen Cristurean added a comment - QA test app has been updated with new attributes names of the ace:Accordion component.
        Hide
        Carmen Cristurean added a comment -

        Reopening this because accordion in ui:Repeat does not work properly.
        In IE8 a JS error occur when changing panes, and the accordion does not close the previously opened pane, when selecting a new one. Page is frozen afterwards. (image 4 attached).
        There are no issues on Firefox6, Gchrome14.

        Show
        Carmen Cristurean added a comment - Reopening this because accordion in ui:Repeat does not work properly. In IE8 a JS error occur when changing panes, and the accordion does not close the previously opened pane, when selecting a new one. Page is frozen afterwards. (image 4 attached). There are no issues on Firefox6, Gchrome14.
        Hide
        Carmen Cristurean added a comment -

        Retested the accordion component using grimlock code rev# 26281, tomcat 6 as server, and browser IE8:

        The JS script error still occurs in IE8 when changing panes of the accordion in UI:Repeat; also, when selecting a new pane the previously open pane does not close. (screenshot # 4 attached).

        The JS errors occur as well in IE8 for:

        • accordion in Ace TabSet (screen shot #2)
        • accordion in Compat TabSet (screen shot #3)
        • accordion with "collapsible=true" when collapsing an open pane (screen shot#7).
        Show
        Carmen Cristurean added a comment - Retested the accordion component using grimlock code rev# 26281, tomcat 6 as server, and browser IE8: The JS script error still occurs in IE8 when changing panes of the accordion in UI:Repeat; also, when selecting a new pane the previously open pane does not close. (screenshot # 4 attached). The JS errors occur as well in IE8 for: accordion in Ace TabSet (screen shot #2) accordion in Compat TabSet (screen shot #3) accordion with "collapsible=true" when collapsing an open pane (screen shot#7).
        Hide
        yip.ng added a comment - - edited

        Error in tabsets and repeat is inside jquery-ui.js, something to do with animation. It only occurs in quirks mode in compat tabset and repeat. Fixed by adding DOCTYPE to force into standards mode. ace tabset still has the same error even in standards mode. Error in "collapsible=true" is another problem, probably nothing to do with collapsible attribute. Need to trace and debug.

        Show
        yip.ng added a comment - - edited Error in tabsets and repeat is inside jquery-ui.js, something to do with animation. It only occurs in quirks mode in compat tabset and repeat. Fixed by adding DOCTYPE to force into standards mode. ace tabset still has the same error even in standards mode. Error in "collapsible=true" is another problem, probably nothing to do with collapsible attribute. Need to trace and debug.
        Hide
        yip.ng added a comment -

        "collapsible=true error" occurs in IE9 and FF as well, but in FF no JS error is reported, the function is just stepped out in the debugger at that point, as if it could be expected and there were a try-catch somewhere in the call stack, and afterwards things continue to work fine. Added extra exception condition check.

        Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\accordion\accordion.js
        Completed: At revision: 26644

        Show
        yip.ng added a comment - "collapsible=true error" occurs in IE9 and FF as well, but in FF no JS error is reported, the function is just stepped out in the debugger at that point, as if it could be expected and there were a try-catch somewhere in the call stack, and afterwards things continue to work fine. Added extra exception condition check. Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\accordion\accordion.js Completed: At revision: 26644
        Hide
        yip.ng added a comment -

        The JS error still present in IE8 (even in standards mode) is caused by animation. Somehow after a bunch of animation calculations a negative height is being set in IE8, which triggers the error. There is a comment in the code which says, "IE gets very inconsistent results when animating elements". In Firebug we can see a strange number involved in the calculation: -0.4333999999999989. So this is likely caused by some freak calculation and/or rounding errors in this particular layout scenario.

        Show
        yip.ng added a comment - The JS error still present in IE8 (even in standards mode) is caused by animation. Somehow after a bunch of animation calculations a negative height is being set in IE8, which triggers the error. There is a comment in the code which says, "IE gets very inconsistent results when animating elements". In Firebug we can see a strange number involved in the calculation: -0.4333999999999989. So this is likely caused by some freak calculation and/or rounding errors in this particular layout scenario.
        Hide
        Ken Fyten added a comment -

        Can we modify the JS for the animation to trap the negative height and set it to zero instead then?

        Show
        Ken Fyten added a comment - Can we modify the JS for the animation to trap the negative height and set it to zero instead then?
        Hide
        yip.ng added a comment -

        Done and tested.

        Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery-ui.js
        Completed: At revision: 26652

        Show
        yip.ng added a comment - Done and tested. Modified: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\jquery\ui\jquery-ui.js Completed: At revision: 26652
        Hide
        Carmen Cristurean added a comment -

        Tested ace:accordion component using code revision 26767 with IE8 .

        There are no more JS errors, however the accordion inside ace:tabSet does not work properly: if switching to the closed panes, the accordion collapses altogether and panes cannot be open afterwards.
        This issue occurs in IE 8 and Chrome 15 (not in Firefox).

        Unsure if this issue is related to the fix for the JS errors in IE8 (this JIRA), or to the fix for the 'collapsible' attribute (ICE-7497).

        Note: The accordion component on the test page was defined with collapsible="false".

        To reproduce:

        Show
        Carmen Cristurean added a comment - Tested ace:accordion component using code revision 26767 with IE8 . There are no more JS errors, however the accordion inside ace:tabSet does not work properly: if switching to the closed panes, the accordion collapses altogether and panes cannot be open afterwards. This issue occurs in IE 8 and Chrome 15 (not in Firefox). Unsure if this issue is related to the fix for the JS errors in IE8 (this JIRA), or to the fix for the 'collapsible' attribute (ICE-7497). Note: The accordion component on the test page was defined with collapsible="false". To reproduce: test application location: http://server.ice:8888/svn/repo/qa/trunk/Regression-Icefaces2/Sparkle/Nightly/accordion load the test page for accordion isnide ace:tabSet: http://localhost:8080/accordion/accordionIceTabSet.jsf page opens with first pane open. Click on the next pane to open -> this works fine. click on the third pane -> this collapses all accordionPanes.
        Hide
        Carmen Cristurean added a comment -

        Created ICE-7546 for the ace:accordion inside ace:tabSet issue described above, and closing this as per Ken's request.

        Show
        Carmen Cristurean added a comment - Created ICE-7546 for the ace:accordion inside ace:tabSet issue described above, and closing this as per Ken's request.

          People

          • Assignee:
            yip.ng
            Reporter:
            Arturo Zambrano
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: