DHTMLX Package Structure

DHTMLX is a Javascript library that delivers more than 20 different components. Each component can be used standalone or as a part of the common package.

Package

To start working with the library you need to download the dhtmlxSuite package that contains source files of the components.

The package contains the following folders and files:

codebase - the packed code files of the library. These files have much smaller size and intended for use in production. In your apps you need to use files from this folder:
- ext - a folder which contains extension resources for Upload control of the Form component;
- thirdparty - a folder that includes third-party libraries for correct work of the Chart component;
- imgs - a folder with source images required for correct rendering of components;
- dhtmlx.js - a script file;
- dhtmlx.css - a style file;
- dhtmlx_deprecated.js - a file which stores the API deprecated from previous versions;
- dhtmlx.d.ts - a file with TypeScript definitions for all DHTMLX components.
docs - a folder with documentation files. Run the index.html file resided in the folder to read the documentation of the library's components;
samples - the code samples;
skins - a folder with available skins;
sources - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for component's debugging:
- libCompiler - a tool that allows you to compile multiple source files of individual components into single scripts (more details);
- dhtmlxWindows ... dhtmlxAccordion - folders with source files of individual components;
License_gpl_2.0 - a txt file which contains the text of General Public License v2.0.

Support

To help you while working with the library, we provide a number of support resources such as:

Documentation.
You can access the documentation locally or online.
- To read the documentation locally, run the index.html file resided in the root folder of the DHTMLX Suite package.
- To read the documentation online, visit this page.
  Note, online documentation is more actual and complete than the one supplied with the package.
Demos.
- See a big number of samples here.
Forum.
- Use the DHTMLX forum to find answers to your questions and share your experience. The forum is available at forum.dhtmlx.com.
Members support for licensed customers.
- If you are a licensed customer with an active support subscription, you can submit a ticket to get assistance from our team. Visit this page to know more about members support center.

Required Source Files

The DHTMLX library includes the following source resources:

dhtmlx.js file - a script file
dhtmlx.css file - a style file
imgs folder - a folder with source images required for correct rendering of components.

So, to start working with the DHTMLX library, you need to:

Download the "dhtmlxSuite" package (link to download).
Find the "dhtmlx_std_full.zip " archive in the root of the package and extract its content to a directory on your local web server (you are creating a web application and the availability of a web server is mandatory).

Create an HTML file for your future app in the root folder of your directory.
So, the final structure of your directory should look something like this:

[yourDirectory]
    [codebase]
        [imgs]
        dhtmlx.js
        dhtmlx.css
    index.html                  //an HTML file where you need to build your app

You may also find the types folder in the "dhtmlx_std_full.zip " archive. It's used for working with the DataView component. But as in general case we don't need this folder, we have removed it from the directory.

Files Size

Don't be confused with the size of the script file, which is ~ 1 Mb.

Firstly, it contains the entire functionality for more than 20 components. When it comes to the release, you will be able to recompile the file using the special tool - libCompiler - and to leave just functionality of the necessary components.
All modern browsers support operating with the packed scripts. For example, in the "gzip" format, the maximum bundle weight of the file is less than 200 Kbyts. So, browsers will successfully cache it as well as any external content.

Minimal init code

Below you can see a sample of a basic DHTMLX-based app that produces a 3-cell layout of 600px*400px.

index.html file

<!DOCTYPE html>
<html>
<head>
    <title>My First Application</title>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">      <script src="codebase/dhtmlx.js" type="text/javascript"></script>       <div id="box" style="width: 600px; height: 400px;"></div>
    <script>
        dhxLayout = new dhtmlXLayoutObject("box", "3L");
    </script>
</head>
<body>
 
</body>
</html>

What's next?

Now, we recommend you to read the Building Web Interfaces article to get acquainted with the basics of building web interfaces with the help of the DHTMLX library.