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.

This article will follow the previous article and go through the process of adding Converter’s for changing both the Id column and the Image column.  Basically, what we saw in the previous article was a DataGrid that was created and looked as follows.  (notice the Id column and the PKID columns which are highlighted.  Then, we will add a a DisplayItemTemplate that will format the page and make it look good.

What we are going to want to do is convert the Id column’s data from something that looks like “777” to “/Sessions?SpeakerId=777”.  We also will change the PKID column to change from showing a value like “222f32f83-8811” to http://localhost:52879/DisplayImage.ashx?sizex=60&PKID=222f32f83-8811”.  Then, we will apply a template that will make the page look like the following:

So, let’s get started.

First, we need to add two converters to the project.  Both are straight forward and I will not give much explanation besides saying they do exactly what was mentioned in the paragraph below the above picture.

Image Converter:

namespace BusinessApplicationSVCodeCamp

{

    public class ImageConverter : IValueConverter

    {

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            throw new NotImplementedException();

        }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            string PKID = value.ToString();

            var s = Application.Current.Host.Source;

            int horizontalSize = 60;

            string path = String.Format("{0}://{1}:{2}/DisplayImage.ashx?sizex={3}&PKID={4}",

                s.Scheme, s.Host, s.Port, horizontalSize, PKID);

            return path;

        }

    }

}

Hyperlink Converter:

namespace BusinessApplicationSVCodeCamp
{
    /// <summary>
    /// NavigateUri="/Sessions?SpeakerId=2000" is what we want
    /// </summary>
    public class HyperLinkSessionsFormatter : IValueConverter
    {
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string sessionId = value.ToString();
            string path = String.Format("/Sessions?SpeakerId={0}",sessionId);
            return path;
        }

    }
}

Next, we need to add these converters to our Visual Studio 2010 Beta2 project as resources so we can use them in the DataGrid.  To do this, we use a very cool new feature in VS2010.  It’s a little indirect how we do this, but ultimately, it does make sense.  Just not very discoverable.  What we do is we bring up the properties editor for the DataGrid.  Notice below we are showing an icon next to the word “(Collection)”.  This is the icon you click that brings up the Collection Editors: Columns dialog.

How on the highlighted “Binding” property of the “idColumn”, you click the databinding icon and you will get the following binding dialog.

chose “Apply Data Binding” and you’ll get the following:

Nothing has to be done to the Source property.  This is already set to the the DomainDataSourceView we want.  The Path is already set to Id, which is also correct.  This all happened when we did the “Connect the dots” databinding with RIA Services.  That is, when we dragged the domain data service on top of the DataGrid.  We will need to set the Converter though so click on the currently unexpanded “Converters" control and you will see:

What this is telling us is that in the Presentation1 project, we have the two converters available to us.  We will need to add these to the project.  To do that, we have to do it one at a time.  First, click on HyperLinkSessionFormatter and you will see the following dialog.

When you press “Create New”, you will get a choice of which xaml to put the resource in as follows:

By default, it will put it in your current Navigation Page (Speakers.xaml), however, if you look at the drop down:

you’ll see that you can also put in other xaml files that may make more sense.  In our case, we are putting it in the Speakers.xaml file and when we press “OK”, it creates xaml as follows.

<navigation:Page.Resources>
   <my1:HyperLinkSessionsFormatter x:Key="HyperLinkSessionsFormatter1" />
</navigation:Page.Resources>

or

It also dropped in a namespace definition for us at the top of the file that looks like the following to reference the my1 prefix:

It seems like quite a few steps, however in practice, it’s very quick.  I won’t go through the same steps again, but you need to add the ImageFormatter converter the same way (see busy screen shot below for all steps combined into one).

Now, we’ve got xaml with two converters:

<navigation:Page.Resources>
        <my1:HyperLinkSessionsFormatter x:Key="HyperLinkSessionsFormatter1" />
        <my1:ImageConverter x:Key="ImageConverter1" />
</navigation:Page.Resources>

And, the columns of the DataGrid are bound to them correctly.  The xaml for that looks as follows:

This is hugely convenient, and not very error prone which as far as I’m concerned is very nice.

So, now when we run the page, we get the following:

Ugly, but you can see where we are headed.  Now, we create a DataTemplate (or we get Michael Scherotter to help us create one) that looks like the following:

<DataTemplate x:Key="SpeakersItemTemplate">
    <Grid >
        <!--<frameworkElement Margin="left,top,right,bottom  -->
        <StackPanel d:LayoutOverrides="Height" Margin="68,5,5,5">
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="FirstName" Text="{Binding UserFirstName}"
                           Margin="0,0,6,0" FontFamily="Trebuchet MS" FontSize="16"
                           FontWeight="Bold"/>
                <TextBlock x:Name="LastName" Text="{Binding UserLastName}"
                           FontFamily="Trebuchet MS" FontSize="16" FontWeight="Bold"/>
            </StackPanel>
            <HyperlinkButton
                NavigateUri="{Binding Id, Converter={StaticResource HyperLinkSessionsFormatter1}}"
                Content="Sessions"/>
            <TextBlock x:Name="Description" Text="{Binding UserBio}"
                       TextWrapping="Wrap" FontFamily="Trebuchet MS" FontSize="12"/>
        </StackPanel>
        <Image  HorizontalAlignment="Left" Width="60" VerticalAlignment="Top"
                Source="{Binding Path=PKID, Converter={StaticResource ImagePathConverter1}}"  >
        </Image>
        <HyperlinkButton  Content="WebSite"  TargetName="_blank"
                          NavigateUri="{Binding UserWebSite}" VerticalAlignment="Top"
                          HorizontalAlignment="Right"/>
    </Grid>
</DataTemplate>

Then, when we add a listbox, rather than the DataGrid and bind it the same

<ListBox Height="600"
         ItemsSource="{Binding ElementName=speakersShort2009DomainDataSource, Path=Data}"
         ItemTemplate="{StaticResource SpeakersItemTemplate}"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

We get something that looks pretty nice:

That’s it for this article.  In the next article we will actually talk about what happens when the Session hyperlink is pressed.  We know it will take us to the Sessions page, but how it filters the Sessions is worth reading about.

Well, if you have gotten this far in the series, you’ve probably realized I’ve gotten my articles and video’s a little out of sync.  The video attached here goes through the full process of building an application from scratch while adding a navigation page.  The process was somewhat explained in the previous article.  I’ve kept the title the same because that is what the video actually shows.

I won’t go through all the details again, however, what you will get at the end is a new speakers page which is just another tab on the home page that looks like the following.

In the next section, we will go through adding a SpeakerPageTemplate to style it and have it show up with actual pictures and hyperlinks.

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.

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.

NOTE ADDED 1/25/2010 by PETER KELLNER:    Just finished 7 blog posts that each have video that basically follows was was done in the presentation.  They are linked here on this blog at:  http://peterkellner.net/category/ria-services/

I just volunteered to present at the next Bay.Net Meeting (San Francisco, at the Microsoft office) RIA Services in Silverlight 4 (Visual Studio 2010).  The original speaker couldn’t make it so this is a last minute thing.  I’m busy preparing an example of using the Silicon Valley Code Camp Session Listings as an example.  The example will hopefully including authentication (logging in and out), special admin access to certain functions, validation as well as other cool tricks.

RIA Services is an inspirational technology.  Let me show you why I think so!

http://www.baynetug.org/DesktopModules/DetailXEvents.aspx?ItemID=411&mid=49

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.