Creating a custom control
In this tutorial you will create a control that consists of two parts - a custom control and a Silverlight application. This topic focuses on the creation of the custom control.
The topic explains the following:
Creating a custom control
The control can reside in Sitefinity solution or in another solution. You will create a control in the scope of the Sitefinity's solution.
To create an empty custom control, perform the following:
- From the context menu of Sitefinity's solution, click Add » New project...
-
From the dialog choose Visual C# » Web » ASP.NET Server Control.
-
Name the project CoverFlowWidget and click OK. A new project is generated under the solution. It contains only a single .cs file named ServerControl1.
- Rename the file to CoverFlow.cs. You must also rename the class name inside the file to CoverFlow.
-
Open the file and remove any auto-generated code besides the class definition.
The code inside your CoverFlow.cs file must look like this:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CoverFlowWidget
{
public class CoverFlow : WebControl
{
}
}
Inheriting the SimpleView class
In Sitefinity, you can create your controls as standard ASP.NET custom controls or you can derive them from one of the built-in base classes - SimpleView, SimpleScriptView. In this tutorial you derive the CoverFlow control from the SimpleView class. To do this, you must add a reference to the Telerik.Sitefinity.dll in your CoverFlowWidget project. You do this in the following way:
- Form the context menu of project CoverFlowWidget, click Add Reference...
- In the dialog select the Browse tab.
- The Telerik.Sitefinity assembly is located in folder SDK\Content\Common\Dependencies inside Sitefinity installation folder. Select it and click OK.
-
Open the CoverFlow.cs and import the following using statement: using Telerik.Sitefinity.Web.UI;
-
Modify the class definition to the following:
public class CoverFlow : SimpleView
{
protected override void InitializeControls(GenericContainer container)
{
}
protected override string LayoutTemplateName
{
get
{
throw new NotImplementedException();
}
}
}
For the project to compile at this stage, you must also override the InitializeControls abstract method and the LayoutTemplateNameproperty.
Creating a template
Custom controls are usually represented by a class, which implements their functionality. The mechanism of creating controls in Sitefinity allows you to specify a template. With a template you can specify the visual representation of your control. A template is represented by an.ascx file. In the CoverFlow control the template hosts the Silverlight object. To create a template for it, perform the following:
- In the CoverFlowWidget project, add a new folder named Resources.
- In it create a folder named Views.
- From the context menu of folder Views, click Add » New Item...
-
From the dialog click Visual C# » Code » Code File.
-
Name the file CoverFlow.ascx and click Add.
An empty .ascx file is generated under the Views folder.
- From the context menu of file CoverFlow.ascx, select Properties.
- In the Properties pane, set the Build Action property of the file to Embedded Resource.
Referencing the template
To specify a default template for the control, you must override the LayoutTemplateName property in the CoverFlow class. It must return a string that represents a reference to the embedded resource, which represents your template. To reference it, use the following code:
protected override string LayoutTemplateName
{
get
{
return "CoverFlowWidget.Resources.Views.CoverFlow.ascx";
}
}
The LayoutTemplateName follows the naming convention <Namespace>.<ResourceFolderPath>.<TemplateName>, where you must replace path slashes inside the resource folder path with dots.
In addition to the LayoutTemplateName, the SimpleView exposes the LayoutTemplatePath property. It is used to refer an external template that is placed outside of the assembly.
Referencing the control
You must reference the assembly of the control in the Sitefinity project. In this tutorial the control and Sitefinity project are located in one and the same solution. To add a reference, perform the following:
- From the context menu of Sitefinity project, click Add Reference...
- Click Projects tab.
- Select the CoverFlowWidget project and click OK. The reference is added and you can register and use the control in your Sitefinity application.