This is a follow-up on my blog series (see last part) on the mobile blog Windows Mobile Development about creating a simple architecture that make use of the latest technologies in the simplest way.
The implemented architecture is published on CodePlex in a project called KISS Architecture, and this means that you can access the full source code as well as discuss it, come with suggested improvements, etc. As I walk you through the implementation, I suggest you keep the source code handy to check out more details.
In this post I will show how a WPF (Windows Presentation Foundation) client can be implemented to use the KISS architecture. I start by creating a "WPF Application" project named Kiss.Wpf, and then add a service reference to the service (see part 7 for details) named OrderService.
Now, let's implement a simple user interface by adding five controls (a TextBlock named cityTextBlock, a TextBox named cityTextBox, two buttons named getButton and updateButton, and a DataGrid named simply dataGrid) to the automatically generated page (renamed MainWindow.xaml). Note that the DataGrid is included in the WPF Toolkit, that you need to download and install. When run, the result should look similar to the figure on the left.
The page markup should look something like this:
<Window x:Class="Kiss.Wpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Kiss.Wpf" Height="400" Width="600" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left" Margin="8,15,0,0" VerticalAlignment="Top" Text="City:"
TextWrapping="Wrap" Width="58.652" Height="19" x:Name="cityTextBlock" />
<TextBox Height="22" HorizontalAlignment="Left" Margin="43,12,0,0" x:Name="cityTextBox"
VerticalAlignment="Top" Width="174" Text="" TextWrapping="Wrap"/>
<Button HorizontalAlignment="Left" Margin="221,12,0,0" x:Name="getButton" Click="getButton_Click"
VerticalAlignment="Top" Width="52" RenderTransformOrigin="0.07,0.636" Content="Get" />
<Button HorizontalAlignment="Left" Margin="277,12,0,0" x:Name="updateButton" Click="updateButton_Click"
VerticalAlignment="Top" Width="52" RenderTransformOrigin="0.07,0.636" Content="Update" />
<my:DataGrid Margin="8,8,8,8" Grid.Row="1" x:Name="dataGrid" AutoGenerateColumns="True"/>
</Grid>
</Window>
With the service reference and the user interface in place, it's time to implement some presentation logic. Here's the code for the "Get" button:
private void getButton_Click(object sender, RoutedEventArgs e)
{
OrderServiceClient service = new OrderServiceClient();
service.Endpoint.Address = new EndpointAddress("http://localhost:2222/OrderService.svc");
Customer[] customers = service.GetCustomersByCity(cityTextBox.Text);
dataGrid.ItemsSource = customers;
}
Note how easy it would be to redirect the client to use the service in another location (local, server, cloud, etc) by just changing the service URI. Also note how the definition of the entity (Customer) have come all the way from the data service without any manual coding anywhere, and when it is changed, it's simply a matter of updating the service references in all tiers. The observant will note that the List<Customer> return value of the service is transformed into a plain array when serialized by WCF, but if a list is preferred, this code could be used:
List<Customer> customers = service.GetCustomersByCity(cityTextBox.Text).ToList();
The code for the "Update" button looks like this:
private void updateButton_Click(object sender, RoutedEventArgs e)
{
OrderServiceClient service = new OrderServiceClient();
Customer customer = (Customer)dataGrid.SelectedValue;
customer.City = customer.City + "X";
service.UpdateCustomer(customer);
}
It takes the customer entity in the selected row in the grid, and adds an "X" to the City attribute. Then the service is called with the updated entity instance (customer). It can't be much simpler than this!
As the same technology is available on the (Windows) client, the full architecture (with all its tiers) can be run locally and thereby enabling offline mode (e.g. when not network connection exist). In this scenario, it would be beneficial to use the Sync Framework for data synchronization, and that framework will probably also be involved in the upcoming "offline" version of ADO.NET Data Services (see the Astoria team blog for more info).
In the next part, I will show how a Silverlight 2 client can make use of the KISS architecture.
Subscribe