DHTMLSuite.include

DHTML Suite - article index

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:

<script type="text/javascript">
var DHTML_SUITE_JS_FOLDER = '/js/separateFiles/';
</script>
<script type="text/javascript" src="/js/separateFiles/dhtmlSuite-common.js"></SCRIPT>

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:

<script type="text/javascript" src="../js/separateFiles/dhtmlSuite-common.js"></script>
<script type="text/javascript">
DHTMLSuite.include('formValidator');
DHTMLSuite.include('form');
</script>

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:

<script type="text/javascript">
DHTMLSuite.include('imageEnlarger');
var enlargerObj = new DHTMLSuite.imageEnlarger();
</script>

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.

This is better:

<script type="text/javascript">
DHTMLSuite.include('imageEnlarger');
</script>
<script type="text/javascript">
var enlargerObj = new DHTMLSuite.imageEnlarger();
</script>