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

        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.
        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.
        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
        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.
        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.
        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.
        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
        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.
        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
        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

          People

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

            Dates

            • Created:
              Updated:
              Resolved: