This post is for developers who work closely with the DHTMLX library and would like to use its advantages in a most proper way.
As you might already know, there are a few options to include the DHTMLX library on a page:
- use a set of separate .js files of all components used on a page (this is the best option for the development stage, as only separate files include uncompressed, readable code; these files are stored in the ‘sources‘ folder of each component package)
- use the complete dhtmlx.js file that includes all components and all available functionality (stored in the dhtmlx_std_full.zip / dhtmlx_pro_full.zip archive of the dhtmlxSuite package)
- use compiled custom dhtmlx.js file that includes only required components and features (this option is the best for the final app, since it greatly reduces the file size, removes the unnecessary functionality, and allows you to load only one .js/.css file, which improves overall application performance)
When using the DHTMLX components, you sometimes apply for the help and ask us for some kind of customization or bug fixes. Often, you modify the code by yourself. After getting or making the required changes, you face the question – how to add these changes into the compiled dhtmlx.js?
In this article, we would like to provide some useful tips on how you can handle the modified code and incorporate the changes into the compiled dhtmlx.js file. You will see that you can quickly add the modifications and generate the compressed .js/.css file without a need to ask the support team to make it for you.
To reduce the total size and the number of loaded files, you can include only the components used in your app without including other “heavy” stuff and unused functionality.
Anyway, you can still use the compiled dhtmlx.js, if you wish.
When you need some kind of fix, improvement, or custom feature, and apply for a help, our support team often asks for a complete demo (see what we mean by “complete demo“). Note that we need the exact files you are using in your app (maybe they already contain some changes). In this case, it’s better to use the sources. The compiled dhtmlx.js file will just allow us to determine the problem but rarely to fix it.
How to Merge Changes
If you have modified the .js files (say, dhtmlxform.js or dhtmlxgrid.js), it’s time to add them into your project. It won’t be a problem if you’re using the separate component files: just overwrite or merge the necessary files.
If you’re using the compiled dhtmlx.js file, there is a way to recompile it. The dhtmlxSuite package (download) contains the libCompiler tool (stored in the ‘libCompiler’ folder). Follow these simple steps to integrate your changes into dhtmlx.js:
Note: you need Java to be installed (.jar file will be executed) for better result.
This is the user interface of the libCompiler tool for the DHTMLX framework:
So, how to use the libCompiler:
- Use the folder tree at the left to select components and separate features that you want to include on the page (for the complete suite select “suite full” from the dropdown above the tree).
- In the right panel, you can select the skin: SkyBlue, Web, or Terrace.
- Make sure that the folder libCompiler/export has read/write permissions and press “generate” button on the toolbar.
The libCompiler will generate a zip package with a single dhtmlx.js, dhtmlx.css and all necessary images. These generated files will include the selected DHTMLX components and functionality. The file size depends on the number of components you selected.
To find more about the libCompiler, check the documentation.
Read more »