Showing a Window

The “window” element can be used to display windows in DTX applications. One simple approach would be to create one instance of the window at runtime and immediately show it:

var window = this.framework.createElement("window");
window.show(100, 100, 300, 400);

This will create an instance of a “window” element and it will show it at the specified coordinates (100, 100) and in the specified size (300, 400).

This window will not contain anything. To load a web page inside, just set the “url” attribute right before showing the window:

var window = this.framework.createElement("window");
window.setAttribute("url", "http://www.mydomain.com/mywindow.html");
window.show(100, 100, 300, 400);

Check out the DTX Reference for the window object to learn about other window attributes which can be used to control the borders, caption and similar aspects of the window.

Instead of displaying a URL, the window can host other elements. Just create the children elements and insert them into the window:

var window = this.framework.createElement("window");
var button = this.framework.createElement("button");
button.setAttribute("label", "Hello World!");
window.appendChild(button);
window.show(100, 100, 300, 400);

This will display a window with a button inside. It is a good idea to use “vbox” and “hbox” elements to align the elements inside a window.

If you want to load a window from a file you can write the following code:

var window = this.framework.createElement("window");
var windowXML = this.framework.loadChromeFile("content/mywindow.xml");
var windowDoc = this.framework.loadXML(windowXML);
window.loadFromXML(windowDoc.documentElement);
window.show();
The contents of “mywindow.xml” could be as follows:
<window
left="100"
top="100"
width="300"
height="400">

<button label="Hello World!" />
</window>

This case will result in exactly the same window as the previous sample. In the JavaScript code, the contents of the file are read first and then they are loaded as an XML document. This document is passed to the window so it can load its attributes and child elements.

You can add event handlers for the different elements inside the window. If the handlers are added programmatically by calling “addEventListener()”, they will run the same JavaScript scope as the toolbar. This way the elements in the window will be able to access elements in the toolbar on in other windows.

Any inline event handler in the window XML will run in a different scope than the toolbar. The same applies to JavaScript running inside the window when an HTTP URL has been provided in the “url” attribute. In this case the JavaScript code cannot access any of the objects outside the window.