Beginning Ajax with ASP.NET- P21 pptx

Inheritance Inheritance is a mechanism to create new classes based on the functionality of an existing class. The new class takes over attributes and behavior of the parent or base classes. This helps in reusing existing code with very little modification. With Atlas, it is possible to provide inheritance in JavaScript: Try It Out Providing Inheritance with Atlas In the following example, you will see a class created called Animal.Generic. This class has two prop- erties, Name and Address. Then the code creates a class title Animal.Cat that inherits from the Animal.Generic class: <script language=”javascript”> Type.registerNamespace(“Animal”); Animal.Generic = function(Name, Address) { var _Name = Name; var _Address = Address; this.getName = function() { return _Name; } this.setName = function(val){ _Name = val; } this.getAddress = function() { return _Address; } this.setAddress = function(val){ _Address = val; } this.Dispose = function(){ alert(“disposing component with Animal Name:” + this.getName() + “ @ “ + this.getAddress()); } this.toString = function(){ return _Name + “ at “ + _Address; } } Type.registerClass(“Animal.Generic”, null, Web.IDisposible); Animal.Cat = function(Name, Address, Parents) { Animal.Cat.initializeBase(this, [Name, Address]); var _Parents = Parents; this.getParents = function() { return _Parents; } this.setParents = function(Parents) { 276 Chapter 10 13_78544X ch10.qxp 7/18/06 3:17 PM Page 276 _Parents = Parents } } Type.registerClass(‘Animal.Cat’, Animal.Generic); </script> Note that on the call to Class.registerClass, the parent object is passed as the second parameter in the call to register the class. To create the Animal.Cat class, you use the following code: function GenerateClasses() { var strReturn = “<br />”; var strOutput; var objCat = new Animal.Cat(“Wells”, “Knoxville, TN”, “Wally and Ronda”); strOutput = “Cat’s name: “ + objCat.getName() + strReturn; strOutput += “Cat’s Parents: “ + objCat.getParents(); document.getElementById(“Output”).innerHTML = strOutput; } The output from the preceding code is shown in Figure 10-13. Figure 10-13 Interfaces Interfaces are contracts that allow a software program to see if a component/class implements specific methods. Interfaces can be thought of as complementary to inheritance. With inheritance, the base classes provide the majority of the functionality. With interfaces, the new classes are responsible for implementing the required functionality. It is assumed that if an interface is implemented, the methods/ property that the interface defines are implemented. 277 Atlas Client Script 13_78544X ch10.qxp 7/18/06 3:17 PM Page 277 Try It Out Implementing an Interface In this example, you take your existing classes Animal.Generic and Animal.Cat, and you implement the interfaces IPet in Animal.Cat but not in Animal.Generic. Take a look at the following code: <script language=”javascript”> Type.registerNamespace(“Animal”); // Define an interface Animal.IPet = function() { this.getFriendlyName = Function.abstractMethod; } Animal.IPet.registerInterface(‘Animal.IPet’); // define a generic base class Animal.Generic = function(Name, Address) { var _Name = Name; var _Address = Address; this.getName = function() { return _Name; } this.setName = function(val){ _Name = val; } this.getAddress = function() { return _Address; } this.setAddress = function(val){ _Address = val; } this.Dispose = function(){ alert(“disposing component with Animal Name:” + this.getName() + “ @ “ + this.getAddress()); } this.toString = function(){ return _Name + “ at “ + _Address; } } Animal.Generic.registerClass(“Animal.Generic”, null, Sys.IDisposable); // define a specific subclass of the generic class Animal.Cat = function(Name, Address, Parents) { Animal.Cat.initializeBase(this, [Name, Address]); var _Parents = Parents; this.getParents = function() { 278 Chapter 10 13_78544X ch10.qxp 7/18/06 3:17 PM Page 278 return _Parents; } this.setParents = function(Parents) { _Parents = Parents } this.getFriendlyName = function() { return “Cat”; } } Animal.Cat.registerClass(‘Animal.Cat’, Animal.Generic, Animal.IPet); </script> In the preceding code, a namespace called Animal has been created. Within that namespace is an Animal .Generic class. This class does not inherit from anything. It implements Sys.IDisposable through the registerClass() method. An Animal.IPet interface is defined, and the method getFriendlyName() is defined. A new class is created called Animal.Cat. This class inherits from Animal.Generic, and it implements the Animal.IPet interface by defining the getFriendlyName. This work is handled by the call to the Animal.Cat.registerClass() method. To call the preceding code, you use the following code. The code that follows tests the obj and objGen object. The obj object is of type Animal.Cat. Given that the Animal.Cat class implements the IPet inter- face, the call to the isImplementedBy(obj) method returns a true. Given that the Animal.Generic class does not implement the IPet interface, the call to the isImplemented(objGen) method returns a false. function GenerateClasses() { var strReturn = “<br />”; var strOutput; var objCat = new Animal.Cat(“Wells”, “Knoxville, TN”, “Wally and Ronda”); var objGeneric = new Animal.Generic(“Spot”, “Atlanta, GA”); strOutput = “Cat’s name: “ + objCat.getName() + strReturn; strOutput += “Cat’s Parents: “ + objCat.getParents() + strReturn; if (Animal.IPet.isImplementedBy(objCat)) { strOutput += “Obj does implement IPet.” + strReturn; strOutput += “This object has a friendly name of: “ + objCat.getFriendlyName() + strReturn; } if (!Animal.IPet.isImplementedBy(objGeneric)) { strOutput += “Animal.Generic does not implement the IPet interface.”; } document.getElementById(“Output”).innerHTML = strOutput; } The result of the preceding code is shown in Figure 10-14. 279 Atlas Client Script 13_78544X ch10.qxp 7/18/06 3:17 PM Page 279 Figure 10-14 Enumerations The Atlas framework allows for the creation of enumerations similar to enumerations in the .NET Framework. The Web.Enum class supports the method getValues(), which returns a set of values. In this example, the code iterates through the value. function PerformEnumerations() { var strOut = “”; var strReturn = “<br />”; var objEnum = Web.Enum.create(“Good”, “Bad”, “Indifferent”); for (var strItems in objEnum.getValues()) { strOut += strItems + strReturn; } document.getElementById(“Output”).innerHTML = strOut; } Example output is shown in Figure 10-15. 280 Chapter 10 13_78544X ch10.qxp 7/18/06 3:17 PM Page 280 Figure 10-15 Debugging With Atlas you have two features that are useful for debugging. Each of these built-in mechanisms shows the contents of an object. For more information on debugging see Chapter 13. Debugging Using debug.dump The first of these options is the command debug.dump. The debug.dump command will output the con- tents of an object and is primarily used with three parameters. An example call takes the following parameters: debug.dump(object, string, boolean) In this call, the object to be interrogated is the first parameter. The second parameter is a string that will be displayed as the object’s name in the trace. The last parameter determines if the object will be interro- gated within multiple layers below its top level. Figure 10-16 shows the output of a call to debug.dump() with a dataset as the contents that are passed. 281 Atlas Client Script 13_78544X ch10.qxp 7/18/06 3:17 PM Page 281 Figure 10-16 282 Chapter 10 13_78544X ch10.qxp 7/18/06 3:17 PM Page 282 Debugging Using for() loop The second option is to interrogate a JavaScript object within standard JavaScript. The code to interro- gate an object’s properties uses the for() loop construction and is as follows: for(prop in obj) { alert(prop); } This code will display the properties of the object. This code could be expanded out to display all prop- erties of an object through a recursive algorithm. Special Notes Concerning Atlas Client-Side Script When working with Atlas client-side script, you should take a few special considerations into account. ❑ document.writeln() —The use of document.writeln() creates a timing issue within Atlas that may cause the method to fail. As a result, it should not be used. ❑ Body tag’s onload() event —The onload() event may not properly fire. To create this same type of functionality, the command <application load=”yourFunction”/> can be added to the XML/script section of your page. ❑ Timing issues—There will most likely be other timing related problems, so be flexible. For example, it has been discussed at forums.asp.net that the pageLoad() method has some undocumented issues in the Atlas environment and may be removed at some time. Resources Used Because the Atlas chapters of this book are being written while the software is still relatively new, the documentation available is rather limited. As a result, the following resources were used extensively during the writing of these chapters of the book. ❑ Wilco Bauwer —Wilco was an intern on the Atlas team. He blogs about Atlas extensively at www.wilcob.com. In addition, Wilco has personally answered a number of my emails and IM questions. ❑ ASP.NET Forums— Several forums at www.asp.net are dedicated to Atlas. ❑ Scott Guthrie’s blog— http://weblogs.asp.net/scottgu. ❑ Nikhil Kothari’s blog— www.nikhilk.net. 283 Atlas Client Script 13_78544X ch10.qxp 7/18/06 3:17 PM Page 283 Summary In this chapter, you have started taking a close look at Atlas. Atlas has allowed you to call to the web server and call methods through web services without having to round trip to the web server. For users, this eliminates the annoying flash that users typically see as well as the loss of user context that result from redirecting the user back to the top of a web page as opposed to where the user has scrolled within the page. In this chapter, we have seen that Atlas supports: ❑ Calling back to the web server through a web service ❑ Passing simple and complicated objects back and forth between client and server ❑ Using features like namespaces, classes, inheritance, and interfaces to provide a set of language extensions Now that you have looked at some of the client-side building blocks of Atlas, the next chapter will build on this and will look at the controls provided by the Atlas framework. 284 Chapter 10 13_78544X ch10.qxp 7/18/06 3:17 PM Page 284 11 Atlas Controls This chapter introduces the concept of the Microsoft Atlas controls. These controls function like other ASP.NET server controls. Once rendered, these controls provide the HTML necessary to communicate back to the server from the client. In this chapter, you look at: ❑ Referencing and creating client-side controls with Atlas ❑ Client-side events— events that are raised by user controls and processed in client-side script ❑ Extending existing ASP.NET controls ❑ Data binding, which allows for the connection of components and controls to manage the flow of data between the two Controls With the Atlas framework, the page developer has the ability to create rich applications that do not need to post back to the server on every action that a user performs. Much of this functionality is pro- vided by a set of controls referred to as the Atlas server controls. These controls output the appropriate markup for the web browser client so that actions on the client do not require the dreaded postback. You start by looking at some generic controls and then move into several more complicated controls. Buttons An HTML button is one of the most basic controls in a web application. It is typically used as the last step in some type of user interaction. For example, a user will fill out a form with contact information. The last step in the process is for the user to submit that information to the web server. Atlas has support for working with the buttons in the Sys.UI.Button() class. Try It Out Creating a Button and Changing Its Properties Take a look at an example of dynamically creating a button and then changing one of the properties of the button. Creating a button dynamically can be done through the Document Object Model (DOM): 14_78544X ch11.qxp 7/18/06 3:17 PM Page 285 [...]... defines the layout that will be used for a single record Within the itemTemplate, there is a binding setup that associates the ProjectItemTemplate tag with the layout of the individual records as defined by the ProjectNameLabel element Server Controls One of the interesting pieces of Atlas is the support for various server-centric controls and integration with the server-centric ASP.NET way of thinking The... listView is an Atlas control that is used to display a tabular set of data It is very similar to a GridView/DataGrid in ASP.NET or an HTML table in classical ASP used to present data A listView is set up within the tag of the xml-script section of the page Take a look at the following code using the listView taken from the data binding section later in the chapter 286 Atlas Controls ... support for various server-centric controls and integration with the server-centric ASP.NET way of thinking The idea behind these controls is to keep the server control model and add support for client-side /Ajax scenarios Partial Updates and the UpdatePanel One of the simplest scenarios is the ability to perform updates incrementally The goal is to minimize the use of postbacks and whole refreshes and to... postback to be simulated using the Atlas Sys.Net.WebRequest class (which is based on the XMLHttpRequest object) On the server, the page is processed as if a “classical” page postback has occurred This works with the server controls, both inthe-box and third-party controls, which call doPostBack The result is that Page.IsPostBack returns a true, if that is necessary In addition, server-side events fire as... property This allows for Atlas to specifically act on a control ❑ There is an EventName property This property “listens” for the specific event as specified by the EventName property This property works with the specified ControlID property Based on the preceding code, you are able to get the screen of results shown in Figure 11-1 Figure 11-1 289 Chapter 11 Just to show that there is not an update of . ID=”lblEmployee”>Employee:< /asp: Label></td> <td>< ;asp: DropDownList runat=”server” ID=”ddlEmployee”>< /asp: DropDownList></td> </tr> <tr> <td colspan=”2”> < ;asp: Button. number of my emails and IM questions. ❑ ASP. NET Forums— Several forums at www .asp. net are dedicated to Atlas. ❑ Scott Guthrie’s blog— http://weblogs .asp. net/scottgu. ❑ Nikhil Kothari’s blog— www.nikhilk.net. 283 Atlas. of data. It is very similar to a GridView/DataGrid in ASP. NET or an HTML table in classical ASP used to present data. A listView is set up within the <page> tag of the xml-script section