June 6, 2016

DevExpress resources - Part 2: How resources work in details

This post is about understanding how DevExpress handles images resources using IIS.

Refer to Part 1 for the initial problem & requirements:

The Goal:
DevExpress API is a solid one. I thought it would be beneficial to understand how resources work inside-out. This knowledge will help you while troubleshooting issues with resource loading when you use DevExpress controls in your application.


Main Components:


The assembly file DevExpress.Web.dll adds handler DevExpress.Web.ASPxHttpHandlerModule at 'DX.Ashx' path to handle any http request that contains the request "dxr.axd?….".

To check from IIS:



To check from web.config:


<add type="DevExpress.Web.ASPxClasses.ASPxHttpHandlerModule, DevExpress.Web.v12.2, Version=12.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET" path="DX.ashx" validate="false" />



How it works:
Note: For simplicity I am only talking about single resource request here. Comma-separated multiple resources can be requested also.

1. When a DevExpress dll is loaded, it will reference the resources it holds. For example the DevExpress.Web.v12.2.dll contains this image file "Images.GridView.sprite.png". This resource among others was loaded into internal resource storage collection when all assemblies were loaded. Each resource will be added to a dictionary collection and to be given an index value equal to total resources added already. In this case, the image was added at resource index of 45.

2. User navigates to a page that has a DevExpress UI control (ex: ASPxClientGridView) which contains an image resource (the grouping '+' icons) among others.

https://{SiteUrl}/../SomePage.aspx
 

3. Internally, the back-end code of the control inserts some js code on the front-end to call the url of the intended resource image. So the '+' icon will actually be calling this url to get content:
 https://{SiteUrl}/DXR.axd?r=1_45-IZnRb


4. The request format is: DXR.axd?r={AssemblyNumber}_{ResourceIndex}-{DateToken}
Let's break it down:


  • DXR stands for "DevExpressResource"
  • AssemblyNumber: an integer value represents which dll has the required resource. Use below table to figure which dll should serve your resource. I used assemblies of version 12 but it should apply to other versions as well. Example: the required resource we used “r=1_45-IZnRb” has '1' as value of AssemblyNumber, so the required dll file is “DevExpress.Web.v12.2.dll”.
Assembly
Number
Assembly Dll
0
DevExpress.Web.ASPxThemes.v12.2.dll
1
DevExpress.Web.v12.2.dll
2
Not used
3
Not used
4
DevExpress.Web.ASPxHtmlEditor.v12.2.dll
5
DevExpress.Web.ASPxSpellChecker.v12.2.dll
6
DevExpress.Web.ASPxTreeList.v12.2.dll
7
DevExpress.Web.ASPxPivotGrid.v12.2.dll
8
DevExpress.Web.ASPxScheduler.v12.2.dll
9
DevExpress.XtraReports.v12.2.Web.dll
10
DevExpress.XtraCharts.v12.2.Web.dll
11
DevExpress.Web.ASPxGauges.v12.2.dll
12
DevExpress.PivotGrid.v12.2.Core.dll
13
DevExpress.ExpressApp.Web.v12.2.dll
14
DevExpress.Web.Mvc.v12.2.dll
15
DevExpress.XtraDashboard.v12.2.Web.dll
  • ResourceIndex:  a positive integer value represents the index of a specific resource inside assembly.

  • DateToken: a string value of Base64 representation of last modified date of the resource or the assembly file.
5. When a resource request received, the custom handler module will process http request get the required resource via a resource manager if the http request path ends with “Dxr.axd” string. Only the portion before ‘-‘ is considered, so only the “r=1_45” part is to be processed & resolved to get the corresponding resource image if available. The date token will not be part of this.


6. So the resource manager will pass values of ‘1’ which will resolve into full dll name ‘DevExpress.Web.v12.2, Version=12.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a’ Key And pass the number '45' as a resource number, then the dictionary value is "DevExpress.Web.Images.GridView.sprite.png"

7. Then it will get the binary content of that resource file & put it in http response to be displayed in the control in page


8. If you want to test the resource directly, you can type the url for it: 
https://{SiteUrl}/DXR.axd?r=1_45-IZnRb






Notes: 

  • All of these resource images will be saved as "DXR.png" when downloaded from IE.
  • I found this config key "DXResourcesPhysicalPath". If it has content then it can be used internally to get resource path.
  • Another key to compress binary resources before returning them in http response.                        <add key="DXEnableResourceCompression" value="true"/>
  • There are other config keys that play a role in data compression & increased performance:            <add key="DXEnableCallbackCompression" value="true"/>
    <add key="DXEnableResourceMerging" value="true"/>