NewsRotator widget: Create a template
Custom controls are usually represented by a class, which implements their functionality. The mechanism of creating controls in Sitefinity CMS 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. To create a template for your control, perform the following:
- In the NewsRotator project add a new folder named Resources.
- In it, create a folder named Views.
- In the context menu of folder
Views, click Add » New Item...
- From the dialog click Visual C# » Code » Code File.
- Name the file Rotator.ascx and click Add.
.ascx file is generated under the
- In the context menu of file
Rotator.ascx, click Properties.
- In the Properties pane, set the Build Action property of the file to Embedded Resource.
Fill the template
To display the news items in your control, you must use an ASP.NET control that is capable of handling dynamic data. Examples for such controls are ListBox, GridView, etc. In the current scenario the most appropriate control is the RadRotator control. It is part of the RadControls for ASP.NET AJAX, which are shipped together with Sitefinity CMS. The RadRotator can display its items in a slideshow manner.
NOTE: For more information about the RadRotator control, see Rotator Overview.
The RadRotator control is located in the
Telerik.Web.UI assembly. To use it, you must add a reference to it in the NewsRotator project.
To add a reference, perform the following:
- In the context menu of project NewsRotator, click Add Reference...
- In the dialog select the Browse tab.
Telerik.Web.UI assembly is located in folder
- Select it and click OK.
To use the RadRotator, inside the
Rotator.ascx file, you must first declare
Telerik.Web.UI namespace, using the following code:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="sf" %>
Then, you create an instance of the control, using the following code:
<sf:RadRotator id="RadRotator1" runat="server" RotatorType="FromCode"></sf:RadRotator>
By declaring sf namespace, you can use any control inside
Telerik.Web.UI assembly. Afterwards, you only create an instance of the RadRotator control with RotatorType property set to FromCode. Copy the ID of the control, because you will later use it to access the control through the codebehind file.
To specify the layout of the items displayed in the RadRotator control, you have to specify an
ItemTemplate for it. In this tutorial, you must provide UI elements for the news item's image, title, summary, and link to the full item.
Use the following markup for the
NOTE: The server controls are used with a specific ID, because you will need to access them in the codebehind later.