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 normal Web (ASP.NET) client can be implemented to use the KISS architecture. I start by creating a "ASP.NET Web Application" project named Kiss.Web, 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 Label named cityLabel, a TextBox named cityTextBox, two buttons named getButton and updateButton, and a GridView named simply gridView) to the automatically generated page (Default.aspx). When run, the result should look similar to the figure on the left.
The page markup should look something like this:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Kiss.Web</title>
</head>
<body>
<form id="form" runat="server">
<asp:Label ID="cityLabel" runat="server">City:</asp:Label>
<asp:TextBox ID="cityTextBox" runat="server" />
<asp:Button ID="getButton" Text="Get" OnClick="getButton_Click" runat="server" />
<asp:Button ID="updateButton" OnClick="updateButton_Click" Text="Update" runat="server" />
<asp:GridView ID="gridView" AutoGenerateColumns="true" runat="server"/>
</form>
</body>
</html>
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:
protected void getButton_Click(object sender, EventArgs e)
{
OrderServiceClient service = new OrderServiceClient();
service.Endpoint.Address = new EndpointAddress("http://localhost:2222/OrderService.svc");
Customer[] customers = service.GetCustomersByCity(cityTextBox.Text);
gridView.DataSource = customers;
gridView.DataBind();
}
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:
protected void updateButton_Click(object sender, EventArgs e)
{
OrderServiceClient service = new OrderServiceClient();
Customer customer = service.GetCustomersByCity(cityTextBox.Text)[0];
customer.City = customer.City + "X";
service.UpdateCustomer(customer);
}
It takes the customer entity in the first row returned by the service (which is also the first one shown 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 WPF (Windows Presentation Foundation) client can make use of the KISS architecture.
Subscribe