Web Base Application Framework. Real Multiple Document Interface on Browser

[A] The easiest way is to add before the <Link> node in the menu bar Xml a Java Script function that call you’re saving routine. Something like:

======================
<Label id="editCopy"
img="Images/Progress.gif">
<Text>Copy</Text>
<Link>SaveMyDataHere(); StatusBarWrite("Edit copy activate ...", 2000);</Link>
</Label>
======================

You can then read the user input by reading the active window content. Something like:

======================
// Get the active
window content and loop for entry element
var oContent = oWindow.content;
var arrElms = oContent.getElementsByTagName("INPUT");
var i = 0;
while(i < arrElms.length) {
  alert(arrElms[i].id);
  alert(arrElms[i].serverValue);
  alert(arrElms[i].value);
  i++;
}
======================

[A] You should also take advantage of the oWindow.save property by setting it to "true" with the onkeyup event in your Dhtml code that you insert in the oWindow.content. Something like:

======================
... [Your Dhtml code coming from the server]
<INPUT type="text" id="FirstName" value="" onkeyup="ValidateData(this);" />

... [Your Java Script function for saving data on the server]
function ValidateData(oEle) {
  // Do some validation entry
  ...

  // Call the SaveData function when any window is close
  oWindow.save = true;
}
======================

You can then build an array collection of all windows id created and loop on it with:

var oWin = document.getElementById(arrWinCollection[i]);
var arrElms = oWin.getElementsByTagName('INPUT');

Or you can record every element change and send them in a collection to the server.

[A] You can also lock the active window with the oWindow.change property and force the user to save the data before changing the focus to any other window.

You can then read the user input by reading the active window content. Something like:

======================
// Get the active
window content and loop for entry element
var oContent = oWindow.content;
var arrElms = oContent.getElementsByTagName("INPUT");

var i = 0;
while(i < arrElms.length) {
  alert(arrElms[i].id);
  alert(arrElms[i].serverValue);
  alert(arrElms[i].value);
  i++;
}
======================

See "Label 1.1" Dhtml node in the DataENDemo1.xml, the function ValidateData in JsDemo1.js file and the function SaveData in the JsConstant.js file for more detail.

[Q] If the user closes the window with the "X" icon, his there an event trigger?

[A] Yes, the "CloseWindow" event gets called every time a window is closed even if the window is not currently the active one. You can find this function in the JsConstant.js module.

[Q] Can we force a window to be always on top and lock until an event append?

[A] Yes, you have to set the oWindow.change property to "false" and the active window will always be on top until you set back this property to "true". Something like:

======================
function LockWindow() {
oWindow.change = false;
}

function ReleaseWindow() {
oWindow.change = true;
}
======================

See "Label 1.1" Dhtml node in the DataENDemo1.xml, the function ValidateData in JsDemo1.js file and the function SaveData in JsConstant.js file for more detail.

[Q] Our corporation support multi language interface. Is the menu bar and the window icon alternate text are easy to translate?

[A] It can’t get easier with Xml, you only have to point a different file before rendering the menu bar and use the same Xsl to render the different language interface.

For the window icon alternate text, simply change the default language in the JsConstant.js file and add a new array with the same ending letter as the language variable. Something like:

======================
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"};
======================

[Q] Can we use the tabbing option of the bottom right window in demo 1 for our site?

[A] Of course, you can copy and modify the example to better fit your need. Please refer to the function "SetDemoTab", "CollapseFieldSet" and "ShowTab" from the JsDemo1.js file.

[Q] Do we need to install module on the server side to run the code libraries?

[A] No, you do not require any installation module on the server. The Java Script libraries are downloaded at the browser level (client) via the http header i.e. All you have to do is to paste the Java Script libraries into one of your server http folder.

[Q] Is your products compatibles with the major browser i.e. IE 6, IE 7, Firefox, Safari and Opera, etc?

[A] Our products support fully all type of browser i.e. IE 6, IE 7, Firefox, Safari, Opera, etc. Hence, it cover 99.5% of the browser market.

[Q] Do we need to do server side scripting like PHP, ASP or JSP to run the libraries?

[A] No, the product libraries does not affect any of your server side scripting (PHP, ASP, JSP, etc). The Java Script libraries are downloaded at the browser level (client) via the http header.

[Q] Does it require any specific server configuration?

[A] The product does not require any server configuration since all the libraries are interpreted at the browser level. The server is only delivering them via the http protocol.

[Q] What the best way to update/modify information inside the windows?

[A] The best way to update/modify information inside a window is via some client side Java Script libraries. Just like Ajax (XmlHttp), Comet, iFrame or hidden frame (POST), or all of them for legacy systems.

[Q] How easy is it to change the content of a specific window?

[A] You can take advantage of the DOM or use the innerHTML property of the window object. All examples are fully details and commented for you. Something like:

======================
// Change some element in the content
var oEle = oWindow.content.firstChild;
      oEle.style.height = "50px";
      oEle.style.width = "100%";
      oEle.style.backgroundColor = "white";

// Replace the entire oWindow.content
oWindow.content.innerHTML = oDhtmlTextForServer;

// Append some element in the oWindow.content
var oOpt = document.createElement("div");
      oOpt.innerHTML = "<b>Here is some text ...</b>";

oWindow.content.appendChild(oOpt);
======================

[Q] Is there any function that return all open windows?

[A] Yes, you can take advantage of the GetElementsByClass object. You can also decide to put every oWindow.id created into an array and then use the document.getElementById method.

To get all the open windows on the client browser, you would do something like:

======================
function GetWindows () {
var oBody = document.body;
var windows;

if(browser.isIE) {
    windows = GetElementsByClass("window", oBody, "div");
}
else if(browser.isGecko) {
    windows = oBody.getElementsByClass("window","div");
}

var i = 0;
while(i < windows.length) {
    // Your code here ...
    i++;
}
}
======================

[Q] Can we change the image of the window minimize, restore, close icon?

[A] Yes, you have to create tree different icons for each option. You can also change the relative path of the icon. Each set of images is load into an array. Make sure you keep the naming convention for the "Hot" and "Dis" image. See JsConstant.js file for more detail. Something like:

======================
var imgHotWin = {close:"Images/CloseHot.jpg", restore:"Images/RestoreHot.jpg", minimize:"Images/MinimizeHot.jpg", maximize:"Images/MaximizeHot.jpg"};

Minimize.jpg: this is the default icon (normal).
MinimizeDis.jpg: This is the icon for all inactive window.
MinimizeHot.jpg: This is the icon for the onmouseover event.
======================

[Q] How do I maximize/restore a window?

[A] Simply double click on the window title bar to maximize/restore the window.

[Q] I have two different menu bars in the same page; can I change some global Css setting like the background-color on one of them?

[A] You can supersede all Css setting directly in the DOM document. Please refer to JsDemo1.js file [line 38 to 60] for more detail. Something like:

======================
// Insert icon bar in window
var oFragment = GetTransfromXml("MenuBar.xml", "MenuBar.xsl");
oWindow.content.innerHTML = oFragment;

// Supersede css style
var arrElms = oWindow.content.getElementsByTagName("DIV");
arrElms[0].style.backgroundColor = "white";
======================

[Q] How many windows can I create?

[A] Our benchmark tests indicate good performance rendering with 20 windows on regular, single processor terminal. Depending on the computer and the number of object in your document (DOM), the number is almost unlimited.

[Q] Can we change the shape or color of the menu bar or window to make round corner or some other design?

[A] You can change the menu bar and window style by adding Dhtml element in the Xsl (for the menu bar) and the Css setting (for both). You can also create extra DOM element inside the window object with Java Script function after the creation of each window. Something like:

======================
// Get the new window (always active after creation) var oWin = oWindow.window;
var oChild;

var i = 0;
while(i < oWin.childNodes.length) {
  oChild = oWin.childNodes[i];
  if(oChild.tagName.toLowerCase() != "div") {
    oOpt = document.createElement("img");
    oOpt.src = "LeftCorner.jpg";
    oChild.appendChild(oOpt);
  }
  i++;
}
======================

[Q] Can we change the minimum width and height of window object?

[A] You can change those default setting by assigning a new value to the window property object. See JsConstant.js file [line 4 to 18] for more detail. For example:

======================
oWindow.minimumHeight = 100;
oWindow.minimumWidth = 300;
======================

[Q] Can we create a window with a specific size and location?

[A] Yes, you need to set the variable position to "custom". Something like:

======================
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;
======================

[Q] Can we open a window to the maximum width and height of the browser?

[A] Yes, you need to set the variable position to "default". You should also take advantage of the Css setting ".windowDefault". It defines an absolute left and top positions of any window created. Something like:

======================
// Create full screen window
CreateWindow("Full Window", "Full Window", "Images/File.gif", "default");
======================

[Q] The menu bar render but doesn’t show any menu option on my server. The window button creation as well. What the problem?

[A] You have to change the name of the domain in the JsConstant.js file. If you’re doing local testing, you can use something like:

======================
var domain = "localhost";
======================

[Q] A sub menu option from the menu bar is not showing. What wrong?

[A] You probably mistype the object "id" in your Xml file. Make sure it’s the same in the "ShowSubMenu" event and <SubLabels> node.

Also verify your <Label> node have the option "submenu" set to "0". This tells the Xsl to render it as a sub menu and not a direct menu bar option.

Otherwise your xml document is malformed or has two node "id" with the same label. Here a good Xml structure:

======================
<Label id="print" subMenu="0">
  <Text>Print</Text>
  <Link>ShowSubMenu(event, printing);</Link>
</Label>

<SubLabels id="printing">
  <Label>
    <Text>Supplier Account</Text>
    <Link>DoSomeAction();</Link>
  </Label>
  <Label>
    <Text>Customer Account</Text>
    <Link>DoSomeOtherAction();</Link>
  </Label>
</SubLabels>
======================

[Q] Can we insert "frame" inside a window?

[A] The best way to append frame inside a window is to take advantage of the html marker "iFrame". To add more than one frame inside the same window, you can insert them into the html marker "div" for custom fit or define the "height" and width of each iFrame with pourcentage ratio. Something like:

======================
var testFrame = document.createElement("iframe");
testFrame.id = "testFrame";
testFrame.src = "http://www.google.com";
testFrame.width = "100%";
testFrame.height = "100%";

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

oWindow.content.appendChild(testFrame);
======================

You will probably have to change some .css setting like the .content style "border-width: 2px;" and "overflow: auto;" inside your javascript or directly into the .css file.

[Q] What are the window object properties?

[A] The available properties are:

======================
oWindow.id; (return the DOM object id, document.getElementById(oWindow.id)
oWindow.save; (return a boolean, if true the SaveData function is call when any window is close)
oWindow.change; (return a boolean, if false the active window is lock and always on top)

oWindow.window; (return the entire window DOM element)
oWindow.titleBar; (return the window title bar)
oWindow.content; (return the window content)

oWindow.minimumHeight = 200; (minimum resize and create window height)
oWindow.minimumWidth = 300; (minimum resize and create window width)

oWindow.zIndex = 0; (raise menu and window display on top)
======================

[Q] What is the system requirement in order to run the product?

[A] All you need is a HTTP server (IIS, Perl, Tomcat) to deliver the Java Script libraries into the client browser. It will work perfectly on Windows or Unix platform.

[Q] Do your provide update of the software?

[A] If you purchase any product, all future updates are free. To receive last version, please contact us (include your order ID and the email provide on the application form).

[Q] What do you consider a domain?

[A] A domain name is a universal and unique identifier, with a unique name, associated with an entity, that makes it possible to locate a resource or document on the Internet, and that indicates how to access it, the server name and the route within the server.

[Q] Can we redistribute your product in our application?

[A] Yes. Please refer to paragraph 3 (transfer of license), 9 (use and modifications) and 10 (permission to modify) in the term of use page. This shareware utility was made for redistribution purpose or inhouse intranet site.

[Q] Is it possible to buy only the menu bar or the window multiple document interface (MDI)?

[A] Yes, we offer package for any of those options. Please refer to the products page for more detail.

[Q] What are the refund/exchange policy?

[A] We offer a 30 days money back guarantee on all the products we have for sale. Please send an email to support@developerutility.com to request a refund, including the order details you received from Developer Utility. If the software is lost within 6 months of purchase we will provide a duplicate, free of charge.

[Q] What is your security and privacy policy?

[A] For question concerning the security and privacy policy of this site, please follow this link.

[Q] I have another question?

[A] You can send all other question at this address: support@developerutility.com. You will receive an answer within 24h.