• No results found

Create the Silverlight Client

In document Microsoft Silverlight 4 Step by Step (Page 99-103)

You’ve created a database, and a data model that allows you to program against that data- base, and a domain service that exposes the model . Now you are ready to create a Silverlight client that communicates to the database through the service and the model .

Build a Silverlight client

1 . In Solution Explorer, make sure you’re using the client project called SbSCh4_1 and

open the MainPage .xaml file in the designer .

2 . Drag a DataGrid control from the Toolbox onto MainPage .xaml . Change its Name prop-

erty to FriendsGrid .

3 . Make sure that the AutoGenerateColumns property of the grid is set to True . 4 . Open the MainPage .xaml .cs code-behind page .

5 . At the top of the code window, add the following “using” statements code:

Using System.ServiceModel.DomainServices.Client; using SbSCh4_1.Web;

6 . The connection to the domain service is done through a Context . The RIA Services

framework creates a FriendsContext class based on the fact that your database was called Friends . You’ll need to add a private class-level variable which is an instance of this:

private FriendsContext _friendsContext = new FriendsContext();

7 . The concept of loading data from the service is embodied in the LoadOperation class,

which will use the MyFriend data type . Remember that when you created the model, you called it MyFriends . RIA Services uses this to define a MyFriend data type . Create another class-level variable to hold an instance of LoadOperation<MyFriend>, like so:

private LoadOperation<MyFriend> loadOp;

8 . Next, in the MainPage() constructor, you need to initialize the LoadOperation by calling

a query within the context that connects you to the service .

loadOp = this._friendsContext.Load(this._friendsContext.GetMyFriendsQuery());

9 . Loading is an asynchronous operation . When the operation completes, the Completed

event will fire . Using the following syntax, you can specify which function to call when the Completed event fires:

loadOp.Completed += new EventHandler(loadOp_Completed);

10 . After the load is complete, the loadOp instance will contain the data . You access data in

the collection by using its Entities class, and you can bind the DataGrid to a collection by using its ItemsSource property . Here’s what the loadOp_Completed event handler should look like:

voidloadOp_Completed(object sender, EventArgs e) {

FriendsGrid.ItemsSource = loadOp.Entities; }

11 . As a checkpoint, here’s the complete code for MainPage .xaml .cs . Make sure your code

matches and then press F5 to compile and run the application . You should see the data rendered in the grid .

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; Using System.ServiceModel.DomainServices.Client; using SbSCh4_1.Web; namespace SbSCh4_1 {

public partial class MainPage : UserControl {

private FriendsContext _friendsContext = new FriendsContext(); private LoadOperation<MyFriend>loadOp; public MainPage() { InitializeComponent(); loadOp = this._friendsContext.Load(this._friendsContext. GetMyFriendsQuery());

loadOp.Completed += new EventHandler(loadOp_Completed); }

void loadOp_Completed(object sender, EventArgs e) {

FriendsGrid.ItemsSource = loadOp.Entities; }

} }

12 . So far, the application provides a read-only look at the data . But the DataGrid is ca-

pable of both display and editing . With very little extra work, you can transform the ap- plication so users can create, edit, and save changes to the data . To start, add a Button control to MainPage .xaml by double-clicking Button in the Toolbar .

13 . Next, double-click the Button on the design surface . Visual Web Developer will create a

button1_Clickevent handler and stub code . Add the following lines of code to the event handler . This code detects whether any data has changed in the data context bound to the grid . If so, then the user has changed something, and you need to submit the changes back to the database via RIA Services .

if (_friendsContext.HasChanges)

_friendsContext.SubmitChanges();

14 . Press F5 to start the application . Change the data in a field and then click the Button .

The application will write the changed data to the database .

15 . Stop the application and take a look at Database Explorer in Visual Web Developer .

Open the Tables node, right-click MyFriends, and select Show Table Data .

You’ll see the latest view of your database containing the changes you made to the data!

Key Points

■ You learned how to use databases with Silverlight and how to bind to data . ■

■ RIA Services offer a simple way to expose data to Web clients through Silverlight . ■

■ You explored the Visual Web Developer tools you use to work with SQL Server and

learned how to create a table, define its columns, and add data .

■ The ADO .NET Data Model can be used as the basis of a Domain Service class . ■

■ RIA Services provides proxy classes that you can use from Silverlight to communicate

with the Domain Service classes .

■ You built a working data-entry application that uses the Silverlight DataGrid control to

83

Chapter 5

In document Microsoft Silverlight 4 Step by Step (Page 99-103)