Silverlight

Silverlight RSS Reader

After following Scott Gu’s 8 part blog on Silverlight and using it to get a feed from Digg I decided to try out my own Silverlight project. Since I use Twitter, not nearly enough, I thought it would be fun to have a little application that can read the twitter feed and display it in SharePoint.

Silverlight Application

Using Visual Studio 2008 (SP1) with Silverlight 2 installed I created a new Silverlight application.


I named the Application SilverlightTwitter because I want this to read a Twitter feed and allowed it to create the SilverlightTwitter.Web Web Application for testing purposes, and to help with the HTML I would need. When done I had a solution that looked like this.


Next I added a class that could handle an <item> tag in an RSS feed.


Next I began working on my Silverlight UI. First I removed the Height and Width attributes from the UserControl because I want the control to resize automatically. Next I added a StackPanel to my Silverlight page with a Vertical orientation (items added will be stacked on top of each other). Inside the Vertical StackPanel I added another StackPanel with a Horizontal orientation and a ListBox. Inside the Horizontal StackPanel I added a button that would allow me to refresh the RSS feed that would be displayed in the ListBox.

I added the DisplayMemberPath=”Title” statement to the ListBox so that when I added my Collection of Item objects (shown above) the ListBox would use the Title attribute to display the information.

Next I added a Click event handler to the button so we could manually request a refresh of the RSS feed.


Now the UI is complete and it is time to provide action for the UI. Turning my attention to the Page.xaml.cs file I implemented the btnRefreshFeed_Click function. I decided that I wanted my control, when loaded to capture the feed and then later the refresh button could recapture the feed, so implementing the click handler just involved calling another function MakeRequest. I also added the call to MakeRequest to the object’s constructor.


Next I used the WebClient object to perform my request to twitter to retrieve my data feed. I should also be clear, when I say “my datafeed” I really mean the public datafeed that Twitter provides. I decided to use this because it is anonymously accessible and would speed up the development time.**Special note** Silverlight, like Flash limits cross domain requests, which means going from my domain to another domain is usually prohibited. In the case of Twitter cross domain access IS BLOCKED, so inorder to make this work you must have a proxy that does allow cross domain requests. Thanks to work I’ve done with IDV I happened to have a proxy already accessible to get me around this issue.


Finally, I implemented the Async Callback Handler which would be responsible for parsing the XML and creating the Collection of Item objects. Like Scott Gu, and because I really like Linq, I used Linq to help speed this process.


Now the Silverlight application is done, you can run and test the application using the SilverlightTwitter.Web testing application.

Silverlight to MOSS

I built the Silverlight application in about an hour, this next part took me WAY TOO LONG so hopefully I’ll save you a lot of time.

Using StsDev2008 I created a new WebPart Project. I added the project to my existing Silverlight Solution so I now had a project like this.


My solution has a LAYOUTS folder, which I manually added after the project was created. I also added a SilverlightWP folder under the LAYOUTS as well. Next I updated the Build Event in Silverlight Twitter so that the xap file would be copied from that project to the SilverlightWP Layouts location. Next I built the SilverlightTwitter project to cause the xap file to be generated and copied, once copied to the Layouts folder I included it in the SilverlightWP project. Next I removed the CustomWebPart2.cs, CustomWebPart2.webpart files from the project as well as updating the feature.xml and webparts.xml files. Next I renamed the CustomWebPart1.cs to SilverlightWebPart.cs as well as renaming its associated webpart file. Again I updated the feature.xml and WebParts.xml files so they referenced the correct webpart file. Finally I updated the class name in the SilverlightWebPart.webpart file to reflect the correct class name.

Finally I removed the CreateChildControl function from the SilverlightWebPart.cs and replaced it with the RenderContents function. The reason for this is so that I could control exactly what was rendered in the control.


I commented out the code for the onerror event because I am not including ANY javascript files or functions in this solution, they aren’t needed! Now that this is done I performed a BuildDeploy on the SilverlightWP project which packaged everything up and deployed it to my local SharePoint instance. Because my development machine is a Windows 2003 R2 server I had to add the .xap and .xaml mime types to my IIS instance. To do that you can right click on your IIS instance, select Properties, choose the HTTP Header and click on the MIME Types… button. You can then add the .xap and .xaml as show below.


Finally I activated my solution in the Site feature and created a new Web Part Page. On the Web Part Page I added the SilverlightWP WebPart to the page and…nothing showed up. What I discovered, thanks to this blog was the I needed to set a fixed size for my WebPart. Once the fixed size was in place, it worked.


Advertisements

A foray into Silverlight

I finally have a little time while some code I developed is being tested to take a look at the “new” technologies Microsoft has released. Since my experimentation of Azure flopped, I didn’t have a supported system, I decided to turn my attention to Silverlight.

First Impressions

One of the first things I have noticed is that many people talking about Silverlight also reference Expressions Blend, looks like a new program I have to learn now too. However, before I get into Expressions I just want to be able to create the old faithful coding application “Hello World!”

Silverlight Project

After installing the Silverlight tools for Visual Studio 2008 (which require .NET Framework 3.5 SP1 and Visual Studio 2008 SP1) you can then click on the File->New->Project. Under your preferred language, mine happens to be C#, you will see the Silverlight grouping. When you click on the Silverlight grouping you will have the option to create a Silverlight application, or a Silverlight library. I chose the Silverlight Application and provided a name. Next I was prompted with adding an ASP.NET web application to the project, in this case I went with the default options and had my silverlight application and ASP.NET testing application created.

Making Hello World

Typically in Visual Studio you are able to drag and drop controls onto the design surface of a windows form, web page, etc. However, Silverlight does not provide a design surface, but rather a Preview of what you have done in your XAML.


Instead you must drag and drop items from the toolbox into your XAML, for “Hello World!” a simple TextBlock will work. Once added to the XAML you can set the Text attribute to “Hello World!”. As show in the image above you may also choose to set the x:Name value of the item, but this is not required.

Running/Testing

Now all you have to do is build, so by pressing your F5 key your solution is built, your .xap file (known as “zap”) is copied to your web application and the web application is started. When the web application starts you may be prompted about your web.config not including debug information, this is the standard prompt you receive when you try to start any web application in debug mode that does not have debugging enabled in the web.config. Once the web application starts your browser should open to the page with your new Hello World! Silverlight control.