For developers: Link widget components
This article gives an overview of how widget components interact and how you connect them to create a complete widget.
Link the widget to the designer
You must associate the widget class with the control designer. This is done by the ControlDesignerAttribute class.
In the Hello Word sample, the widget class is HelloWorld.ascx.cs and the control designer class is HelloWorldDesigner.cs. To link them together, you must add the attribute to the widget class in the following way:
[ControlDesigner(typeof(HelloWorldDesigner))]
public partial class HelloWorld : System.Web.UI.UserControl
Link the designer to its template
The designer template class needs to know which template file to load. You do this by overriding the LayoutTemplatePath or the LayoutTemplateName properties. Depending on whether you are working on a user or a custom widget, perform one of the following:
User widgets
Define the path to the template in a constant using relative path and set it to the LayoutTemplatePath property in the following way:
public override string LayoutTemplatePath
{
get
{
if (string.IsNullOrEmpty(base.LayoutTemplatePath))
return SampleWidgetDesigner.layoutTemplatePath;
return base.LayoutTemplatePath;
}
set
{
base.LayoutTemplatePath = value;
}
}
private static readonly string layoutTemplatePath = "~/Widgets/SampleWidget/SampleWidgetDesigner.ascx";
Custom widgets
As the template of the custom widget is always an Embedded Resource, you must enter a full path to the LayoutTemplateName property.
For example, in the Products sample, the CustomSettingsDesignerView is mapped to the template using the full assembly name:
protected override string LayoutTemplateName
{
get
{
if (this.DesignerTemplateName != null) return this.DesignerTemplateName;
return "ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.ascx";
}
}
NOTE: You can get the full path of the template by opening the generated assembly of the project with the embedded resource and inspecting it with JustDecompile. Using JustDecompile, in the Products sample, open the generated ProductCatalogSample.dll assembly in ..\Telerik.Sitefinity.Samples.Products\Products\bin\Debug. In the tree, expand the Resources folder and find the required .ascx template. Copy the full name that is generated (in this example - ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.ascx).
Register the control designer script
To do this, you must override the GetScriptReferences() method and supply the path to the JavaScript file. Depending on whether you are working on a user or a custom widget, perform one of the following:
User widgets
Provide the relative path to the location of the .js file in the following way:
public override IEnumerable<ScriptReference> GetScriptReferences()
{
// get script collection
var scripts = base.GetScriptReferences() as List<ScriptReference>;
if (scripts == null) return base.GetScriptReferences();
scripts.Add(new ScriptReference(scriptReference));
return scripts.ToArray();
}
private string scriptReference = "~/Widgets/SampleWidget/SampleWidgetDesigner.js";
Custom widget
Provide a full path name to the .js file including the assembly name in the following way:
public override IEnumerable<ScriptReference> GetScriptReferences()
{
var res = PageManager.GetScriptReferences(ScriptRef.JQuery);
var assemblyName = this.GetType().Assembly.GetName().ToString();
res.Add(new ScriptReference("ProductCatalogSample.Web.UI.Public.CustomSettingsDesignerView.js", assemblyName));
return res;
}
Register the control
When you are finished with the development of you widget, you must register it.
For more information, see Register a new widget in Sitefinity CMS toolbox.