In this book,I will show you how to develop an Ajax-enabled Web 2.0-style portal.

The portal is built using ASP.NET 3.5,ASP.NET AJAX,and.NET 3.5, as well as Language-Integrated Query (LINQ) and SQL Server 2005. While building this application,you’ll lea about the:

• Design decisions that must be made for and usability issues involved in a Web 2.0 user interface

• Architectural complexities and development challenges of JavaScript-rich, widgetenabled web sites

• Production and maintenance challenges of running a high-volume web application

Ajax web portals are among the most extreme implementations of client-side technologies you’ll find on the Web.They not only use large amounts of JavaScript, CSS, and HTML,but also push the Ajax and server-side technologies to their limits for interactivity, performance,and scalability.By the time you finish reading this book, you will be equipped with enough technical know-how to launch a Web 2.0 Inteet startup on your own.

The application example,which I have named Dropthings, for reasons that will become clear shortly,is a reduced feature set prototype of a real web portal,like Google’s iGoogle or Pageflakes.You will be able to deploy the Dropthings on a production server and run it as your own personal web site, a group site, or even as a corporate intranet. Including drag-and-drop enabled widgets, complete support for personalization, the ability to place widgets on multiple pages, centralized authentication and authorization, and much more.

As you work through this book, you will see how Dropthings is architected and implemented.It’s a real, living, breathing, open source web portal . Although the application does not compare to a real web portal in terms of its code quality, feature set, scalability, performance, and other aspects ofb the product, it works as a good proof of concept for several nascent technologies.

However, you can use it for your current day-to-day personal use,and you are welcome to support continued development of the project by adding more features to it or by making cool new widgets for it.

The Dropthings site is a widget-enabled Web 2.0 portal

A web portal is a page that allows a user to customize his homepage by dragging and dropping widgets onto it.This approach gives the user complete control over what content he sees on his home page, where on the page he wants to see it, and how he wants to interact with it.

A widget is a discrete piece on a web page that performs a particular function and comes with its own UI and set of features.Examples of widgets include to-do lists, address books,contact lists,RSS feeds, clocks,calendars, playlists, stock tickers,weather reports,traffic reports,dictionaries, games, or almost anything you can imagine that can be packaged up and dropped onto a web page.In a corporate environment,widgets can connect to inteal systems; for example,an expense tracker widget can interact directly with the inteal accounting system.

If you are familiar with the SharePoint Portal, then you already know about widgets,which are called Web Parts in  SharePoint and ASP.NET.

Specifically, an Ajax-powered web portal is a web portal that uses Ajax technologies to create richer experiences for its users. It is one step ahead of the previous generation of web portals,including pioneer sites such as MSN or AOL, because it gives you a state-of-the-art UI that behaves more like a Windows client application with mwidgets, animations,pop ups,client-side data grids, and other effects not usually found on a non-Ajax web portal. Not surprisingly, MSN and AOL have already adopted many of the practices discussed in this book.

Some of the most popular Ajax web portals include iGoogle, My Yahoo ,and Pageflakes.

Pageflakes uses widgets to deliver functionality, including local weather, local news,videos, local photos, podcasts, stock portfolio, local events with Google Maps, and more

A web portal, especially one that is Ajax-powered, gives users a fun way to browse the Inteet.Users can add photos, videos, music, podcasts, and video blogs to their Start page.

The web portal can also help users become more productive by allowing them to check email, read news, and get weather reports from a single page.They can organize their digital life by putting appointment calendars, to-do-lists, and address books in a central place on the Web.No matter where they happen to be— in the office, home or airport—as long as they can get to the Web, users can access this information directly from their web portal. It’s like bringing the whole Inteet onto a single page, displayed exactly the way you want it to be.Gone are the days of running after content—now information and entertainment comes to you.

The term “Web 2.0” defines a set of principles and practices for web applications, which,when followed,entitle a web application to wear the Web 2.0 crown. A web site can claim to be a Web 2.0 site if it:

• Allows users to control data presented on the web site
• Presents a platform that enables the mixing (or mash-up) of technologies and data
• Enables services to be consumed that are beyond the boundary of the application
• Haesses collective intelligence by enabling the following:
— Aggregation of relevant content from heterogeneous sources
— User contributed content
— User moderation of content via tagging and rating
• Uses state-of-the-art technologies that take interactivity on the Web to the next level by use of popular technologies like Ajax, Flash, and Silverlight.

Dropthings, being a web portal, allows a user to control what the user wants to put on the page.The widget architecture allows mashup of technologies in the form of widgets.It exposes web services that exteal entities can consume. The portal aggregates content from many different sources, such as photos from Flickr, news from CNN,weather reports from Weather.com, and many more. It supports usersubmitted content aggregation in the form of RSS feeds.Finally,it pushes interactivity on the Web to the next level by using Ajax technologies.

With a web portal,every visitor to your web site will be able to customize and set it up exactly the way they would like to see it the next time they visit. Best of all, the lay out is saved per user,so your master layout remains un changed.More over, visitors can add more widgets from a wid get cata log and decorate the page as they like.

How an Ajax-Powered Start Page Is Different

The advantages of Ajax and a rich client-side experience give users a fun and exciting environment to do their regular work.All the functionality is developed as small widgets that perform only a specific job,like showing messages from an Exchange Mail server,assigning tasks from a SharePoint List,or even displaying your expenses from an inteal accounting system.

Just as with a regular web portal, enterprise
users can drag the widgets around and put them anywhere they like.For example,an email inbox can be put on the left, expenses in the middle, and a list of “Phone calls to make” on the right.A key advantage is that these widgets can provide content from different web servers on different platforms, including Linux, Unix,or IBM OS/2 servers.

As long as the plat form speaks XML and HTTP, any functionality can be provided in the form of a wid get.The main frame work takes care of authen- tication, authorization, user profile,communication, and all those cool Ajax effects. As a result, the wid gets are a light weight component with a small amount of code to do exactly what they are supposed to.

An Ajax web portal is also quite useful for group portals or social web sites.For example,say you want to make a.NET developer group portal.You would start with a blank page,add lots of.NET feeds,put a link widget and fill it with useful.

NET web site links,add an address book widget and fill in useful contacts, put in a calendar widget to publish events for the group,and so on. With just these basic widgets and some rearranging, you have a dynamic,personalizable developer group portal that is state of the art in both technology and usability.

Enterprise portals especially can benefit from using Ajax web portals.Enterprise portals bring in content from many sources and different platforms.By using an Ajax widget platform,you can make the whole portal in terms of small widgets that connect to different systems and serve content to the page.The benefit of such a platform is that the complexity of the entire portal is dramatically reduced because it’s just a generic widget platform.

When you first visit Dropthings, which I encourage you to do now,you get a predefined default setup of widgets that you can customize anyway you like.For example, there’s a Flickr photo widget,some RSS feeds, and several community contributed widgets for weather, news,and so on (see Figure).

Your initial visit to Dropthings gives you a predefined template that can be customized

On the Dropthings Start page, you can add widgets,remove widgets that you don’t like,and customize individual widgets by clicking on the “edit” link on each title bar.Clicking on the “edit” link brings up the “Settings” area for the widget where you can change its look, feel, and behavior (see Figure).

The photo widget allows you to change the photo stream by clicking on “edit” link on the title bar of widget

You can also drag-and-drop widgets from one column to another and reorganize the page as you like.When you come back to the page,your customization is preserved even if you did not sign up. However,when you sign up,your pages are saved permanently and you can access them from anywhere (see Figure).

It is possible to have more than one tab (page) of widgets. There’s already a precreated empty second tab where you can add new widgets.So from there, you can add as many tabs as you like.This helps you keep your tabs clean and light and groups relevant widgets in the same location.

Clicking on the “Add stuff” link on the top right of the web page brings up a pop-up widget gallery that shows the list of available widgets (see Figure).rom the list, you can click anywhere on the widget and have it added to your page.After adding it, you can further customize it by clicking on the “edit” link on the widget’s title bar.

You can drag and drop widgets on the page and reorganize the page as you like

Create a “Photo” tab and add a Flickr photo widget to it with Add Stuff; each photo widget shows a specific photo stream from Flickr as defined by the widget’s settings

At the top part of the page,there’s a bar where you can search the Inteet. Search isthe most used function on the Web. Therefore,web portals need to have convenientsearch functionality; otherwise users won’t set a web portal as browser homepage.

The Live.com search bar on the top provides on-site search functionality where the search results are shown right on the page, which allows the user to perform a search without leaving the web portal (see Figure).

The Live.com search bar provides on-site search functionality

As you use the site, you will notice there’s not a single postback of the page.Operations are performed either via asynchronous postback or via JavaScript calls from the browser. You can add/remove widgets,drag-and-drop widgets,and switch tabs without ever causing a postback or refresh of the page.This is what makes Ajax web portals really convenient and fast to use compared to non-Ajax web portals.

The web portal you’ll lea how to build is an N-tier application with a user interface (UI) layer, a business layer, and a data access layer.You’ll use ASP.NET AJAX to implement the UI layer of the web portal application,which includes the homepage and the widget’s UI.

ASP.NET AJAX provides the framework (via UpdatePanel) for updating widgets without doing any postbacks, and it changes page layout by dragging and dropping widgets on the page.It also offers a rich collection of Control Extenders that add cool effects like fade in/fade out, smooth transitions, and clientside animations.

You can add to the rich client-side experience by providing autocompletion behavior on text boxes,asynchronous data loading via web service calls,client-side paging, sorting,and much more.

The ASP.NET AJAX runtime provides a framework you can use to make XML HTTP calls from within the widgets.It also provides the framework for building client-side effects using Custom Extenders.The drag-and-drop behavior of widgets on the page is built as an Extender. You’ll also reuse some extenders from the Ajax Control Toolkit (ACT)to enrich the client user experience within the widgets.

ASP.NET AJAX exposes a handy API that you can use to authenticate against the ASP.NET Membership application service. A good thing about the ASP.NET Membership API is that it’s fully compatible with ASP.NET AJAX and providers for Membership, Profile properties,and so on;they all work exactly the same way as a regular ASP.NET web site.

This means you can make client-side login and signup forms,and change user preferences without requiring any postback.

Dropthing’s business layer is built with the Windows Workflow Foundation (WF),which was introduced in .NET 3.0. Major operations like a first-time user visit, a subsequent user visit, adding a new widget, and creating a new page are all orchestrated using workflow.

The workflows contain all the business rules and activities needed to complete each operation. For example, the New User Visit workflow creates the user account, populates the user profile with default values, creates some default pages, populates them with specific widgets,etc.Such compound operations are very easy to build with workflows,which enable you to break the complete operation into smaller chunks called Activities.

Each Activity does a very small amount of work.It talks to the data access layer and performs the task.The data access layer is built with .NET 3.5,using LINQ to SQL, which vastly simplifies the querying of databases from within your application code.

The web project and the widgets make good use of .NET 3.5 by using new functionality for lambda expressions,LINQ to SQL,and LINQ to XML.You will use LINQ queries to work with collections and database rows.Widgets make good use of LINQ to XML to consume XML from exteal data sources.

The application is built following a typical N-tier architecture where there’s a clear separation between the UI, business logic,and data (see Figure). For example:

Web layer

Consists of web pages,web services,resources (e.g.,graphics,CSS,Java Script, and .resx files),and configuration settings.

Business layer

Provides the entity classes, business rules, and middle-tier caching of data to reduce database roundtrips.

Data access layer

 Encapsulates database access and provides an interface that is database and data source independent.It also  provides object factories that create Entity classes out of database rows and vice versa.

Mapping technologies to the different layers

The web portal application in this book makes use of some of the newest .NET 3.0 and .NET 3.5 technologies.The web layer uses ASP.NET AJAX for a rich user experience, and the business layer uses the new WF to orchestrate complex operations. All three layers use LINQ to work with data structures.

C# 3.0 language extensions and LINQ queries are used in all layers to work easily with collections, database rows, and XML. WF is used in the business layer to perform complex operations, such as workflows.

LINQ to SQL is part of both the data access layer and the business layer Although the insert, update, and delete operations are mostly encapsulated inside the data access layer, some queries are faster to implement directly from the business layer. That’s why LINQ to SQL is also part of the business layer