Optimizations in Javascripts and CSS files

From Opentaps Wiki
Revision as of 20:08, 1 March 2010 by Jwickers (talk | contribs) (New page: == Javascripts == === Note on DOJO === The DOJO files can be combined using the packager included with the DOJO sources. The opentaps DOJO files are based on the 0.9.0 release. To make ...)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

Javascripts

Note on DOJO

The DOJO files can be combined using the packager included with the DOJO sources. The opentaps DOJO files are based on the 0.9.0 release.

To make a packaged DOJO:

  • get the release tarball with sources: dojo-release-0.9.0-src.tar.gz
  • define the profile (set of modules included in a package) by creating util/buildscripts/profiles/opentaps.profile.js with:
  dependencies = {
       layers: [
               {
                       name: "opentaps-dojo.js",
                       dependencies: [
                                      "dojo.fx",
                                      "dojo.dnd.source",
                                      "dojo.dnd.manager",
                                      "dojo.dnd.move",
                                      "dojo.currency",
                                      "dojo.data.JsonItemStore",
                                      "dojo.data.JsonItemStoreAutoComplete",
                                      "dijit.Tree",
                                      "dijit.Dialog",
                                      "dijit.form.window",
                                      "dijit.form.Form",
                                      "dijit.form.Button",
                                      "dijit.form.ComboBox",
                                      "dijit.layout.ContentPane",
                                      "dijit.nls.loading"
                       ]
               }
       ],
       prefixes: [
                  [ "dijit", "../dijit" ],
                  [ "dojox", "../dojox" ]
       ]
  }
  • in util/buildscripts : do ./build.sh profile=opentaps action=release copyTests=false
  • get the files from release/dojo
  • this includes a opentaps-dojo.js which will be used later

Note that for opentaps dome patches were applies (see the revision control system).

To include in a HTML page, the simple dojo.js must still be included first

Packing other JS files

From hot-deploy/opentaps-common/webapp/js:

  • merge the various scripts
  cat protoaculous.1.8.2.p1.6.1.min.js ../../../../framework/images/webapp/images/calendar_date_select.js opentaps.js selectall.js fieldlookup.js formwidget.js opentapsDisplayEffects.js opentapsWindow.js shortcuts.js jscalendar-1.0/calendar.js jscalendar-1.0/calendar-setup.js > opentaps-packed1.js
  jsmin <opentaps-packed1.js >opentaps-packed.js
  • merge with the dojo package in hot-deploy/opentaps-common/webapp/js/dojo_0.90/dojo
  cat opentaps-dojo.js ../../opentaps-packed.js > opentaps-dojo-packed.js

CSS files

The CSS files where already merged, except the jscalendar CSS (since this is an external module), to merge it, in hot-deploy/opentaps-common/webapp/css

  cat opentaps.css ../js/jscalendar-1.0/calendar-system.css > opentaps-packed.css

To further reduce the CSS file size an external CSS compressor can be used (for example http://www.cleancss.com/).