ICEfaces
  1. ICEfaces
  2. ICE-6276

ACE: Modify sliderEntry so that images are loaded using css/skinning, and not via thumbImg attribute

          Details

          • Type: Improvement Improvement
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: 2.0-Beta2
          • Fix Version/s: 2.0.0
          • Component/s: ACE-Components
          • Labels:
            None
          • Environment:
            jsf2.0, ICEfaces2.0, ACE
          • Affects:
            Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration

            Description

            Currently, the sliderEntry requires that the user specify a thumb image using the component's "thumbUrl" attribute.

            Since this property is not likely to change unless the skin or image has changed, we should modify the component to use a thumb image specified in the skin CSS instead of the component attribute (remove comp. attribute).

            link to show an example of the css classes to use is:-
            http://developer.yahoo.com/yui/3/examples/slider/slider_from_markup.html

            NOTE: The key requirement here is that we do not want to force the user to have to specify a thumb image as an attribute of the component. Instead, the skin CSS should specify the thumb image to use.

            Is there a technical reason why this cannot be supported?

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Adnan Durrani added a comment -

              Here is a snippet to set thumb image using css. For both X and Y axis.

              /* this is to hide button image */
              .yui3-slider-x .yui3-slider-rail .yui3-slider-thumb img

              { top: -225px; }

              /* set the slide image using css */
              .yui3-slider-x .yui3-slider-rail .yui3-slider-thumb

              { background: url("./css/images/bullet.gif") no-repeat 0px 4px; height: 57px; width: 10px; }

              /* above classes for Y */

              .yui3-slider-y .yui3-slider-rail .yui3-slider-thumb img

              { top: -225px; }

              .yui3-slider-y .yui3-slider-rail .yui3-slider-thumb

              { background: url("./css/images/bullet.gif") no-repeat; height: 10px; width: 10px; }

              Please see the video:
              http://screencast.com/t/2V428d6v49

              Show
              Adnan Durrani added a comment - Here is a snippet to set thumb image using css. For both X and Y axis. /* this is to hide button image */ .yui3-slider-x .yui3-slider-rail .yui3-slider-thumb img { top: -225px; } /* set the slide image using css */ .yui3-slider-x .yui3-slider-rail .yui3-slider-thumb { background: url("./css/images/bullet.gif") no-repeat 0px 4px; height: 57px; width: 10px; } /* above classes for Y */ .yui3-slider-y .yui3-slider-rail .yui3-slider-thumb img { top: -225px; } .yui3-slider-y .yui3-slider-rail .yui3-slider-thumb { background: url("./css/images/bullet.gif") no-repeat; height: 10px; width: 10px; } Please see the video: http://screencast.com/t/2V428d6v49
              Hide
              Permalink
              Ken Fyten added a comment -

              Looks good, please complete the changes. This will result in the thumbURL attribute going away, right?

              Show
              Ken Fyten added a comment - Looks good, please complete the changes. This will result in the thumbURL attribute going away, right?
              Hide
              Permalink
              Adnan Durrani added a comment -

              Css changes has been checked in. revision # 23256

              Show
              Adnan Durrani added a comment - Css changes has been checked in. revision # 23256
              Hide
              Permalink
              Adnan Durrani added a comment -

              Slider demo updated.

              Command: Commit
              Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\samples\showcase\src\main\webapp\content\sliderEntryInclude.xhtml
              Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\samples\showcase\src\main\webapp\content\sliderEntryInclude.xhtml
              Completed: At revision: 23268

              Show
              Adnan Durrani added a comment - Slider demo updated. Command: Commit Modified: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\samples\showcase\src\main\webapp\content\sliderEntryInclude.xhtml Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\samples\showcase\src\main\webapp\content\sliderEntryInclude.xhtml Completed: At revision: 23268
              Hide
              Permalink
              Ken Fyten added a comment -

              The slider images are not showing up using latest icefaces2/trunk, FF or Chrome. (or any browser). Is the URL to "thumb-x.png" incorrect, etc.?

              Show
              Ken Fyten added a comment - The slider images are not showing up using latest icefaces2/trunk, FF or Chrome. (or any browser). Is the URL to "thumb-x.png" incorrect, etc.?
              Hide
              Permalink
              Judy Guglielmin added a comment -

              still passing a thumb url to the javascript so not sure how this is enabling skinning for this component . I was expecting to see thumb url's (x and y) in the rime and sam folders for skinning, and the renderer (or javascript) to place the correct css style for these urls. (in this way they would be loaded similar to the rail and could be "skinned").
              Adnan, is there some reason that they thumb url "has" to be designated as an attribute and passed with the script tag?
              THe skinning .css files as well as images should be available in the same locations for each component, should they not?

              Show
              Judy Guglielmin added a comment - still passing a thumb url to the javascript so not sure how this is enabling skinning for this component . I was expecting to see thumb url's (x and y) in the rime and sam folders for skinning, and the renderer (or javascript) to place the correct css style for these urls. (in this way they would be loaded similar to the rail and could be "skinned"). Adnan, is there some reason that they thumb url "has" to be designated as an attribute and passed with the script tag? THe skinning .css files as well as images should be available in the same locations for each component, should they not?
              Hide
              Permalink
              Adnan Durrani added a comment -

              My bad. Adding missing pngs.
              Command: Commit
              Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-x.png application/octet-stream
              Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-y.png application/octet-stream
              Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-x.png application/octet-stream
              Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-y.png application/octet-stream
              Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-x.png
              Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-y.png
              Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-x.png
              Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-y.png
              Completed: At revision: 23292

              Show
              Adnan Durrani added a comment - My bad. Adding missing pngs. Command: Commit Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-x.png application/octet-stream Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-y.png application/octet-stream Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-x.png application/octet-stream Adding: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-y.png application/octet-stream Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-x.png Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\rime\thumb-y.png Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-x.png Sending content: D:\work\development\head\svn\ossrepo\icefaces2\trunk\icefaces\ace\component\src\org\icefaces\component\sliderentry\skins\sam\thumb-y.png Completed: At revision: 23292

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: