As web technologies continue to evolve, developers have to learn new technologies so that they can build successful web-based applications that stand
above the crowd. This can be a challenging proposition, especially for developers moving from desktop or Rich Internet Application (RIA) development
frameworks. To help developers learn the latest HTML5, Cascading Style Sheets Level 3 (CSS3), and JavaScript technologies, several developer colleagues
and I built a sample application for demonstration at Microsoft's MIX 11 conference. The application, called Account at a Glance, takes advantage of
key web technologies and uses them to display brokerage account information to consumers. (See the end of this article for the code-download URL.)
The application was built in Q1 2011 by Dan Wahlin (client-side and server-side coding); Corey Schuman (design and client-side coding); Jarod Ferguson (client-side coding); and John Papa (Entity Framework Code First coding).
John Papa, Giorgio Sardo, and Scott Guthrie also provided feedback and offered several key suggestions and ideas that were incorporated into the
application. Figure 1a shows the Account at a Glance application as it was first conceived on a whiteboard, and Figure 1b shows how it ended up after
the project was completed.
Figure 1A: The Account at a Glance application as originally conceived
Figure 1B: The Account at a Glance application screen—final version
We built the Account at a Glance application to demonstrate how cutting-edge web technologies can be used together to build a dynamic application
capable of displaying account information, video news, quotes and charts, market news, and more without the use of plug-ins. The app loads data
dynamically, using AJAX technologies, into tiles that are displayed within the application. As tiles are dragged and dropped to different locations in
the interface, data is re-rendered, depending upon the size of the tile that is targeted, as shown in Figures 2a and 2b (small, medium, and large tile
sizes exist). This allows data to be displayed in several different ways and provides a means for customers to customize how account information is
displayed by moving tiles around.
Figure 2A: Dragging a tile to a different area of the screen
Figure 2B: Automatic resizing of tiles on screen, via jQuery templates
The Account at a Glance application uses these technologies:
· jQuery along with several jQuery plug-ins: jquery.com
This article provides an overview of the Account at a Glance application. Part 2 will provide details about the client-side technologies used,
including HTML5 features such as jQuery templates, SVG, Canvas, and video.
The Account at a Glance Solution
The Account at a Glance application is comprised of a single solution with two projects. The first project is named AccountAtAGlance and uses the
ASP.NET MVC 3 project template. The second project is named AccountAtAGlance.Model and is a Class Library project. Figure 3 shows the solution and
project structure.
Figure 3: The Account at a Glance solution
The AccountAtAGlance project follows the standard ASP.NET MVC 3 folder structure. The Controllers folder contains the controller classes used in the
application; the views are located in the Views folder. The Account at a Glance application relies heavily on client-side technologies such as jQuery,
and the scripts used in the application can be found in the Scripts folder. Several jQuery plug-ins were used to create the application: jQuery UI,
Flot (Canvas rendering), Raphael (SVG rendering), and DataTables. JSON data is exchanged between the client browser and server using ASP.NET MVC
actions and rendered using jQuery Templates that are dynamically loaded from the server. CSS is used heavily throughout the application. The .css files
are located in the Content folder.