One thing Michael said that really made me take notice is that all web pages should have a “Privacy Statement” prominently displayed on their main page.  It should say (and you need to abide by it) that you don’t track any user identifiable data associated with tracking data collected.  Great advice I won’t forget.

It was a sell out crowd, they let us in, but only after security decided we were OK to add to the overflow.

Here we are!

This article is very short.  In the actual presentation, there was not much time to talk about this so a brief overview was done.  Basically, it’s all standard WCF stuff.  The idea is that the Silverlight Business Template adds logging in and supports Authentication just like an asp.net application does.  It uses the DomainDataSource to do the bridging between the silverlight clientside app, and the web application.  Authorization is built into the login module also so that you can assign attributes to your domainservice classes to restrict access.

That is, if you only want people who are logged in able to access one of your methods, you simply tag it as follows with the [RequiresAuthentication] attribute.

If you only want a certain logged in user role to be able to access a certain method, you tag it as follows

This of course solve the server side only.  On the client side, you need to call methods that are exposed through the domain data.  http://www.silverlightshow.net/items/Silverlight-3-with-Ria-Authentication-service.aspx discusses much of this on the client side.

In this section, we will talk about what happens when the users presses the “Sessions” hyperlink from the speakers page.  If you remember from the last article, we used a special converter on the Speakers.xaml page and bound that to the hyperlink titled sessions as shown below.

When this link is clicked, the navigation created is as follows:

http://localhost:9951/Presentation1TestPage.aspx#/Sessions?SpeakerId=903

// Executes when the user navigates to this page.

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    //Handle SpeakerId

    var qs = NavigationContext.QueryString;

    if (qs.ContainsKey("SpeakerId"))

    {

        this.sessionsOverviewDomainDataSource.FilterDescriptors =

            new FilterDescriptorCollection();

        this.sessionsOverviewDomainDataSource.FilterDescriptors.Add(

              new FilterDescriptor("AttendeeId",

                  FilterOperator.IsEqualTo, qs["SpeakerId"]));

    }

}

This simply adds a filter to the current DomainDataSource that filters the column AttendeeId with the passed in query parameter SpeakerId.

The resulting page looks as follows assuming Peter Kellner’s Session link was clicked.

The video referenced in this article goes into building this page in more details, but fundamentally, the major point is just the query parameter.

In this article, we will  build from scratch, using Visual Studio 2010 Beta 2 a simple application that lets us view Silicon Valley Code Camp Attendees that have authorized us to share their data.  We will be using no special RIA Services Visual Studio 2010 design tools to do this.  We will:

• Create the Entity Framework Repository
• Create the Domain Service
• Wire up an Appropriate Get Method that Returns in IQueryable
• Call From the Client Code the Domain Service
• Show The Results
• Observations

First, we need to create a new Visual Studio Project.  We do that by using the File/New Project and chose “Silverlight Business Application”.

Create The Entity Framework

Then, we need to create an Entity Framework Repository that will be the target of our Domain Service.  We do that by adding to the web project (not the top, Silverlight project), we just created and “ADO.NET Entity Data Model”.  We’ll call it ModelSVCC for Model Silicon Valley Code Camp.

We use the option “Generate From Database” as follows:

Choose the appropriate connection (in our case svcodecamp on our local Sql Server 2008 database).

For simplicity, choose all tables and views as follows.

Do a Rebuild/All to make sure all the template code get’s generated and we are done with our first step.

Create the Domain Service

Next, create the Domain Service.  This is done by adding again to the web project the Domain Service as follows.

Name it DomainServiceSVCC.cs again for Silicon Valley Code Camp.

Next check all tables and views, make sure “Enable Client Access” is checked and also “Generate associated classes for meta data”.  Enable Client Access adds an attribute to the generated domain class which tell Visual Studio (on building) to generate the same domain classes on the client (Silverlight) side.  This means that you are writing both your client and server code at the same time!  Very convenient.

Now, to the method generated in the Domain Service class add an OrderBy Linq command so that the method GetAttendeesWithShare has an implicit order and Skip and Take LINQ will work and the total number of records can be easily obtained (notice the yellow highlighing is the code we added, the rest was there before).

Finally, Rebuild/All again and we are done creating the domain service class for this example.

Wire up an Appropriate Get Method that Returns in IQueryable

Now that we have our Domain Service built on the Server side (and of course it get’s exposed on the client side with Visual Studio 2010 template generating magic), we can go to one of the pages built in the default template, add a Silverlight DataGrid and assign our Domain Context to that. Let’s add the list of attendees to our Home Page.  We do that by going to the View\Home.xaml file and simply add a DataGrid tag to the page (see below highlighted in yellow, we simply typed that in or could have dragged it from the toolbar if we are so included).

Then, we go to the code behind of this page and add the following code to the “OnNavigateTo” enent of the Home.xaml page.

 var context = new DomainServiceSVCC();
 dataGrid1.ItemsSource = context.AttendeesWithShares;
 context.Load(context.GetAttendeesWithSharesQuery());

Now, when we rebuild all and run, we get:

When we click on the Id’s column header, we get the data sorted in reverse Id order, even though we never code an event for that!

Observations

So, what have we done?  Well, we’ve done a lot. first, we’ve create a Domain Service that uses WCF on the server side.  We created code on the Silverlight client that called this domain service.  We got databinding right through to our output.  Be very clear that in our code we added to the OnNavigate Event (repeated here)

we made a clear step across the network boundary.  We created the DataService context and when we loaded it, all the async magic just happened for us.  No wsdl’s, proxies to code, keep updated, etc.  All that actually happens for us, but we don’t have to worry about it.  I think I’m in love.

In this article, we will use the the Visual Studio 2010 Beta2 Tooling to create a Sessions DataGrid.  We will add a Pager to it as well as a Silverlight busy indicator which will show while the data is loading.  In Article 1, we build a simple DataGrid with code behind, in this article, it will all be declarative in XAML built with the Visual Studio 2010 designer.

First thing we need to do is add a new Silverlight Navigation Page to the Silverlight project (not the web project) in the Views folder.

Then, copy the code from the Home Page to get the top two default sections that appear on every page as follows:

And the actual code:

<StackPanel x:Name="ContentStackPanel"
            Style="{StaticResource ContentStackPanelStyle}">
    <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
               Text="{Binding Path=ApplicationStrings.HomePageTitle,
               Source={StaticResource ResourceWrapper}}"/>
    <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
               Text="Home page content"/>
    <Image Height="393" Name="image1" Stretch="Uniform" Width="467"
               Source="/Presentation1;component/Images/IMG_1504.JPG" />
</StackPanel>

Change text to “Speaker page content” and change the resource string to ApplicationString.SpeakerPageTitle and update the ApplicationStrings.resx file as follows:

Then, drag a DataGrid to the Speaker.xaml design surface (after removing the image tag which was the picture on the home page we copied over).

Now, we do what Microsoft calls “Connect the Dots DataBinding”.  That is, we go to the Data Sources Tab

Drag the SpeakersShort2009 box (shown in yellow below) to the DataGrid showing on the design surface.

That automatically creates a bunch of xaml including the RIA Domain DataSource, which includes a reference to the correct query method and the correct Domain Context.  Very nice!

<riaControls:DomainDataSource AutoLoad="True" Height="0"
                                      LoadedData="speakersShort2009DomainDataSource_LoadedData"
                                      Name="speakersShort2009DomainDataSource"
                                      QueryName="GetSpeakersShort2009Query" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:DomainServiceSVCC />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

Now, we do the same thing with the DataPager (which may have to add to the toolbox with “Choose Items” That gives us some xaml that looks like the following.

<data:DataPager Height="26"
                HorizontalAlignment="Left" Margin="720,325,0,0"
                Name="dataPager1" VerticalAlignment="Top"
                Width="200"
                PageSize="10"/>

Notice that I put PageSize in.  That does not happen by default, and in my presentation, I forgot this and for a while could not figure out why the paging was not working.  Try and not make the same mistake!

Then, drag the same DataSource as we dragged to the DataGrid and drop it on the Paging control as follows:

That automatically binds the DataPager to the same DomainDataSource as the DataGrid’s DomainDataSource.  Here is the XAML created.

 <data:DataPager Height="26" Name="dataPager1" Width="200"
   Source="{Binding ElementName=speakersShort2009DomainDataSource, Path=Data}" />

The next thing is to use the new “Reset-All” for styling.  It’s very simple.  Right click on the design surface and simply click “Layout/Reset” as follows:

Now, when we run this, we get:

Finally, to put a “Busy Indicator” control on the page, we simply drag out the busy Indicator onto the design surface. It likely will not be in your toolbox, so like the DataPager, you will need to add it to the toolbar as follows:

Then, drag it from the toolbox right onto the DataGrid as follows:

Then, once it’s on the DataGrid (and in the XAML), you need to right click on it and change some of it’s properties.

First, set the “IsBusy” property by checking the checkbox, then resize the control itself so it shows the text and is a pleasant size.

The next step is a little more tricky.  You need to find the property in the BusyIndicator called DataContext. Right click on that as follows and press “Apply Data Binding”.

Now, you are setting the Source so first select “ElementName”, then chose speakersShort2009DomainDataSource as follows:

Then, go to the “Path:” and set the property “DomainContext” and the method to “IsLoading” as follows:

What this has done is created a binding expression using a very nice Visual Studio 2010 Tool.  It’s assigned that binding expression to the DataContext of the DomainDataSource.

<riaControls:DomainDataSource AutoLoad="True" Height="0"
         LoadedData="speakersShort2009DomainDataSource_LoadedData_2"
                              Name="speakersShort2009DomainDataSource"
                              QueryName="GetSpeakersShort2009Query" Width="0"
   DataContext="{Binding ElementName=speakersShort2009DomainDataSource, Path=DomainContext.IsLoading}">
    <riaControls:DomainDataSource.DomainContext>
        <my:DomainServiceSVCC />
    </riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>

Now, when we finally run our program, we first get the busy indicator as the data is being asynchrously loaded which looks like this:

Then, when the data finally loads, looks like the following:

Notice the paging control at the bottom, and notice the BusyIndicator has gone away.

That’s it for this article.  In the next article, we will style this page as well as add Converts to show the Speakers picture and add a hyperlink to the sessions associated with each speaker.

The actual presentation was done at the Microsoft office in San Francisco.

	Title Of Each Article	Video Included With Each Post
Part 1	Introduction To RIA Services In Silverlight (This Article)	7 Minutes
Part 2	Basic RIA Services And DataGrid With  VS 2010 Tooling	14 Minutes
Part 3	Adding A DataGrid With Connect The Dots DataBinding in VS 2010	13 Minutes
Part 4	Adding a Navigation Page to a Silverlight Business Application Template	11 Minutes
Part 5	Adding Speakers Page Template With Converters In Visual Studio 2010 Beta2	11 Minutes
Part 6	Adding A Sessions Page That Includes a Query Parameter In Silverlight VS2010 Beta2	10 Minutes
Part 7	Basic Authentication and Authorization In RIA Services	5 Minutes

I’ve heavily borrowed from Brad Abrams PDC09 presentation here and am very thankful for the help.  I’m personally very excited about the opportunities RIA Services gives us as developers to efficiently build powerful multi tier applications without compromise.

I’d recommend going to Brad Abrams PDC09 presentation mentioned above to get a better understanding of what Microsoft was thinking and its plans for RIA Services. The way I see it is RIA Services is built on the WCF Stack.  It basically is a technology that let’s the developer create both client and server code at the same time.  It essentially removes the middle layer form a development perspective, but keeps it there in a very physical way using all the power of WCF.  For example, you create you logic on the server side and that code automatically gets migrated to the client for simplicity of calling.

For those interested where the motivation came from to to this, it’s an interesting story.  Last week, Mathias Brandewinder, the organizer of our local Bay.Net San Francisco user group emailed and asked if I could fill in last minute for the upcoming (actually today’s) bay.net meeting and, could I talk about RIA Services.  Well, 2 years or so ago, I did a quite extensive Silverlight 1.1 project for Leverage Software using the first beta of the .CLR release of Silverlight (C#).  I have to say, it was an awful experience.  So, now at Silverlight 4.0, RIA Services, I’m back and very excited.

By way of people that have helped me in the last week to get this far, just to name a few:  Bruno Terkaly, offering to do whatever he could and giving me tech tips, Michael Scherotter in “going to town” as he says to make the Speaker’s page look really nice in a live meeting, Victor Gaudioso in taking time on his busy weekend to call me  and offer help, Brad Abrams putting up with my list of naive questions and patiently responding, a slew of ASPInsiders who pointed me at an excellent place to host the videos, and David Kelly for giving me a nicely styled Silverlight player to show the videos on this blog.

I’m sitting in the mall below the Microsoft Office in San Francisco where the presentation will be in about 2 hours.  Hopefully, I’ll finish all seven articles and get them posted to the internet very soon.  I did the videos as just practice for my presentation.  They are not polished or edited.  I’m taking the chance of posting them in the hopes that they help someone struggling with all the new features like I have been during the last week.

Finally, this demo is built on live Silicon Valley Code Camp Data that has been collected over the past 4 years.  I can’t really publish that database along with the completed solution before I clean and randomize the attendee data.  Meanwhile, I will post the project code but it will not work until I’ve had a chance to clean up the database.  My thinking is that it’s all positive and better to release the code now rather than wait until I have the database cleaned up.

Below is what the end result of what we are building will look like (if you make it through all the articles and videos).

Attached here is source that you can build with Visual Studio 2010 Beta 2 and it will work with No Database.  The Domain Class is heavily modified from what is presented, but it will allow you to actually run and play with real data.

http://twitpic.com/pxclg

One of my goals for PDC this year has been to better understand the Microsoft data story about how to work with clients better (Silverlight, JavaScript, Forms, etc.).  RIA services has been on my radar for quite some time.  I was hoping to get some good conversations about this, but never expected to get almost an hour with Nikhil, the inventor of RIA services.

Today, I spent about 2 hours in the RIA booth writing my first RIA services, Silverlight 4 App with VS2010.  I love it!  surprisingly mature for a new product like this.  All I can say for now is “RIA Services removes about 4 acronyms between the client and the server”.

I’ll be blogging more about this later, but I’m loving it.  The ability to not have to reproduce data structures down to the client is a great dream and something I think this will bring us.  Listening to the keynote now from Scott Guthrie, Scott Hanselman, Brian Goldfarb, etc.

If he ever does this again, I highly recommend you go if you can.

BTW, here is the agenda he followed.

Agenda

1. System Configuration

2. Overview of Silverlight

3. Expression Blend

a. Graphical Elements

b. Paths

c. Gradients

d. Transforms

e. Animation

f. Controls

g. Styling & Skinning

4. Debugging

5. Event Handling and code behind

6. Controlling Media

7. Controlling animation

8. DOM Page interaction

Last year, we had the help of giving away 400 copies of Vista Ultimate to draw attendees.  This year, all we had was code!  Lots and lots of code.  They came, they saw, and from what I can see, they are going home and blogging.  Last minute, Microsoft gave us 5 copies of Vista Ultimate to raffle off so that was nice.  Foothill gave away a free class and there were lots of other fun things.

Well, my personal highlight for today (the Monday after code camp) is that the Palo Alto Daily News ran a front page picture of me.  One of my good friends walked by the newspaper stand and my understanding is she broke out laughing when she saw my picture (I bet Arnold’s friends don’t do this when they see him on the cover).  At any rate, here is the front page below.

To all those reading that participated in Code Camp in one way or another, thank you thank you thank you.  I’d say we all did a great job.

	(Below is the paragraph directly below my picture)

Sunday at 1:15PM, October 27th. Foothill College

http://www.siliconvalley-codecamp.com

This coming Sunday, October 27th at 1:15PM, I’m giving a presentation about a Silverlight application I developed for Microsoft and Leverage Software.  It will be a pretty technical session on all the things I learned and the tricks I had to use to make things work.  The session can be found here.

I worked very closely with a very talented designer (Uday Gajendar) who is also doing a session after mine titled "Life
on the Other Side: A UI Designer’s story".  I plan on going to that one also.

Hope to see you there!

Day 2 (Saturday) was packed full of interesting presentations.  From about 4:30 to 5:00, I did a presentation on how to build animations with blend and use them in Silverlight.  Here is the description:

In this presentation, I’ll talk about the implementation details of building the picture slider used in the Community Media Browser preview hosted at http://labs.leveragesoftware.com/gallery.html .  In this informal talk I’ll discuss how LoadXaml() was critical to this process as well as other tricks.  Because the picture slider is running from a live web feed, there
is no way to know ahead of time how many picture we may have to scroll so clipping type solutions just don’t make sense.  Time permitting, we’ll talk about other issues involved in building this application and of course take questions.

The slides and presentation are all bundled up in this zip file if you would like to download them.

http://peterkellner.net/misc/SilverLightSF.zip

silverlightdevcamp

For those that have never been to a Silverlight Dev Camp (OK, maybe nobody has ever been to one), this is an event where people on he (b)leading edge get together and talk about how much fun they are having and share war stories.  For me, life couldn’t get any better.  Well, as one of the other moderators on asp.net forums recently pointed out to me… Get a life.

Just a week ago, it seemed there were only a couple dozen signups for this event which is being hosted by Microsoft in their nice San Francisco office in the Landmark Office Building (1 Market Street, Thanks Anand),  Somehow, now, there are over 100 people signed up.  I was talking to Kevin Marshall and Kurt Brockett (the main organizers) and I asked them how they rocketed attendance 5x in the last week.  They said things like Twitter and lots of
email.  Since most (OK all) of you know I’m organizing Silicon Valley’s second code camp at the end of October I was taking careful notes.  We currently have 260 signed up and I’m thinking… 260 x 5 = ???  Wow, I need to pay attention.  Then Joe Kleinschmidt, CTO of LeverageSoftware mentioned that he had announced about a week ago that he’d buy beer for everyone.

Where was I.  Oh yes, Sitting in a Starbucks in San Francisco waiting for day two to start, wondering why my notebook  is not charging, and of course just signed up for twitter.

So, last night was a big group presentation of Silverlight.  Today is lots of smaller discussions about Silverlight.  I’ve got one at 4PM where I’ll be talking about my latest Silverlight apps, Searchlight and DiggPopular.  It’s only 30 minutes and I could easily talk all day about it.  If you sign up for twitter, you can read about how I did!

Time to go, That’s about it for now besides some pictures.  Enjoy.

silverlightdevcamp

SilverlightDevCampSF is an upcoming gathering, inspired by BarCamp, to build Silverlight applications, It’s organized by volunteers & Silverlight enthusiasts, with attendance free to all. At this event, I will be presenting a 30 minute presentation on how to build animation into a Silverlight application. I’ll talk about the implementation details of building the picture slider used in the Community Media Browser preview hosted at

http://labs.leveragesoftware.com/gallery.html .  In this informal talk I’ll discuss how LoadXaml() was critical to this process as well as other tricks.  Because the picture slider is running from a live web feed, there is no way to know ahead of time how many picture we may have to scroll so clipping type solutions just don’t make sense.  Time permitting, we’ll talk about other issues involved in building this application and of course take
questions.

Searchlight was born from the desire to show the outstanding ability of Silverlight to create a compelling web application using existing infrastructure technology.  The products was developed working with Leverage Software, a
San Francisco company dedicated to delivering first class communities for it’s customer’s, Peter Kellner (the Silverlight technology guy), and Uday Gajendar, the design specialist.  Our efforts can be viewed by going to the LeverageSoftware Labs Link Here.  Simply follow the directions on that web page to run the web application. In this article, many of the Silverlight features in Searchlight are discussed.

Background

Searchlight was built to run with the first Alpha 1.1 version of Silverlight shipped from Microsoft.  Searchlight takes advantage of Leverage Software’s extensive web service api to provide real time data based on those web feeds.  Currently, Leverage Software’s  main access to the Dwell Community is an html application that can be found at
http://dwell.leveragesoftware.com/.  Using the Silverlight Alpha 1.1 combined with

Microsoft’s Expression Blend, a new compelling interface to the Dwell Community was built.  Below is a screen shot of the application running after it has been loaded for the first time.

Dynamic Data Content

Silverlight supports access to remote data feeds. This allows for interactive applications to be built that rely on external datasources seamlessly.  For example, when the user clicks on the Furniture Menu choice, a query is sent to the Dwell on line community and all members who have pictures tagged with the word furniture are retrieved.

Responsiveness

Silverlight runs on the client side which means all user interaction (events) are processed in the browser and do not require a round trip to the server. For example, when the user wants to scroll pictures right to left they would press the green right arrow button and the pictures will scroll.  Notice also the nice halo affect when you mouse over the green scroll button.

Again, because Silverlight is all client side, the speed at which the pictures scroll is determined by how long the user holds down the mouse over the arrow key before releasing. If the user quickly clicks the green arrow button, the pictures move quickly, if they click and hold for a second, then release, the picture will  scroll more slowly.  In addition the little green dots give you immediate feedback of how many pictures are in the entire scrollable region, and where you are in that list.  For example, if you look at the second line of pictures (Wimlarch), you’ll notice that there are
6 green dots with 5 illuminated on the left (as shown below).

This means, you are looking at 5/6ths of the pictures (83 percent), and that you are scrolled all the way to the left. If half the green dots were illuminated, then you would only be looking at half the pictures for that particular person (line). Again, because this is a completely client side programming model (Silverlight), as you scroll, the green dots automatically change and there is no server load and no traffic on the internet (with the exception of the actual
images being downloaded if they have not previously been cached in the browser).

Layout/Size Management

It’s important for a real functioning application to be able to manage the information inside it’s borders. The amount of screen area available to the program is different depending on how big the users browser is, as well as how much space the user has allocated to the browser window.

Silverlight exposes a class called the HttpBrowserClass which allows the client software (Silverlight) to react and adjust based on screen size. For example, if the browser size is reduced, the number of rows showing is reduced to the correct number (two in this case) and the pictures showing on each row is reduced to 4. Of course the little green dots adjust also. Here is a screen showing that situation.

Notice also that the menu choices are closer together. The point here is that each Silverlight control can change its position dynamically depending on external inputs such as browser size changes.

Special Effects.

Silverlight shines when it comes to special effects. Many effects can be achieved, while only a few are demonstrated here. The effects demonstrated here are as follows.

Picture Growth On Mouse Over

This means that as you mouse over a picture it slightly grows and when you mouse out it shrinks again.  This is to give you an idea that you can click on it.

Picture Flipping to the opposite side

When you click on a picture in the user’s collection, the picture fades in at a higher resolution as below.

If you click on the little orange triangle on the lower right corner of the picture, the picture actually flips over simulating a 3d flip and the information about the picture is displayed on the back side.

Accents On Mouse Over

Another Silverlight effect is what happens when you mouse over one of the green left or right arrow buttons.  Small expanding circles grow out of the button to indicate that this is something that can be pressed.

Links to External Web Sites

Silverlight supports many features of standard web browsers including the ability to link to external web sites. If you bring up the Credits screen by pressing the “Credits” button in the upper right corner, you will see the screen below.

Notice that under each of our names, there is a “View Website” button.  When this button is pressed, a new browser window is opened containing the information about one of us.  You can also get to more information about one of the members by clicking on their picture on the far left of the picture row.

Asynchronous Processing

Silverlight allows multiple things to be done at the same time. For example, when the program first loads, an initial web feed from the dwell community is retrieved. This can take several seconds so instead of nothing happening, a small image is displayed with dynamic content.

The little dial circles showing time passing. When the web download is complete, Silverlight has the built in capability to notify the running program that the work is complete so it can continue and bring all the controls and pictures to life.

Multiple Ways to See Similar Data

Silverlight has a complete custom programming model that allows the developer to show the data in lots of different ways. On the opening screen, if the user presses the “View Gallery” button on any of the picture rows, they will get a screen that looks like what is below.

Notice that as the picture is scrolled through the artists collection, the title and information about the picture is displayed. Again, this all happens with no server interaction or traffic.

Conclusions

Silverlight is indeed a compelling technology to build applications that can be run anywhere on the internet.  Searchlight demonstrates just a small number of Silverlight’s great features.  Understanding that there are always lots of ways to deliver the same result, Silverlight does give a way to deliver very rich content using the Microsoft development stack.  In this case, that includes Visual Studio, Microsoft Expressions Blend and of course the
.Net Programming language c#.  Many of the features of Silverlight .net alpha 1.1 are not yet available, so we anticipate when the final production release comes, we will be able to deliver even more functionality, even more efficiently than we can do it now.

So, you might be wondering, what is a code camp, and what does it cost? Well, it’s completely free and completely staffed by volunteers. It’s a place you can share your passion for technology with others like yourself, it’s a place you can give a presentation on your favorite topic to a receptive audience, as well as go to sessions by others who want to share the knowledge. Typically, there are sessions on all kinds of technologies from Microsoft’s latest stuff to Java,
Ruby, Python, JavaScript, and even more obscure technologies. It’s basically formatted like a 1 day PDC/Teched/JavaOne style event where sessions are pre arranged and you just choose what interests you. Session sign up closes a week before the event so you know what you’ll be in for ahead of time and you can plan.

At any rate, my session is at this URL:

http://www.siliconvalley-codecamp.com/Sessions.aspx?ForceSortBySessionTime=true&id=125

The more people come, the more fun it will be.

See you at Camp!

This issue has come up several times for me.  That is, you have an image  url you want to display in your silverlight .net 1.1 application that comes from  some foreign server.  That is, you want this to work:  (and of course
it does not).

The Problem

Even though, you can do this:

There seems to be a subtle difference having to do with cross domain security  that I just don’t get but since it’s there, we have to deal with it.

The Solution

So first, why do you even care.  Why not just do the one that works?  Well, the answer is that you want to be able to deal with what happens while an image is being downloaded.  My particular problem has to do with what happens when you bring up a picture in a modal dialog type thing.  That is, you click on a small thumbnail, and a larger ones comes up.  In my case, I’m getting the image url from a web service so I don’t have the luxury of opening it locally.  I have to use a foreign (remote) url.  And, the reason I don’t want to open it by simply setting the source tag is that I’m
reusing a control.  This means that I’m simply hiding it and unhiding it. If I just set the source and unhide it, the wrong image comes up.  That is, the one from the previous request. Then, a few seconds later, the correct image
comes up.  Bad.

We really want to use the Downloader object.  A very cool control, but not if it doesn’t work cross domain IMHO.

The work around for this is to write a http handler that runs in your local asp.net project that you pass the url you want to display. Then, that web service turns around, calls the cross domain server, gets the image and returns it to your Downloader object.  Simple in concept, but the devil is in the details.  How, for example to you pass a url (that may include all kinds of stuff like &’s to a local web service.  The answer is encode it!  Then decode it at the web service.  I’m sure you all can whip that up quickly, but since I did already, why bother.  I’m going to paste the code below with brief explanations to help.  Here goes:

The Silverlight UserControl That Calls the web service

The way I did the code in the silverlight control is to encode the real URL I want.  That is the one cross domain.  I think build a URL that calls my local web service passing the parameter encoded as a base64 value as one of
the url parameters.  I’m using a property in my usercontrol to set this value just because that’s kind of convenient.  Here is what the code looks like:

Just to give you a hint of what the might look like, in my case, this is what it is:

http://localhost:49803/WebService/DisplayImage.ashx?URL=aHR0cDov…NDE0NzU2LkpQRw==&Width=400

(I put a bunch of …’s in the middle, but it was longer than that originally)

Silverlight is kind of limited on conversion functions so I had to write this little one called EncodeTo64 which is pasted below.  I’m sure there are better ways to do it, but this one works.

And, don’t forget that you need to have the completed event code in your silverlight side to handle setting the source tag when the image is fully downloaded.  Here is that function.

The Http Handler (DisplayImage.ashx file)

To make all this come to live, you need an http handler that will make the call to the cross domain server.  Below is that code.  I added an extra parameter for width so that if you know the image you need is smaller than the one across the internet, you can just get downloaded what you need.  Here is the code for the handler:

Conclusion

I’m guessing that this problem will go away in the next alpha or beta release of Silverlight .net.  In the mean time, this works very well for me and hopefully will for you also.  I don’t have this in a good sample application and really just wanted to get it posted because I know others were having the same problems.  If someone goes through and makes a good demo of this, please post a comment with the code for others to download.

Thanks for reading, and best of luck with your Silverlight Development!

All of a sudden, I could no longer debug my project. After poking around for a while, I discovered that if I went to the webserver projects property tab, startup options I had to select "Silverlight Project". I don’t remember unchecking this, but none the less, there you go.

I’m of course referring to my article of a couple days ago at: 

http://peterkellner.net/2007/06/18/silverlightdebugwebservicedotnet/

So, I’m working on a Silverlight .net project where the main source of data is a webservice.  It’s not a huge amount of data, but it is not small either. In general it’s about 20K to 50K per download.  My original plan was to use the quickstart method (POX) and basically parse the xml using the XMLReader classes that are available on Silverlight.  That didn’t work so well for
me, so I switched to the proxy classes and did not have much more luck. The primary problem is I could not figure out how to debug the code on the Silverlight side.  Ultimately, I ended up figuring out how to do debugging and in the next few paragraphs I’ll go through the steps including screen shots showing how to do it.

The Details

The Solution

So, let’s start from the beginning.  First thing to do is create an empty solution.  In my case, I’m going to call that solution SearchLightMain.  I’m going to use Orcas rather than vs2005 because that is required for Silverlight. Ultimately, the web services project will deploy on .net 2.0 but the development envirnoment is still Orcas.  (File/New Project/Other Project Types/Empty Solution)

The Silverlight Side

Next, right mouse on the solution explorer and choose Add/New Project/C#/Silverlight.  Leave your solutions directory in the Location textbox and put the name of your silverlight project in the name field.  In my case, the name will be SearchLight.

After the project is created, my preference is to add a textblock to the page.xaml file and some color to the background so when I run it I can tell it is actually working.  Here is what it looks like now  after I’ve done that if right mouse and run TestPage.html.  This is what you get.

And the Xaml looksl like this:

Now you have the silverlight project done.  Let’s create the Web Service Project now inside of the same solution we made first.

The Web Service

On the solution explorer, right click on the top of the tree (solution) and say "Add/New Website".  Choose ASP.NET web site.  (remember, this is Orcas we are still in).  Make it a "File System", "C#" project. and for the location put the directory where you have your empty solution followed by the name \WebService.  In my case, the name is: C:\Users\pkellner\Documents\Visual Studio Codename Orcas\Projects\SearchLightMain\WebService  Also, change the framework to .NET Framework 2.0 in the upper right hand corner of the screen "Add New Website".

Now, your solution explorer should look like this:

And, the layout on your hard disk will look like this:

Now, we need to make the web service.  The easiest thing to do is grab the code from the quickstart and paste it into a webservice if you don’t have your own.  The URL where you can grab the code is: 

http://www.silverlight.net/QuickStarts/Remote/UsingJSON.aspx

One thing I found was that if you downgrade to .net 2.0 from .net 3.5 as we did earlier, the webservices that use the tag [System.Web.Script.Services.ScriptService] do not work. My solution was to create an Ajax enabled web site with vs2005 and copy that web.config into this project.

Continuing on, the next thing I did was to copy the files TestPage.html, TestPage.html.js and Silverlight.js from the SearchLight project into the WebService project.  This is because we will actually be running the project from the webservices project.

Finally, to complete the linking, right click on the webservice project and select "Add Silverlight Link…" (not sure what the … means).  Here is what it looks like.

Now, do a Build/Rebuild all and the xaml files from your silverlight project as well as the ClientBin directory will be imported (copied) into your web services project.  Here is what we have now.

Now, verify that your web service actually works by right mousing on the asmx file and pressing browse.  If it’s working, you should be able to run it and get a screen something like this.

The next step is not what you are expecting.  The quickstart says go ahead and create a web reference and run that.  That’s great as long as you don’t want to run this project on a real server (port 80).  Best I can tell, it hardwires the port to whatever the debugger is set to.  I tried without much luck to change the property in the localhost control created but
without much luck.  I believe a better solution is to run the tool called slwsdl.exe which is part of the orcas distribution.  essentially, you run it with the /SilverlightClient option and point it at your web service. for example, when I ran mine, the command was:

This created a file called WebService.cs which I put in my silverlight project.  It becomes my proxy.  The nice thing is I can modify the line that reaches out to the webservice to be whatever I want.  By default it is the local server with the debug port set, but when I deploy to a real server I can change that address to the real name.  Here is the code you
change:

Finally, now you can debug.

Go to your SearchLight project and add some code to the Page.xaml.cs file.  then, run the project from the webservice/testpage.html and vwala!  You can debug.  Here is proof (really, not bull).

Final thoughts

So, why go through all this trouble?  It think I forgot to mention that it’s to avoid the dreaded Cross-Domain issue.  That is, your Silverlight client can not call a webservice that is not in the same root domain and running on the same port as your silverlight app.  Also, while I was writing this article to help others avoid some of the pain I’ve been through, I put a project
together from scratch.  A couple things I noticed along the way.

• When you copy xaml files from one project to another, you can no longer run them.  You need to change their property from Silverlight Page to Embedded Property or the page can not be read in it’s codebehind.
• It’s very important to go to debug/exceptions and turn on all exceptions, otherwise you will not know what is killing your app (see
  previous item).
• It’s a cold cruel world out there on the bleeding edge.

Good luck with your Silverlight development.  There are lots of opportunities out there.  Indeed, a target rich environment.

The Podcast:  
http://channel9.msdn.com/Showpost.aspx?postid=306463

Silverlight, is the new name for WPF/E which was formally introduced at the  MIX07 conference in Las Vegas a couple weeks ago.  Basically, it’s a stripped down version of full WPF Xaml that works on the web by installing a custom plug-in in them most popular browsers in a similar way to how flash works.  The great thing about this technology is that it works cross platform.  Mac’s, Linux, etc.  The other major announcement at MIX07  was that it supports programming in .NET.  This means that Silverlight applications can be developed in c#, my favorite programming language.  I’m not that great a JavaScript so this is great news for me because I want to be able to build highly interactive applications, and so far, with asp.net and little JavaScript, this has  been very limiting for me personally.

For those not wanting to read on and just try it, here is the link:  http://xamlwebpad.peterkellner.net/

There is another application that you might try:  Silverlight Pad(Updated 4/19/2008 Peter Kellner)

My First Production Silverlight Project

Fast forwarding to now, I’m currently building my first production Silverlight application.  Believe it or not, my JavaScript skills are significantly better than my actual design skills.  Fortunately, XAML allows me to more easily work with a professional designer who can provide me with Xaml.  I’ve been very fortunate in this current project to be working with an outstanding designer, who like me, is just learning the new Silverlight platform.  We are of course using the latest beta of

Blend which is very helpful.  There is a problem however.  While the May Beta of Blend provides help in using the correct subset of xaml for Silverlight, it does not give you any errors if you import Xaml from other sources (such as Adobe Illustrator exports).  This means, you feel like you have good Xaml but you really don’t.

We are not in Kansas anymore

So, how is this a problem?  The problem shows up when the designer hands off code to the programmer (me in this case).  The code doesn’t work and when I send it back to the designer, he has no good way of fixing it.  Microsoft has acknowledged this as a problem and my guess is that in an upcoming release (beta or production) of Blend, they will have something that shows errors if you set your xaml to "Silverlight Mode".  for now though, what do do?

XamlWebPad to the rescue

In comes the new XamlWebPad (obsolete)! Though you can suggest to the designer that he or she review the Silverlight SDK for what tags to use, you will likely not be very popular. It would be very painful to go tag by tag and figure out what works and what doesn’t.  To make the designer’s life easier, I’ve created a simple web app using asp.net 2.0 and Silverlight that lets the designer cut and paste their code into a textbox and then press the "Process
XAML" button and see how it will render.  If there are errors, a MessageBox will pop up showing the errors (one at a time, sorry) with the tags that did not work.

Is XamlWebPad Perfect or even done?

Most certainly it’s not perfect, or even done (time permitting).  I wrote it on a plane ride from Miami returning from my Gadget Presentation at VSLive in Orlando last week.  One glaring hole is that it does not support showing images. 
That is because you are only uploading your Xaml, not your images.  If you really want to see an image, you can of course point your image to a remote source as I’ve pasted below.  Then you will see it working but you will have to change it to a relative image in your final Xaml most likely.  It’s not a very pretty app, but it does the job.  Feel free to use it and certainly post suggestions to the comments of this blog post.

<canvas xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="640" Height="480">

    <textblock Width="253" Height="72" Canvas.Left="28" Canvas.Top="81" Text="TextBlock"

     TextWrapping="Wrap"/>

    <path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="205.027"

     Height="52.03" Canvas.Left="45.5"

       Canvas.Top="98.47" Data="M46,150 C257,73 250,106 250,106"/>

    <image Width="100" Height="100"

      Source="http://PetersBlogCDN.s3.amazonaws.com/wp/wp-content/themes/arzel_xt2/images/bearflag.jpg"

      Stretch="Fill"/>

</canvas>

Feel free to use it as much as you want and good luck with your Silverlight projects.  Look for my posts on the forums and I will of course be looking for yours.  The crew at Silverlight asked me to be a moderator at the Silverlight forums I guess because they think because I’m a moderator on the asp.net forums I know what I’m doing.  It’s a great place to get answers, and the more of us that use it, the more useful it will be.

There is another application that you might try:  Silverlight Pad(Updated 4/19/2008 Peter Kellner) Happy coding.

(Above is a screen shot of what the web page looks like.  Click on it to be taken to the real deal)