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
              Judy Guglielmin created issue -
              Ken Fyten made changes -
              Field Original Value New Value
              Summary sliderEntry not loading images / working since YUI 3.2.0 upgrade was completed ACE: Modify sliderEntry so that images are loaded using css/skinning, and not via thumbImg attribute
              Issue Type Bug [ 1 ] Improvement [ 4 ]
              Salesforce Case []
              Affects [Compatibility/Configuration] [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration]
              Assignee Priority P1 P2
              Affects Version/s 2.0-Beta2 [ 10242 ]
              Affects Version/s 2.0.0 [ 10230 ]
              Description upon updating to yui3.20, it was noticed that the markup for sliderEntry shows the paths to images with escaping backslashes...
              for example:-
              "thumbUrl":"javax.faces.resource\/assets\/skins\/sam\/thumb-x.png.jsf?ln=yui\/3_2_0"
              Problem is in JSONBUilder placing in the escaping and the images won't load now (with 3.2.0).

              Since this property is not likely to change unless the skin or image has changed, then change to use the skinning/css to load the images. rather than using a param within the script to pass the image.

              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.
              		 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?
              Adnan Durrani made changes -
              Status Open [ 1 ] In Progress [ 3 ]
              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
              Adnan Durrani made changes -
              Status In Progress [ 3 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              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?
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #23256 Tue Nov 30 22:44:28 MST 2010 adnan.durrani Fix for ICE-6276 (ACE: Modify sliderEntry so that images are loaded using css/skinning, and not via thumbImg attribute)
              Files Changed
              Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/rime/slider.css
              Commit graph MODIFY /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/slider.css
              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.?
              Ken Fyten made changes -
              Resolution Fixed [ 1 ]
              Status Resolved [ 5 ] Reopened [ 4 ]
              Assignee Priority P2 P1
              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?
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #23292 Thu Dec 02 19:24:34 MST 2010 adnan.durrani Adding missing images towards ICE-6276
              Files Changed
              Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-y.png
              Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/rime/thumb-x.png
              Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/rime/thumb-y.png
              Commit graph ADD /icefaces2/trunk/icefaces/ace/component/src/org/icefaces/component/sliderentry/skins/sam/thumb-x.png
              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
              Adnan Durrani made changes -
              Status Reopened [ 4 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]
              Assignee Priority P1

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: