AJAX Components
[next]
AJAX Components
Digg This
Add to del.icio.usThis chapter is excerpted from Enterprise AJAX: Strategies for Building High Performance Web Applications, authored by David Johnson, Alexei White, and Andre Charland, published by Prentice Hall, © Copyright 2007 Prentice Hall. All rights reserved.
In this chapter, after examining several patterns, we look at how they apply to actually building a user interface. You learn how to encapsulate AJAX functionality into both imperative, as well as declarative, components. The use of declarative components is increasingly important because various new declarative technologies are created, such as Scaling Vector Graphics (SVG), XML Binding Language (XBL), and Macromedia XML (MXML). The encapsulation of user-interface functionality is a critically important aspect of enterprise AJAX development because it not only facilitates code re-use, but it also removes much of the need for addressing the individual quirks of multiple browsers—a critical step toward rapidly developing high-quality, rich AJAX applications.
We can build an application using conventional classes, some aspect-oriented programming, the DOM, and DOM Events. Until now, our code has, for the most part, been cobbled together using our MVC architecture. The next step is to refractor our Customer list application into something more modular and componentized so that we can re-use the code across an application, or even throughout the enterprise.
By the end of this chapter, we will have converted our customer listing AJAX application into a full-fledged declarative AJAX component. We also look at a few of the available client-side AJAX frameworks.
Imperative Components
Now that you have a clear idea of how to get your JavaScript running when a web page loads, you can look at how to actually use JavaScript, the DOM, and CSS to make an AJAX component. If you have any experience in server-side programming, you are probably familiar with writing code in an imperative manner. Imperative programming is what most developers are familiar with and is a sequence of commands that the computer is to execute in the specified order. We can easily instantiate a component with
JavaScript by creating a new object and, as is often the case, subsequently specify an HTML element through which the View can be rendered—this would be an imperative component implemented through JavaScript.
Imperative coding is much like making a ham-and-cheese sandwich. To end up with a ham-and-cheese sandwich, you need to follow certain steps:
|
If you try to close the sandwich at a different stage or put the ham and cheese on the bread before the mayo, you might end up with a mess! This equally applies to writing JavaScript or AJAX in an imperative manner.
A good example of an imperative JavaScript component, that some of you might have used, is the popular Google Map component that we look at how to work with through JavaScript. People generally integrate a Google Map with their own application, building a so called mashup, all using imperative JavaScript code. Although it might seem out of place, it can be useful to include public AJAX applications such as Google Maps in an enterprise setting. Google Maps are extremely useful for visualization of geographic data such as shipment tracking, fleet tracking, or locating customers. At any rate, to begin with, as with any JavaScript component, you need to ensure that the JavaScript libraries provided by Google are included in the web page. In the case of Google Maps, the JavaScript code can be included by using a single <script> element <script> element; Google Maps such as the following:
To use the Google Maps service, as with many other publicly available AJAX components or web-based data sources, you need to register with Google to get an API key that is passed to the Google service as a query-string parameter in the script location. Having loaded the script from the Google server and using at least one of the bootstrapping techniques from the previous section, you might create a Google Map like this:
There is a considerable amount of overhead here, such as the XHTML doctype and the reference to the Vector Markup Language (VML) behavior that is used for Internet Explorer; the important parts are the inclusion of the external Google Maps JavaScript file and the init() function that creates a new map and sets the map center to be Vancouver. The map is placed inside of the DOM element that has an id value of "map." When an instance of the GMap2 class has been created, you can access its various properties and methods through the exposed JavaScript API. Here, we show how a GPolyLine object can be added to the map using an array of GLatLng points:
The result of imperatively creating this Google Map, as shown in Figure 4.1, is an impressive and highly interactive map centered on Vancouver with a route through the city that looks something like this:
The type of JavaScript code required to create a Google Map in a web application is exactly the sort of code you might expect to see in any common user-interface development language. In fact, looking at the code, you might think that it is written in a server-side language. Although today, imperative coding might be the norm; going forward, AJAX development will become increasingly declarative. This is certainly reflected in the fact that companies such as Microsoft and Adobe are pursuing those avenues with XML-Script and Spry, respectively—not to mention the next generation technologies from both of those companies again in WPF/E and Flex, which are both based on XML declarative programming models. Google Maps is a quintessential imperative AJAX component; however, to get a good grasp of declarative programming, let's look at how to convert a Google Map to be a declarative component.
[next]
URL:
Find a programming school near you