Beginning Ajax with ASP.NET- P21 pptx

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.

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, Nameand Address Then the code creates a class title Animal.Catthat inherits from the

Animal.Genericclass:

<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;

}

_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.Catclass, 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

Try It Out Implementing an Interface

In this example, you take your existing classes Animal.Genericand Animal.Cat, and you implement the interfaces IPetin Animal.Catbut 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() {

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 Animalhas been created Within that namespace is an Animal Genericclass This class does not inherit from anything It implements Sys.IDisposablethrough the registerClass()method An Animal.IPetinterface 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.IPetinterface 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 objand objGen object The objobject is of type Animal.Cat Given that the Animal.Catclass implements the IPet inter-face, the call to the isImplementedBy(obj)method returns a true Given that the Animal.Genericclass does not implement the IPetinterface, 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

Figure 10-14

Enumerations

The Atlas framework allows for the creation of enumerations similar to enumerations in the NET Framework The Web.Enumclass 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

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.dumpcommand 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

Figure 10-16

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’sonload()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.netthat 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.netare dedicated to Atlas

❑ Scott Guthrie’s blog—http://weblogs.asp.net/scottgu

❑ Nikhil Kothari’s blog—www.nikhilk.net

Summar y

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

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

var associatedElement = document.getElementById(“divTest”);

var btnCreate = document.createElement(“button”);

btnCreate.id = “btnCreated”;

btnCreate.value = “Hi”;

btnCreate.innerHTML = “Hi”;

associatedElement.appendChild(btnCreate);

For more information regarding the DOM, turn to Chapter 3.

Atlas allows a control to be manipulated through JavaScript The preceding code will hold a reference to a button After the reference to the button is created, the visibleand accessKeyproperties of the object are set In the first code snippet, a button is created using the DOM In the second snippet, a reference is created

to the button The visibleproperty of the button is set to true, and the access property is set to “o” Now that you have a button in the browser, you may need to reference the button in Atlas To reference a button in Atlas, use the following code

var btnAlreadyThere = new Sys.UI.Button($(“btnCreated”));

btnAlreadyThere.set_visible(true);

btnAlreadyThere.set_accessKey(“o”);

While looking at the preceding code, take notice of several things:

❑ The dollar sign ($) is a shortcut to document.getElementById Using the DOM methods means that the method will provide support across multiple browsers that support the DOM

❑ There is a class titled Sys.UI.Button This class encapsulates functionality of an HTML button and allows that button to be modified through Atlas

❑ The Sys.UI.Buttonclass provides a reference to a button The class does not provide support for creating a new button, merely for referencing the button

❑ Setting the properties is easy The preceding code shows the visibleand accessKey proper-ties being set These are set by calling set_visible(boolean)and set_accessKey(string) Approximately 40 properties can be set on a button or other user control in Atlas The most common ones will be the display/user interface (UI) oriented properties, such as behaviors, cssClass,

enabled, and other UI properties It is beyond the scope of this book to go through all the properties of the button control or all the properties of every single control Suffice it to say, each of the additional UI wrapper controls provided by Microsoft Atlas provides a similar set of properties You can obtain them

by the using the for()loop presented at the end of Chapter 10 to interrogate the JavaScript objects

Sys.UI.Data Controls

The Sys.UI.Datanamespace provides a couple of key visual/UI-related controls — namely the

listViewand itemView classes We are going to take a look at the listViewcontrol here

Try It Out Using listView

<page xmlns:script=”http://schemas.microsoft.com/xml-script/2005”>

<components>

<listView id=”ProjectResults”

itemTemplateParentElementId=”ProjectTemplate” >

<layoutTemplate>

<template layoutElement=”ProjectTemplate” />

</layoutTemplate>

<itemTemplate>

<template layoutElement=”ProjectItemTemplate”>

<label id=”ProjectNameLabel”>

<bindings>

<binding dataPath=”ProjectName” property=”text” />

</bindings>

</label>

</template>

</itemTemplate>

</listView>

</components>

</page>

Notice some of the settings in this listView:

❑ The listViewhas an ID of “ProjectResults”

❑ The target element is “ProjectTemplate” The target element from this example is a divtag that will receive the tabular results

❑ The bindings define how data is bound to the element More information on data binding is found later in this chapter In this example, the data column ProjectNameis bound to the label ProjectNameLabel

❑ The layoutTemplatedefines the layout that will be used for the records In this situation, the ProjectItemTemplateis the element that will hold the contents of data that is bound to the listView

❑ The itemTemplatedefines the layout that will be used for a single record Within the itemTemplate, there is a binding setup that associates the ProjectItemTemplatetag with the layout of the individual records as defined by the ProjectNameLabelelement

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 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 instead use targeted and partial updates This scenario is enabled by turning on partial updates through the ScriptManagercontrol