[!] How to compile dhtmlx suite


#1

Hi to all

You often ask us for some kind of customization, bug fix, other changes (or how to do them by yourself) and after getting them, face the question - how to add code changes into compiled dhtmlx.js?

I’d like to explain a bit proper way to manage them

  1. Dev. Stage

While your project is on the dev stage - I recommend you to use components’ source files (you can find them in dhtmlx.zip which you have downloaded). Of course, in this case you will need to add more than one and css, but at least it will be easy to debug

Also, you can include only components which you’re using in your project, w/o other “heavy” stuff

Anyway, if you want to use compiled dhtmlx.js - it’s your choice

  1. Changes/Fixes/Features

When you need some kind of fix, improve, feature - we often ask for a complete demo.
We need exact files you are using in your app (maybe they already contain some changes?)
In this case, you’d better to use sources. Compiled dhtmlx.js will just allow us to determine the problem but only sometimes - to fix it

  1. Merge Changes

When you have updated files (say form.js, layout.js), it’s time to add them into your project and if you’re using separate components files it won’t be a problem: overwrite or merge

If you’re using compiled dhtmlx.js - there is a way to recompile it. dhtmlx.zip contains libCompiler

  • unpack all zip content into any folder under web_server+php
  • find sources for components you want to update (replace existing files with the fixed ones - overwrite or merge)
  • open in browser _ttp://localhost_or_whats_your_host_is/folder_where_you_unpack_dhtmlx_zip/libCompiler/

one more thing: you need java to be installed (jar file will be executed)

okey, libCompiler:

  • left side - select components you want to include into the package
  • right side - select skin (for the complete suite select “suite full”) from the dropdown over tree
  • make sure that the folder libCompiler/export has rw permissions and press generate button
  1. Custom dhtmlx.js

If you feel power you can write your custom scripts to compress files for say the release branch. On the dev stage you add sources but you also need compiled dhtmlx.js, css and your js.css code

Check the libCompiler/yui folder, it contain compiler.jar

here is script examples for linux (I will later for windows)

js:

[code]
#!/bin/bash

COMPILER=compiler.jar;

generating JS

RES_JS=res/compiled.js;

echo -ne “” > $RES_JS;
java -jar $COMPILER …/dhtmlx/dhtmlxLayout/codebase/dhtmlxcommon.js >> $RES_JS
java -jar $COMPILER …/dhtmlx/dhtmlxLayout/codebase/dhtmlxcontainer.js >> $RES_JS
java -jar $COMPILER …/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js >> $RES_JS
java -jar $COMPILER …/dhtmlx/dhtmlxForm/codebase/dhtmlxform.js >> $RES_JS[/code]

css:

(as you already know, css uses relative paths to imgs and there are some css files inside the skin folder so before compressing you need to remove extra “…/” in the path, php script (filename parser.php, it will appear in css script):

<?php if ($argc >= 2) { $f = file_get_contents($argv[1]); $f = str_replace("../imgs/", "imgs/", $f); file_put_contents($argv[1], $f); } ?>

and now for css:

[code]
#!/bin/bash

COMPILER=compiler.jar;

generating CSS

RES_CSS=res/compiled.css

K[0]=…/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.css
K[1]=…/dhtmlx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css
K[2]=…/dhtmlx/dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css

first call parset to change imgs urls then compile

echo -ne “” > $RES_CSS;
for i in ${K[@]}; do
cp $i tmp.css;
php parser.php tmp.css;
java -jar $COMPILER tmp.css >> $RES_CSS;
done

rm tmp.css[/code]

this will give you js/css, images you need to copy manually or create a script

folders/files struct:

[code]/compiler/
/compiler/compiler.jar
/compiler/parser.php
/compiler/compile_js
/compiler/compile_css

/compiler/res/ (results will here, make sure folder have r/w perms)
/compiler/res/imgs/ (copy imgs from dhtmlx/dhtmlxNeededComponent/imgs/*)

/dhtmlx/ (unpacked dhtmlx.zip here)
/dhtmlx/dhtmlxForm/
/dhtmlx/dhtmlxLayout/

// after compile you will have

/compiler/res/compiled.js
/compiler/res/compiled.css
/compiler/res/imgs/dhxlayout_dhx_skyblue/* (copy manualy, or write a script)
/compiler/res/imgs/dhxform_dhx_skyblue/* (copy manualy…)[/code]

Please feel free to ask any questions regarding this post.

Thanks for reading. If anyone will try - please, let me know that my efforts by writing this text were not in vain

Be in trend :wink:


#2

Here is also an article in the documentation that explains how to use libCompiler:
docs.dhtmlx.com/doku.php?id=othe … ibcompiler