With RadControls for ASP.NET AJAX we are committed to building great looking UI for you. Rich HTML, Javascript and CSS work together to provide a professional look and feel for your next generation applications. You can imagine there would be a solid amount of web resources our controls use to achieve that. Still, we keep the bag tidy and free the developer from deploying myriads of files on various development, testing and production environments. Everything is shipped neatly in a couple of assemblies you reference in your project.  How do we do that? We use embedded resources. In this blog post we will talk about what embedded resources are and how you can access them in your applications when you want to reuse them. We will also mention the new Telerik.Web.UI.Skins assembly and how it changes the approach when accessing embedded resources.

WebResources 101

Resource embedding allows an executable assembly to contain non-executable data such as images, text files or other documents. Thus, resources are shipped as an inseparable part of your product. When requested by your program, .NET extracts an embedded resource on the fly. In the context of an ASP.NET web application, a special resource URL is used on the page to request the embedded resource, for example an image. This URL points to an HTTP handler that is capable of extracting the resource from its host assembly.

In our controls, we use a lot of embedded resources. All of the Javascript, CSS and images are delivered as embedded resources (since recently, we also have CDN support, but that’s another story). Some of these resources, images for example, can be reused. We have a solid set of icons and backgrounds that may fit in your application. All you need to do is use the correct resource URL to extract them. But how can you get the URL of the resource you need?

Page.ClientScript.GetWebResourceUrl()

This is the embedded resource weight lifter in ASP.NET. It uses a type and a resource name to find the assembly that hosts the resource:

public string GetWebResourceUrl(Type type, string resourceName);

Interestingly, but the type parameter is by no means related to the embedded resource itself. It is only used to identify the host assembly and it can be any type in that assembly.
In return to calling this method, you get a URL that looks like:

~/WebResource.axd?d=[ENCODED RESOURCE KEY]&t=[TIMESTAMP]

The URL points to the special HTTP handler I mentioned previously – WebResource.axd. It contains a key that uniquely identifies an embedded resource in an executable assembly and a timestamp to bust any cache that may store an outdated version of the resource. When that URL is requested, the resource handler deciphers the resource key, identifies the embedded resource and its host assembly, extracts the contents and serves them back to the browser. As simple as it gets.

A Telerik Example

Let’s see a real life example. Very often, developers want to show a custom loading panel with a spinning icon on top of content that is loading and currently not available. We have some nice animated loading icons available through RadAjaxLoadingPanel. You do not, however, want to use RadAjaxLoadingPanel, you have your own custom panel. All you need is the loading image. You like the Vista skin and you want to keep your appearance consistent by using the loading image in that skin. Here is how you access it:

Image1.ImageUrl = Page.ClientScript.GetWebResourceUrl(typeof(Telerik.Web.UI.RadAjaxLoadingPanel), "Telerik.Web.UI.Skins.Vista.Common.loading.gif")

Here is Image1 shown on your page:

RadAjax spinning load icon

What did we just do? We used the type RadAjaxLoadingPanel from assembly Telerik.Web.UI. In fact, I could have just as well used another type from that assembly, for example RadGrid. It doesn’t matter; the host assembly is the important part. I then used the resource name. How do you know the resource name? They all begin with Telerik.Web.UI, the rest is determined by the skins folder structure. What folder structure? Open your Telerik RadControls installation folder. You have a Skins folder there. Follow that structure. This particular image is located in the matching folder:

[RadControls Installation Folder]\Skins\Vista\Common\loading.gif

Telerik.Web.UI.Skins

With the Q3 2011 release of Telerik RadControls for ASP.NET AJAX, all the embedded skins except for the default skin are now placed in a new assembly that we ship. This is Telerik.Web.UI.Skins.dll. What does this mean for Page.ClientScript.GetWebResourceUrl? It means you cannot identify the embedded resource by a type in Telerik.Web.UI.dll, if that resource is in Telerik.Web.UI.Skins.dll. As embedded resources have now changed their place, your GetWebResourceUrl() code may not work. You may now be referencing a type whose assembly does not contain the required embedded resource anymore.

SkinRegistrar to the Rescue

Don’t worry. You now have a versatile weapon – Telerik.Web.SkinRegistrar.GetWebResourceUrl:

public static string GetWebResourceUrl(Control control, string resourceName)<br>
public static string GetWebResourceUrl(Page page, Type type, string resourceName)

This method does everything Page.ClientScript.GetWebResourceUrl() does. But, when using Telerik.Web.UI and Telerik.Web.UI.Skins, it does a lot more. It identifies the assembly containing the embedded resource. It finds and retrieves the resource URL without you ever caring which of the two assemblies contains it. All you have to do is provide a RadControl instance or a type from the Telerik.Web.UI assembly. Some of your skins may be in Telerik.Web.UI.dll, some may be in Telerik.Web.UI.Skins.dll. Using Telerik.Web.SkinRegistrar.GetWebResourceUrl() you don’t really care. It treats both assemblies as a common repository for embedded resources. You only need to make sure both assemblies are referenced in your project.

Embedded Resources in Custom Skins Assemblies

Since Q1 2011, you can build your own custom skins assemblies. In your web applications, you reference custom skins assemblies either through the Telerik.Web.SkinsAssembly application setting, or with the help of RadSkinManager. You can also extract embedded resources from custom assemblies. Telerik.Web.SkinRegistrar.GetWebResourceUrl() checks all custom skins assemblies for a matching resource. In a word, any properly registered skin (built-in or custom) has its embedded resources automatically available for extraction. How do you check if a skin is properly “registered”? Simply change the Skin of your control to the one you registered. If the control displays properly with the selected skin, you are all set. You can now extract embedded resources from that skin with the help of SkinRegistrar.GetWebResourceUrl().

We believe this handy little method will save you a lot of trouble. Extracting embedded resources from Telerik skins is now easy no matter how many different assemblies hold your skins. What do you think? Do you often need to extract embedded resources too? Do you believe it is a good thing not to care about the host assembly when accessing skin resources for Telerik RadControls? Your feedback is appreciated.


About the Author

Veli Pehlivanov

is a Technical Lead at one of Telerik’s ASP.NET AJAX teams, where he primarily works on RadGrid and a few other data- and input-centric controls, including RadListView, RadCalendar and RadInput. Veli's interests lie in the area of web development, C#, .NET, JavaScript and agile project management. He likes being on the cutting edge of technology and is keen on delivering efficient software and a greater value for the user.

Related Posts

Comments

Comments are disabled in preview mode.