Index

MDIware™ - A Multiple Document Interface for the Cloud

Login


MDIware Initializer and Commands

MDIware(rootPath)
This is the MDIware initializer and constructor.
The argument 'rootPath' is the directory where MDIware will look for its Images directory and CSS file. If you are loading directly from MDIware.com, the rootPath = http://MDIware.com/libs/MDIware/.

The constructor should be called only once in the parent form and should be assigned to a variable named 'mdi'. The parent form should also have a <div> with an id = 'mainDiv'.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.addForm(formObject)
The addForm command adds a form object to MDI's internal collection of forms. Each MDI form may later be accessed by its name property.

An MDI form defines what URL a window will contain (the url property of the form), the window's appearance and behaviors.

At a minimum, a formObject contains the form name, url, and dimensions.
An example of a formObject is {'name':'form1', 'url':'child1.htm', 'width':'400', 'height':'200', 'title':'Child1.htm'}.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.cascadeMode()
MDIware displays child windows in several distinct modes; cascadeMode, stackMode and tabMode.

These modes can be set manually with the menu button at the left end of the window title bar or programatically with the mode commands.

Cascade is the default mode if no other is set.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.form('form1').show();
//switch display to cascadeMode.
    mdi.cascadeMode();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.close(windowName, [force])
The close command closes an open window.

If a window's web page registers an interface for onClose then MDIware will call interface.onClose and not close the window if a false is returned.

If the optional force parameter = true then MDIware will close the window regardless.

The close command returns true if the window closed successfully, false if not.

Note: A window should not use mdi.close(..) to close itself. Use the mdi.closeSelf(windowName) command from within a window to close itself.

// close window when button is clicked
<input type='button' value='Close Window' onclick='mdi.close(windowName);' />

<script>
var mdi;
var windowName;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    windowName = mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.closeAll([force])
The closeAll command closes all open windows.

If a window's web page registers an interface for onClose then MDIware will call interface.onClose and stop closing windows if a false is returned.

If the optional force parameter = true then MDIware will close all windows regardless.

The closeAll command returns true if all windows closed successfully, false if not.

// close all windows when button clicked
<input type='button' value='Close All' onclick='mdi.closeAll();' />

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.closeSelf(windowName, [force])
The closeSelf command closes an open window and should be used when closing a window from within itself.

If a window's web page registers an interface for onClose then MDIware will call interface.onClose and not close the window if a false is returned.

If the optional force parameter = true then MDIware will close the window regardless.

The close command returns true if the window closed successfully, false if not.

Note: Two code blocks below, one for the parent form and one for the child window.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'SelfCloser.htm'});
    mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

// close this window when button is clicked.
// parent.mdi.windowName(window) is a function
// that returns my window name

<input type='button' value='Close Window' onclick='parent.mdi.closeSelf(parent.mdi.windowName(window));' />

</div>
</body>
</html>

mdi.form(formName)
The form command returns a named form object from MDI's internal collection of forms.

An MDI form defines what URL a window will contain (the url property of the form), the window's appearance and behaviors.

At a minimum, a formObject contains the form name, url, and dimensions.
An example of a formObject is {'name':'form1', 'url':'child1.htm', 'width':'400', 'height':'200'}.

<script>
var mdi;

function jqueryReady()
{
var aform;

    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    aform=mdi.form('form1');
    aform.show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.getWindowInterface(windowName)
The getWindowInterface command returns an interface object that was previously registered by the named child window. This interface object allows the parent form to access the data and functions of the child window.

The interface contains pointers to functions in the child window that the child window allows the parent to use. This method gives the child window control over which of its functions and data are exposed to the larger application.

Communication between windows is a common theme when programming so we have constructed a javascript file, MDIwareHooks.js, to eliminate much of the busy work. Include MDIwareHooks.js in the head of your child window forms.

MDIwareHooks.js will create an interface object in your child window form and register the interface object with the parent form that contains the child window.

In this example, the parent form will use the interface object to extract data from an input field in the child window. The interface function it uses is defined the MDIwareHooks.js file.

Note: Two code blocks below, one for the parent form and one for the child window.

// get child data when button is clicked
<input type='button' value='Get Child Data' onclick='getChildData();' />

<script>
var mdi;
var windowName;

function getChildData()
{
    var interface = mdi.getWindowInterface(windowName);
    alert(interface.val('#firstName'));

}

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    windowName=mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

// The field below will be accessed by the parent form.

    First Name:<input type='text' id='firstName' value = 'Eddie' />

</div>
</body>
</html>

mdi.maximize(windowName)
The maximize command simply maximizes the child window to fill the browser window. The window can be maximized manually by clicking the maximize button in the right side of the window's title bar.

<script>
var mdi;

function jqueryReady()
{
var windowName;

    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    windowName = mdi.form('form1').show();

//Maximize the child window.
    mdi.maximize(windowName);
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.minimize(windowName)
The minimize command minimizes the child window and moves it to the lower left of the browser window. The window can be minimized manually by clicking the minimize button in the right side of the window's title bar.

<script>
var mdi;

function jqueryReady()
{
var windowName;

    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    windowName = mdi.form('form1').show();

//Minimize the child window.
    mdi.minimize(windowName);
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.registerWindowInterface(windowName, interfaceObject)
The registerWindowInterface command is used to register a window's interface object with the parent form. The parent form can then use the mdi.getWindowInterface(windowName) function to get the child's interface object.

Usually the registerWindowInterface command is executed automatically if the MDIwareHooks.js file is included in the child window. But, below is an example of the command if you choose to use it without including the MDIwareHooks file.


SNIPPET OF CODE FROM CHILD WINDOW
.
.
// The field below will be accessed by the parent form.

    First Name:<input type='text' id='firstName' value = 'Eddie' />
.
.
<script>
// First create an interface and add 'getDataField' function.
var interface = new Object();

interface.getDataField = function(fieldId)
{
    return document.getEementById(fieldId).value;
};

//In your child form's initialization, register the interface.

function formInit()
{
// This is how a child window accesses its unique name.
var windowName = parent.mdi.windowName(window);

// Finally! Register the interface with the parent form.
    parent.mdi.registerWindowInterface(windowName, interface);
}

document.onload = formInit;
</script>
.
.
.

mdi.resize(windowName, width, height)
The resize command resizes the child window.

<script>
var mdi;

function jqueryReady()
{
var windowName;

    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    windowName = mdi.form('form1').show();

//Resize the child window.
    mdi.resize(windowName, 300, 150);
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.restore(windowName)
The restore command restores the child window to the size and position it was prior to being minimized or maximized. The window can be restored manually by clicking the restore button in the right side of the window's title bar.

<script>
var mdi;

function jqueryReady()
{
var windowName;

    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    windowName = mdi.form('form1').show();

//Restore the child window.
    mdi.restore(windowName);
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.stackMode()
MDIware displays child windows in several distinct modes; cascadeMode, stackMode and tabMode.

These modes can be set manually with the menu button at the left end of the window title bar or programatically with the mode commands.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.form('form1').show();
//switch display to stackMode.
    mdi.stackMode();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.tabMode()
MDIware displays child windows in several distinct modes; cascadeMode, stackMode and tabMode.

These modes can be set manually with the menu button at the left end of the window title bar or programatically with the mode commands.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.form('form1').show();
//switch display to tabMode.
    mdi.tabMode();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.title(windowName, titleCaption)
The title command sets the caption in the window.

Note: The code below is for the child window.


<script>
//First get the windows name'.
var windowName = parent.mdi.windowName(window);
//Then set the window caption = 'Ready..'.
    parent.mdi.title(windowName, "Ready..");
</script>

    This is a child window.

</div>
</body>
</html>

mdi.window(windowName)
The window command returns a window object from MDI's internal collection of windows.

An MDI window displays the url identified in the assoicated form that was used to show the form.

The MDI window object that is returned by the window command is used to access other windows properties and for a limited number of window commands.

<script>
var mdi;

function jqueryReady()
{
var aform;
var windowName;
var mdiWindowObject;

    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    aform=mdi.form('form1');
    windowName = aform.show();

//For sake of example lets get the mdi window object and close it.
    mdiWindowObject=mdi.window(windowName);
    mdiWindowObject.close();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.windowName(html_DOM_window_object)
The windowName command is used by a child window to get the name of the MDI window it is displayed in.

The window name returned identifies the corresponding window object in MDI's internal collection of windows.

Note: The code below is for the child window.


<script>
//First get the windows name'.
var windowName = parent.mdi.windowName(window);
//Then set the window caption = 'Ready..'.
    parent.mdi.title(windowName, "Ready..");
</script>

    This is a child window.

</div>
</body>
</html>

mdi.windowToTop(windowName)
The windowToTop command moves the named window to the top of the window stack.

Depending on the display mode (cascade, stack or tabbed) the named window will cover or partially cover the other open windows.

<script>
var mdi;
var win1Name;
var win2Name;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add two forms.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.addForm({'name':'form2', 'url':'', 'width':'400', 'height':'200', 'title':'Child2.htm'});

//then show them both.
    win1Name = mdi.form('form1').show();
    win2Name = mdi.form('form2').show();

//then move window 1 to the top;.
    mdi.windowToTop(win1Name);
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>


MDIware Form Commands

mdi.form(formName).show([modal])
The form show command displays a form as a window. A single form can be shown multiple times to create multiple windows.

A modal window can be created by including an optional modal parameter in the show command. For example, mdi.form(formName).show(true) will open a window that is modal. No other window can gain focus when a modal window is open.

The form(formName).show() command returns an internally generated name for the new window. This windowName can be used in subsequent actions to modify or close the window.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

mdi.form(formName).showAttached(windowName, [modal])
An attached window is created by using a variation of the form show command called 'showAttached(attachedToWindowName)'. The showAttached command requires the name of the 'attached to' window to be passed as a parameter. An attached window is always shown at a higher z-index than the window it is attached to.

Attached windows are often used as dialog boxes such as a file-save dialog in a text editor.

A modal window can be created by including an optional modal parameter in the show command. For example, mdi.form(formName).showAttached(windowName, true) will open a window that is modal relative to the window it is attached.

<script>
var mdi;
var win1Name;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add two forms.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.addForm({'name':'form2', 'url':'', 'width':'400', 'height':'200', 'title':'Child2.htm'});

//then show them both.
    win1Name = mdi.form('form1').show();
    mdi.form('form2').showAttached(win1Name);

//then move window 1 to the top;.
    mdi.windowToTop(win1Name);
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>


MDIware Window Commands

mdi.window(windowName).closeSelf([force])
The closeSelf command closes an open window and should be used when closing a window from within itself.

If a window's web page registers an interface for onClose then MDIware will call interface.onClose and not close the window if a false is returned.

If the optional force parameter = true then MDIware will close the window regardless.

The close command returns true if the window closed successfully, false if not.

Note: Two code blocks below, one for the parent form and one for the child window.

<script>
var mdi;

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

// close this window when button is clicked.
// parent.mdi.windowName(window) is a function
// that returns my window name

<input type='button' value='Close Window' onclick='parent.mdi.window(parent.mdi.windowName(window)).closeSelf();' />

</div>
</body>
</html>

mdi.window(windowName).getWindowInterface()
The getWindowInterface command returns an interface object that was previously registered by the named child window. This interface object allows the parent form to access the data and functions of the child window.

The interface contains pointers to functions in the child window that the child window allows the parent to use. This method gives the child window control over which of its functions and data are exposed to the larger application.

Communication between windows is a common theme when programming so we have constructed a javascript file, MDIwareHooks.js, to eliminate much of the busy work. Include MDIwareHooks.js in the head of your child window forms.

MDIwareHooks.js will create an interface object in your child window form and register the interface object with the parent form that contains the child window.

In this example, the parent form will use the interface object to extract data from an input field in the child window. The interface function it uses is defined the MDIwareHooks.js file.

Note: Two code blocks below, one for the parent form and one for the child window.

// get child data when button is clicked
<input type='button' value='Get Child Data' onclick='getChildData();' />

<script>
var mdi;
var windowName;

function getChildData()
{
    var interface = mdi.window(windowName).getWindowInterface();
    alert(interface.val('#firstName'));

}

function jqueryReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
//Add a form and show it as a window.
    mdi.addForm({'name':'form1', 'url':'', 'width':'400', 'height':'200', 'title':'Child1.htm'});
    windowName=mdi.form('form1').show();
}
$(document).ready(jqueryReady());
</script>
</div>
</body>
</html>

// The field below will be accessed by the parent form.

    First Name:<input type='text' id='firstName' value = 'Eddie' />

</div>
</body>
</html>

mdi.window(windowName).title(titleCaption)
The title command sets the caption in the window.

Note: The code below is for the child window.


<script>
//First get the windows name'.
var windowName = parent.mdi.windowName(window);
//Then set the window caption = 'Ready..'.
    parent.mdi.window(windowName).title("Ready..");
</script>

    This is a child window.

</div>
</body>
</html>

 


Selected Version History

"The MDIware team is committed to insuring that new versions of MDIware are always backwards compatible with prior versions." - Ed Zaron

Date Version Changes
1/9/201.7.76 Add mdi.onModeChange string callback to capture when user changes mode (cascade, tab, stack).
12/21/191.7.74 Add form.maximizable property (boolean) to control display of maximize/restore title bar button.
11/16/191.7.72 Fix msgBox over attached modal child.
8/13/191.7.71 Fix msgBox over attached modal child. Add sysMsgBox(..) for message box creation in parent form
3/4/191.7.65 Fix modal functionality to allow for multiple levels of modal windows.
8/28/181.7.58 Add mdi.adjustMargins(windowName) to resize/resync non-scrolling areas of window.
8/8/181.7.47 Replace jQuery bind and unbind calls with .on and .off for compatibility with latest jQuery.
8/3/181.7.41 Add .linkData object to window.data. Add linkData as optional parameter to form.show(...) and form.showAttached(..) functions.
7/27/181.7.30 Reset 'next window open position' when all windows are closed.
7/19/181.7.10 Recode mdi.windowWidth() and mdi.windowHeight() for improved browser compatibility.
7/12/181.7.00 Display window caption in bold font-weight
6/24/181.6.87 Add mdi.windowsName(window) function for retrieving the internal window name used for window access.
6/17/181.6.80 Add mdi.broadcast to mdiware.js, add msgReceiver to mdiwarHooks.js
6/5/181.6.74 Add 'url' property to form object.
5/30/181.6.58 Changes to msgBox to return button selected name to callback function.
2/20/181.5.94 Add touch interface for moving/manipulating windows on touch screens.
1/17/181.5.41 Add window(windowName).title(caption text) for setting window caption in title bar.
1/16/181.5.40 Add form.showAttached(parent, modal) function for creating dialog type windows.
12/20/171.5.19 Add mdi.closeAll([force]) function for closing all open windows.
8/8/171.4.84 Create Tabs and Stack display modes.
6/9/171.3.82 Add menuArea, LeftArea and bottomArea for non scrolling content in window.
6/7/171.3.70 Rename project from jsWindows to MDIware


















Index

addForm(formObject)
cascadeMode()
close(windowName, [force])
closeAll([force])
closeSelf(windowName, [force])
form(formName)
getWindowInterface(windowName)
maximize(windowName)
MDI Constructor
MDI Initializer
minimize(windowName)
registerWindowInterface(windowName, interfaceObject)
resize(windowName, width, height)
restore(windowName)
stackMode()
tabMode(windowName)
title(windowName, titleCaption)
window(windowName)
windowName(window)
windowToTop(windowName, [unminimize])

Form Functions

show([modal])
showAttached(attachedToWindowName, [modal])

Window Functions

closeSelf([force])
getWindowInterface()
title(titleCaption)




MDIware is a professional javascript library that simplifies the creation and management of multiple browser windows and message boxes, including modal, dialog and always-on-top windows. MDIware also provides a framework for inter-window communication. Above all, MDIware is elegantly simple in design and usage.

© Copyright 2018 by CrystalBeachSoftware, Inc.
Contact Us

page last modified: 6/25/20