Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 31 Jan 2012
Download Sample Code
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern and Silverlight.
Today's application world is full of Dashboards. Dashboard is a home page where brief/full description of something is displayed. A classic example of dashboard is where we have a twitter feed, facebook feed and linkedin feed. When we put these widgets altogether in a dashboard, there might be scenarios where we need to refresh specific widgets and disable the refresh of widget we do not need. In this article we would see how we do that.
Let's have a peek what we are going to achieve.
Create Silverlight Application
Startup Visual Studio 2010 and create a Silverlight project, name it as "WidgetTimer".
We are not going to host the application in a web page, so I am disabling the settings.
In this sample application, let's take twitter widgets in dashboard. So the dashboard would have twitter statuses from different users.
Modeling the RSS Feed
As we are talking about displaying twitter rss feeds, the rss comes with an xml; well we would only display the status message and the date it was posted.
So create a class which would have the above properties.
Now we would create a helper class that would help us in refreshing and loading the rss.
Before adding any properties, let's discuss what exactly we need. A widget would be refreshed with an initial value that could be changed by the user. A Check Box that would enable or disable the auto refresh. And a Status message, which would display either "Auto refresh is disabled." Or "Refreshing in
<second> sec(s)."; so now add the discussed properties.
We would start with implementing the INotifyPropertyChanged interface for raising the property changed event.
Now we would also add a Dispatcher Timer property, which would help us in displaying message at specific interval.
The collection of feed items should also be a property which would be bound to the ListBox's
Now let's create an instance of the Timer object and do the followings:
As you see in above code, the initial check is done with enable/disable of auto refresh, then we are displaying the message and resetting the timer value.
As we already discussed about displaying the rss feeds for twitter, so let's have a parameter for constructor which would set the default url. We also need to create a WebClient object instance, which would call the rss url.
On successful completion of the webclient, we would parse the returned xml data and get the data formatted.
Also while fetching the rss feed, we might get some error due to internet connectivity; so let's add two more properties that help us display an error panel with the message.
So the constructor would have the above structure as we have discussed earlier.
The above method would create an instance of the WebClient, and parse the result to the method
LoadFeedItems. Note that you could change the instance creation of web client for optimization.
As you see in above method, we are checking the xml string for emptiness, if it is empty then display the error panel with error message. And of course if it is having valid data then parse it to create a list of feed items.
The above method would read the specific items from the XDocument and return the list of Feed Items.
We are done with the Helper class for Refresh Timer, let's create our ViewModel. As you know the view model requires that the INotifyPropertyChanged interface to be implemented, so we would do that first.
Let's say, we would display two twitter widgets for two different user's status messages. So let's add two properties of type the helper class we have just made.
As you see we have two properties of type TimerHelper, let's create these properties instances in the constructor of the view model.
We are passing two different string values to the overloaded constructor as a parameter for the feed url.
We haven't added any views to the project yet, of course the MainPage is added by default. So let's add a user control to the project. Let's call it "SampleWidget".
As you see in above design, we have a Check Box, a ListBox, and a panel for displaying error messages.
Let's do binding for the control in xaml view.
The above xaml is very easy to understand, the Check Box's
IsChecked is bound with
RefreshIsChecked, List Box's
ItemsSource is bound with Feeds, and it's data template to Title and PubDate respectively.
Also we have the Error Panel's Visibility to
IsErrorVisible, and the TextBlock's text bound with
Note that we will not have any instance creation of the View Model in this Widget's cs file. This would be taken care at Main Page level.
As you see in above xaml of the MainPage, we have created two instances of the Sample Widget, with its data context bound to respective Timer Helper properties that we had created earlier.
Now let's create an instance of the View Model and assign it to the Data Context of the MainPage.
Now let's run the application and see the result.
As you see, I am getting the error as expected, as I was not connected to the internet. However all the other features like Auto Refresh enables widget is working and the auto refresh disabled widget is also working. Now let me have internet connection and test it again.
As you see in above image, we are successfully getting the status message of different users of twitter. Also the Refresh Timer could be enabled or disabled for specific widget.
Note that these status feeds could be accessed 150 times per hour, so if you are not seeing any data without any error messages, that means the limit is crossed, you might wait for another few minutes. This is only for demo purpose you could add feeds from other sources such as blogs, facebook, etc.
We have successfully made the auto refresh work for specific widget. In this article/sample we have created only one widget but two instances of it being used in the sample. This would relatively easier to use with different widgets with single instance of each one. Finally as we have discussed earlier, we also could have numeric up down control to manage the time limit we would like to auto refresh. As in this sample we are using only 30 seconds. Implement this and let me know if you have any issues. Thanks for reading it.
Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7.
Follow him in tweeter @dpatra
This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.