Classes and ASP.NET AJAX
(Page 1 of 5 )
In this second part of a two-part article focused on using ASP.NET AJAX, you'll learn about class inheritance, interfaces, and more. It is excerpted from chapter four of
Programming ASP.NET AJAX, written by Christian Wenz (O'Reilly, 2007; ISBN: 0596514247). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
Class Inheritance
As detailed in Chapter 2, the prototype property provides limited support for class inheritance in JavaScript. ASP.NET AJAX provides more abstraction. The prototypemechanism is supported for namespace classes that were registered usingClass name.registerClass(). As a second parameter forregisterClass(), you can specify a base class. Here is where you specify from which class the current class derives.
Derived classes
Let’s create a class that inherits from Software. One very specific type of software is a web browser, so let’s create a Browser class. In addition to the features of the genericSoftware class, a browser would benefit from some extra properties. AnisJavaScriptSupportedproperty can provide information about whether a particular browser is capable of running JavaScript.
OReilly.Browser = function(name, vendor, isJavaScriptSupported) {
//...
}
Here’s how to register the class. Note how the new class (the string parameter) derives from the oldOReilly.Softwareclass (no string!).
OReilly.Browser.registerClass("OReilly.Browser", OReilly.Software);
Of course, it would be possible to create getter and setter methods fornameandvendoronce again, and to write the constructor code as well. However, one of the benefits of class inheritance (actually, the major benefit) is that you can reuse functionality. BecauseOReilly.Browserinherits fromOReilly.Software, you can use the getter and setter methods (i.e., the properties) that are already there, as well as the_nameand_vendor“private” members. You do, however, need to add getter and setter methods and private members for the newisJavaScriptSupportedproperty, as shown here:
var _isJavaScriptSupported = (isJavaScriptSupported != null)?
isJavaScriptSupported : false;
this.getIsJavaScriptSupported = function() {
return _isJavaScriptSupported;
}
this.setIsJavaScriptSupported = function(isJavaScriptSupported) {
_isJavaScriptSupported = isJavaScriptSupported;
}
All that remains is for us to write the constructor. But instead of writing it again from scratch, you can reuse the base class constructor. To do so, ASP.NET AJAX
provides theinitializeBase()method. The first parameter is the instance of which the base class will be initialized; usually, you providethisas the value. The second parameter is an array of arguments to be passed to the base constructor (the base constructor defines which arguments it expects). In our case, this array consists of the browser name and vendor.
OReilly.Browser.initializeBase(this, new Array(name, vendor));
You can save a few characters and use JSON to create the array:
OReilly.Browser.initializeBase(this, [name,vendor]);
Example 4-2 shows the code needed to create and use the new derived Browser class.
Example 4-2. Using ASP.NET AJAX class inheritance
ClientInheritance.aspx
<%@ Page Language="C#" %>
<!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</title>
<script language="Javascript" type="text/javascript">
function pageLoad() {
var s = "";
Type.registerNamespace("OReilly");
OReilly.Software = function(name, vendor) {
var _name = (name != null) ? name : "unknown";
var _vendor = (vendor != null) ? vendor : "unknown";
this.getName = function() {
return _name;
}
this.setName = function(name) {
_name = name;
}
this.getVendor = function() {
return _vendor;
}
this.setVendor = function(vendor) {
_vendor = vendor;
}
}
Type.registerClass("OReilly.Software");
OReilly.Browser = function(name, vendor, isJavaScriptSupported) {
OReilly.Browser.initializeBase(this, new Array(name, vendor));
var _isJavaScriptSupported = (isJavaScriptSupported != null) ?
isJavaScriptSupported : false;
this.getIsJavaScriptSupported = function() {
return _isJavaScriptSupported;
}
this.setIsJavaScriptSupported = function(isJavaScriptSupported) {
_isJavaScriptSupported = isJavaScriptSupported;
}
}
OReilly.Browser.registerClass("OReilly.Browser", OReilly.Software);
var ie = new OReilly.Browser("Internet Explorer", "Microsoft", true);
s = ie.getName() + " from " + ie.getVendor() +
(ie.getIsJavaScriptSupported() ? " (w/ JS)" : " (w/o JS)") +
" <br />";
var lynx = new OReilly.Browser("Lynx");
lynx.setIsJavaScriptSupported(false);
s += lynx.getName() + " from " + lynx.getVendor() +
(lynx.getIsJavaScriptSupported() ? " (w/ JS)" : " (w/o JS)");
document.getElementById("output").innerHTML = s;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="output">
</div>
</form>
</body>
</html>
Figure 4-2 shows the results displayed when the page is loaded and its JavaScript runs.
Figure 4-2. Instantiating objects derived from the same base class
Just in case you are wondering, the Lynx text browser does have a “vendor.” The copyright holder is the University of Kansas.
Next: Accessing base methods >>
More ASP.NET Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Programming ASP.NET AJAX, written by Christian Wenz (O'Reilly, 2007; ISBN: 0596514247). Check it out today at your favorite bookstore. Buy this book now.
|
|
/ 4 
