Click here to Skip to main content
16,017,351 members
Articles / Web Development / HTML
Article

Using AJAX and MDI on a web application

Rate me:
Please Sign up or sign in to vote.
4.66/5 (13 votes)
30 Jan 20073 min read 95.3K   1.8K   69   17
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

HTML
<!-- Required Javascript's Files --> 
<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.

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

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

Display a window

This function hold the standard windows creation

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

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

JavaScript
// 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

JavaScript
// 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)

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

JavaScript
// 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.

JavaScript
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


Written By
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 Pin
jelin nayak12-Feb-14 18:55
jelin nayak12-Feb-14 18:55 
QuestionUsing AJAX and MDI on a web application Pin
jelin nayak12-Feb-14 17:45
jelin nayak12-Feb-14 17:45 
QuestionScroll bars are lost Pin
emrah mert12-Feb-09 21:06
emrah mert12-Feb-09 21:06 
GeneralCannot compile your soure code Pin
Nguyen Thanh Luc16-Jun-07 17:15
Nguyen Thanh Luc16-Jun-07 17:15 
GeneralexecScript doesn't seem to work in firefox. Pin
maximosesronny4-Mar-07 19:05
maximosesronny4-Mar-07 19:05 
GeneralNice Job Pin
WhiteKnight28-Feb-07 13:14
WhiteKnight28-Feb-07 13:14 
Generalthank you very very much for this Pin
aggla13-Feb-07 7:22
aggla13-Feb-07 7:22 
AnswerRe: thank you very very much for this Pin
Hugo PEREIRA13-Feb-07 21:18
Hugo PEREIRA13-Feb-07 21:18 
Generalexcellent ! Pin
yadazula11-Feb-07 9:45
yadazula11-Feb-07 9:45 
GeneralTrouble Download ! Pin
Bigbermusa5-Feb-07 19:12
Bigbermusa5-Feb-07 19:12 
AnswerRe: Trouble Download ! Pin
Hugo PEREIRA5-Feb-07 20:34
Hugo PEREIRA5-Feb-07 20:34 
GeneralRe: Trouble Download ! Pin
Bigbermusa5-Feb-07 21:07
Bigbermusa5-Feb-07 21:07 
GeneralRe: Trouble Download ! Pin
Bigbermusa6-Feb-07 4:50
Bigbermusa6-Feb-07 4:50 
GeneralRe: Trouble Download ! Pin
Bigbermusa7-Feb-07 19:12
Bigbermusa7-Feb-07 19:12 
GeneralSource Code Missing Pin
Jim F. Johnson31-Jan-07 5:03
Jim F. Johnson31-Jan-07 5:03 
GeneralRe: Source Code Missing Pin
Hugo PEREIRA31-Jan-07 19:56
Hugo PEREIRA31-Jan-07 19:56 
Hello,

You could please be more descriptive about the error, I have tested my code again and it work well on my computer.

Thank you in advance
GeneralRe: Source Code Missing Pin
Chris Maunder1-Feb-07 16:15
cofounderChris Maunder1-Feb-07 16: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.