NewsRotator widget: Implement the features of the user control
After you have created the empty user control, you must implement sample functionality in it. The NewsRotator control implements the following main features:
- Loading of the news items and their respective images in the Thumbnails album
- Displaying of summary of the news item, its title, image and a link to the full item
- Scrolling through the available news items and their thumbnails in a slideshow mode
- Loading of a limited number of news items
PREREQUISITES: Before you begin, make sure your project has references to the following assemblies:
- Telerik.Sitefinity.Model
- Telerik.Sitefinity.ContentModules
- Telerik.OpenAccess
- System.Web.Extensions
- System.Runtime.Serialization
Create the widget 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. The tutorial uses 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 the Rotator Overview documentation.
- Declare the namespace.
The RadRotator control is located in the Telerik.Web.UI assembly. By default, the Sitefinity CMS project should contain a reference to it. To create an instance of the control, declare the appropriate namespace in your user control.
The declaration of the sf namespace, allows you to use any control inside the Telerik.Web.UI namespace in the Telerik.Web.UI assembly.
- Create an instance of the RadRotator control with RotatorType property set to SlideShow.
Write down the ID of the control, because later you will use it to access the control through the code-behind file.
- Define the RadRotator's
ItemTemplate.
To specify the layout for the items displayed in the RadRotator control, you must 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.
Add the following markup to the NewsRotator.ascx file:
NOTE: The server controls are used with a specific ID, because you will need to access them in the code-behind later.
Implement the code-behind
Limit the number of the displayed news items
Next you must query the available news items and pass them to the RadRotator's DataSource property. Before doing that, define a property, which limits the count of the news items listed in the control.
By default, Sitefinity CMS creates a field for each of your public properties in the control designer of the control. Later you can use the field generated for the NewsLimit property, to specify a value. If you do not want to generate a field for the NewsLimit property, mark it with a [Browsable(false)] attribute.
NOTE: Sitefinity CMS automatically handles persistence in the background. The private backing field serves only as the default value of the NewsLimit property.
NOTE: You can categorize the properties, which are added to the control designer of the control. To add a property to a specific category, mark it with the [Category("CategoryName")] attribute.
Query the news items
After defining a property for the limit of the news items, you must query the news items and pass them to the DataSource property of the RadRotator control. To do this you should use Sitefinity's Fluent API. It allows you to access and use the data from your Sitefinity modules.
NOTE: This example assumes that the images are placed in an album Thumbnails and that their names match the ones of the news items. You must create an image library and name it Thumbnails, upload the thumbnail images and set the title of each image to the title of the news article you want the image to be connected to.
You must query the news items inside the Page_Load handler in the NewsRotator.ascx.cs file.
The result of the query is a list of anonymous objects each containing a news item and its associated thumbnail.
NOTE: News items that have no corresponding image, are not included in the resulting set.
Implement the ItemDataBound method
After setting the DataSource property of the RadRotator control, an event handler is attached to the ItemDataBound event, and theDataBind() method is called. The method causes the RadRotator to bind to the data inside its data source. Event ItemDataBound is raised for each item that is created. Because anonymous types are used, this is the most suitable place for you to define the bindings between the UI elements in the ItemTemplate and the data items passed to it.
In the handler for the ItemDataBound event, you get the references to the controls inside the ItemTemplate. After that, because the DataItem, which is passed to the RadRotator's item is an anonymous object, you call TypeDescriptor.GetProperties() to access the NewsItem and NewsImage properties. Finally, you set the title, text, image URL, and the link to the full news item.
Get the news items page
Because this link must point to a page that hosts a NewsView control, you should manually make query and get this page. In the following example the TargetNewsPage is represented by a read-only property.
Using the Fluent API, you get the first page which has a News widget in it. This is the page, which the links for the full news items must point to.
NOTE: If you do not want to use the built-in property editor, you can create a control designer. The control designer allows you to define a custom UI that is used to configure the control.
Add the following code to the NewsRotator.ascx.cs file: