The first things that need to be done for any type of dhtmlxWindows' initialization are the following:

• Download the dhtmlxWindows package from the server and place it in a folder;
• Create an index.html file;
• Place the full paths to dhtmlxWindows' CSS and JS files into the header of html file.

    <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxwindows_dhx_skyblue.css">
    <script src="[full path to this file]/dhtmlxcommon.js"></script>
    <script src="[full path to this file]/dhtmlxcontainer.js"></script>
    <script src="[full path to this file]/dhtmlxwindows.js"></script>

A base for a set of new windows can be created in the following way:

    var dhxWins= new dhtmlXWindows();

While creating a new window with minimal initialization, the user should use createWindow() method and pass the following parameters:

• Window Id;
• Window's position (x & y);
• Window's width & height.

    var win = dhxWins.createWindow(String id, int x, int y, int width, int height);

The user can set the header text to the newly created window using the command setText():

    dhxWins.window(id).setText(String text);

Default values in dhtmlxWindows are:

• Window control buttons (buttons “Park”, “Maximize” and “Close” are enabled and visible by default);
• Window icon (default icon is defined by the skin);
• Window maxDimension (default value is “auto”) and minDimension parameters (default value is “200x140px”);
• The possibility to resize a window (default value is “true”);
• The possibility to move a window (default value is “true”);
• Window's default skin (default value is “dhx_blue”).

When creating a new window with extended initialization, the user should call the same commands described in Minimal initialization. Additional parameters, which can be defined, are:

• Header Icon;
• Allow/Deny Resizing;
• Allow/Deny Moving;
• Allow/Deny Parking;
• Hide/Disable Buttons.

There is also the opportunity to specify any header icon if the default one is not suitable for the user. This can be done in the following way:

    dhxWins.window(id).setIcon(String iconEnabled, String iconDisabled);

Along with setting a header icon, the user can choose to clear/remove it. In this case there will be just an empty space instead of any header icon. The user should do the following:

    dhxWins.window(id).clearIcon();

It is also possible to restore the default window icon according to the loaded skin:

    dhxWins.window(id).restoreIcon();

By default window resizing is allowed. Extended initialization allows the user to deny window resizing by calling the method denyResize():

    dhxWins.window(id).denyResize();

Resizing of a window can be allowed again with the help of the following method:

    dhxWins.window(id).allowResize();

By default window moving is allowed. The user can deny window moving by calling the following method:

    dhxWins.window(id).denyMove();

Window moving can be allowed again if the user calls method allowMove():

    dhxWins.window(id).allowMove();

By default window parking is allowed. The user can choose to deny window parking using the following method:

    dhxWins.window(id).denyPark();

Window parking can be allowed again with the help of the following method:

    dhxWins.window(id).allowPark();

All default buttons are enabled. The user can hide some of/all these buttons or disable them. In order to hide/disable these buttons the user should call the following methods:

    dhxWins.window(id).button("close").hide();
    dhxWins.window(id).button("park").disable();

dhtmlxWindows allows users to attach objects to any window by method attachObject():

    dhxWins.window(id).attachObject(objId);

If the user wants to adjust window's dimension to that of the container attached to the window, one more parameter should be added to attachOnject() method:

    dhxWins.window(id).attachObject(objId, true);

Note: The container (which dimensions the user wants the window to be adjusted to) should have certain constant sizes.

By default, windows have overflow:hidden style. In case the window is not able to display the whole object, the following style should be specified for the object:

    <div id="objId" style="width:100%;height:100%;overflow:auto;...>

Now the window will display the scroll bar in case the object does not fit window 's size.

The user can append an object from the page to any dhtmlx window. The essence of appending an object is the following: when the user appends more than one object to a window, every next added object doesn't replace the previous one, but is added right after it. To append an object to a window, the user needs to indicate id of the window and id of the appended object:

    dhxWins.window(id).appendObject(firstId);
    dhxWins.window(id).appendObject(secondId);

It should be noted that the first object can be added to a window through attachObject() method, while for appending the second object, the user should apply appendObject() method:

    dhxWins.window(id).attachObject(objId);
    dhxWins.window(id).appendObject(secondId);

There is the possibility to attach any external page to a window or any content stored locally (using AJAX) with the help of method attachURL():

    dhxWins.window(id).attachURL(url, AJAX);

The second parameter here indicates whether the content stored locally will be loaded through AJAX (the second parameter should be set to true) or not (the second parameter should be omitted). When the content is loaded into the window, onContentLoaded event can be called.

Any object on the external page attached with attachURL() method can be accessed like this:

• Page inner.html

    <div id="A">...</div>
    <script>
        function myFunc() {
            ...
        }
    </script>

• Page index.html

    var dhxWins = new dhtmlXWindows(...);
    dhxWins.createWindow("w1",...);
    w1.attachURL("inner.html"); 
    // accessing <div id="A"> 
    if (_isIE) {
        dhxWins.window("w1")._frame.contentWindow.document.getElementById("A")...
    } else {
        dhxWins.window("w1")._frame.contentDocument.getElementById("A")...
    }
    // calling function from inner.html
    dhxWins.window("w1")._frame.contentWindow.myFunc();

If the user needs to do some action with a window from the attached URL (for example, close it by clicking some button on page), he should write the following code lines in the attached external page:

    <input type="button" value="close window" onclick="closeWindow();"> // create a button
    <script>
        function closeWindow() {
            parent.dhxWins.window("w1").close(); // close a window
            // or
            parent.win.close(); // close a window
        }
    </script>

It should be noted that variables dhxWins and win should be created as global ones (in our main dhtmlxWindows script) in order to be seen by the script in the attached external page.