Archive
Monthly
Go
|
|
DNN Blog
Jul
15
Posted by:
Ash Prasad
7/15/2011 12:32 PM
DotNetNuke 6 introduces brand new Icon API to be used by module developers and skin designers to access icons and images in a unified way all across the framework. Simply pass a key (e.g. Add, Edit, or Delete) in ascx file or code-behind and get a Url back to an image without worrying about the physical location. No need to type that tilde in the path any more.
New Shiny Icons
Part of DotNetNuke 6 overhaul, we’ve replaced most of the system icons with a brand new set. The old icons were mostly Gif files, located under \Images folder. The new set are all Png files located under Icons\Sigma folder.
Note: None of the older Gif files have been removed, they may have been updated to match the new look and feel, but not removed.
New Icon Location
The new system icons are located under WebsiteRoot\Icons\Sigma folder. There are at least two copies of each and every system icon. Example: Edit.gif from pre 6 is now represented as Edit_16X16_Standard.png and Edit_32X32_Standard.png.
The first part of the name is the Icon Key (Edit), the second: size (16X16), and the third style: (Standard).
New APIs
There are three new static APIs available to obtain Url for an Icon:
DotNetNuke.Entities.Icons.IconController.IconURL(string key)
DotNetNuke.Entities.Icons.IconController.IconURL(string key, string size)
DotNetNuke.Entities.Icons.IconController.IconURL(string key, string size, string style)
Instead of using .ImageUrl = “~/images/add.gif”, simply use .ImageUrl = IconController.IconURL(“Add”).
New IconKey property for Web Controls
Similar to ResourceKey property for Web Controls to facilitate Localization, there is a new IconKey property available to major Web Controls which have native ImageUrl property.
These are the controls that support new IconKey property:
asp:Image
asp:ImageButton
asp:HyperLink
asp:HtmlImage
dnn:CommandButton
dnn:ImageCommandColumn
dnn:DnnGridButtonColumn
dnn:DnnImage
dnn:DnnImageButton
Instead of specifying ImageUrl property with relative url of an icon, the new property IconKey=”KEYNAME” and optionally IconSize (default 16x16) and IconStyle (default Standard) can be used without worrying about the physical path. Below is an example:
OLD
ImageUrl="~/images/edit.gif" EditMode="URL" KeyField="UserID" />
New
IconKey="Edit" EditMode="URL" KeyField="UserID" />
IconKey property is available on ascx files as well as in code-behind.
Roadmap
Currently Icon API supports a hard-coded path (Icons\Sigma) to icons, the upcoming version of this API will have a more configurable path where administrator can easily switch to a new set of icons without affecting the core icons shipped with the product.
10 comment(s) so far...
Re: Icon API – Where’s my tilde?
Wow, I am very, very happy to see this finally reach production. Besides finally getting there, it is very nice to see that the implementation is forward thinking and may not just solve the initial issue raised, but provide new possibilities. Thank you!!
support.dotnetnuke.com/issue/ViewIssue.aspx?id=10606&PROJID=2
By Jeremy Farrance on
7/18/2011 10:43 AM
|
Re: Icon API – Where’s my tilde?
@Jeremy: Thanks, as always DotNetNuke corp. at service for the community it's proud of :)
By Ash Prasad on
7/18/2011 10:45 AM
|
Re: Icon API – Where’s my tilde?
Hi,
Great addition to the core! ;-) It could be usefull to have a method to retrieve available icon sets (GetIconSets or GetIconCollections) and another one to retreive available styles for a specified set (GetStyles).
This will allow module developers to add settings letting portal admin choosing which icon set/style to use.
Gilles
By Gilles Le Pigocher on
7/22/2011 8:05 AM
|
Re: Icon API – Where’s my tilde?
@Gilles: Thanks for the feeback. I'll add these to the requirements for a future release.
By Ash Prasad on
7/22/2011 8:06 AM
|
Re: Icon API – Where’s my tilde?
Hi Ash,
Thanks! I forgot something, if we have a method to list IconSets we should be able to specify wich IconSet to use with the API. To do this you will have to create new signatures: IconURL(string iconSet, string key), IconURL(string iconSet, string key), IconURL(string iconSet, string key, string size) and IconURL(string iconSet, string key, string size, string style). This will allow webdesigners to create icon sets for any module using the new API, and module developers could create different icon sets for their module. Best of all, by adding a portal setting to choose which icon set to use by default anyone should be happy! :-)
Gilles
By Gilles Le Pigocher on
7/25/2011 2:37 PM
|
Re: Icon API – Where’s my tilde?
@Gilles: Thanks for the feeback again. I'll pass these to our product team for a future release.
By Ash Prasad on
7/25/2011 2:40 PM
|
Re: Icon API – Where’s my tilde?
I wonder, how this new IconKey property gets added to the aspx controls. i.e.
asp:Image
asp:ImageButton
asp:HyperLink
asp:HtmlImage
By Jaydeep Bhatt on
8/9/2011 9:03 AM
|
Re: Icon API – Where’s my tilde?
@Jaydeep: This is done by hooking into Render event of the Page Lifeycle. For these controls, we look for specific attributes, if found we hookup the ImageUrl property with value derived using IconKey attribute.
To get more details, have a look at: PageBase.cs Render method: dotnetnuke.svn.codeplex.com/svn/Trunk/Library/Framework/PageBase.cs
By Ash Prasad on
8/9/2011 9:17 AM
|
Re: Icon API – Where’s my tilde?
HI Ash,
Just noticed there is no Print icon, which seems like a fairly obvious one to be there. I'll raise it on Gemini.
Roger
By Roger Selwyn on
2/8/2012 9:15 AM
|
Re: Icon API – Where’s my tilde?
Thanks Roger. I see your issue in Gemini: support.dotnetnuke.com/issue/ViewIssue.aspx?ID=19813&PROJID=2
Easy one to get resolved. Will keep you posted.
By Ash Prasad on
2/8/2012 9:19 AM
|
|