ICEmobile
  1. ICEmobile
  2. MOBI-221

create accordion component using css3 transition for open and close

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.1 Beta
    • Fix Version/s: 1.1 Beta
    • Component/s: None
    • Labels:
      None
    • Environment:
      browsers which support css3 transition, jsf2

      Description

      accordion component will make use of http://jira.icesoft.org/browse/MOBI-218 contentPane in that only the selected pane will be open.
      default height of contentPanes or maxHeight of individual will determine height of each accordion pane.

        Activity

        Judy Guglielmin created issue -
        Judy Guglielmin made changes -
        Field Original Value New Value
        Assignee Steve Maryka [ steve.maryka ] Judy Guglielmin [ judy.guglielmin ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #28914 Wed May 02 16:11:43 MDT 2012 judy.guglielmin MOBI-218, MOBI-223, MOBI-221 still work to do on accordion. css only for ipad and iphone at this point and only tested on those devices as well as desktop Chrome and Safari. Performance api is causing problems on ff, but that is built into page, so commenting it out makes things work
        Files Changed
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/AccordionRenderer.java
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/api/ContentPaneController.java
        Commit graph MODIFY /icemobile/trunk/icemobile/components/tests/mobitest/src/main/webapp/layout/contentPane.xhtml
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/android
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentpane/ipad
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/Accordion.java
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/android/default-webkitOnly-accordion.css
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/AccordionMeta.java
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/api
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/utils/HTML.java
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentstack/ContentStackRenderer.java
        Commit graph ADD /icemobile/trunk/icemobile/components/component/resources/org.icefaces.component.accordion/accordion.js
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentpane/ipad/default-contentpane.css
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/iphone
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentpane/iphone/default-contentpane.css
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentpane/iphone
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/iphone/default-accordion.css
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/ipad/default-accordion.css
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentstack
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/ipad
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentstack/ContentStack.java
        Commit graph ADD /icemobile/trunk/icemobile/components/tests/mobitest/src/main/webapp/layout/accordion.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/components/tests/mobitest/src/main/java/org/icefaces/mobile/layout/LayoutBean.java
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/build.xml
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/contentstack/ContentStackMeta.java
        Commit graph ADD /icemobile/trunk/icemobile/components/component/resources/org.icefaces.component.accordion
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #28918 Wed May 02 16:47:18 MDT 2012 judy.guglielmin MOBI-221
        Files Changed
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/event
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/event/AccordionPaneChangeEvent.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #28923 Thu May 03 12:46:56 MDT 2012 judy.guglielmin MOBI-221 autoheight now kind of working. Updates rule in stylesheet but works best if all contentPanes in accordion are client
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/resources/org.icefaces.component.accordion/accordion.js
        Judy Guglielmin made changes -
        Fix Version/s 1.1 Beta [ 10320 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29071 Wed May 16 15:16:20 MDT 2012 judy.guglielmin MOBI-221 rework for tagHandler specifics on MOBI-218
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/AccordionRenderer.java
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/Accordion.java
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/AccordionMeta.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29074 Wed May 16 16:07:07 MDT 2012 judy.guglielmin MOBI-221 implement paneChangeLIstener (just used ValueChangeEvent as it's just index of pane that is being used to signify change). Note that if a contentPane for accordion is client cacheType, it may not show up as oldValue of the event.
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/AccordionRenderer.java
        Commit graph DEL /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/event/AccordionPaneChangeEvent.java
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/Accordion.java
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/AccordionMeta.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29148 Tue May 22 14:41:56 MDT 2012 judy.guglielmin MOBI-221 using pointer as cursor for accordion pointer
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/iphone/default-accordion.css
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/ipad/default-accordion.css
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/android/default-webkitOnly-accordion.css
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29202 Fri May 25 15:03:03 MDT 2012 patrick.corless MOBI-221 added simple accordion example as a placeholder for new component.
        Files Changed
        Commit graph ADD /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/layout/accordion-desc.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/resources/org/icemobile/samples/mobileshowcase/view/resources/messages.properties
        Commit graph ADD /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/examples/layout/accordion/AccordionBean.java
        Commit graph ADD /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/layout/accordion-example.xhtml
        Commit graph ADD /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/examples/layout/accordion
        Commit graph ADD /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/layout/accordion.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/content/content-stack.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/navigation/LayoutAndNavigationMenu.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29203 Fri May 25 15:05:18 MDT 2012 patrick.corless MOBI-221 updated component build script to include and compress the JavaScript for the new components, accordion, contentStack and tabset.
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/build.xml
        Hide
        Patrick Corless added a comment -

        Put a simple demo into the mobile showcase. I had similar problems as found with the tabset component. Only the first contentPanel seems to be properly inserted into the DOM.

        For both the accordion title bar and the tabset tab, I think we need another way to specify content other then just the title attribute on contentPane.

        For accordian a users will likely want to change the arrow character used to indicate the visiblity of the panel.

        For tabset in the mobile space icons are often used with text or instead of text. Sometimes an icon can say more then a few words which is important on a screen with limited room.

        Show
        Patrick Corless added a comment - Put a simple demo into the mobile showcase. I had similar problems as found with the tabset component. Only the first contentPanel seems to be properly inserted into the DOM. For both the accordion title bar and the tabset tab, I think we need another way to specify content other then just the title attribute on contentPane. For accordian a users will likely want to change the arrow character used to indicate the visiblity of the panel. For tabset in the mobile space icons are often used with text or instead of text. Sometimes an icon can say more then a few words which is important on a screen with limited room.
        Hide
        Judy Guglielmin added a comment -

        for the first issue, I think that's probably due to the use of findComponent in the current trunk version (which I have since changed). Am waiting for Mark's checkin before updating it, but I have taken findComponent out of the ability of the panel to find out if it is selected as a complicated layout may not locate it properly with findComponent.

        no problem to add another attribute. Please suggest a name (icon?) whatever....as that's a very simple thing to do.

        If you look at the Accordion class, you can see a few other options for using a character (rather than having to load an icon). Since the original premise for this product was to try and use as little resource loading as possible, the use of icons can be supported, but assumption was made to try and have defaults that did not rely on extra weight to be brought over from server.
        We can have a default value (the arrow...there are a few others in the class if we want an option), that can be overridden if an icon is present. At least then, we can show it as light as possible.

        Show
        Judy Guglielmin added a comment - for the first issue, I think that's probably due to the use of findComponent in the current trunk version (which I have since changed). Am waiting for Mark's checkin before updating it, but I have taken findComponent out of the ability of the panel to find out if it is selected as a complicated layout may not locate it properly with findComponent. no problem to add another attribute. Please suggest a name (icon?) whatever....as that's a very simple thing to do. If you look at the Accordion class, you can see a few other options for using a character (rather than having to load an icon). Since the original premise for this product was to try and use as little resource loading as possible, the use of icons can be supported, but assumption was made to try and have defaults that did not rely on extra weight to be brought over from server. We can have a default value (the arrow...there are a few others in the class if we want an option), that can be overridden if an icon is present. At least then, we can show it as light as possible.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29284 Mon Jun 04 13:13:14 MDT 2012 judy.guglielmin MOBI-221 updated tests Mark created and cleaned them up. Also fixed javascript which was causing problems in adding and removing contentPanes with c:forEach. (wasn't making allowances for the removal in original js).
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/components/tests/mobitest/src/main/webapp/layout/accordion.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/components/tests/mobitest/src/main/webapp/layoutComponents.html
        Commit graph MODIFY /icemobile/trunk/icemobile/components/tests/mobitest/src/main/webapp/layout/accordionInMultiRowDataTable.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/resources/org.icefaces.component.accordion/accordion.js
        Commit graph MODIFY /icemobile/trunk/icemobile/components/tests/mobitest/src/main/webapp/layout/accordionInDataTable.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/components/tests/mobitest/src/main/webapp/layout/accordionWithCForEach.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/Accordion.java
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/AccordionMeta.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29361 Thu Jun 07 08:26:11 MDT 2012 patrick.corless MOBI-221 added full device theme support of accordion.
        Files Changed
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/bberry/default-accordion.css
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/iphone/default-accordion.css
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/ipad/default-accordion.css
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/android/default-accordion.css
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/bberry
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/honeycomb
        Commit graph MODIFY /icemobile/trunk/icemobile/components/component/build.xml
        Commit graph ADD /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/honeycomb/default-accordion.css
        Commit graph DEL /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/accordion/android/default-webkitOnly-accordion.css
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29362 Thu Jun 07 08:27:37 MDT 2012 patrick.corless MOBI-221 addition of accordion example.
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/input/button.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/layout/accordion-example.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29509 Thu Jun 14 11:24:03 MDT 2012 patrick.corless MOBI-221 updated mediacast panelStack to use facelets=true modification.
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/samples/mediacast/src/main/webapp/mediacast.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29619 Thu Jun 21 11:06:09 MDT 2012 judy.guglielmin MOBI-221 fixed autoheight for accordion in c for each example
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/component/resources/org.icefaces.component.accordion/accordion.js
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29655 Fri Jun 22 14:45:35 MDT 2012 judy.guglielmin MOBI-221 tests updated
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/tests/mobitest/src/main/webapp/layout/accordionWithCForEach.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/tests/mobitest/src/main/webapp/layout/accordionInMultiRowDataTable.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/tests/mobitest/src/main/webapp/layout/accordion.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #29696 Tue Jun 26 15:43:43 MDT 2012 judy.guglielmin MOBI-221 rework accordion component to minimize updates with DomDiff Could still have open and closed strictly in js to further minimize updates
        Files Changed
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/component/resources/org.icefaces.component.tabset/tabset.js
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/tests/mobitest/src/main/webapp/layout/accordionWithCForEach.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/tests/mobitest/src/main/webapp/layout/accordion.xhtml
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/component/src/org/icefaces/mobi/component/accordion/AccordionRenderer.java
        Commit graph MODIFY /icemobile/trunk/icemobile/jsf/components/component/resources/org.icefaces.component.accordion/accordion.js
        Hide
        Judy Guglielmin added a comment -

        accordion component completed in 1.1 Beta. Any new improvements or issues should be a new jira

        Show
        Judy Guglielmin added a comment - accordion component completed in 1.1 Beta. Any new improvements or issues should be a new jira
        Judy Guglielmin made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Migration made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Judy Guglielmin
            Reporter:
            Judy Guglielmin
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: