PDA

View Full Version : [Updt: 8/20/08] Ext.ux.TDGi.iconMgr - new and improved!



jay@moduscreate.com
14 Jul 2008, 4:42 PM
Update 02/11/09
Update (i have enabled sprites for the icon browser, need to get it done for the iconMgr);
http://tdg-i.com/57/tdg-iiconmgr-updated-with-sprites-for-iconviewer
Here are the sprites in gif (http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr.new/TDGi.iconMgr/iconSprites.gif) (IE6) and png (http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr.new/TDGi.iconMgr/iconSprites.png) (Fx and IE7+) formats!
[/update]


The old Icon class (http://tdg-i.com/41/famfamfam-icons-packaged-with-css-for-use-with-ext-2x) was static, requiring users to manage CSS files. Thus, was not really a fix, but just a convenience.

Here comes Ext.ux.TDGi.iconMgr (http://tdg-i.com/52/tdgiiconmgr-and-iconbrowser-update). A utility class that automatically sets styles for you. It creates and appends to a stylesheet in the dom, eliminating the need to manage CSS entirely. The icon set contains images in PNG and GIF (IE6), and automatically selects which to use.

example: http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr/

Icon Sources:
http://www.famfamfam.com/lab/icons/silk/
http://www.damieng.com/icons/silkcompanion


Example usage:



Ext.onReady(function() {
new Ext.Button({
text : 'Click to see IconBrowser (May be slow over the inter-tubes)',
iconCls : Ext.ux.TDGi.iconMgr.getIcon('application_osx_double'),
renderTo : Ext.getBody(),
handler : function() {
Ext.ux.TDGi.iconBrowser.show();
}
});

new Ext.TabPanel({
width : 500,
height : 200,
activeItem : 0,
renderTo : Ext.getBody(),
items : [
{
iconCls : Ext.ux.TDGi.iconMgr.getIcon('cross'),
title : 'Ext.ux.TDGi.iconMgr',
html : "iconCls : Ext.ux.TDGi.iconMgr.getIcon('cross')"
},

{
iconCls : Ext.ux.TDGi.iconMgr.getIcon('application_osx_link'),
title : 'is real easy to use too',
html : "iconCls : Ext.ux.TDGi.iconMgr.getIcon('application_osx_link')"
}
]
});
});


Also comes with an icon browser (data view) that allows you to browse and filter by any character typed.
http://tdg-i.com/img/screencasts/2008-08-20_1723.png

Ext.ux.TDGi.iconBrowser..show();

Download:
http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr/TDGi.iconMgr.zip

or
http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr/TDGi.iconMgr.tgz

mystix
14 Jul 2008, 5:57 PM
very handy indeed! =D>

jay@moduscreate.com
14 Jul 2008, 6:19 PM
Thx. Just an FYI, we're only up to Bleach 72 :( in the US

mystix
14 Jul 2008, 6:47 PM
72?! woah... if you need your bleach fix just pm me ;)
i'm up to 179 =)

jmcneese
16 Jul 2008, 8:51 AM
nice work, i would love to use it. *but* the demo doesn't actually do anything, and looking at the code, i see nothing that would tell the cssClasses store to load data, or anything to let it know which object (png/gif.js) to use. maybe a packaging issue?

jay@moduscreate.com
16 Jul 2008, 8:59 AM
nice work, i would love to use it. *but* the demo doesn't actually do anything, and looking at the code, i see nothing that would tell the cssClasses store to load data, or anything to let it know which object (png/gif.js) to use. maybe a packaging issue?

Thanks... did you read the full post? :)

there is no 'data' to load.


new Ext.Button({
text : 'Click to see IconBrowser',
iconCls : Ext.ux.TDGi.iconMgr.getIcon('accept'), <----------- here you go, no css file to manage.
renderTo : Ext.getBody()
});


Thanks for pointing out the issue w/ the demo. I changed dirs, and forgot to change the js. I'll fix later tonight :)

jmcneese
16 Jul 2008, 9:02 AM
heh, i was just coming back to say that i was being retarded. didn't realize the two extra js files were for iconbrowser. sorry!

implementing now...

galdaka
16 Jul 2008, 1:25 PM
Hi,

Example not work in IE7 anf FF2,

Thanks in advance,

jay@moduscreate.com
16 Jul 2008, 1:31 PM
Thanks for pointing out the issue w/ the demo. I changed dirs, and forgot to change the js. I'll fix later tonight :)

Resolved. thanks.

jay@moduscreate.com
16 Jul 2008, 1:31 PM
Hi,

Example not work in IE7 anf FF2,

Thanks in advance,
Works for me in IE7.
http://tdg-i.com/img/screencasts/2008-07-16_1731.png

Fx2 i don't have.

jay@moduscreate.com
16 Jul 2008, 1:32 PM
galdaka,

Please try again. I think it was the issue pointed out by jmcneese

KRavEN
25 Jul 2008, 7:34 AM
This is very usefull. Thanks for contributing.

Could it be extended to support registering the iconCls in markup similar to how Ext.QuickTips does? So for instance <td ext:iconCls='application_osx_double'></td> adds the icon to that element?

KRavEN
25 Jul 2008, 11:59 AM
Well this works with a iconCls='application_osx_double' attribute on an element. I wasn't able to figure out how to get DomQuery to find ext:iconCls attribute. If anyone knows how, please chime in.


Ext.onReady(function()
{
Ext.each(Ext.query('*[iconCls]'), function(e)
{
var el = Ext.get(e.id);
el.addClass(Ext.ux.IconMgr.getIcon(el.getAttributeNS(null, 'iconCls')));
});
});

jay@moduscreate.com
27 Jul 2008, 7:34 AM
Updated the zip files. Anyone who has downloaded this, please re-download the files


ChangeLog:
Changed: var foundIcon = cssClasses.find to var foundIcon = cssClasses.findBy, using a custom find method, reducing name lookup duplication errors.

Fixed Ext.MessageBox.alert type-o error.

jay@moduscreate.com
20 Aug 2008, 1:47 PM
Bump for the update to let anyone know who's subscribed to this thread:

Click below to see the update:
http://extjs.com/forum/showthread.php?p=195122#post195122

galdaka
24 Sep 2008, 3:25 AM
Hi,

I use your code for create a modified version of this code for my pourposes: http://extjs.com/forum/showthread.php?p=228634#post228634

Thanks,

bwoody
2 Dec 2008, 9:46 AM
Thanks for this nice control.

To improve performance in a production app, there could be a second version of the icon viewer that uses a single composite image that displays all the available icons instead of using a DataView and loading each image. The easiest implementation would probably require hard-coding the 'coordinates' of each image in an array much like the current implementation codes the image names so that mouse over and click events could determine the user's selection. A translucent div overlay could be used to provide a visual clue to the current selection.

There are drawbacks to this approach:
- lose ability to filter
- no dynamic layout of the images (for dynamic width)
- more work involved if your set of icons changes frequently

..but I think the performance improvement from sending one image to the browser instead of many may offset those drawbacks.

I'll give this approach a try when my project winds down unless someone gets to it first :)

jay@moduscreate.com
2 Dec 2008, 9:50 AM
THanks for the feedback dude. The iconViewer is something that should not be used in production, but rather something to use as a reference.

I do agree with you however. I honestly don't know a way of automating the concatenation of the images into a single column. I could try imageMagick though ;)

mystix
2 Dec 2008, 10:23 AM
THanks for the feedback dude. The iconViewer is something that should not be used in production, but rather something to use as a reference.

I do agree with you however. I honestly don't know a way of automating the concatenation of the images into a single column. I could try imageMagick though ;)

iirc, i recall seeing some GWT plugin / the likes which does more-or-less automatic image sprite + relevant css creation, but the name eludes me...

[edit]
alritey, googled and found some links which might prove useful:
http://www.ajaxperformance.com/2007/09/29/css-sprites-made-easier/
http://www.ajaxperformance.com/2007/06/02/gwt-14-provides-easy-native-support-of-image-concatenation-with-special-sauce/

jay@moduscreate.com
2 Dec 2008, 10:32 AM
The issue with image concatenation with the entire icon set is that one is assuming that all icons are used, forcing *all* icons to be downloaded at the same time.

I think the ideal solution is for a map to be created specifically for that application once development has hit the 'maintenance' stage.

This tool was just created to ease the use of having to modify CSS, etc. :)

I will look into concatenating the images using imageMagick though for the iconViewer. That would be really neat.

jay@moduscreate.com
2 Dec 2008, 10:34 AM
it seems really simple using montage:
montage -tile 2x2 -geometry 512x512 img[1234].png tot.png

just need to work on it :). It should be only an hour or so of effort with some shell scripting to create the JSON Map :-D

http://personal.cscs.ch/~mvalle/postprocessing/ImageTools.html

mystix
2 Dec 2008, 11:09 AM
remember to run the final images through smush!it ;)

jay@moduscreate.com
2 Dec 2008, 11:11 AM
hahah, almost a bad word there :P

mystix
2 Dec 2008, 5:34 PM
hahah, almost a bad word there :P

tell me about it. vB kept munging the url i was trying to post: 8-|
s m u s h i t . c o m

jay@moduscreate.com
11 Feb 2009, 7:05 PM
Update (i have enabled sprites for the icon browser, need to get it done for the iconMgr);
http://tdg-i.com/57/tdg-iiconmgr-updated-with-sprites-for-iconviewer
Here are the sprites in gif (http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr.new/TDGi.iconMgr/iconSprites.gif) (IE6) and png (http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr.new/TDGi.iconMgr/iconSprites.png) (Fx and IE7+) formats!
http://tdg-i.com/img/screencasts/2009-02-11_2202.png

bwoody
11 Feb 2009, 9:02 PM
Awesome! I am using the browser to allow users to change icons in an application. This will be a great performance improvement.

I currently loaded the name of each icon into a database table with an 'enabled' column so that I could more easily control the subset that would be displayed to the user.

I will probably keep that code in place and just add a step to regenerate the single large image if I later decided to enable/disable any of the other icons. This would be more of a design-time step rather than something that would be done on the fly. That should provide the best of both performance solutions: small subset of images based on application needs plus a single image file being loaded rather than many smaller ones.

Thanks for the great control

Scorpie
12 Feb 2009, 6:19 AM
I might be stupid, but when I click an icon in the manager, and then press OK, I dont see a change. Am I doing something wrong? Working on IE7.

jay@moduscreate.com
12 Feb 2009, 6:40 AM
I might be stupid, but when I click an icon in the manager, and then press OK, I dont see a change. Am I doing something wrong? Working on IE7.

perhaps ok should be 'dismiss' :)

Scorpie
12 Feb 2009, 6:45 AM
perhaps ok should be 'dismiss' :)

Could be better hehe :D
Now it doesnt work at all btw, are you updating?

Ordered your book btw :) Looks nice!

wemerson.januario
12 Feb 2009, 9:21 AM
very good. Thanks

galdaka
12 Feb 2009, 10:16 AM
http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr.new/

not work in IE6

Thanks in advance,

mistik1
23 Feb 2009, 3:27 PM
I have tested your iconMgr and it works very well for me.
However in my app most of the JSON is created serverside and sent to the client and then used to build up my components. I have trouble using the Icon Mananger with this setup.

How would you recommend using icon manager with remote json?

simplessus
25 Jan 2010, 4:09 AM
Nice work!

How can I add a "onClick" listener, to fire an event when the user clicks on an icon ?

Best regards!