NewsRotator widget: Implement the features of the custom control
After creating and specifying a template for your control you are ready to proceed with implementing the main features. The control implements the following main features:
- Loading of the news items and their respective images from the Thumbnails album.
- Displaying the 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.
To implement these features, you must add references to the following assemblies in the NewsRotator project:
-
Telerik.Sitefinity
On Browse tab navigate to the Telerik.Sitefinity.Samples.Dependencies folder from the cloned Github repository.
-
Telerik.Sitefinity.Model
-
Teleril.Sitefinity.ContentModules
-
Telerik.OpenAccess
-
Telerik.OpenAccess.35.Extensions
-
Telerik.OpenAccess.Web
-
Telerik.Web.UI
-
System.Web.Extensions
You can find the assembly on .NET tab.
-
System.Runtime.Serialization
You can find the assembly on .NET tab.
After adding the references import the following using statements in the Rotator.cs file:
using Telerik.Web.UI;
using Telerik.Sitefinity;
using Telerik.Sitefinity.GenericContent.Model;
using Telerik.Sitefinity.News.Model;
using Telerik.Sitefinity.Web.DataResolving;
using Telerik.Sitefinity.Pages.Model;
using Telerik.Sitefinity.Modules.News.Web.UI;
Limiting the number of the displayed news items
Before querying the news items, define a property, which limits the count of the news items listed in the control.
Open the Rotator.cs file and insert the following code:
private int newsLimit = 8;
public virtual int NewsLimit
{
get
{
return this.newsLimit;
}
set
{
this.newsLimit = value;
}
}
By default, Sitefinity CMS creates a field in the control designer of the control for each of your public properties. The user can use the field generated for the NewsLimit property, to enter a value. If you do not want the system to generate a field for the NewsLimit property, mark it with a [Browsable(false)] attribute.
NOTE: You can categorize the properties added to the control designer of the control. To add a property to a specific category, mark it with the [Category("CategoryName")] attribute.
Querying the news items
After defining a property for the limit of the news items, next, you must query the news items and pass them to the DataSource property of the RadRotator control. To do this you use Sitefinity's Fluent API. It allows you to access and use the data from your Sitefinity CMS modules.
NOTE: For more information about querying items using the Fluent API, see For developers: News. For more information about querying images and other media files, see Media content.
After you set the DataSource property of the RadRotator control, an event handler is attached to the ItemDataBound event and the DataBind() 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. The handler for the ItemDataBound event looks in the following way:
private void RadRotator1_ItemDataBound(object sender, RadRotatorEventArgs e)
{
var link = e.Item.FindControl("newsLink") as HyperLink;
var image = e.Item.FindControl("newsImage") as Image;
var title = e.Item.FindControl("newsTitle") as Label;
var text = e.Item.FindControl("newsText") as Label;
NewsItem newsItem = (NewsItem)TypeDescriptor.GetProperties(e.Item.DataItem)["NewsItem"].GetValue(e.Item.DataItem);
Telerik.Sitefinity.Libraries.Model.Image newsImage = (Telerik.Sitefinity.Libraries.Model.Image)TypeDescriptor.GetProperties(e.Item.DataItem)["NewsImage"].GetValue(e.Item.DataItem);
if (image != null) image.ImageUrl = newsImage.MediaUrl;
if (title != null) title.Text = newsItem.Title;
if (text != null) text.Text = newsItem.Summary;
if (link != null && TargetNewsPage != null) link.NavigateUrl = DataResolver.Resolve(newsItem, "URL", null, TargetNewsPage.Id.ToString());
}
First 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. Because this link must point to a page that hosts a NewsView control, you must manually make query and get this page. In the following example the TargetNewsPage is represented by a read-only property:
private PageNode targetNewsPage;
protected PageNode TargetNewsPage
{
get
{
if (this.targetNewsPage == null)
{
this.targetNewsPage = App.WorkWith().Pages()
.Where(p => p.Page != null &&
p.Page.Controls.Where(c => c.ObjectType.StartsWith(typeof(NewsView).FullName)).Count() > 0)
.Get().FirstOrDefault();
} //it can still be null in case there is no page with a NewsView on it
return this.targetNewsPage;
}
}
Using the Fluent API you get the first page that has a NewsView on it. This is the page that the links for the full news items must point to.