ICEfaces
  1. ICEfaces
  2. ICE-6242

ACE: Add min/max labels to sliderEntry component

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.0-Beta2
    • Fix Version/s: 2.0.1
    • Component/s: ACE-Components, Sample Apps
    • Labels:
      None
    • Environment:
      IF 2 Advanced Comps.
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      The sliderEntry component should support labels for the min. and max. of the range of values being entered.These labels should be optional to display and localizable by the application.

      Displaying additional labels for the values between min and max (the ends) would be a nice to have (for example, a value label for the middle of range as well).

        Activity

        Ken Fyten created issue -
        Ken Fyten made changes -
        Field Original Value New Value
        Salesforce Case []
        Fix Version/s 2.0.0 [ 10230 ]
        Affects [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial]
        Ken Fyten made changes -
        Assignee Adnan Durrani [ adnan.durrani ]
        Ken Fyten made changes -
        Summary ACE: sliderEntry should render min/max labels to define range ACE: Add min/max labels to sliderEntry component
        Salesforce Case []
        Fix Version/s 2.1 [ 10241 ]
        Fix Version/s 2.0.0 [ 10230 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #23459 Fri Dec 10 14:14:34 MST 2010 ken.fyten ICE-6242: Updated styling, images for linkButton, checkboxButton, and pushButton.
        Files Changed
        Commit graph DEL /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/checkbox_selected.gif
        Commit graph DEL /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/rime/bullet.gif
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/background-highlight.png
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/linkbutton/skins/sam/linkbutton.css
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/checkboxButton.css
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/rime/background-disabled.gif
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/sam/button.css
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/sam/button.css
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/rime/background.png
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/background-active.png
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/background-focus.png
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/background-disabled.gif
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/rime/button.css
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/rime/background-highlight.png
        Commit graph DEL /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/checkbox.gif
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/linkbutton/skins/rime/linkbutton.css
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/checkboxbutton/skins/rime/background.png
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/rime/background-focus.png
        Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/pushbutton/skins/rime/background-active.png
        Ken Fyten made changes -
        Salesforce Case []
        Assignee Priority P3
        Hide
        Adnan Durrani added a comment -

        Is that what you want?

        <ice:sliderEntry min="20" max="80" minLabel="Min value :" maxLabel="Max value represents " />

        If so, just wondering where these labels should render?

        Show
        Adnan Durrani added a comment - Is that what you want? <ice:sliderEntry min="20" max="80" minLabel="Min value :" maxLabel="Max value represents " /> If so, just wondering where these labels should render?
        Hide
        Ken Fyten added a comment -

        Attached example reference of slider value labels.

        Show
        Ken Fyten added a comment - Attached example reference of slider value labels.
        Ken Fyten made changes -
        Hide
        Ken Fyten added a comment - - edited

        No. What I'm referring to is the ability of the component to render out labels to represent the value range being used. See the attached image as a reference.

        The slider should automatically calculate the label values based on the range min. max, and the number of label increments to render. For example, a slider with range 0 - 100 and 3 label increments would look like:

        <------------------------------>

           

        0 50 100

        The same slider with 5 label increments would look like:

        <------------------------------>

               

        0 25 50 75 100

        To avoid unnecessary complexity, having a single label increment option would be fine if it's substantially easier to implement. I would suggest the 3 increment (Min, Middle, Max) option as the best option if there can only be one.

        So then you'd enable the labels via <ace:sliderEntry min="0" max="100" showLabels="true" labelSuffix="%">

        Note that labelSuffix could be used to append a unit string to the label values, like the percentage shown in the attached image.

        Show
        Ken Fyten added a comment - - edited No. What I'm referring to is the ability of the component to render out labels to represent the value range being used. See the attached image as a reference. The slider should automatically calculate the label values based on the range min. max, and the number of label increments to render. For example, a slider with range 0 - 100 and 3 label increments would look like: <------------------------------>     0 50 100 The same slider with 5 label increments would look like: <------------------------------>         0 25 50 75 100 To avoid unnecessary complexity, having a single label increment option would be fine if it's substantially easier to implement. I would suggest the 3 increment (Min, Middle, Max) option as the best option if there can only be one. So then you'd enable the labels via <ace:sliderEntry min="0" max="100" showLabels="true" labelSuffix="%"> Note that labelSuffix could be used to append a unit string to the label values, like the percentage shown in the attached image.
        Hide
        Adnan Durrani added a comment -

        Ken I would be hard to render more then 3 labels. As the width of the slider can be change by the "length" attribute horizontally and vertically. It would be hard to render label to correct position. Seems like 3 increments should be able to implement.

        <--------------------------------------------->
        0 50 100

        <-------------------------->
        20 40 80

        <--------------------------->
        10 20 30

        What do you say?

        Show
        Adnan Durrani added a comment - Ken I would be hard to render more then 3 labels. As the width of the slider can be change by the "length" attribute horizontally and vertically. It would be hard to render label to correct position. Seems like 3 increments should be able to implement. <---------------------------------------------> 0 50 100 <--------------------------> 20 40 80 <---------------------------> 10 20 30 What do you say?
        Hide
        Ken Fyten added a comment -

        Displaying the value-range labels should be optional, via a new component attribute called "showLabels=true/false". Default can be false.

        Show
        Ken Fyten added a comment - Displaying the value-range labels should be optional, via a new component attribute called "showLabels=true/false". Default can be false.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #24047 Mon Feb 28 19:39:00 MST 2011 adnan.durrani Fix for ICE-6242 (ACE: Add min/max labels to sliderEntry component)
        Files Changed
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/SliderEntryRenderer.java
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/SliderEntryMeta.java
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/resources/org.icefaces.component.sliderentry/slider.js
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/resources/org.icefaces.component.sliderentry/slider.css
        Adnan Durrani made changes -
        Status Open [ 1 ] In Progress [ 3 ]
        Hide
        Adnan Durrani added a comment -

        Command: Commit
        Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.css
        Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.js
        Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryMeta.java
        Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.css
        Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryMeta.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryRenderer.java
        Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.js
        Completed: At revision: 24047

        Show
        Adnan Durrani added a comment - Command: Commit Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.css Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.js Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryMeta.java Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.css Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryMeta.java Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\SliderEntryRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\resources\org.icefaces.component.sliderentry\slider.js Completed: At revision: 24047
        Adnan Durrani made changes -
        Status In Progress [ 3 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Adnan Durrani added a comment -

        "showLabels" attribute added, default value is false.

        Show
        Adnan Durrani added a comment - "showLabels" attribute added, default value is false.
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Assignee Priority P3 P2
        Ken Fyten made changes -
        Salesforce Case []
        Fix Version/s 2.0.1 [ 10255 ]
        Fix Version/s 2.1 [ 10241 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #24215 Tue Mar 22 11:40:10 MDT 2011 yip.ng ICE-6242: ACE: Add min/max labels to sliderEntry component.
        Files Changed
        Commit graph MODIFY /icefaces2/trunk/icefaces/samples/ace/showcase/src/main/java/org/icefaces/sliderentry/Bean.java
        Commit graph MODIFY /icefaces2/trunk/icefaces/samples/ace/showcase/src/main/webapp/content/sliderEntryInclude.xhtml
        Hide
        Ken Fyten added a comment -

        Yip, please add a checkbox to enable/disable the new labels to the ace-showcase.

        Show
        Ken Fyten added a comment - Yip, please add a checkbox to enable/disable the new labels to the ace-showcase.
        Ken Fyten made changes -
        Salesforce Case []
        Component/s Sample Apps [ 10010 ]
        Assignee Adnan Durrani [ adnan.durrani ] Yip Ng [ yip.ng ]
        Hide
        yip.ng added a comment -

        Added, but the checkbox single submit (specified by existing <icecore:singleSubmit/>) doesn't seem to work. You have to reload (i.e. click Slider Entry on the left again) to see the sliders affected. (The min-max value textboxes work still.)

        Show
        yip.ng added a comment - Added, but the checkbox single submit (specified by existing <icecore:singleSubmit/>) doesn't seem to work. You have to reload (i.e. click Slider Entry on the left again) to see the sliders affected. (The min-max value textboxes work still.)
        Hide
        yip.ng added a comment -

        From Ken:

        This seem likely to be a problem with the slider component not respecting a dynamic change to the new showLabels attribute.

        Show
        yip.ng added a comment - From Ken: This seem likely to be a problem with the slider component not respecting a dynamic change to the new showLabels attribute.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #24218 Tue Mar 22 15:40:46 MDT 2011 yip.ng ICE-6242: ACE: Add min/max labels to sliderEntry component.
        Files Changed
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/SliderEntryRenderer.java
        Hide
        yip.ng added a comment -

        Revision: 24218


        Modified : /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/SliderEntryRenderer.java

        Show
        yip.ng added a comment - Revision: 24218 Modified : /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/SliderEntryRenderer.java
        yip.ng made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Ken Fyten added a comment -

        I noticed that there are some styling/skinning issues that need tweaking.

        1. In the ace-showcase slider demo, the vertical slider with the "Rime" skin selected is not leaving enough horizontal whitespace between the slider bar and the labels. The Orange round slider button overlaps the label. Comparing the whitespace between the label and the bar on the vertical slider vs. the horizontal one seems to show that there is more space in the horizontal one. If so, making the vertical one use the same amount of whitespace should be sufficient. Otherwise, maybe scale the orange button images down a bit so they aren't so large ?

        2. In the ace-showcase slider demo, the vertical slider with the "Sam" skin selected has the Arrow slider button image pointing away from the labels. A quick reference check with the Swing slider shows that that labels and arrow should point to the right for a vertical slider. So the arrow image used in the Sam skin needs to be flipped horizontally to point to the right.

        Show
        Ken Fyten added a comment - I noticed that there are some styling/skinning issues that need tweaking. 1. In the ace-showcase slider demo, the vertical slider with the "Rime" skin selected is not leaving enough horizontal whitespace between the slider bar and the labels. The Orange round slider button overlaps the label. Comparing the whitespace between the label and the bar on the vertical slider vs. the horizontal one seems to show that there is more space in the horizontal one. If so, making the vertical one use the same amount of whitespace should be sufficient. Otherwise, maybe scale the orange button images down a bit so they aren't so large ? 2. In the ace-showcase slider demo, the vertical slider with the "Sam" skin selected has the Arrow slider button image pointing away from the labels. A quick reference check with the Swing slider shows that that labels and arrow should point to the right for a vertical slider. So the arrow image used in the Sam skin needs to be flipped horizontally to point to the right.
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #24251 Thu Mar 24 13:55:29 MDT 2011 yip.ng ICE-6242: Add min/max labels to sliderEntry component.
        Files Changed
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/resources/org.icefaces.component.sliderentry/slider.css
        Hide
        yip.ng added a comment -

        1. Done.

        Revision: 24251


        Modified : /icefaces2/trunk/icefaces/ace/component/resources/org.icefaces.component.sliderentry/slider.css

        Show
        yip.ng added a comment - 1. Done. Revision: 24251 Modified : /icefaces2/trunk/icefaces/ace/component/resources/org.icefaces.component.sliderentry/slider.css
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #24252 Thu Mar 24 15:25:21 MDT 2011 yip.ng ICE-6242: Add min/max labels to sliderEntry component.
        Files Changed
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y.png
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y-shadow.png
        Hide
        yip.ng added a comment -

        2. Done.

        Revision: 24252


        Modified : /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y-shadow.png
        Modified : /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y.png

        Show
        yip.ng added a comment - 2. Done. Revision: 24252 Modified : /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y-shadow.png Modified : /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y.png
        yip.ng made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #24263 Mon Mar 28 11:13:54 MDT 2011 ken.fyten ICE-6242: New right-facing arrow image with proper highlights.
        Files Changed
        Commit graph MODIFY /icefaces2/branches/icefaces-2.0.x-maintenance/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y.png
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #24264 Mon Mar 28 11:14:34 MDT 2011 ken.fyten ICE-6242: New right-facing arrow image with proper highlights.
        Files Changed
        Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y.png
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Priority P2

          People

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

            Dates

            • Created:
              Updated:
              Resolved: