Silverlight | Think first. Code later.

Archives For silverlight

Introducing Silverlight 3.7!

March 16, 2010

(Note: I typically don’t tweet my blog posts, but I did so with this one as I want to make sure those following the developments at MIX10 around Windows Phone 7 and Silverlight are aware of some key differences between the platforms.)

Tuesday at MIX10 there was a big release that went completely unannounced Silverlight 3.7 is now in CTP! That’s right 3.7! I can’t believe it! It’s amazing! It’s, uh, um, hey, wait a minute, isn’t the release candidate for Silverlight 4 in the wild?

No, I’m not losing it (well maybe I am, but that’s neither here nor there). In my last post I discussed one of the key shortcomings, in my opinion, of the WP7 platform, the lack of browser support for Silverlight. I pointed this out because my fear is that a lot of people are going to assume that WP7 supports browser hosted Silverlight since native apps can be written for with Silverlight. As a result, people may not be willing to adopt the WP7 platform quickly since they can’t leverage existing Silverlight assets. The goal of this post is to try and show a couple of different ways you can reuse code across both the “browser hosted” and “phone hosted” silverlight platforms.

First we’ll set up a solution with two projects, a Windows Phone application, and a Browser Hosted (Silverlight 4) application:

cxag_ss001_hosts

Next we’ll want to add a project that will contain code we want to reuse across the the two applications. In this case we’ll choose a Silverlight class library project that targets the Silverlight 4 runtime:

cxag_ss002_sl4

Next we’ll want to our two applications projects to reference the class library. Adding a reference to the Browser Hosted application works without problem. However, when we try to add the reference to our Windows Phone project we get the following error:

cxag_ss003_sl4_error

Let’s try the reverse. Let’s first add a Windows Phone class library project:

cxag_ss004_wp7

Now let’s add the project references. Adding the references to the Windows Phone application works as expected, but now the Browser Hosted applications gives us ethe following error:

cxag_ss005_wp7_error

So, what the heck is going on here? To find out we’re going to need to take a peek at the assemblies referenced by our Browser Hosted and Windows Phone application. The assemblies for the Browser Hosted application can be found in the following directory: C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\Silverlight\v4.0. Let’s choose one assembly to look at. In this case we’ll use the System.Windows.dll. Here are the details of the assembly:

cxag_ss006_systemwindowsdll_sl4

The assemblies for our Windows Phone application can be found in the following directory: C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\Silverlight\v4.0\Profile\WindowsPhone. If we take a look at the System.Windows.dll assembly in this directory we’ll see the following:

cxag_ss007_systemwindowsdll_wp7

See the difference? Windows Phone uses, what is, essentially, Silverlight 3.7, which is why we can’t add a reference to a Silverlight 4 class library. If you take a look at some of other assemblies in this directory, such as System.Core.dll, you’ll see something like this:

cxag_ss008_systemcoredll_wp7

These core assemblies are actually compiled for the .NET Compact Framework 3.7.10056.0. This is why we’re unable to add a reference to a Windows Phone assembly to our Browser Hosted project.

So, how can we share Silverlight code between our Windows Phone and Browser hosted applications? There are two approaches that initially come to my mind. (I have a third idea involving T4, but that needs to get flushed out yet). The first thing we could do is create a Silverlight 3 class library project:

cxag_ss009_sl3

All we need to do now is add the reference to our two application projects, which will work. However, I don’t like this approach as it’s least common denominator (LCD) programming. We’re actually holding the code in both applications back from full potential by using a lower version of Silverlight.

Another approach is to use linked files. In this case we’ll delete the Person.cs file from our CxAg.Shared.Phone project. We will then add the Person.cs file from the CxAg.Shared.Silverlight4 project to our CxAg.Shared.Phone project as a linked file. The result will look like this:

cxag_ss010_linkedfile

See that little arrow by the Person.cs file? It indicates that it isn’t actually a file, but, rather, a pointer to a file located somewhere else. In our case, it’s just a point to the Person.cs file in the CxAg.Shared.Silverlight4 project.

One thing you’ll want to keep in mind is how to handle code that compiles for one platform, but not for the other. An approach I’ve taken in similar scenarios looks something like this:

cxag_ss011_partialclass

I like to declare my shared classes as partials. These allows me to include platform specific code in each project (as separate, non-linked files) without breaking the build. In my opinion neither of these solutions are ideal, but they’re workable. As I mentioned earlier, I’m working on a third, T4 based solution, but that’s still in progress. Keep in mind too that we’re working with what is, for all respective, purposes a new development platform, so there are kinks to be worked out. I hope this gets you on your way to successful Silverlight 4/Winodws Pohne 7 development!

In mix10, silverlight, wp7 mix10, silverlight, wp7

Windows Phone 7 and Silverlight Support, A Word of Caution

March 16, 2010

So, I was at Scott Guthrie’s keynote address at MIX10 yesterday and I walked away scratching my head. On the one hand all the announcements around Windows Phone 7 and its development platform we’re great. I was really glad to see that the tooling falls in line with Microsoft’s history of providing great, integrated tools for developers. I was also happy to see Microsoft breaking away from it’s usual routine and really, I mean, really focus on the user experience. Did they get the UX right? I don’t know. There are bits and pieces I find interesting and other pieces I simply wonder “What were they thinking”, but that’s an entirely different post. The lack of of true “Enterprisey” features other than support for Exchange and Office, also concerns me, but I’m sure those will come in time and with demand. Of course, there’s also the fact that apps don’t really run in the background. However, all of these things aren’t why I was scratching my head yesterday. I was wondering about the elephant in the room. I was wondering why nobody asked the obvisous question. If Windows Phone 7 uses Silverlight as a platform for building native app, will existing “Silverlight-enabled” websites work in the phone’s browser? It seems like such a simple question, one with an obvious answer. But the fact that none of yesterday’s presenters explicitly called it out had me concerned. After all I have some Silverlight apps running around on the interwebs and it would sure be nice if they just worked on Windows Phone 7. People have ripped on that fruit company in Cupertino for a long time for not supporting plug-ins (i.e. Flash or Silverlight) within their mobile broswer, so you think Microsoft would be ready to 1-up them by supporting their own technology (i.e. Silverlight) in the mobile browser of their shiny new device.

Since I didn’t get an answer, I thought I would download the developer bits and give a Silverlight enabled website a go in the WP7 emulator. What better site to use than Silverlight.net. Here’s how the site looks in the desktop version of IE8

slnet_ie8

Notice the area surrounded by red? This is a Silverlight component. Keep this in mind as you now look at the site in the emulator for WP7:

slnet_wp7

See that area in red? That’s where the Silverlight component should be! When I saw this I stepped away from desk thinking that this simply couldn’t be. So I created a Silverlight 4 RC app on my machine and tried to browse to it via the emulator. Same result. Still refusing to believe this, and thinking maybe it was just an emulator issue, I hunted down a Microsoft DPE last night to get confirmation. Unfortunately he confirmed my fears. Windows Phone 7 does not support Silverlight within the browser. Let me say that again so you can hear it:

WINDOWS PHONE 7 DOES NOT SUPPORT SILVERLIGHT IN THE BROWSER

I was very confused, and, quite honestly, viscerally angry about this. It seemed like such a no brainer, and I think it’s an initial assumption a lot, A LOT, of people are going to make. After all, there are a ton of Silverlight apps already deployed on the interwebs, and a number of people are going to assume that they’ll just work in the browser on WP7. After all, wouldn’t be in Microsoft’s best interest to say “You know all those existing Silverlight apps you have, they’ll work too!” I’m also suprised at the lack of support of Silverlight in the WP7 browser for another reason. One of the other things we’ve heard at MIX10 is that there’s not an intial way to distribute your apps outside of the app store/marketplace/whatever. This has raised the ire of a number of corporate developers. Allowing the WP7 browser to support Silverlight would seem to solve this problem. However, it would allow people to bypass the app store for deploying their apps, thus reducing a revenue stream for Microsoft. I’m not saying or event suggesting this is the reason WP7 does not support Silverlight in the browser. I’m sure there are techincal reasons, such as the IE browser on WP7 not supporting plug-ins.

With all of this said, you can reuse code across browser hosted and phone hosted applications. I’ll have an upcoming post on that shortly.

All in all, I think the WP7 platform has a lot of promise and potential, and I’m looking forward to working with it. I hope you are too!

In mix10, silverlight, wp7 mix10, silverlight, wp7

More ASP.NET MVC Learning on Project Thor

January 20, 2010

In my last post I described an issue I was encountering with ASP.NET MVC and WCF RIA Services while writing code for Project Thor. The gist of it is that routing was intercepting the calls made to my WCF RIA Services by my Silverlight application and resulting in 404 errors. A quick change to the RegisterRoutes method and voila it worked! Or so I thought…

Since I thought my problem was solved I went on to working on other parts of the ASP.NET MVC side of Project Thor. However, one day, like yesterday, I was running the app and wanted to adjust an admin setting on the Silverlight side, so I typed in the url to the Silverlight page, and I got another 404. What?! That wasn’t supposed to happen. Grrr!

I started going down some pretty nasty rabbit holes on this one. I knew it had something to do with routing, but being new to ASP.NET MVC I wasn’t sure what exactly it could be. At one point I had myself convinced it had do something with local Azure development fabric and integrated pipeline mode on IIS 7.0 running on Windows 7. I wasn’t getting anywhere. I’m not the type of guy that posts my problems and asks for help. I like working through these things on my own (yes, I am a glutton for punishment). However, I needed to get moving so I put the question on Stack Overflow. Within minutes, like 1 minute, I had two responses. The first response was on twitter from John Sheehan. The other response was on Stack Overflow and from none other than Phil Haack. Both responses weren’t a direct answer to my question, but they both pointed me to the ASP.NET Routing Debugger. As the page says:

“This utility displays the route data pulled from the request of the current request in the address bar. So you can type in various URLs in the address bar to see which route matches. At the bottom, it shows a list of all defined routes in your application. This allows you to see which of your routes would match the current URL.”

I downloaded the utility and fired the app up. Here’s what I got for the default page:

Good. Exactly what I expected.

I then tried to navigate to the configuration page that contains the Silverlight application:

routetestb

Bam! There’s the error! I shouldn’t be getting a match on the first route, the route I want MVC to ignore, the route I told MVC to ignore in my last post. D’oh! If you remember, my RegisterRoutes method looked something like this:

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{Services}/{*pathInfo}");
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Configuration",
                "Configuration",
                new { controller = "Configuration", action = "Index" }
            );

            routes.MapRoute(
                "Calendars",
                "Calendars/{id}",
                new { controller = "Calendar", action = "Index", id = "" }
            );

            routes.MapRoute(
                "Default",
                "{controller}/{action}/{id}",
                new { controller = "Account", action = "Index", id = "" }
            );
        }

See those curly braces around Services in the first line of the method. Those curly braces that are the MVC convention for replacement. Yeah, um, those shouldn’t be there. I’m not replacing anything. I want to ignore any calls to the actual Services directory. So the updated line looks like this:

routes.IgnoreRoute("Services/{*pathInfo}");

Once I made this change here’s what the testing utility showed me.

routetestc

Perfect! When I then ran the app without the route debugging utility in place it worked as expected. I’m always amazed and at how so many seemingly complicated problems are solved with one line of code.

So, what’s the upshot of all this? Well, as I mentioned previously, the main goal of Project Thor is to help people, especially me, learn about other technologies they don’t get to work with on a day-in/day-out basis. Today I learned two things about ASP.NET MVC:

Routing is incredibly simple, ONCE YOU UNDERSTAND IT!!!
There is a great ASP.NET MVC community out there willing to offer assistance if you need. (Thanks again John Sheehan and Phil Haack!)

In my opinion Project Thor is, once again, accomplishing its goal. Now to finish version one!

In azure, silverlight, tag, wcf ria services, windows azure asp.net mvc, silverlight, thor, wcf ria services

MVC-ing WCF RIA Services

January 8, 2010

In my last post I wrote about how I’m going to spending some time focusing on UX. However, I will be spending some time on other endeavors as well. One of those endeavors is Project Thor. I don’t want to go into all the details of Thor as I’ll be posting more about the project as we get closer to our February 1st release date. However, I ran into an issue last night/this morning that I thought deserved an immediate post. One of the goals of Thor is to get developers exposed to technologies that they might not otherwise have a chance to tinker with. To that end we’re using things like Windows Azure, Microsoft Tag, Exchange Web Services, Powershell, Silverlight, WCF RIA Services, and ASP.NET MVC. We’re using Silverlight and WCF RIA Services to provide a configuration front-end to the app. ASP.NET MVC is being used to provide a mobile front-end that users will use to reserve conference rooms. I’ve been doing the Silverlight/WCF RIA Services and up until yesterday evening everything was working great. Data was flowing from the Silverlight app through the services to our Windows Azure storage mechanisms. Then, last night, one of the other developers told him he had checked in some changes to complete the MVC-ing of our Windows Azure Web Role and that his code (mobile web type stuff) was working. “Great!” was my initial thought. Then I pulled down the latest source code from CodePlex and realized that while his stuff was in fact working all of our Silverlight/WCF RIA Services was busted. WTF? Why would ASP.NET MVC code break our Silverlight/WCF RIA Services. Time to put on the debugger had and figure this sucker out.

The error I was receving was fairly non-descript but it basically told me the request resource (service) could not be found. The first thing I did was to take a look at what he had checked in, specifically in the web.config file. One of the more interesting entries I found was this one:

Now keep in mind I’m fairly new to ASP.NET MVC. I understand how it works at a high-level and I’ve built a couple of basic CRUD apps, but I haven’t really dived into the guts of it as I spend most of my time in Silverlight. Putting the web.config entry together with the error got me thinking that maybe this UrlRoutingModule thingy was intercepting the WCF RIA Service request coming from the Silverlight app transforming it into something that could no longer be mapped to the desired service. It took a while for me to put this together and Fiddler played a big role in helping me sort through this.

After doing a bunch of reading on MSDN to better understand both ASP.NET MVC and the UrlRoutingModule thingy I realized the key to solving this problem was the RouteCollection. I need to modify this to not route incoming requests for our WCF RIA Services. Doing this was pretty simple. The developer who MVC’d the app had checked a global.asax file. I found the following method in the class:

public static void RegisterRoutes(RouteCollection routes)
{
     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
     routes.MapRoute("Default", "{controller}/{action}/{id}", new { controller = "Configuration", action = "Index", id = "" });
}

All I needed to do was add a route to ignore service calls. In my case, I keep all of the WCF RIA Services in a folder named Services, so I just wanted to ignore all calls to the Services folder. Here’s what I came up with:

public static void RegisterRoutes(RouteCollection routes)
{
     routes.IgnoreRoute("{Services}/{*pathInfo}");
     routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
     routes.MapRoute("Default", "{controller}/{action}/{id}", new { controller = "Configuration", action = "Index", id = "" });
}

F5 and voila! Problem solved! I know for a lot of you ASP.NET MVC veterans the answer to this problem was probably obvious. However as an ASP.NET MVC rookie I had to start digging into the guts of how ASP.NET MVC worked to solve this problem, which means I learned a whole lot about ASP.NET MVC, which is one of the main goals of Thor. So, in my mind at least, Thor is definitely on the right track.

In azure, silverlight, tag, wcf ria services, windows azure asp.net mvc, silverlight, thor, wcf ria services

hdc09 Session 111

October 22, 2009

Last Friday I had the privilege of presenting at hdc09. My talk was about .NET RIA Services. Topics included:

Professional Look and Feel
Rich Data Query
Validating Data Update
Authentication
Different Views

You can download the slide deck and demo code here.

The download contains the following:

hdc09.111.pptx. This is the slide deck from the presentation.
ReadMe.txt. These are the directions for running the demo code. Read them! Seriously, read them! I’ll wait…
SimpleEmployee.sql. This script creates the SimpleEmployee table in the AdventureWorks database I used as the data source for the demo.
EmployeeManager. This is the application I built during the session.
templates. These are the business application templates I downloaded from gallery.expression.microsoft.com.

To run the demo code you must have the following items installed:

Like I said above, before you can run the demo you’ll need to read the ReadMe.txt file included in the archive. Once again, I’ll wait…OK, so if you don’t read it, here’s what you need to know:

After you install the 2008 AdventureWorks database you’ll need to run the SimpleEmployee.sql script. This will create the SimpleEmployee table and populate it with data.
You will need to update the connection strings in the web.config file in the EmployeeManager.Web project.

Silverlight Media Player

here

In .net ria services, hdc09, presentations, silverlight, video .net ria service, hdc09, presentations, silverlight, video

hdc09 Session 103

October 22, 2009

Last Thursday I had the privilege of presenting at hdc09. My talk was about the new navigation framework that shipped as part of Silverlight 3. Topic included:

How to partition your Silverlight app into multiple views
How to navigate between views
How to implement uri mapping
How to implement deep linking
How to provide a great user experience

You can download the slide deck and demo code here.

The download contains the following:

hdc09.103.pptx. This is the slide deck
HDCNavApp1. This is the navigation application I built from scratch.
HDCNavApp2. This is the navigation application I built using the Visual Studio template.
templates. These are the navigation app templates downloaded from gallery.expression.microsoft.com.

To run the dome code you’ll need the following:

Microsoft Visual Studio 2008 SP 1 (the express version will work just fine)
Silverlight 3

If you were unable to attend the session or would like to see it again, I’ve record a screencast for your viewing pleasure. You can view the screencast via the Simple Silverlight Media Player below, or you can download the .wmv file here.

In hdc09, navigation, presentations, silverlight, video hdc09, navigation, presentations, silverlight, video

Simple Silverlight Media Player

October 5, 2009

A couple of people haved asked me about the Silverlight media player I’m using on this site to stream some of my screencasts. I’d like to tell you that I toiled, worked long hours, put my sweat and blood into creating my own Silverlight media player. And you’re free to believe that even after you read this post. The reality is that I did no such thing. Instead I used a cool feature in Expression Blend 3 called template editing. Below are the details.

After creating a new Silverlight project in Expression Blend 3, I added a MediaPlayer to one of my pages:

ssmp01

The out-of-the-box media player is pretty slick. However, it has a lot of bells and whistles that I don’t need/want for a media player that’s going to serve up screencasts. For example, my media player doesn’t need to show chapters. So, the question is, how can I modify the out-of-the-box media player? The answer is really quite simply, use template editing. What is this, you ask? Template editing allows you to edit a copy of the default template for a given control so I can bend it to my liking. How do you do it? It’s easy. Right-click on the control whose template you want to edit and click “Edit Template”, “Edit a Copy…”

ssmp02

Now you can edit the template to your heart’s content.

Since the purpose of this media player is to be a re-usable component that people could have multiple instances of on their web sites, there were a number of features I needed to expose publicly that could be set from the page hosting the player.

Media Source. The uri to the file to be streamed.
Title. The title to display in the player.
Thumb Source. The uri to the image to use as a thumbnail.
Auto Load. Controls whether or not the content is downloaded to the client’s machine automatically when the player loads or only when a request is made to play the content (default).
Auto Play. Controls whether the content plays when the control is loaded or plays on demand (default).

All of these properties, with the exception of the Media Source, are optional and can be set via InitParams. The Application_Startup method parses the InitParams and pass them to the Silverlight page (MainPage.xaml) that hosts the media player. MainPage.xaml then sets the properties of the media player element to correspond to the values passed to it.

You can get the application, source code, and instructions on CodePlex here.

All in all there’s not that much code to this little application. However, due to how it has been constructed it’s incredibly flexible and reusable. For example, you can use it in your site, within a WordPress blog (like my blog for instance), or within a SharePoint portal (WordPress and Sharepoint instructions are on the CodePlex site). I’ve found this app incredibly useful, I hope you do too.

In expression blend, silverlight expression blend, expression blend 3, silverlight, silverlight 3

MDC09 Slide Deck and Demo Code

October 2, 2009

This past Wednesday I had the privilege of presenting at the 2009 Minnesota Developers Conference (MDC). My presentation was on the pure awesomeness that is .NET RIA Services. The room was at standing room only capacity, a first for me, and the audience was excited by the content. There was lots of great Q&A both during and after the session.

You can download the slide deck (what few slides there are) and the demo code here. Make sure to read the included ReadMe.txt file. In case you don’t read it, here’s what you need to know.

The archive contains the following:

MDC09 – .NET RIA Services.pptx. This is the slide deck from my presentation at MDC.
EmployeeManager.sln. This is the demo code from the MDC presentation.
Snippets.txt. This file contains the code snippets I used during the presentation.
SnippetManager.exe. This is the tool I used to access my snippets during the presentation.
ZoomIt.exe. This is the screen magnifying tool I used during the presentation.

In Order to run the demo code you must have the following software installed:

Once you install the AdventureWorks database, you will need to run the SimpleEmployee.sql script included with this package to get the table and data set up for the demo.

After installing the necessary component(s) you will need to update the connection strings in the web.config file in the EmployeeManager.Web project.

If you missed this session, but are planning on attending HDC09 in Omaha later this month you’re in luck. I’ll be giving this talk there as well, so feel free to stop on by.

In .net ria services, Community, presentations, silverlight .net ria services, Community, mdc09, presentations, silverlight

Silverlight Browser…Favorites

June 18, 2009

(If you’re new to this series I recommend catching up on the first set ofposts here)

In my last post I built out the navigation and history management pieces of the Silverlight browser. In this post I’ll build out the favorites management piece of the browser.

I started off by adding the Silverlight.Navigation.Favorites project to our solution. Here’s waht the project looks like:

slbfavorites001projectstructure

All of this is pretty straightforward, and fairly similar to to the Silverlight.Navigation.History project.

FavoriteItem. This represents a single page in the appp that you want to mark as a favorite. It has two properties, a uri (where the thing is) and a name (whatever you decided to name the favorite).

FavoriteItemCollection. A simple ObservableCollection of FavoriteItems. Seriously, that’s it. Nothing more to see here. Move on.

FavoritesManager. This is an abstract class that is responsible for managing an application’s favorites. This class provides mechanisms for adding and removing favorites as well as setting a custom home page within the application. This class also defines abstract Save and Load methods which inheritors are responsible for implementing. The intent of these methods is to read and write to the inheritor’s choice of persistent storage.

IsolatedStorageFavoritesManager. This is a concrete implementation of the FavoritesManager class. As with our IsolatedStorageHistoryManager, this class saves and loads favorites information to and from isolated storage. Real simple.

From a UI perspective, there were really only two things that were done. The first was to implement a Favorites control in our Silverlight.Navigation.Controls project. This is simply a ChildWindow that contains a ListBox which binds to a FavoritesManager FavoriteItems property. I then added a Favorites button to the NavigationToolbar to launch the window.

I also added several buttons to the NavigationToolbar for home page functionality:

Set as Home Page – this will replace the home page specified by the application map with the current page.
Use Default Home Page – this will replace the user specified home page with the home page specified the application map.

(In writing this I realized I should have added a Home button, I’ll add it to the features list, which I haven’t created yet.)

The implementation is a snap. I just added a FavoritesManager parameter to the constructor of our Browser control:

slbfavorites002implementation

I’ve issued a new release on the CodePlex site for this project that contains the functionality discussed above. You can download the release here. I’ve also put this app up on my website here. Per Tim Heuer’s post on Silverlight 3 beta install guidance, I customized the install experience to let folks know if they need Silverlight 3 and what it means to install the beta version of Silverlight 3 at this point in time.

What’s next? Good question, I’m glad you asked. Quite honestly I’m not sure just yet. This entire effort was an experiment to see if it would be possible to provide a consistent UX to both in and out of browser scenarios for Silverlight 3 navigation applications. I think we can call the experiment a success. The next step is to wait until July 10th, when Silverlight 3 goes RTW. At that point in time I’ll update the project to Silverlight 3 RTW runtime and start looking at making these controls into something more “real”, whatever that means.

In silverlight ria, silverlight, silverlight 3, silverlight browser

My second podcast with Jeff Brand is up

May 18, 2009

This time Jeff and I discuss what’s coming in Silverlight 3, including Silverlight Out of the Browser. You can take a listen here.

In silverlight mix09, silverlight, silverlight 3