<pre data-sub="prettyprint:_">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ASP.NET AJAX Class</title>
<script type="text/javascript">function pageLoad(sender, args) {
Type.registerNamespace('Wrox.ASPAJAX.Samples');
Wrox.ASPAJAX.Samples.Album = function(title, artist) {
this._title = title; //_title = title;
this._artist = artist; }
Wrox.ASPAJAX.Samples.Album.prototype = {
get_title: function () { return this._title; },
get_artist: function() { return this._artist; }
}
Wrox.ASPAJAX.Samples.Album.registerClass('Wrox.ASPAJAX.Samples.Album');
//Wrox.ASPAJAX.Samples.Album.registerClass('Wrox.ASPAJAX.Samples.Album');
//this is for reflection use and other use
var anAlbum = new Wrox.ASPAJAX.Samples.Album("Round Room", "Phish ");
alert(anAlbum.get_title());
//alert(_title);}
</script>
</head><body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="sm" />
</div>
</form>
</body>
</html>
</pre>
<p>Notice that the local members are accessed with a prefix of this. The script engine can then scope the lookup to the type and avoid searching any containing scopes. If you do not use this to indicate that the reference is local to the type, you will end up creating objects in the global scope and see errors that can be confusing and time-consuming to track down.
</p>
<p>
The call to registerClass looks a little odd, as it is on the type being registered. The prototype of the base type in JavaScript has been modified to add type-system support. Once the type is registered, an instance of it can be created and its members called.
</p>
<p>
The registerClass function actually has three possible parameters: The first one is for the name of the type, the second is for the base type being extended, and the last is to specify any interfaces that the class implements. Instances of using these classes are provided in later examples in this chapter.
</p>
<p>
JavaScript treats parameters as optional. This can be convenient. Instead of needing to define a bunch of different methods with different names in order to accommodate different combinations of parameters, you can write just one that knows how to process all of the optional inputs. Because the language treats all parameters as optional, however, you need to explicitly check that the inputs are valid for what you are doing. The caller can invoke the function with whatever set of parameters it wants to pass.
</p>
<pre data-sub="prettyprint:_">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ASP.NET AJAX Class</title>
<script type="text/javascript">function pageLoad(sender, args) {
Type.registerNamespace('Wrox.ASPAJAX.Samples.
Wrox.ASPAJAX.Samples.Album = function(title, artist) {
this._title = title; this._artist = artist; }
Wrox.ASPAJAX.Samples.Album.prototype = { get_title: function () {
return this._title; }, get_artist: function() {
return this._artist; } }
Wrox.ASPAJAX.Samples.Album.registerClass('Wrox.ASPAJAX.Samples.
Wrox.ASPAJAX.Samples.TributeAlbum = function(title, artist, tributeArtist) {
Wrox.ASPAJAX.Samples.TributeAlbum.initializeBase(this, [title, artist]);
this._tributeArtist = tributeArtist; }
Wrox.ASPAJAX.Samples.TributeAlbum.prototype = {
get_tributeArtist: function() { return this._tributeArtist;
}, set_tributeArtist: function(tributeArtist) {
this._tributeArtist = tributeArtist; } }
Wrox.ASPAJAX.Samples.TributeAlbum.registerClass(
'Wrox.ASPAJAX.Samples.TributeAlbum',
Wrox.ASPAJAX.Samples.Album);
var anotherAlbum = new Wrox.ASPAJAX.Samples.
Groove", "Various Artists", "Phish"); alert(anotherAlbum.get_title ());
alert(anotherAlbum.get_tributeArtist());} </script></head>
<body> <form id="form1" runat="server"> <div>
<asp:ScriptManager runat="server" ID="sm" /> </div>
</form></body></html>
</pre>
<p>
The constructor must explicitly call initializeBase and pass itself, using the this keyword, along with an array of the arguments to pass to the constructor of the base type. The AJAX Library allows you to employ object-oriented principles, but doing so requires that you follow some coding patterns like this. Without the call to initializeBase, when you try to call something on the base type, you will get an error. In Internet Explorer, the message reads: Object doesn't support this property or method. This is not the most helpful message! In Firefox, it fails silently, but if you have the JavaScript console open, an error message is displayed that more explicitly identifies the actual problem: anotherAlbum.get_title is not a function
</p>
<p>
The call to initializeBase takes care of producing the final type with inheritance semantics in place. The base class constructor is called with the arguments provided. The type system of the AJAX Library also provides some reflection functions that let you explore the relationship between objects.</p>
<pre data-sub="prettyprint:_">
if(Wrox.ASPAJAX.Samples.TributeAlbum.isInstanceOfType(anAlbum) == false) {
alert("anAlbum is not a TributeAlbum");
}
if (Wrox.ASPAJAX.Samples.TributeAlbum.isInstanceOfType(anotherAlbum) == true) {
alert("anotherAlbum is a TributeAlbum");
}
if (Wrox.ASPAJAX.Samples.TributeAlbum.inheritsFrom(Wrox.ASPAJAX.Samples.Album) ==
true ) {
alert("TributeAlbum inherits from Album");
}
if (Wrox.ASPAJAX.Samples.Album.inheritsFrom(Wrox.ASPAJAX.Samples.TributeAlbum) ==
true) {
alert("Album does not inherit from TributeAlbu7");
}
</pre>
<p>
At first glance, the type references in Listing 4-6 look long. JavaScript doesn’t have the equivalent of the using statement that makes namespaces available to code without being explicit. With a compiled language, the cost of the lookup can be paid when the binary is created and symbolic references are created. In an interpreted language like JavaScript, you can speed up the lookup by providing a shortcut for the long type name by providing aliases that reference the fully qualified name. When you create global object aliases, you defeat the purpose of the namespace containers. Each subsequent lookup can get a little more expensive for every item in the checked scope. The ideal time to create aliases is when something is going to be referenced frequently and you can alias it temporarily, when it will soon go out of scope and the alias will be cleaned up. If the code in Listing 4-6 were going to be run frequently, or if it contained many more calls to the types, it would probably be worth caching a reference to the type and avoid the repeated lookups. Creating a local alias is easy; just declare a variable and assign the type to it. Listing 4-7 demonstrates creating and using aliases for the Album and TributeAlbum types.
</p>
<pre data-sub="prettyprint:_">
var tributeAlbum = Wrox.ASPAJAX.Samples.TributeAlbum;
var album = Wrox.ASPAJAX.Samples.Album;
if(tributeAlbum.isInstanceOfType(anAlbum) == false) {
alert("anAlbum is not a TributeAlbum");
}
if (tributeAlbum.isInstanceOfType(anotherAlbum) == true) {
alert("anotherAlbum is a TributeAlbum");
}
if (tributeAlbum.inheritsFrom(album) == true) {
alert("TributeAlbum inherits from Album");
}
if (album.inheritsFrom(tributeAlbum) == true) {
alert("Album does not inherit from TributeAlbum");
}
</pre>
<p>
The AJAX library provides a method for explicitly calling a base method implementation. This is often used when a derived type wants to take the result from the base type and modify it before returning it to the caller. It is not limited to calling into the base type from a derived type’s implementation. You can also call a base method for an object. In a language like C++, you can cast an object to its base type to access a specific method implementation. Likewise, this pattern in JavaScript lets you access the base method even though JavaScript can’t support the casting semantic for this purpose. In Listing 4-8 (from CallBase.aspx), the TributeAlbum class adds an override for the get_artist method. It calls the base implementation and then prepends it with "TRIBUTE: " before returning it. This is again a slight modification to the previous example of the example using Album and TributeAlbum types </p>
<pre data-sub="prettyprint:_">
Wrox.ASPAJAX.Samples.TributeAlbum.prototype = {
get_tributeArtist: function() {
return this._tributeArtist;
},
set_tributeArtist: function(tributeArtist) {
this._tributeArtist = tributeArtist;
},
get_artist: function() {
return ("TRIBUTE: " +
Wrox.ASPAJAX.Samples.TributeAlbum.callBaseMethod(this, "get_artist"));
}
}
</pre>