Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.0.BETA, EE-3.3.0.GA_P02, 4.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 3.x, ACE comps
    • Assignee Priority:
      P2
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Add a new ace:radioButton component. This component will essentially be a clone of the ace:checkboxButton, but with radio-button images by default.

      Also, when used in conjunction with an ace:buttonGroup, the ace:radioButton components will be selected in a mutually exclusive manner.

        Activity

        Hide
        yip.ng added a comment -

        Radio button component created based on checkbox button component. Icons used are the ui-icon-radio-on and ui-icon-radio-off icons from theme style sheets.

        • The on and off icons seem to be switched in latest jQuery UI version compared to our theme style sheets. Added override CSS to adhere to new version.
        • Theme icon color determined by ui-state classes, but the ui-state classes also dictate the background color, so you get a colored squared look. If we don't use ui-state classes, then the the radio buttons will just be a black/gray color.

        See it in action.

        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-active.png#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-disabled.gif#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-focus.png#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-highlight.png#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background.png#37331
        M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\build.xml#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\radiobutton.css#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton\RadioButton.java#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\radiobutton.js#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton\RadioButtonMeta.java#37331
        A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton\RadioButtonRenderer.java#37331

        Show
        yip.ng added a comment - Radio button component created based on checkbox button component. Icons used are the ui-icon-radio-on and ui-icon-radio-off icons from theme style sheets. The on and off icons seem to be switched in latest jQuery UI version compared to our theme style sheets. Added override CSS to adhere to new version. Theme icon color determined by ui-state classes, but the ui-state classes also dictate the background color, so you get a colored squared look. If we don't use ui-state classes, then the the radio buttons will just be a black/gray color. See it in action . A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-active.png#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-disabled.gif#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-focus.png#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background-highlight.png#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\background.png#37331 M: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\build.xml#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\radiobutton.css#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton\RadioButton.java#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\resources\icefaces.ace\radiobutton\radiobutton.js#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton\RadioButtonMeta.java#37331 A: C:\svn\ossrepo\icefaces3\trunk\icefaces\ace\component\src\org\icefaces\ace\component\radiobutton\RadioButtonRenderer.java#37331
        Hide
        yip.ng added a comment -

        Radio button group also done. See ICE-9476.

        Show
        yip.ng added a comment - Radio button group also done. See ICE-9476 .
        Hide
        Ken Fyten added a comment -

        Let's update the showcase demos to add one for ace:radioButton and ace:buttonGroup.

        Show
        Ken Fyten added a comment - Let's update the showcase demos to add one for ace:radioButton and ace:buttonGroup.
        Hide
        Arturo Zambrano added a comment -

        Added demos for ace:radioButton and ace:buttonGroup at revision 37448.

        Show
        Arturo Zambrano added a comment - Added demos for ace:radioButton and ace:buttonGroup at revision 37448.
        Hide
        Arturo Zambrano added a comment -

        Committed the following fixes and improvements at revision 37837:

        • Changed ace:radioButton behaviour to not deselect it when activating/clicking on it again.
        • Changed the component initialization procedure from lazy to eager. All radio buttons inside a button group have to be initialized in order to be able to toggle them on an off when one of them is activated. Specifically, the probelm was that when reloading the page and there was a selected radio button already, it was possible to select another radio button in the same group, without deselecting the radio button that was already selected when reloading the page. This was so, because the selected styling came from the server that way, but in the client that radio button hadn't been initialized, so it wasn't possible to deselect it when selecting another radio button.
        • Modified ace:buttonGroup to support other nested components and not only checkboxes and radio buttons.
        • Added label and labelPosition support to ace:radioButton.
        • Fixed issue with ace:buttonGroup having to be immediate parent in order for radio button to know its group id.
        Show
        Arturo Zambrano added a comment - Committed the following fixes and improvements at revision 37837: Changed ace:radioButton behaviour to not deselect it when activating/clicking on it again. Changed the component initialization procedure from lazy to eager. All radio buttons inside a button group have to be initialized in order to be able to toggle them on an off when one of them is activated. Specifically, the probelm was that when reloading the page and there was a selected radio button already, it was possible to select another radio button in the same group, without deselecting the radio button that was already selected when reloading the page. This was so, because the selected styling came from the server that way, but in the client that radio button hadn't been initialized, so it wasn't possible to deselect it when selecting another radio button. Modified ace:buttonGroup to support other nested components and not only checkboxes and radio buttons. Added label and labelPosition support to ace:radioButton. Fixed issue with ace:buttonGroup having to be immediate parent in order for radio button to know its group id.
        Hide
        Arturo Zambrano added a comment -

        Removed borders, background and active styling from radio button at revision 37839. Now, only the icons are rendered, as well as the hover styling.

        Show
        Arturo Zambrano added a comment - Removed borders, background and active styling from radio button at revision 37839. Now, only the icons are rendered, as well as the hover styling.
        Hide
        Arturo Zambrano added a comment -

        Remaining issues:

        • There's an ajax request for every radio button in the button group that has an ajax tag whenever one of the buttons is selected. This is caused by indirectly toggling the other buttons, which still fires an ajax request. We need to decide if we want to keep this behaviour or not. I would say this behaviour should be removed, since app developers are often more interested in actual user actions than programmatic changes in the client.
        • mutuallyExclusive=false not working, it keeps working in a mutually exclusive way.
        • Need to rename CSS class names for things to work with custom images.
        Show
        Arturo Zambrano added a comment - Remaining issues: There's an ajax request for every radio button in the button group that has an ajax tag whenever one of the buttons is selected. This is caused by indirectly toggling the other buttons, which still fires an ajax request. We need to decide if we want to keep this behaviour or not. I would say this behaviour should be removed, since app developers are often more interested in actual user actions than programmatic changes in the client. mutuallyExclusive=false not working, it keeps working in a mutually exclusive way. Need to rename CSS class names for things to work with custom images.
        Hide
        Ken Fyten added a comment -

        There's an ajax request for every radio button in the button group that has an ajax tag whenever one of the buttons is selected. This is caused by indirectly toggling the other buttons, which still fires an ajax request. We need to decide if we want to keep this behaviour or not. I would say this behaviour should be removed, since app developers are often more interested in actual user actions than programmatic changes in the client.

        Let's add a new "deactivate" ace:ajax event for the button that will fire when deselected, then "activate" only fires when the button is selected (and not when it is deselected).

        Show
        Ken Fyten added a comment - There's an ajax request for every radio button in the button group that has an ajax tag whenever one of the buttons is selected. This is caused by indirectly toggling the other buttons, which still fires an ajax request. We need to decide if we want to keep this behaviour or not. I would say this behaviour should be removed, since app developers are often more interested in actual user actions than programmatic changes in the client. Let's add a new "deactivate" ace:ajax event for the button that will fire when deselected, then "activate" only fires when the button is selected (and not when it is deselected).
        Hide
        Arturo Zambrano added a comment -

        At revision 37860, added 'deactivate' ajax event, and made component respect the mutuallyExclusive setting of ace:buttonGroup.

        Show
        Arturo Zambrano added a comment - At revision 37860, added 'deactivate' ajax event, and made component respect the mutuallyExclusive setting of ace:buttonGroup.
        Hide
        Arturo Zambrano added a comment -

        Closing issue with changes committed at revision 37880:

        • Changed CSS class name scheme, added selected and unselected state CSS class names.
        • Changed selection event processing sequence: first deactivate other radio buttons and then activate this radio button (and send request once all buttons are in the correct state).
        • Revamped custom images demo and adjusted ace:radioButton and ace:buttonGroup overview demos in showcase.
        • Added documentation resources classes for ace:radioButton and ace:buttonGroup in showcase.
        Show
        Arturo Zambrano added a comment - Closing issue with changes committed at revision 37880: Changed CSS class name scheme, added selected and unselected state CSS class names. Changed selection event processing sequence: first deactivate other radio buttons and then activate this radio button (and send request once all buttons are in the correct state). Revamped custom images demo and adjusted ace:radioButton and ace:buttonGroup overview demos in showcase. Added documentation resources classes for ace:radioButton and ace:buttonGroup in showcase.
        Hide
        Carmen Cristurean added a comment -

        In showcase sample app -> ace:radioButton demos, a JS error occurs in Firefox23 and IE10 when submitting a new value for the radioButton (not an issue in Chrome).
        This can be reproduced in showcase by clicking a few times on the radioButtons:
        TypeError: g is null
        http://localhost:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=o87tz3
        Line 5780

        A similar JS error occurs in the test application for the radioButton on the "RadioButton Only" test page (http://server.ice:8888/svn/repo/qa/trunk/Regression-Icefaces2/Sparkle/Manual/radioButton).

        TypeError: g is null
        http://localhost:8080/radioButton/javax.faces.resource/util/ace-components.js.jsf?ln=icefaces.ace&v=3_4_0_130920
        Line 1

        Show
        Carmen Cristurean added a comment - In showcase sample app -> ace:radioButton demos, a JS error occurs in Firefox23 and IE10 when submitting a new value for the radioButton (not an issue in Chrome). This can be reproduced in showcase by clicking a few times on the radioButtons: TypeError: g is null http://localhost:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=o87tz3 Line 5780 A similar JS error occurs in the test application for the radioButton on the "RadioButton Only" test page ( http://server.ice:8888/svn/repo/qa/trunk/Regression-Icefaces2/Sparkle/Manual/radioButton ). TypeError: g is null http://localhost:8080/radioButton/javax.faces.resource/util/ace-components.js.jsf?ln=icefaces.ace&v=3_4_0_130920 Line 1
        Hide
        Arturo Zambrano added a comment -

        Committed fix for last issue at revision 38263. Removed some unnecessary lazy-loading code that was causing the error.

        Show
        Arturo Zambrano added a comment - Committed fix for last issue at revision 38263. Removed some unnecessary lazy-loading code that was causing the error.
        Hide
        Carmen Cristurean added a comment -

        Verified fix for last issue with rev# 38267 in Chrome/FF23/IE10 using showcase sample and radioButton test app.

        Show
        Carmen Cristurean added a comment - Verified fix for last issue with rev# 38267 in Chrome/FF23/IE10 using showcase sample and radioButton test app.
        Hide
        Judy Guglielmin added a comment -

        rev 40068 to 3.3.0 mtce branch and 37373 for QA tests.

        Show
        Judy Guglielmin added a comment - rev 40068 to 3.3.0 mtce branch and 37373 for QA tests.
        Hide
        Liana Munroe added a comment - - edited

        Showcase Radio Button > Custom Style demo:
        ee-3.3.0 maintenance branch r41149, all browsers
        On launch both buttons are incorrectly labelled "Not selected". The selected output is not updated when toggling buttons. Not an issue with Icefaces 4. See screen shot button.PNG

        Show
        Liana Munroe added a comment - - edited Showcase Radio Button > Custom Style demo: ee-3.3.0 maintenance branch r41149, all browsers On launch both buttons are incorrectly labelled "Not selected". The selected output is not updated when toggling buttons. Not an issue with Icefaces 4. See screen shot button.PNG
        Hide
        Judy Guglielmin added a comment -

        rev. 41151

        Show
        Judy Guglielmin added a comment - rev. 41151
        Hide
        Liana Munroe added a comment -

        Confirmed fixed Icefaces ee-3.3.0 maintenance branch r41162. Tomcat 7, All browsers.

        Show
        Liana Munroe added a comment - Confirmed fixed Icefaces ee-3.3.0 maintenance branch r41162. Tomcat 7, All browsers.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: