Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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.

Goal

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.

MDI

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

References

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.

Code

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.top = oArg.top || this.top;
        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, 
                          top:this.top, 
                          left:this.left, 
                          width:this.width, 
                          height:this.height, 
                          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
this.winObj.setDestroyOnClose();  
    
this.winObj.show();

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;

    Windows.windows.each( function(w) {
        if (w.getId != null) {
            w.setLocation(x,y);
            w.toFront();
            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) {
    $('container').appendChild($('test_content'));
    contentWin = null;
    }

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

Windows.addObserver(myObserver);

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() {
            window.parent.execScript("updateInfo()");

        return (true);
    }
</script>

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;
   
        win.content.contentWindow.window.execScript("updateNbUser()");
    }
          
}   

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()
{
    fContent.UpdateButton.click();
}

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

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.

Conclusion

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.

Links

License

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

Share

About the Author

Hugo PEREIRA
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

Comments and Discussions

 
QuestionCode is missing Pinmemberjelin nayak12-Feb-14 19:55 
QuestionUsing AJAX and MDI on a web application Pinmemberjelin nayak12-Feb-14 18:45 
QuestionScroll bars are lost Pinmemberemrah mert12-Feb-09 22:06 
GeneralCannot compile your soure code PinmemberNguyen Thanh Luc16-Jun-07 18:15 
GeneralexecScript doesn't seem to work in firefox. Pinmembermaximosesronny4-Mar-07 20:05 
GeneralNice Job PinmemberWhiteKnight28-Feb-07 14:14 
Generalthank you very very much for this Pinmembermounibec13-Feb-07 8:22 
AnswerRe: thank you very very much for this PinmemberHugo.Pereira13-Feb-07 22:18 
Generalexcellent ! Pinmemberyadazula11-Feb-07 10:45 
GeneralTrouble Download ! PinmemberArun Yodyana5-Feb-07 20:12 
Can not downloaded success as,not resume support ?
 
Arun
AnswerRe: Trouble Download ! PinmemberHugo.Pereira5-Feb-07 21:34 
GeneralRe: Trouble Download ! PinmemberArun Yodyana5-Feb-07 22:07 
GeneralRe: Trouble Download ! PinmemberArun Yodyana6-Feb-07 5:50 
GeneralRe: Trouble Download ! PinmemberArun Yodyana7-Feb-07 20:12 
GeneralSource Code Missing PinmemberDante R. Otero31-Jan-07 6:03 
GeneralRe: Source Code Missing PinmemberHugo.Pereira31-Jan-07 20:56 
GeneralRe: Source Code Missing PinadminChris Maunder1-Feb-07 17:15 

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

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

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