Concepts of Abstract Programming Using ASP.NET and JavaScript

• Download source - 541.1 KB

Introduction

This is a short series of articles about Abstract Programming. This series is broken up into three parts. The first part is an overview of Abstract Programming, and how and when one program authors another program. The second part is a look at C# code authoring a JavaScript file at design time. The third part details how Abstract Programming can be used at runtime to create JavaScript that will serve as a .NET DataSet, only living on the client. By using Abstract Programming, you can eliminate unnecessary postbacks and realize the possibility of an application program running unplugged.

The methods used in this series are intended to create solutions that will run in all browsers. These examples were tested in both Internet Explorer and Netscape, but all the development was done with Internet Explorer. The examples and exercises were developed with the .NET 2.0 Framework using Visual Studio 2005 and SQL Server 2005, but the concepts of Abstract Programming are independent of any particular technology. This three-part short series was created using the techniques described in this series.

• Part 2 - A Server Control Authoring JavaScript
• Part 3 - A Web Server Authoring Dynamic JavaScript

Using the Source

Download the ZIP file and then extract the files into your C:\Inetpub\wwwroot as per the instructions in the Install.Readme.txt file. Follow the instructions to set up and use the source code and to set up the browser.

Overview

Abstract Programming can be described as "One program that authors another program." You can witness this in most IDEs such as Visual Studio when using the wizards to create components such as user controls. You will notice that the IDE creates the boiler-plate code necessary to create the components based on your input (name of the component, etc.). What I am going to reveal is more dynamic and can result in a solution that is more robust than single dimensional programming.

The problem of how to create on-the-fly code has had developers, particularly web developers, baffled for decades. Here it is… .NET Authoring JavaScript – An Introduction to DScript. DScript (a JavaScript file) applies ASP.NET technologies to output vibrant client-side JavaScript in an abstract object-oriented way. DScript and ASP.NET can be utilized to provide an application framework for building web applications for today's sophisticated users.

JavaScript and .NET Cooperative

JavaScript is an object oriented scripting language supported by all popular web browsers. The fact that JavaScript code is not compiled actually allows it to be platform-independent. The bad news is that interpreted code is slower than compiled code. Normally, that would be a problem if it was tasked with the responsibility of gathering and crunching data, but our model is slightly different. The web app, or the thin client model, only burdens the browser with displaying and submitting data. This leaves the server responsible for retrieving and formatting data. This works out great since the server will be executing compiled .NET code. Compiled code results in smaller and faster functional units of work that in turn can author script, which gets transferred to the client for each page, and interpreted by the browser.

JavaScript Comes in Many Flavors

Just like any other program that runs on your computer, a JavaScript program must be loaded, or installed onto your computer. However, unlike other programs, JavaScript programs are installed at runtime and without the user's interaction. This offers seamless deployment and it has therefore become a popular approach to programming and deployment. Here, we will describe several ways to author JavaScript programs. You will already be familiar with the first few, but the remainder will be your first exposure to Abstract Programming. Listed below are the methods of authoring JavaScript. Each will be detailed with pros and cons.

Human Authored Static JavaScript

HTML

JavaScript within an HTML file is the most basic implementation and the most popular style for scripting a web page. It offers a few advantages along with a handful of disadvantages. Here is a quick list of pros and cons:

• Pros
  1. It is simple to implement
  2. Only one file to maintain, containing both HTML and JavaScript
• Cons
  1. Not reusable
  2. Must be downloaded each time the page is loaded (a performance nightmare)

Example:

<html>
    <head>
        <title>JavaScript in HTML Page</title>
    </head>
    <body>
        <input type="button" class="Button" 
               value="Back" onclick="Back()" id="bBack" />
        <br/>
        <br/>Click a button to go back a page or forward a page.
        <br/>
        <input type="button" class="Button" 
               value="Next" onclick="Next()" id="bNext" />
    </body>
    <script language="'JavaScript'">
            function Back()
        {
            alert("Back one page");
            window.history.back();
        }

        function Next()
        {
            alert("Forward one page");
            window.history.forward();
        }
    </script>
</html>

Why not simply keep the JavaScript inside the ASP.NET web page? Because it is not reusable beyond the current page. Other pages will need similar JavaScript inserted into the HTML pages whenever the same functionality is needed. How can we make it reusable? We can make it reusable by putting the JavaScript into a *.js file.

.js

Now Let's look at human authored static JavaScript in a *.js file. The JavaScript files are cached on your computer in a temporary folder. You should not modify this folder directly, but if you must know, the folder is located at: C:\Documents and Settings\UserID\Local Settings\Temporary Internet Files.

• Pros
  1. Reusable in any ASP.NET web page
  2. Encapsulation, all JavaScript, for a certain function or class can be in one JavaScript (*.js) file
• Cons
  1. Slightly more difficult to maintain because the JavaScript is in a separate file

Let's take the previous example and move the JavaScript into a file named navscript.js. Now, the web page will reference the JavaScript file with the Src attribute of the <script> tag.

Example:

<html>
    <head>
        <title>JavaScript in a .js File</title>
        <script src="navscript.js" language="'JavaScript'"></script>
    </head>
    <body>
        <input type="button" class="Button" 
               value="Back" onclick="Back()" id="bBack" />
        <br />
        <br />Click a button to go back a page or forward a page.
        <br />
        <input type="button" class="Button" 
               value="Next" onclick="Next()" id="bNext" />
    </body>
</html>

The JavaScript is now available to all web pages that need the same functionality.

A Server Control Authoring JavaScript

Part 2 of this article series will explain in detail how a server can author a static JavaScript file. This authoring occurs at design time when the developer is placing a control on his .NET WebForm. The developer drags the control from the designer toolbox and places it on his .NET WebForm. Then he begins moving the control to the appropriate location on the .NET WebForm. While he is moving the control, DScript (a JavaScript file) is being authored for use at runtime. This is accomplished by writing to the disk the DScript (a JavaScript file) that contains the location, the absolute position, of the control. This is why it is called Abstract Programming. We have abstracted the process of generating the client code (DScript) by authoring the JavaScript through Visual Studio. More accurately, the JavaScript is authored by a ASP.NET server control whose C# code is being executed at design time.

A Web Server Authoring Dynamic JavaScript

Part 3 of this article series explains in detail how a server can author a dynamic JavaScript file (DScript). Please keep in mind that we are not talking about dynamic content such as text or images. That's easy… Instead, this is code that is created on-the-fly and delivered to the client browser dynamically. Here and now, the possibilities are endless. This process creates DScript that is loaded into the client during page load. Please be clear about another point. The DScript (dynamic JavaScript file) is not limited to code, but also can contain data. I will demonstrate how to pass a data table, in JavaScript, to the client machine.

Here are the types of features this approach offers:

• Once the DScript is loaded on the client, it is not downloaded again until it has changed
• You can allow updating of the DScript only if needed
• You can also create a unique DScript for each client, dynamically

Since the DScript is cached on the client and the DScript can contain a data table, it is no longer necessary to postback to the server to get the same data.

Concepts of OO JavaScript with ASP.NET

Many people don't know that JavaScript can be used in an object oriented programming fashion and thus, they don't consider using it for actual business objects. This is important to know to keep the business objects on the client, instead of on the server. Below is a short example of how to create a business object called Employee. In its constructor, it populates some property and has a method called displayDetails.

Example:

onload = function (){ window_onload(); };
 
 function window_onload()
 {
     emp1 = new Employee("Mary", "Q", "Harris", "Accounting");
     emp2 = new Employee("Thomas", "O", "Williams", "Shipping");
 
     emp1.displayDetails();
     emp2.displayDetails();
 }
 
 /* Constructor function for using an Employee object.*/
 function Employee(firstName, middleInitial, lastName, department)
 {
     this.firstName = firstName;
     this.middleInitial = middleInitial;
     this.lastName = lastName;
     this.department = department;
 }
 
 /* defining an Employee method called
    displayDetails which takes no arguments */
 Employee.prototype.displayDetails = function ()
 {
     alert(" first name: " + this.firstName + "\r\n last name: " + 
           this.lastName + "\r\n department: " + this.department);
 }

ASP.NET Development and Runtime Environments

You can enable the debug feature for debugging JavaScript only within Internet Explorer. This is enabled within Internet Explorer by selecting Tools -> Internet Options -> Advanced and then deselecting the checkbox labeled "Disable Script Debugging (Internet Explorer)."

Also, while debugging, you should enable the Script Explorer window. This is enabled by selecting Debug -> Other Windows -> Script Explorer within Visual Studio. The Script Explorer window will show the scripts and pages currently active while showing the web page in the web browser window. Once the script is shown in the Script Editor, it is easy to set breakpoints (press F9 key to toggle the breakpoint on/off) at the specified line of script.

The runtime environment setup does not need debugging enabled. However, the following requirements are necessary for both the development and runtime environments. This is an important issue because if the browser is not set up correctly, then your web application will not run properly.

Please verify that the browser has:

• JavaScript enabled
• Page caching disabled
• Cookies enabled

Turn off page caching by setting your browser to check for newer versions of stored pages for every visit to a particular web page. This is performed in IE by selecting Tools -> Internet Options -> General -> Temporary Internet files -> Settings -> Check for newer versions of stored pages: Every visit to the page.

It's a good idea to test for these features before relying on them. A well-written web application will do simple startup tests to verify that certain setup options are correctly configured. If you are using popup windows, then you should do a simple test to see if popup windows are allowed before going into the actual application. If the test for this feature fails, then you should alert the user that the application will not function correctly without it and not go further until the problem is resolved.

By adding your website to the list of trusted sites, you can bypass some of the restrictions that are placed on the web content. You may want to explain to your users how to add your website to their list of trusted sites. This is accomplished in IE by selecting Tools -> Internet Options -> Security -> Trusted Sites.

These browser setting are necessary using any type of browser: IE, Netscape, etc... Research the browser documentation of your client's browser to instruct your client on how to adjust these settings.

Summary

This drill-down was an introduction to Abstract Programming. It describes several ways to abstract the process of generating JavaScript. Some of these methods are design-time methods, and others are possible to be performed at runtime. By abstracting the generation of JavaScript to a process that takes place on the server, it is possible to generate both code and data. Once a data table is downloaded and cached on the client machine, as a JavaScript file it is not necessary to postback to the server to retrieve the same data. Placing JavaScript in a *.js file makes it reusable and encapsulated. Object oriented JavaScript is a robust and flexible programming language that executes inside a web browser. The JavaScript will allow itself to be easily abstracted because it is an interpreted language. Furthermore, because JavaScript can be used in an OO fashion, it is a good candidate for a business programming language. Abstract Programming is multi-dimensional programming that can be described as one program that authors another program. DScript is JavaScript that is authored dynamically.