DHTMLSuite.include

Include Javascript files dynamically

The size of dhtml-suite-for-applications.js has grown over the last couple of months. That's the reason why a dynamic include mechanism now has been introduced. Basically, it means that you
only have to include the file dhtmlSuite-common.js, and use the DHTTMLSuite.include() function to include the widgets you want to use. The DHTML Suite handles all the dependencies and include the files
needed for a specific widget.

DHTMLSuite.include is a function which takes the name of the widget as only argument. The name is the same as the name of the Javascript class. The example

DHTMLSuite.include("windowWidget");

will include all Javascript files needed for the window widget.

Configuration variable

In order to use this mechanism, you might have to adjust the configuration variable DHTML_SUITE_JS_FOLDER. This variable specifies the relative path
to the individual Javascript files for the DHTML. The default value of this variable is:

../js/separateFiles/

which is the relative path from the HTML files.

If you need to change it, you should do that before you include dhtmlSuite-common.js. Example:

ajax.js

The DHTML Suite uses the the sack library from http://www.twilightuniverse.com/resources/code/sack/. In previous
version of the DHTML Suite, you had to include that file manually. This file is now also inside the separateFiles folder and will be included dynamically whenever it is needed.

Example

This example is from the demo of the form validation and ajax form submission classes:

First I'm including dhtmlSuite-common.js. Then, I include the other javascript files needed for these widgets by use of the DHTMLSuite.include functions. This function will dynamically include the files:

ajax.js

dhtmlSuite-formUtil.js

dhtmlSuite-dynamicContent.js

which are the files needed for these two widgets.

Please notice, that the DHTML Suite currently requires you to include your files during page load, i.e. you cannot use the DHTMLSuite.include function after the page is finished loaded.

List of includable classes/widgets

formValidator

paneSplitter

menuBar

windowWidget

colorWidget

colorSlider

colorPalette

calendar

dragDropTree

slider

dragDrop

imageEnlarger

imageSelection

contextMenu

dynamicContent

textEdit

listModel

resize

dragDropSimple

dynamicTooltip

modalMessage

tableWidget

progressBar

tabView

infoPanel

form

Location of DHTMLSuite.include statements

It's important to have DHTMLSuite.include statements and the code for new DHTMLSuite objects inside separate script blocks. Example:

This will fail because the js files needed for the imageEnlarger widget aren't loaded until after the <SCRIPT> block ends, i.e. you will receive an Object Expected error message when you try to create your
DHTMLSuite.imageEnlarger object.