Click here to Skip to main content
13,400,012 members (46,358 online)
Click here to Skip to main content
Add your own
alternative version


69 bookmarked
Posted 30 Jan 2007

Using AJAX and MDI on a web application

, 30 Jan 2007
Rate this:
Please Sign up or sign in to vote.
This article talks about two “technologies”, AJAX technology and a multi windows environment (MDI) inside an Internet application
Sample image


This article talks about two "technologies", AJAX technology and a multi windows environment (MDI) inside an Internet application. The MDI-AJAX combination allows the creation of richer, user-friendly and faster Internet applications.

Standard Internet applications with a unique window implicate several complete page re-load on every http request, they are slower and less easy to use for common users. Common users are more accustomed to Window applications. With AJAX and MDI, it is easy to reproduce similar function like a Windows application.


This article is the result of a feasibility study, it explains a way to migrate a MDI Windows to a Web application. The biggest restriction is to avoiding any losses of user interface functionalities.

Used libraries

AJAX (Atlas)

For AJAX, I use a framework named "Atlas". This framework allows to create fast Internet applications using AJAX technology.


For the MDI environment, I use a JavaScript library called "Prototype Window Class v 0.95".


For more informations about used libraries refer to links at the end of the article.

Concept of sample

The main concepts aborted in this article are:

  • the use of an MDI environment within web pages
  • the use of AJAX
  • the possibilities of communication between windows

Sample scheme

Sample scheme

Scheme details

The part A is the principal page; it contains the references used in the sample.

Parts B and C are AJAXED windows.

The part D is a debug area which displays certain actions performed by the windows. And E the menu allowing is to display windows and other actions.

Elements A, B or C are able to communicate; B can call C to refresh a part of the contents. B contains a list of users; this page can do some actions like insertion, modification and deletion. When a user is added or deleted from the list, B ask C to refresh the DataList containing the number of users.

A can close B and C.

Another possibility is to show a modal window which locks access to all content.


Now I am going to talk about the use of the "Prototype Window Class v 0.95" and how-to update a window from another on.

Use of "Prototype Window Class"

List of JavaScript libraries

<!--<span class="code-comment"> Required Javascript's Files --></span> 
<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" src="script/effects.js"></script>
<script type="text/javascript" src="script/debug.js"> </script>
<script type="text/javascript" src="script/window.js"> </script>

CSS style for windows

These style sheets contain information concerning the windows theme.

<link href="css/themes/default.css" rel="stylesheet" ... />
<link href="css/themes/spread.css" rel="stylesheet" ... />
<link href="css/themes/mac_os_x.css" rel="stylesheet" ... />
<link href="css/themes/alert.css" rel="stylesheet" ... />
<link href="css/themes/alert_lite.css" rel="stylesheet" ... />
<link href="css/themes/alphacube.css" rel="stylesheet" ... />
<link href="css/themes/darkX.css" rel="stylesheet" ... />
<link href="css/themes/nuncio.css" rel="stylesheet" ... />
<link href="css/themes/theme1.css" rel="stylesheet" ... />

Global variable used by the libraries

// Important variable, don't rename used by libs.
var contentWin = null;

Display a window

This function hold the standard windows creation

showWindow : function (oArg) {
        this.width = oArg.width || this.width;
        this.height = oArg.height || this.height;
        this.left = oArg.left || this.left; = ||;
        this.themeName = oArg.themeName || this.themeName;
        this.title = oArg.title || this.title;
        this.url = oArg.url || this.url;
this.winObj = new Window(this.winID, 
                          className: this.themeName, 
                          title:  this.title, 
                          closable: true, 
                          url: this.url, 
                          hideEffectOptions: {duration:1}, 
                          showEffectOptions: {duration:1}

// The window will be destroy by clicking on close button instead 
// of being hidden.
// If setDestroyOnClose() is omitted it's impossible to recreate 
// a window with the same ID

Finding a window

Windows is the main object of "Prototype Window Class", in this method I set the window Id, and the method return the windows object.

findWindow : function (id) {
    return (Windows.getWindow(id));    

Tile all windows

In this method, I go through the list of opened windows by using Each and for every instance I change the position.

// Tile all Windows
function tileAllWindows(xRatio, yRation) {
    var x = xRatio;
    var y = yRation; function(w) {
        if (w.getId != null) {
            x += xRatio;
            y += yRation;

Events listening

// Set up a windows observer and trace into the textarea
var myObserver = {
  onStartMove: function(eventName, win) {
    traceInfo(eventName + " on " + win.getId())
  onDestroy: function(eventName, win) {
    if (win == contentWin) {
    contentWin = null;

    traceInfo(eventName + " on " + win.getId())


Updating a part of a windows from another one

UserMan.aspx (window B)

<script language="JScript" type="text/jscript">
    // Execute updateInfo : Update user info window (User count)
    function form_OnPropertyChange() {

        return (true);

In every change of the number of users, updateInfo() function is called.

// Update user count info on User Info Window
function updateInfo() {

    var v = new HWWeb("utils");

    var win = v.findWindow("winUserInfo");
    if (win != null) {
        var ww = win.content.contentWindow.window;

The updateInfo() function which is in the window A, calls the updateNbUser() function from on UserInfo.aspx (window C).

In the sample, a DataList displays the number of users, the control subscribe in a click event (using a trigger) of a refresh button.

function updateNbUser()

    <asp:AsyncPostBackTrigger ControlID="UpdateButton" EventName="Click"/>

Be careful

Concerning the robustness of a such system, I don't have enough experience, but I believe that this solution works fine. It is necessary to have a good quality code with strong error management to prevent conflicts of numerous update or insert of data by the same user at the same time. For instance, if they have open two windows and that carrieas out two simultaneous update or insert, it is necessary to manage this case at the level of application to prevent some unexpected errors.


The use of AJAX and an MDI library may be interesting for Internet application. Some ERP are much more comfortable to use if they have a MDI environment. For instance it allows keeping permanently the result of a search, customer's list or other useful information.



This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Switzerland Switzerland
I am a C, C++ , C# and VB.NET software developer in Swiss. I actually work for SOPRA Group with C# and Oracle database.I have good experience in software development life cycle (analysis, requirements, design, coding, test and deploy). This experience spans many other experiences like embedded software, ATL, COM, Java application, complex Windows Installer Packages and more.
- 4+ years in .NET programming (especially C#);
- 3+ years in C/C++ programming;
- 3+ years in VB6, Java, Windows Installer

You may also be interested in...


Comments and Discussions

QuestionCode is missing Pin
jelin nayak12-Feb-14 19:55
memberjelin nayak12-Feb-14 19:55 
QuestionUsing AJAX and MDI on a web application Pin
jelin nayak12-Feb-14 18:45
memberjelin nayak12-Feb-14 18:45 
QuestionScroll bars are lost Pin
emrah mert12-Feb-09 22:06
memberemrah mert12-Feb-09 22:06 
GeneralCannot compile your soure code Pin
Nguyen Thanh Luc16-Jun-07 18:15
memberNguyen Thanh Luc16-Jun-07 18:15 
GeneralexecScript doesn't seem to work in firefox. Pin
maximosesronny4-Mar-07 20:05
membermaximosesronny4-Mar-07 20:05 
And if execScript doesn't work, the entire MDI is disabled. Any ideas on how to implement this is Firefox? eval and don't seem to work.
GeneralNice Job Pin
WhiteKnight28-Feb-07 14:14
memberWhiteKnight28-Feb-07 14:14 
Generalthank you very very much for this Pin
mounibec13-Feb-07 8:22
membermounibec13-Feb-07 8:22 
AnswerRe: thank you very very much for this Pin
Hugo.Pereira13-Feb-07 22:18
memberHugo.Pereira13-Feb-07 22:18 
Generalexcellent ! Pin
yadazula11-Feb-07 10:45
memberyadazula11-Feb-07 10:45 
GeneralTrouble Download ! Pin
Arun Yodyana5-Feb-07 20:12
memberArun Yodyana5-Feb-07 20:12 
AnswerRe: Trouble Download ! Pin
Hugo.Pereira5-Feb-07 21:34
memberHugo.Pereira5-Feb-07 21:34 
GeneralRe: Trouble Download ! Pin
Arun Yodyana5-Feb-07 22:07
memberArun Yodyana5-Feb-07 22:07 
GeneralRe: Trouble Download ! Pin
Arun Yodyana6-Feb-07 5:50
memberArun Yodyana6-Feb-07 5:50 
GeneralRe: Trouble Download ! Pin
Arun Yodyana7-Feb-07 20:12
memberArun Yodyana7-Feb-07 20:12 
GeneralSource Code Missing Pin
Dante R. Otero31-Jan-07 6:03
memberDante R. Otero31-Jan-07 6:03 
GeneralRe: Source Code Missing Pin
Hugo.Pereira31-Jan-07 20:56
memberHugo.Pereira31-Jan-07 20:56 
GeneralRe: Source Code Missing Pin
Chris Maunder1-Feb-07 17:15
adminChris Maunder1-Feb-07 17:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180218.2 | Last Updated 30 Jan 2007
Article Copyright 2007 by Hugo PEREIRA
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid