ICEfaces
  1. ICEfaces
  2. ICE-1177

New Accordion Panel component (now called ice:panelCollapsible)

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.5.1
    • Fix Version/s: 1.6DR#4, 1.6
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Operating System: Windows XP
      Platform: PC
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Add support for org.apache.myfaces.custom.accordion.HtmlAccordionPanel or build
      an equivalent.

        Issue Links

          Activity

          Rob Mayhew created issue -
          Hide
          Philip Breau added a comment -

          wishlist requirements from the forum:
          http://www.icefaces.org/JForum/posts/list/0/3376.page

          1. I'd like that the accordeon component can be fill dynamically.

          2. I'd like create any tab of the accordeon with information that i get of a
          data base,

          3. I'd like too that the label of any tab can be a link

          4. I'd like that inside the content of any tab wil be posible put components
          like tree or others, it can be seemed to a panel tab, but obviously with a
          behavior diferent.

          Show
          Philip Breau added a comment - wishlist requirements from the forum: http://www.icefaces.org/JForum/posts/list/0/3376.page 1. I'd like that the accordeon component can be fill dynamically. 2. I'd like create any tab of the accordeon with information that i get of a data base, 3. I'd like too that the label of any tab can be a link 4. I'd like that inside the content of any tab wil be posible put components like tree or others, it can be seemed to a panel tab, but obviously with a behavior diferent.
          Hide
          Rob Mayhew added a comment -

          Here is the MyFaces accordion example. It uses fixed content (Like tab panel)

          <s:accordionPanel id="test1" layout="accordion">
          <t:panelTab label="Content 1">
          <h:outputText value="Content 1"/>
          <h:inputText value="" onchange="this.form.submit();"/>
          </t:panelTab>
          <t:panelTab label="Content 2">
          <h:outputText value="Content 1"/>
          <h:inputText value="" onchange="this.form.submit();"/>
          </t:panelTab>
          </s:accordionPanel>

          From user input the Ice Accordion component is going to be dynamic with the same
          template used to generate each panel.

          <ice:accordion value="#

          {bean.list}

          " var="var">
          <f:facet name="header">
          <h:outputText value="#

          {var.title}

          "/>
          </f:facet>
          <ice:panelGroup>
          <h:outputText value="#

          {var.body}

          "/>
          </ice:panelGroup>
          </ice:accordion>

          Show
          Rob Mayhew added a comment - Here is the MyFaces accordion example. It uses fixed content (Like tab panel) <s:accordionPanel id="test1" layout="accordion"> <t:panelTab label="Content 1"> <h:outputText value="Content 1"/> <h:inputText value="" onchange="this.form.submit();"/> </t:panelTab> <t:panelTab label="Content 2"> <h:outputText value="Content 1"/> <h:inputText value="" onchange="this.form.submit();"/> </t:panelTab> </s:accordionPanel> From user input the Ice Accordion component is going to be dynamic with the same template used to generate each panel. <ice:accordion value="# {bean.list} " var="var"> <f:facet name="header"> <h:outputText value="# {var.title} "/> </f:facet> <ice:panelGroup> <h:outputText value="# {var.body} "/> </ice:panelGroup> </ice:accordion>
          Hide
          Rob Mayhew added a comment -

          Prototype attached, with example.

          1. I'd like that the accordeon component can be fill dynamically.
          Placing the accordion panel in a series panel will do this.

          2. I'd like create any tab of the accordeon with information that i get of a
          data base,
          See #1

          3. I'd like too that the label of any tab can be a link

          Currently its just a text div that can be clicked to open or close the panel.

          4. I'd like that inside the content of any tab wil be posible put components
          like tree or others, it can be seemed to a panel tab, but obviously with a
          behavior diferent.

          You can place anything inside an accordion panel (In theroy)

          Show
          Rob Mayhew added a comment - Prototype attached, with example. 1. I'd like that the accordeon component can be fill dynamically. Placing the accordion panel in a series panel will do this. 2. I'd like create any tab of the accordeon with information that i get of a data base, See #1 3. I'd like too that the label of any tab can be a link Currently its just a text div that can be clicked to open or close the panel. 4. I'd like that inside the content of any tab wil be posible put components like tree or others, it can be seemed to a panel tab, but obviously with a behavior diferent. You can place anything inside an accordion panel (In theroy)
          Icefaces Administrator made changes -
          Field Original Value New Value
          issue.field.bugzillaimportkey 1229 12446
          Ken Fyten made changes -
          Fix Version/s 1.6DR#1 [ 10035 ]
          Ken Fyten made changes -
          Priority Minor [ 4 ] Major [ 3 ]
          Hide
          Rob Mayhew added a comment -

          The accordion panel has been checked into trunk. Still need to create a component showcase example.

          Show
          Rob Mayhew added a comment - The accordion panel has been checked into trunk. Still need to create a component showcase example.
          Hide
          Rob Mayhew added a comment -

          Resolved fixed

          Show
          Rob Mayhew added a comment - Resolved fixed
          Rob Mayhew made changes -
          Status Open [ 1 ] Closed [ 6 ]
          Affects [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial]
          Resolution Fixed [ 1 ]
          Ken Fyten made changes -
          Resolution Fixed [ 1 ]
          Status Closed [ 6 ] Reopened [ 4 ]
          Ken Fyten made changes -
          Status Reopened [ 4 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Hide
          Patrick Corless added a comment -

          The component showcase example has been implemented. Here are some issue that I had with the current implementation:

          • no TLD documentation, what does the "open" attribute do?
          • would be nice to have a property change listener on collapse/expand interactions
          • effect does not appear to be configurable, even via binding the dataModel?
          • instead of using a label attribute could we have a facet that would allow for the definition of header content. This would allow for the addition of buttons that indicate expansion state, similar to panelPopup implementation.
          • disabled, disabledOnUserRole and renderedOnUserRole attributes are missing for this component. Really important for apps that have a security manager.

          Seems to work well otherwise.

          Show
          Patrick Corless added a comment - The component showcase example has been implemented. Here are some issue that I had with the current implementation: no TLD documentation, what does the "open" attribute do? would be nice to have a property change listener on collapse/expand interactions effect does not appear to be configurable, even via binding the dataModel? instead of using a label attribute could we have a facet that would allow for the definition of header content. This would allow for the addition of buttons that indicate expansion state, similar to panelPopup implementation. disabled, disabledOnUserRole and renderedOnUserRole attributes are missing for this component. Really important for apps that have a security manager. Seems to work well otherwise.
          Ken Fyten made changes -
          Resolution Fixed [ 1 ]
          Status Resolved [ 5 ] Reopened [ 4 ]
          Hide
          Rob Mayhew added a comment -

          To do:

          • Add tld documentation
          • Change open attribute to expanded
          • Remove label, add in a header facet
          • Fire Property Change event when expanded or collapsed.
          • Add toggleOnClick attribute, when header facet is clicked, panel will expand or contract.
          Show
          Rob Mayhew added a comment - To do: Add tld documentation Change open attribute to expanded Remove label, add in a header facet Fire Property Change event when expanded or collapsed. Add toggleOnClick attribute, when header facet is clicked, panel will expand or contract.
          Hide
          Ken Fyten added a comment -

          Another thing to add is the CSS classes for header facet (enabled + disabled + expanded + collapsed)

          Show
          Ken Fyten added a comment - Another thing to add is the CSS classes for header facet (enabled + disabled + expanded + collapsed)
          Ken Fyten made changes -
          Assignee Priority P1
          Rob Mayhew made changes -
          Status Reopened [ 4 ] In Progress [ 3 ]
          Ken Fyten made changes -
          Fix Version/s 1.6DR#4 [ 10060 ]
          Fix Version/s 1.6DR#1 [ 10035 ]
          Hide
          Ken Fyten added a comment -

          Should be valueChangeListener instead of propertyChangeListener.

          Show
          Ken Fyten added a comment - Should be valueChangeListener instead of propertyChangeListener.
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #13646 Wed Apr 25 16:50:09 MDT 2007 rob.mayhew ICE-1177, Accordion Panel changes
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/outputchart/OutputChartRenderer.java
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/accordion/PanelAccordion.java
          Commit graph MODIFY /icefaces/trunk/icefaces/component-metadata/src/main/resources/conf/custom/accordion-component.xml
          Commit graph MODIFY /icefaces/trunk/icefaces/samples/component-showcase/web/css/showcase_style.css
          Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/extras/extras.js
          Commit graph MODIFY /icefaces/trunk/icefaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-accordion-props.xml
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/accordion/PanelAccordionRenderer.java
          Commit graph MODIFY /icefaces/trunk/icefaces/samples/component-showcase/web/inc/layoutPanels/accordionPanel.jspx
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #13647 Wed Apr 25 16:53:50 MDT 2007 rob.mayhew ICE-1177, Accordion Panel changes
          Files Changed
          Commit graph ADD /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/accordion/PanelAccordionState.java
          Hide
          Rob Mayhew added a comment -

          Checked in r13646

          Show
          Rob Mayhew added a comment - Checked in r13646
          Rob Mayhew made changes -
          Status In Progress [ 3 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Hide
          Patrick Corless added a comment -

          Assigning to Mark;

          I'll update this bug with a summary of style issues related to this component.

          Show
          Patrick Corless added a comment - Assigning to Mark; I'll update this bug with a summary of style issues related to this component.
          Patrick Corless made changes -
          Assignee Rob Mayhew [ rob.mayhew ] Mark Collette [ mark.collette ]
          Hide
          Patrick Corless added a comment -

          Here is a list of nice to have feature for the beta release. I can implement the CSS styles for xp and royale once the style names have been straitened out.

          General TLD issue.

          • The style attribute is not in the TLD
          • Style attribute does not appear to work either, attributes are not passed through to the renderer.

          Style Issues.

          • Rob defined the following class hierarchy but didn't not name a default ice specific theme what would be used/rendered by default.
          • If a user sets the styleClass attribute to "accordion" then the following will be rendered.

          Default State

          • accordionHeader
          • accordionContent
          • accordionContainer

          Closed

          • accordionHeader_collapsed
          • accordionContent_collapsed
          • accordionContainer_collapsed

          Open and disabled

          • accordionHeader_dis
          • accordionContent_dis
          • accordionContainer_dis

          Closed and disabled

          • accordionHeader_collapsed_dis
          • accordionContent_collapsed_dis
          • accordionContainer_collapsed_dis
          Show
          Patrick Corless added a comment - Here is a list of nice to have feature for the beta release. I can implement the CSS styles for xp and royale once the style names have been straitened out. General TLD issue. The style attribute is not in the TLD Style attribute does not appear to work either, attributes are not passed through to the renderer. Style Issues. Rob defined the following class hierarchy but didn't not name a default ice specific theme what would be used/rendered by default. If a user sets the styleClass attribute to "accordion" then the following will be rendered. Default State accordionHeader accordionContent accordionContainer Closed accordionHeader_collapsed accordionContent_collapsed accordionContainer_collapsed Open and disabled accordionHeader_dis accordionContent_dis accordionContainer_dis Closed and disabled accordionHeader_collapsed_dis accordionContent_collapsed_dis accordionContainer_collapsed_dis
          Hide
          Patrick Corless added a comment -

          The suffixes seem to correctly applied when the component is rendered. To comply with the default "ICE" themes the default root tyle name should probably be "iceAccordion" and the following default CSS classes could be created.

          /*
          ----------- panelAccordion ----------
          */

          /* opened accordion styles */
          .iceAccordionHeader, .iceAccordionContent, .iceAccordionContainer{
          }
          /* Closed */
          .iceAccordionHeader_collapsed, .iceAccordionContent_collapsed,
          .iceAccordionContainer_collapsed{
          }

          /* Open and disabled */
          .iceAccordionHeader_dis, .iceAccordionContent_dis, .iceAccordionContainer_dis{
          }

          /* Closed and disabled */
          .iceAccordionHeader_collapsed_dis, .iceAccordionContent_collapsed_dis,
          .iceAccordionContainer_collapsed_dis{
          }

          Show
          Patrick Corless added a comment - The suffixes seem to correctly applied when the component is rendered. To comply with the default "ICE" themes the default root tyle name should probably be "iceAccordion" and the following default CSS classes could be created. /* ----------- panelAccordion ---------- */ /* opened accordion styles */ .iceAccordionHeader, .iceAccordionContent, .iceAccordionContainer{ } /* Closed */ .iceAccordionHeader_collapsed, .iceAccordionContent_collapsed, .iceAccordionContainer_collapsed{ } /* Open and disabled */ .iceAccordionHeader_dis, .iceAccordionContent_dis, .iceAccordionContainer_dis{ } /* Closed and disabled */ .iceAccordionHeader_collapsed_dis, .iceAccordionContent_collapsed_dis, .iceAccordionContainer_collapsed_dis{ }
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #13733 Wed May 02 18:42:47 MDT 2007 mark.collette ICE-1177 : AccordionPanel. Made it use the default style class, and the styleClass property.
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/CSS_DEFAULT.java
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/accordion/PanelAccordionRenderer.java
          Hide
          Mark Collette added a comment -

          Made it use the default style class (that xp.css and royale.css provide), and the styleClass component property, together. This means that if you provide a styleClass, then it will set the DOM element's class attribute to both the default style class and the styleClass one, allowing fine grained overriding of styles. Still have to add support for the style attribute.

          Subversion 13733
          icefaces\component\src\com\icesoft\faces\component\accordion\PanelAccordionRenderer.java
          icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java

          Show
          Mark Collette added a comment - Made it use the default style class (that xp.css and royale.css provide), and the styleClass component property, together. This means that if you provide a styleClass, then it will set the DOM element's class attribute to both the default style class and the styleClass one, allowing fine grained overriding of styles. Still have to add support for the style attribute. Subversion 13733 icefaces\component\src\com\icesoft\faces\component\accordion\PanelAccordionRenderer.java icefaces\component\src\com\icesoft\faces\component\CSS_DEFAULT.java
          Mark Collette made changes -
          Link This issue blocks ICE-1517 [ ICE-1517 ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #13742 Wed May 02 20:10:13 MDT 2007 mark.collette ICE-1177 : Accordion Panel. Added the style attribute.
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/accordion/PanelAccordion.java
          Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/accordion/PanelAccordionRenderer.java
          Hide
          Mark Collette added a comment -

          Added the style attribute.

          Subversion 13742
          icefaces\component\src\com\icesoft\faces\component\accordion\PanelAccordion.java
          icefaces\component\src\com\icesoft\faces\component\accordion\PanelAccordionRenderer.java

          Show
          Mark Collette added a comment - Added the style attribute. Subversion 13742 icefaces\component\src\com\icesoft\faces\component\accordion\PanelAccordion.java icefaces\component\src\com\icesoft\faces\component\accordion\PanelAccordionRenderer.java
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #13769 Thu May 03 12:49:25 MDT 2007 mark.collette ICE-1177 : Accordion Panel. Tweaks to the component-showcase.
          Files Changed
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/Copy of apples.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/carrots.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/citrus.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/oranges.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/grapes.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/peppers.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/peppers.jpg
          Commit graph MODIFY /icefaces/trunk/icefaces/samples/component-showcase/web/inc/layoutPanels/accordionPanel.jspx
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/citrus.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion
          Commit graph MODIFY /icefaces/trunk/icefaces/samples/component-showcase/src/com/icesoft/icefaces/samples/showcase/layoutPanels/accordionPanel/AccordionBean.java
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/grapes.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/carrots.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/bananas.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/bananas.jpg
          Commit graph MODIFY /icefaces/trunk/icefaces/samples/component-showcase/web/inc/layoutPanels/accordionPanel-facelets.jspx
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/oranges.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/lettuce.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/lettuce.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/tomatoes.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/apples.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/cucumbers.jpg
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/tomatoes.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/Copy of bananas.jpg
          Commit graph MODIFY /icefaces/trunk/icefaces/core/src/com/icesoft/faces/resources/css/xp/xp.css
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/src/com/icesoft/icefaces/samples/showcase/layoutPanels/accordionPanel/AccordionItem.java
          Commit graph ADD /icefaces/trunk/icefaces/samples/component-showcase/web/images/accordion/cucumbers.jpg
          Commit graph DEL /icefaces/trunk/icefaces/samples/component-showcase/web/images/apples.jpg
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #13770 Thu May 03 12:51:38 MDT 2007 mark.collette ICE-1177 : Accordion Panel. Added style attribute to component-metadata.
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/component-metadata/src/main/resources/conf/ice_cust_properties/cust-accordion-props.xml
          Hide
          Mark Collette added a comment -

          Tweaks to the component-showcase, and to xp.css
          Subversion 13769

          Added style attribute to component-metadata
          Subversion 13770
          icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-accordion-props.xml

          Show
          Mark Collette added a comment - Tweaks to the component-showcase, and to xp.css Subversion 13769 Added style attribute to component-metadata Subversion 13770 icefaces\component-metadata\src\main\resources\conf\ice_cust_properties\cust-accordion-props.xml
          Ken Fyten made changes -
          Link This issue blocks ICE-1747 [ ICE-1747 ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #14289 Wed Jun 27 12:23:29 MDT 2007 mark.collette ICE-1177 : Accordion Panel (panelCollapsible documentation)
          Files Changed
          Commit graph DEL /icefaces/trunk/icefaces/component/doc/accordionPanelDoc.html
          Commit graph ADD /icefaces/trunk/icefaces/component/doc/panelCollapsibleDoc.html
          Hide
          Mark Collette added a comment -

          Tested, and the documentation shows up in the component-showcase, as expected.

          Subversion 14289
          icefaces\component\doc\panelCollapsibleDoc.html [added]
          icefaces\component\doc\accordionPanelDoc.html [deleted]

          Show
          Mark Collette added a comment - Tested, and the documentation shows up in the component-showcase, as expected. Subversion 14289 icefaces\component\doc\panelCollapsibleDoc.html [added] icefaces\component\doc\accordionPanelDoc.html [deleted]
          Ken Fyten made changes -
          Issue Type Improvement [ 4 ] New Feature [ 2 ]
          Ken Fyten made changes -
          Summary Accordion Panel New Accordion Panel component (now called ice:panelCollapsible)
          Ken Fyten made changes -
          Fix Version/s 1.6 [ 10031 ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #14375 Tue Jul 03 15:02:20 MDT 2007 mark.collette ICE-1177 : New Accordion Panel component (now called ice:panelCollapsible)
          Files Changed
          Commit graph MODIFY /icefaces/trunk/icefaces/component/doc/Frame_TOC.htm
          Hide
          Mark Collette added a comment -

          Made the component docs index page refer to the new panelCollapsible page.

          Subversion 14375
          icefaces\component\doc\Frame_TOC.htm

          Show
          Mark Collette added a comment - Made the component docs index page refer to the new panelCollapsible page. Subversion 14375 icefaces\component\doc\Frame_TOC.htm
          Ken Fyten made changes -
          Status Resolved [ 5 ] Closed [ 6 ]
          Assignee Priority P1
          Assignee Mark Collette [ mark.collette ]

            People

            • Assignee:
              Unassigned
              Reporter:
              Rob Mayhew
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: