How to Start with Windows

Initializing with Basic Parameters

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="codebase/dhtmlxwindows.css">
<script src="codebase/dhtmlxwindows.js"></script>

If you're working with the whole DHTMLX Suite, there's no need to include extra files - dhtmlx js/css files will be enough:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
    <script src="codebase/dhtmlx.js"></script>
</head>

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="https://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="https://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="https://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Creating Basic Object for a Set of New Windows

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

var myWins= new dhtmlXWindows();

Creating New Window

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 = myWins.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():

myWins.window(id).setText(string text);

Setting Default Values

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_skyblue").

Initialization with Additional Parameters

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

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

Allow/Deny Resizing

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

myWins.window(id).denyResize();

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

myWins.window(id).allowResize();

Allow/Deny Moving

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

myWins.window(id).denyMove();

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

myWins.window(id).allowMove();

Allow/Deny Parking

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

myWins.window(id).denyPark();

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

myWins.window(id).allowPark();

Hide/Disable Buttons

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:

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

Attach Object

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

myWins.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 the attachObject() method:

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

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

Object Size Handling

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.

Append Object

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:

myWins.window(id).appendObject(firstId);
myWins.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:

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

Attach URL

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():

myWins.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, the event onContentLoaded can be called.

Accessing Inner Window Content

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

Window Accessing from Attached URL

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.myWins.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.