Classes and ASP.NET AJAX - Interfaces
(Page 3 of 5 )
The final OOP-like feature made available to JavaScript by ASP.NET AJAX is interfaces. An interface does not contain any implementation at all but instead specifies the members that subclasses must implement. Even if you inherit from an interface, there is no implementation you can use. Instead, you must create the methods that are defined in the interface. This is a good way for developers to keep class structure and implementation details separated in their code.
As you have probably already guessed, the method for creating an interface isType.registerInterface(). The interface name you just created is provided as the third (optional) parameter ofregisterClass(). So, starting with the interface itself, we will use the following code:
OReilly.IProduct = function() {
this.toString = Function.abstractMethod;
}
Type.registerInterface("OReilly.IProduct");
Here,OReilly.Productis an abstract class. Unfortunately, the final version of ASP.NET AJAX does not support abstract classes (pre-release versions did). Therefore, there is no technical difference between abstract classes and regular classes.
In the following example, theOReilly.Productclass introduces and implements the propertiesnameandvendor.
OReilly.Product = 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.Product");
The next class to be implemented isOReilly.Software. Since we do not want to instantiate this class directly (we have subclasses likeOReilly.Browserfor that), this can now also be turned into an abstract class. It derives fromOReilly.Product(to getnameandvendor), but it also implementsOReilly.IProduct(for thetoString()method). After declaring the class, we register it with the following call toType.registerClass():
OReilly.Software.registerClass("OReilly.Software", OReilly.Product,
OReilly.IProduct);
The rest of the code remains unchanged. It is quite long, so you might consider putting it into an external .js file for legibility of the .aspx file. Example 4-4 shows the complete listing.
Example 4-4. Using interfaces to structure code
ClientInterface.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.IProduct = function() {
this.toString = Function.abstractMethod;
}
Type.registerInterface("OReilly.IProduct");
OReilly.Product = 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.Product");
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;
}
}
OReilly.Software.registerClass("OReilly.Software", OReilly.Product, OReilly.IProduct);
OReilly.Software.prototype.toString = function() {
return this.getName() + " from " + this.getVendor();
}
OReilly.Browser = function(name, vendor, isJavaScriptSupported) {
OReilly.Browser.initializeBase(this, new Array(name, vendor));
var _isJavaScriptSupported = (isJavaScriptSupported != null) ? vendor : false;
this.getIsJavaScriptSupported = function() {
return _isJavaScriptSupported;
}
this.setIsJavaScriptSupported = function(isJavaScriptSupported) {
_isJavaScriptSupported = isJavaScriptSupported;
}
}
OReilly.Browser.registerClass("OReilly.Browser", OReilly.Software);
OReilly.Browser.prototype.toString = function() {
return OReilly.Browser.callBaseMethod(this, "toString") +
(this.getIsJavaScriptSupported() ? " (w/ JS)" : " (w/o JS)");
}
var ie = new OReilly.Browser("Internet Explorer", "Microsoft", true);
s = ie.toString() + "<br />";
var lynx = new OReilly.Browser("Lynx", null, false);
s += lynx.toString();
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>
Next: Client Versions of .NET Classes >>
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 
