Introduction

This is the first of many parts on how to build Rich Internet Applications (RIAs), and the various methodologies of development associated with an RIA.

When I sat down and thought about this series there were 2 technologies that I really wanted to cover including:

• ASP.NET AJAX
• Silverlight (1.0 and 1.1)

Throughout this series I will be using the aforementioned technologies with ASP.NET. All source code will be included with each part.

RIAs?

Over the last year or so RIAs have made a big impact on the web, mainly due to the adoption of AJAX and other technologies like Flex and Flash. As many of you will know Microsoft dived into the RIA space over the last year with the ASP.NET AJAX (formerly ATLAS), and more recently with Silverlight 1.0 and 1.1 - all of which are technologies which aid developers with the creation of RIAs.

One of the main things to note about RIAs is the paradigm shift with regards to presentation, data and behaviour.

Presentation

ASP.NET and ASP.NET AJAX pages use HTML as the presentation language. Silverlight 1.0/1.1 uses XAML as its presentation language. The main difference is that XAML, in the case of WPF and Silverlight, has been built with rich presentation in mind. In HTML there is no notion, for example, of animation.

HTML can be rendered on any browser, yet both Silverlight 1.0 and 1.1 require a runtime in order for the target client to view Silverlight apps. Another consideration is that both Silverlight 1.0 and 1.1 are still in early development, especially 1.1 – which at present is in alpha stage. HTML on the other hand is a very mature presentation language with wide adoption.

Behaviour

When we talk about behaviour we are really talking about a way in which we can interact with both the server and the presentations’ DOM or Visual Tree. In RIAs the behaviour of an application makes requests to the server on the clients’ behalf for data. Commonly, when that data comes back, the behaviour also modifies the presentation to display the data.

In ASP.NET AJAX we use JavaScript or XML-Script to define the behaviour. Silverlight 1.0 uses JavaScript, and Silverlight 1.1 can use either a managed language, such as C# or VB.NET, JavaScript or both.

Data

Unlike normal ASP.NET applications - where a request to the server via the clients’ browser application results in the server sending to the client both presentation and data tied together - RIAs tend to deal with data via some interchangeable exchange format, like XML or JSON, which is totally separated from the presentation.

Putting theory into practice

Before we progress with this series I need to make sure that we have some basic foundation of how what we just talked about can be applied to a real application. I’m going to try and architect all my samples like you would do in the real world, so all the applications apart from a few (including this one) will use a three-tier architecture:

• Presentation Layer (HTML in this case, XAML in future examples)
• Business Logic Layer (enforcing business rules)
• Data Access Layer (code that interacts with the underlying data store)

For this article, to get us up and running quickly, we will use a locally hosted Astoria web service.

Defining the presentation

For this example the presentation will consist of an unordered list, the items of which will be manipulated by the code defined in our behaviour.

Listing 1: Our presentation

<ul id="results"></ul>

Defining the behaviour

Before we start coding, we need to be clear on what we want the behaviour code to do, so here is a simple outline:

• Query an Astoria data service
• Manipulate the unordered list to show the results of query upon completion

For this example I am going to get back all the categories in the Northwind database, so let’s go ahead and code that up.

Listing 2: Creating the query

function getCategories() { var wr = new Sys.Net.WebRequest(); wr.set_url("http://astoria.sandbox.live.com/northwind/ northwind.rse/Categories"); wr.get_headers()["accept"] = "application/json"; }

The code in listing 2 doesn’t actually do anything yet. We need to add a delegate that points to a function that processes the data that comes back from the service – and we also need to invoke the web request.

Remember that we want to add each category as an item to the unordered list defined in the presentation. Therefore, somewhere in our yet to be defined handling method we need to make sure we do that.

Listing 3: Processing the results of the query

function onComplete(result) { var categories = result.get_object(); for(i = 0; i < categories.length; i ++) { $get("results").innerHTML += "<li>" $get("results").innerHTML += categories[i].CategoryName $get("results").innerHTML += "</li>"; } }

In listing 3 we simply iterate through the array category and append a list item to the unordered list with each iteration.

To finish off the behaviour of our really simple application let’s go ahead and tell the wr object to call the onComplete function when complete and then invoke the web request.

Listing 4: Finishing up the getCategories() method

function getCategories() { // ... wr.add_completed(onComplete); wr.invoke(); }

Our final bit of behaviour lies in calling the getCategories() method from the pageLoad() method.

Listing 5: Adding the pageLoad() method

function pageLoad() { getCategories(); }

The Data

Remember that we explicitly told the Astoria data service that we wanted JSON back as the data format. Therefore, when we fire off our asynchronous call to the service, the data will be sent to the client separate from any presentation using a subset of the JavaScript language (JSON) which we can eval (get_object()).

The best tool to examine the content of data being sent over the wire (especially JSON) is the Web Development Helper tool that Nikhil Kothari created. This tool allows you to monitor HTTP traffic as well as inspect the graph of a JSON object.

If we go ahead and run our page, we will see the following (Figure 1).

Figure 1: Result of running the page

This time we fire up the Web Development Helper toolbar and refresh the page.

If you scroll down the HTTP traffic captured by the Web Development Helper, you will see a call to the Astoria web service (service ending with the extension .svc). Double click that entry and then click on the Response Content tab of the resulting window to explore the JSON object graph of the data sent back to the client.

Figure 2: Inspecting the JSON object graph

Figure 2 shows the data that the behaviour of our simple application requested.

Summary

I needed to cover everything in this article as this is pretty much the paradigm shift that RIAs use. In future articles we will delve deeper into RIA development and use some really cool technologies like Silverlight 1.1 and Astoria, as well as LINQ.

When you get used to separating presentation, behaviour and data, then I think you will definitely like it. It’s just getting used to the separation. Don’t worry if this all seems a little hard work at the moment. After all, web development for the last 5 years or so has been very much server centric.

About Granville Barnett

Granville (http://gbarnett.org) is a PhD candidate at Durham University within the Department of Computer Science. This author has published 32 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Good Post	Kazi Manzur Rashid	7/11/2007 5:34 PM
Thanks for starting this series. It is obvious that the future web applications presentation layer will reside in the Browser rather than web server. Long Live .NET Kazi Manzur Rashid (Amit) _________________________ http://weblogs.asp.net/rashid/ Reply | Permanent link

---

Please login to rate or to leave a comment.