Abstract

The art of building a corporate web site
Rich Internet Application with Multiple Document Interface
On occasion, the art of creating net suite, web native applications or online entry panels for business can be quite challenging, especially, if the corporation you are working (or contracted) for have thousands if not millions of data to distribute to its customers and/or partners.

The choice of presenting data A simultaneously with data C one the screen, instead of for example presenting data A simultaneously with data B or D can become quite complex and may be considered an art in itself when developing a web site and deciding what will be displayed on the various user screens.

Furthermore, what if changes are required during the development stages of your project? For example, what if the finance department of a bank wishes to see data A and C simultaneously side-by-side but the R&D department wishes to see data A and data D instead?

To get even more complex, we have the challenge of implementing what security features will be necessary for the various end-users and departmental groups (for example Human Resources is able to access certain information about an employee, whereas Finance will only be allowed to access other information.

What if users want to compare two, three or even four different profiles on one screen as opposed to printing them out in order to make the comparison. Would it be nice to have window minimize and maximize option, a web menu option to allow quick reformatting of the windows (including cascading, split view horizontal and vertical).

So where to go? To see a live demo of the proposed solution, please follow this link.


[The following paragraphs detail the suggested approach]
In order to solve our predicament of being able to display several variables simultaneously for one client and several “differing” variables for another client, we need to master a few technologies that are available to us, the developer. The ideal recipe would include Xsl/Xml, Css, and of course the one and only Java Script.

This may seem fairly simple at first, however, it may still be challenging to obtain the desired final product. In order to be successful, two tasks must be completed:

First, a menu bar which allows users to select the desired features of your system is required. Second, an interface which mimics a multiple document interface (MDI) to displays information simultaneously (and side by side) or allows for the opening of new record without losing previously displayed information.

(1) The first task is to update the security restrictions for the various groups/users on the menu bar. It is at this stage where the use of Xml becomes quite useful. Personally-speaking, I always prefer using Xml format for creating security profiles embedded into a database, due to its ease of use. Faking the Olap Cube some may say. None of the less, it works great.

Hence, your user security Xml (or database) profile is built with some key id, allowing you to stripe out (or deny) permission to the current user. Time to crosses it with your global Xml menu bar options to erase (restrict) some functionality. For example, if user A is not permitted to print a given document, then you can easily block or remove the “printing option” from the global menu bar options.

Once the comparison is done, and the resulting menu bar Xml is customized by user, why not use a simple Xsl to render it into Dhtml format. The next step to finish the dynamic menu drop down would be to use the Java Script programming language to show/hide the menu bar according to the user’s navigational choices.

(2) The second task is to display information simultaneously side by side without you, the architect, deciding what gets aligned together or without losing previously displayed information. Once again our best allies, Java Script, for Dhtml interface come to the rescue.

With a sound knowledge of z-index and other properties of the object (such as left and top coordinates, width and height of an element superseded by Css to mimic window style), we are on our way to replicate multiple document interfaces (MDI) on any type of browser. Internet Explorer and Firefox must be fully supported to cover 95% of the browsers out there.


[Conclusion and final comments]
You now have an application canvas on the web that allows you to reproduce exactly what executable applications (.exe) have been using for a long time, i.e. dropdown menu bars or menu icons (vertically or horizontally) with moveable/resizable window panels.

This all comes of course without the hassle of installing your product on, say for example, one thousand terminals across the company network. As a result, Ocx, Dll, and Exe components are virtually problem-free. Hence, this allows the ability to reproduce a fat client graphic user-interface (GUI) on a thin client.

As a result of the above manipulations, you are not required to open other browser panels or suffer the loss of current user credentials and sessions. This end result is a real MDI. This is what corporate business on the intranet has been missing for a long time.

Add your favorite method for transmitting information to the server like AJAX (XmlHttp), iFrame or hidden frame (POST), or both for legacy systems, and you can be on your way to reproduce complete office/business suites available on the web!

Of course, you can always decide to redo the above-proposed solution yourself, as you glance outside the window while your son/daughter is enjoying a beautiful day playing basketball, or you can simply use this product to make your life easier! It is as simple as that! To see a live demo of the proposed solution, please follow this link.

Here are some advantages of the above-demonstrated technique(s) and what the software package will include:

• Three easy-to-read and commented examples;
• Access to window properties like oWindow.id, oWindow.save, oWindow.content;
• Comments embedded in the CSS, XML and XSL to get you started quickly;
• All the mathematical loops are fully optimized;
• The “garbage collector” is also taken care of (hard to believe but Java Script does have some leak;
• The default browser DTD is use, meaning the “menu bar” and the “window style” will work on 99.5 % of all platforms in all generations. It also means that you can parse Dhtml document into Xml object and use Xpath query for easier manipulation on the server side as well as on the client side and/or use the DOM/BOM on the client side;
• The possibility to insert images, labels or a combination of the two in the menu bar;
• Ease of translation for different languages;
• A suite of packages to fit your company needs (i.e. you either only want the menu bar, the window MDI, or both.

For further details about how the package can be customized to fit your business needs, please refer to the schedule in the term of use page for more detail.

For more information or question, you can refer to the FAQ (MDI) section.


[Code Sample]
Here are a couple of scripting examples to give you a better idea of what your project will entail. Naturally, these examples are fully detail in the source code demo.

[You can insert your own function call easily] ========= XSL =========
<xsl:otherwise>
  <LI class="clsMenubar">
    <xsl:attribute name="id">li<xsl:value-of select="@id" /></xsl:attribute>
    <xsl:attribute name="onMouseOver">Highlight(this); MenuActif(event);</xsl:attribute>
    <xsl:attribute name="onMouseOut">ResetMenuColor(this);</xsl:attribute>
    <xsl:attribute name="onClick">ShowMenu(event);</xsl:attribute>
    <xsl:value-of select="@header" />
  </LI>
</xsl:otherwise>
======================

[You can stripe out any node before rendering] ========= XML =========
<Label id="editTask" subMenu="0">
  <Text>Task</Text>
  <Link>ShowSubMenu(event, task);</Link>
</Label>
<SubLabels id="task">
  <Label id="editTask" subMenu="0">
    <Text>Send Email</Text>
    <Link>ShowSubMenu(event, emailType);</Link>
  </Label>
</SubLabels >
======================

[You always know the active window and much more] ====== Java Script ======
function DemoWindow() {
  try {
  var name = "Window Name";
  var label = "Window Label";
  var icon = "Images/File.gif";
  var position = "custom";
  var width = 400;
  var height = 300;
  var left = 200;
  var top = 300;

  CreateWindow(name, label, icon, position, width, height, left, top);

  // Insert content, new create window is always active
  oWindow.content.innerHTML = "Here is some text, " + oWindow.id;

  } catch(e) {
      StatusBarWrite("Error (fnc : " + "DemoWindow" + "). " + e.message, 3000);
    }
}
======================

[You can customize the image, the language, etc.] ====== More Java Script ======
var language = "EN";

// Window min, max, restore, maximize alt image property
var altWinEN = {close:"Close", restore:"Restore", minimize:"Minimize", maximize:"Maximize"};
var altWinFR = {close:"Fermer", restore:"Restorer", minimize:"Minimiser", maximize:"Maximiser"};
var altWin;

// Menubar active window check mark (only full version)
var imgCheck = "Images/Check.gif";
======================

[You can easily modify the style of the menu bar, window, etc.] ========= CSS =========
DIV.menuBar li {

/*
If you change this value (inline or block),
you also have to change the css style
(1) ".menuBarProperty" (display),
(2) "DIV.menuBar" (height & width) and
(3) take out the "float: left;" on this style.
This will build the Menubar horizontaly or verticaly.
*/

display: inline;
float: left;
position: relative;
vertical-align: middle;
padding: 0px 6px 0px 4px;
font-weight: bold;
cursor: pointer;
}
======================