Using ASP.NET AJAX - ASP.NET AJAX OOP Features for JavaScript
(Page 4 of 4 )
In Chapter 2, we learned JavaScript does have some OOP capabilities, but they are no match for those in programming languages like Visual Basic or C#. However, it’s relatively easy to add new features to JavaScript using JavaScript itself, something the ASP.NET AJAX team has exploited.
To facilitate OOP development, ASP.NET AJAX adds to JavaScript some OOP-type features, which are covered in this chapter. These include namespaces, abstract classes, and interfaces. The additional features are designed to help you design and write more structured client-side code. They can apply not only to Ajax applications, but also to any JavaScript code you write.
Namespaces A key ASP.NET AJAX JavaScript OOP extension is the addition of namespace functionality. Namespaces enable you to encapsulate functionality into logical groups under a single name. They help avoid name collisions with functions that have the same name but fulfill different purposes. The JavaScript language specification does not specify namespaces, so the language itself cannot offer this functionality. However, ASP.NET AJAX uses a simple technique to emulate namespaces. You can create a new class (which serves as the “namespace”), then make another (new) class accessible as a property of the namespace class. This allows you to access your class using NamespaceClassName.YourClassName .
One of the base classes in ASP.NET AJAX runtime is theTypeclass. Two methods of this class come in handy when creating the ASP.NET AJAX namespaces:
Type.registerNamespace(name)
Registers a namespace
Class.registerClass(name, base type, interface type)
Registers a class as a member of the namespace
To demonstrate this technique, let’s create anOReilly namespace for a group of classes used in this book. Suppose that one of them is namedSoftwarewith two properties:nameandvendor. First, you must register theOReillynamespace:
Type.registerNamespace("OReilly");
Next, you create theSoftwareclass as a member ofOReillyusing the following code snippet:
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;
}
}
The class constructor expects values for the two properties. To perform data hiding, the class member values are saved as separate variables, and the class implements setter and getter methods for the properties. Note that JavaScript does not support private or protected properties. Therefore, all class members are public. The data hiding implemented here does not provide protection from unauthorized access; it is just a helper tool to structure code and make the data access coherent. Of course most technologies that do supportprivateorprotectedstill allow access to those properties using reflection.
Finally,OReilly.Softwaremust be registered as a class so that you can use it in your applications. You do this with theregisterClass()method. This method can take up to three parameters:
name
The name of the class
base type
The base type of the class, if any, as a reference to
the type
interface type
The interface type of the class, if any, as a reference
to the type
TheOReilly.Softwareclass does not have a base type and does not implement an interface type. The call toregisterClass()registers the class, omitting the second and third parameters:
Type.registerClass("OReilly.Software");
ASP.NET AJAX implements several types, but the one you will use most often isSys.IDisposable(because you can write adispose()method that is called automatically when the script ends), even though JavaScript has only a simple garbage collector. However, you do not necessarily need to implement an interface. If you do not use an interface, the call toType.registerClass()is subsequently not necessary to access the new class. For more advanced features, this method call is mandatory (see the following sections).
Now, you can instantiate theSoftwareclass using thenewkeyword to get and set its properties. Example 4-1 creates two instances; one for Microsoft Internet Explorer and one for Mozilla Foundation Firefox. Example 4-1 also uses a very handy feature of ASP.NET AJAX. After both the page and all libraries used by ASP.NET AJAX have been fully loaded, thepageLoad()function is executed (if it exists on the page). Remember thatwindow.onloaddoes not take loading of external files like JavaScript libraries into account. Therefore you should always usepageLoad()when using ASP.NET AJAX for that task.
Example 4-1. Using ASP.NET AJAX namespaces
ClientNamespaces.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");
var ie = new OReilly.Software("Internet Explorer", "Microsoft");
s = ie.getName() + " from " + ie.getVendor() + "<br />";
";
var ff = new OReilly.Software();
ff.setName("Firefox");
ff.setVendor("Mozilla Foundation");
s += ff.getName() + " from " + ff.getVendor();
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-1 shows the result displayed when the page is loaded.
Figure 4-1. Instantiating two objects within the same namespace
Although ASP.NET AJAX namespace classes are not real namespaces, they can make it easier for you to structure complex JavaScript code, with very little overhead.
Please check back next week for the conclusion to this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 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.
|
|
