Index

MDIware™ - A Multiple Document Interface for the Cloud

Download 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 = https://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'.

<!-- MDIware tested compatible with JQuery 1.9.1 to 3.7.1 (as of 12/22/23)-->

<script>
var mdi;

function docReady()
{
    mdi = new MDIware('https://MDIware.com/libs/MDIware/');
}
$(document).ready(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
    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(docReady);
</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.debug(message)
The debug command is simple but sometimes useful when debugging your code. Debug appends the message as html to the contents the <div id='debug' > in your parent form. If no div is found with an id='debug' then mdi.debug(..) does nothing.
From a child page call debug like: parent.mdi.debug('Sample Message');

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 docReady()
{
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(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
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(docReady);
</script>
</div>
</body>
</html>

msgBox(title, message, buttons, callback, [options], [passThruData])
The msgBox command is not prefaced by 'mdi.' The msgBox command REQUIRES THE INCLUSION of the MDIwareHooks.js file in the child window's source code. The msgBox displays a message to the user with one or more response buttons.

The optional options object may contain width and height poperties - for example {width:300, height:400}.

The optional passThruData is a data object that will be returned to the caller as a second parameter in the callback function.

Also note that the msgBox command is only for use in a child window. If you want a message box in the parent window use the 'mdi.sysMsgBox(title, message, buttons, callback)' which is prefaced by 'mdi.', and does not require MDIwareHooks.js. Whew!

<script>
//In the child window we will write a function that will receive the user's response.
//We will call the function 'responseFN'.

function responseFN(response)
{
    switch(response)
    {
        case 'buttOk':
        code to process Ok ....
        break;
        case 'buttCancel':
        code to process Cancel ....
        break;
    }
}
//msgBox Syntax:
//msgBox(title, message, buttons, callBack)
//The msgBox() function REQUIRES THE INCLUSION of MDIwareHooks.js

//Finally, to display a message box we execute the following line of code.

    msgBox('Careful',
        'Do you want to save your work?',
         {"buttOk":"Ok", "buttCancel":"Cancel"}, responseFN);
</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 docReady()
{
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(docReady);
</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 docReady()
{
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(docReady);
</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 docReady()
{
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(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
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(docReady);
</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 docReady()
{
    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(docReady);
</script>
</div>
</body>
</html>


MDIware Form Commands

mdi.form(formName).show([modal], [linkData])
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 docReady()
{
    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(docReady);
</script>
</div>
</body>
</html>

mdi.form(formName).showAttached(windowName, [modal], [linkData])
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 docReady()
{
    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(docReady);
</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 docReady()
{
    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(docReady);
</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 docReady()
{
    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(docReady);
</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>

 


 


 

MDIware Properties

Use of the MDIware properties is optional.

PropertyTypeDefaultDescription
cascadeResizeHeightbooleantrueIf false then each windows height will not be resized when the windows are cascaded.
cascadeResizeWidthbooleantrueIf false then each windows width will not be resized when the windows are cascaded.
focusedWindowNamestringRead only. The name of the window that currently has focus.
formsarrayRead only. An array of MDIware forms.
lastOpenXintegerRead only. X coordinate where the last window was opened.
lastOpenYintegerRead only. Y coordinate where the last window was opened.
leftMargininteger0The left margin is used by the cascade function as a leftmost starting point.
onModeChangefunction pointernullCalled when the user switches display mode. onModeChange(mode).
onResizefunction pointernullCalled when the any window is resized. onResize(formName, leftCoord, topCoord, width, height, action). The numeric action code indicates the source action of the resize event. An action codes > 15 indicates a manual operation by the user.
onWindowToTopfunction pointernullCalled when the user brings a new window to the top of the z-order. onWindowToTop(windowName).
optNoTabOrStackbooleanfalseIf true then eliminates the stack and tab options from the options menu of new windows.
Set this to true for the 'Mobile Mode'.
optCascadeAftOnTopbooleanfalseIf true then call CascadeMode() whenever a new window moves to the top.
Set this to true for the 'Mobile Mode'.
optNoWindowMovebooleanfalseIf true this disables the manual movement of any windows.
Set this to true for the 'Mobile Mode'.
optCascadeOverflowbooleanfalseIf true then allow the cascaded windows to exceed the browser window dimensions
Set this to true for the 'Mobile Mode'.
optNoCascadeOffsetbooleanfalseIf true then don't horizontally offset cascaded windows.
optOpenLeftbooleanfalseIf true then open new windows at the left margin.
Set this to true for the 'Mobile Mode'.
optNoMaxButtonbooleanfalseIf true then don't display the max buttom in new windows.
Set this to true for the 'Mobile Mode'.
optNoMinButtonbooleanfalseIf true then don't display the min button in new windows.
Set this to true for the 'Mobile Mode'.
optDisableDesktopbooleanfalseIf true then the desktop window will function as a normal window and not be restricted in its movement to the foreground.
Set this to true for the 'Mobile Mode'.
optLeftCloseButtonbooleanfalseIf true then display a close button in place of the option button in new windows.
Set this to true for the 'Mobile Mode'.
systemModalOpenbooleanfalseRead only. Indicates if a system modal window is open.
systemModalEventfunction pointernullCalled when a MDIware switches in/out of a system modal state. systemModalEvent(bIsModal).
soundOnbooleantrueThis controls the 'beep' sound that occurs when the user clicks off a modal window or message box.
topMargininteger0No window can be manually moved above the top margin. Set the topMargin to 35 or so to allow space for your applications menu - if you have one.
windowsarrayRead only. An array of open MDIware windows.

 



Mobile Mode - Mobile Friendly

MDIware can optimize its appearance and operation on small screen mobile devices such as mobile phones.

The code below demostrates how to setup MDIware for mobile oeration.

<script>
var mdi;

function docReady()
{
    mdi = new MDIware('http://MDIware.com/libs/MDIware/');
    if (testIfMobile() == true) //determine if this is mobile
    {
        mdi.optNoTabOrStack = true;
        mdi.optCascadeAftOnTop = true;
        mdi.optNoWindowMove = true;
        mdi.optCascadeOverflow = true;
        mdi.optNoCascadeOffset = true;
        mdi.optOpenLeft = true;
        mdi.optNoMaxButton = true;
        mdi.optNoMinButton = true;
        mdi.optLeftCloseButton = true;
        mdi.optDisableDesktop = true;
        mdi.setHeightsInterval = 2000;
        mdi.initSetHeights(true);
    }
    //mdi is now setup for mobile operation.
    .
    .
    .
    .
    .
    .
    .
}
$(document).ready(docReady);
</script>
</div>
</body>
</html>

 


Form Properties

An MDIware form defines the properties and behaviors that a window will have when opened. A single form can be opened multiple times to create multiple open windows.

true
PropertyTypeDefaultDescription
heightintegerrequiredSets the initial height of the window
maximizablebooleantrueIf false then the maximize button will not be displayed on the title bar.
minimizablebooleantrueIf false then the minimize button will not be displayed on the title bar.
modalbooleanfalseIf true then the window will be system modal and no other window can gain focus until this window is closed.
namestringrequiredYou assign a name to the form. The form 'name' property must follow the naming conventions for html elements - no embedded spaces, etc.
closeButtonbooleantrueIf false then the window will not have a close button at the right end of the window title bar.
openInCenterbooleanfalseIf true then the window will be initially centered in the browser screen.
optionsButtonbooleantrueControls the presence of the options button at the left end of the window title bar. If the value = false then the button will not be shown.
resizablebooleantrueIf true then the window frame can be dragged to manually change the size of the window.
sandboxstringoptional MDIware uses html iframes to create windows. The sandbox property controls the access that one open window has to the contents of the parent window, parent session information, and other sibling windows. By default, each open window has access to the parent window, the parent session information and some access to sibling windows. A complete description of the sandbox property is given here.
titlestringoptionalThe initial title of the window to be displayed in the title bar. If no title is specified then the window title will display 'Loading...'.
widthintegerrequiredSets the initial width of the window
xintegeroptionalThe initial x position of the window.
yintegeroptionalThe initial y position of the window.

 


 

Window Properties

Use of the window properties is optional

PropertyTypeDefaultDescription
namestringGenerated by MDIware This is the name that used to address the window in mdi commands.
formObjobject This is a copy of the form that was used to open this window.
linkDataobject This is the linkData object that was optionally passed as a parameter in the form.show(..) or form.showAttached()..) command. This is a handy way to pass info to the opening window.

 


Selected Version History

"The MDIware team is committed to ensuring that new versions of MDIware are backward compatible with prior versions." - Ed Zaron

Date Version Changes
12/22/232.2.8 MDIware tested compatible with JQuery 1.9.1 through 3.7.1.
11/13/232.2.8 Removed call to https://mdiware.com/apps/reg/reg.aspx that was counting software usage.
8/27/232.2.7 Added mdi.getSize(windowName) returns an object with properties: width,height,x,y
Added mdi.setSize(windowName,width,height,[x],[y])
to get or set a window's size.
12/29/222.2.6 Corrected window size calculation prior to onResize call.
12/23/222.2.5 Modify window template to accomodate top-of-form menu in $('#windowName_menuDiv').
12/1/222.2.4 Added the mdi.addMenu(windowName string, menuId string, menuText string, functionCall string, inParent bool) function. This function adds a menu choice to the window's titlebar option button. See addMenu() examples in the MDIwareHooks.js file.
4/12/222.2.3 Added an optional form property form.desktop. When set to true the form will stay in background when clicked. The desktop can be moved to the foreground by clicking the up arrow button in the title bar.
3/10/222.2.1 Simplify and accelerate form loading.
3/7/222.1.9 Added mdi.children(windowName) function which returns an array of window names that are children of the window 'windowName'. Added mdi.closeChildern(windowName, [force]) function which closes the children of window 'windowName'.
2/25/222.1.7 Added msgBox text style control. Added mdiMsgText css class to MDIware.css.
2/13/222.1.6 Code cleanup, security.
10/7/212.1.4 Added the mdi.position(windowName, [coordinates]) for setting or getting the window position.
9/4/212.1.3 Smooth return to cascade mode from tab or stack mode. Position windows as in prior cascade.
8/29/212.1.2 Recode mdi.tile() to uncouple z order from tile order.
6/27/212.0.9 Fixed compatibility issue with jQuery 3.6.0. MDIware is now compatible with all versions of jQuery from 1.9.1 to 3.6.0.
6/12/212.0.8 Fixed error when refreshing screen in tab mode with no open tabs.
5/14/212.0.6 Added optionsInit and optionsPrep hooks to customize the window title bar options button choices.
4/4/212.0.5 Fixed the rare dropping of mouse state when the mouse is moved outside of browser and button released.
3/24/212.0.4 Added mdi.onResize property. Set mdi.onResive to the function that will be called when any window is resized. Function is called as onResize(formName, leftCoord, topCoord, width, height, action).
3/2/212.0.3 Added mdi.pop() function that takes the top window and moves it to the bottom of the window stack.
1/23/212.0.2 Cleanup MDIwareHooks.js and document mdi.debug(..) function.
1/15/212.0.1 Minor fix to form.show(modal) when in stack mode.
1/06/212.0.0 New Year code cleanup. Improve response when clicking on an input item in a non-top window.
11/4/201.9.70 Add mdi.splitH(), mdi.splitV(), mdi.tile() functions.
10/26/201.9.20 If form.html property = true then use linkdata.html as window contents as in "..form.show(formname, mode, linkdata)"
8/29/201.8.28 On opening a window, don't exactly overlay windows with same form name.
8/25/201.7.93 Corrected an error in msgBox(..) that sometimes didn't return the optional passThruData to the callback function.
5/26/201.7.91 Add numerous 'opt...' MDIware properties to facilitate making MDIware mobile friendly.
3/13/201.7.82 Disallow minimizing 'Always On Top' windows.
1/26/201.7.79 Make callback parameter optional in msgBox(Title, Message, Buttons, [callback]).
1/9/201.7.76 Add mdi.onModeChange function pointer 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])
debug(message)
form(formName)
form properties
getWindowInterface(windowName)
maximize(windowName)
MDI Constructor
MDI properties
MDI Initializer
Mobile mode and operation
msgBox(title, message, buttons, callback)
minimize(windowName)
position(windowName, [coordinates])
registerWindowInterface(windowName, interfaceObject)
resize(windowName, width, height)
restore(windowName)
setHeights(onOff)
stackMode()
sysMsgBox(title, message, buttons, callback)
tabMode(windowName)
title(windowName, titleCaption)
window(windowName)
windowName(html_DOM_window_object)
windowToTop(windowName, [unminimize])

Form Functions

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




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 2024 by eZaron, LLC
Contact Us

page last modified: 4/11/2024