Upgrade dojo in DotCMS

upgrade-dojo.md

Upgrade Dojo in DotCMS

What you need?

1. A terminal
2. NodeJS

How to know which version of dojo we are

1. Open DotCMS backend
2. Open the browser console and make sure you are in the iframe

3. Run dojo.version you get an object like:

{
    "major": 1,
    "minor": 8,
    "patch": 3,
    "flag": "",
    "revision": 30226
}

Download the dojo version you need

1. Go to http://download.dojotoolkit.org/ and download the version you want to update to.
2. Selec the version you want
3. Download the files called: dojo-release-VERSION_NUMBER-src.zip

Note: there are more versions of the ones in the list, you can get them by enter the url manually.
Thanks @hmorera for the finding.

Get ready

1. Unzip the file and you'll a folder like:

.
├── dijit
├── dojo
├── dojox
└── util

2. At the same level create the file: build/build.js with the following code:

define([
  "dijit/_base",
  "dijit/_base/focus",
  "dijit/_base/place",
  "dijit/_base/popup",
  "dijit/_base/scroll",
  "dijit/_base/sniff",
  "dijit/_base/typematic",
  "dijit/_base/wai",
  "dijit/_base/window",
  "dijit/_Templated",
  "dijit/CheckedMenuItem",
  "dijit/Dialog",
  "dijit/form/_FormSelectWidget",
  "dijit/form/_RadioButtonMixin",
  "dijit/form/Button",
  "dijit/form/CheckBox",
  "dijit/form/ComboBox",
  "dijit/form/ComboButton",
  "dijit/form/DateTextBox",
  "dijit/form/FilteringSelect",
  "dijit/form/Form",
  "dijit/form/MultiSelect",
  "dijit/form/NumberTextBox",
  "dijit/form/RadioButton",
  "dijit/form/Select",
  "dijit/form/Textarea",
  "dijit/form/TextBox",
  "dijit/form/TimeTextBox",
  "dijit/form/ValidationTextBox",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/layout/TabContainer",
  "dijit/Menu",
  "dijit/MenuItem",
  "dijit/MenuSeparator",
  "dijit/PopupMenuItem",
  "dijit/ProgressBar",
  "dijit/TitlePane",
  "dijit/Tooltip",
  "dijit/TooltipDialog",
  "dijit/Tree",
  "dijit/tree/_dndContainer",
  "dijit/tree/_dndSelector",
  "dijit/tree/ForestStoreModel",
  "dijit/tree/TreeStoreModel",
  "dijit/WidgetSet",

  "dojox/data/JsonRestStore",
  "dojox/data/QueryReadStore",
  "dojox/data/ServiceStore",
  "dojox/embed/Flash",
  "dojox/form/DropDownSelect",
  "dojox/form/nls/Uploader",
  "dojox/form/Uploader",
  "dojox/form/uploader/Base",
  "dojox/form/uploader/FileList",
  "dojox/form/uploader/plugins/HTML5",
  "dojox/form/uploader/plugins/Flash",
  "dojox/grid/_Builder",
  "dojox/grid/_EditManager",
  "dojox/grid/_Events",
  "dojox/grid/_FocusManager",
  "dojox/grid/_Grid",
  "dojox/grid/_Layout",
  "dojox/grid/_RowManager",
  "dojox/grid/_RowSelector",
  "dojox/grid/_Scroller",
  "dojox/grid/_SelectionPreserver",
  "dojox/grid/_View",
  "dojox/grid/_ViewManager",
  "dojox/grid/cells",
  "dojox/grid/cells/_base",
  "dojox/grid/DataGrid",
  "dojox/grid/DataSelection",
  "dojox/grid/enhanced/_Events",
  "dojox/grid/enhanced/_FocusManager",
  "dojox/grid/enhanced/_Plugin",
  "dojox/grid/enhanced/_PluginManager",
  "dojox/grid/enhanced/nls/EnhancedGrid",
  "dojox/grid/enhanced/plugins/_SelectionPreserver",
  "dojox/grid/enhanced/plugins/Menu",
  "dojox/grid/EnhancedGrid",
  "dojox/grid/Selection",
  "dojox/grid/util",
  "dojox/html/_base",
  "dojox/html/metrics",
  "dojox/json/query",
  "dojox/json/ref",
  "dojox/json/schema",
  "dojox/layout/ContentPane",
  "dojox/main",
  "dojox/rpc/JsonRest",
  "dojox/rpc/Rest",
  "dojox/timing",
  "dojox/timing/_base",
  "dojox/widget/_CalendarBase",
  "dojox/widget/_CalendarDay",
  "dojox/widget/_CalendarDayView",
  "dojox/widget/_CalendarMonthYear",
  "dojox/widget/_CalendarMonthYearView",
  "dojox/widget/_CalendarView",
  "dojox/widget/Calendar",

], function(dijit){

	return dijit;
});

3. At the same level create a file called: dojoConfig.js with the following code:

function timestamp(){
    // this function isn't really necessary...
    // just using it to show you can call a function to get a profile property value
    var d = new Date();
    return d.getFullYear() + '-' + (d.getMonth()+1) + "-" + d.getDate() + "-" +
        d.getHours() + ':' + d.getMinutes() + ":" + d.getSeconds();
}

var profile = {
    basePath: ".",
    buildTimestamp: timestamp(),
    releaseDir: "PATH_TO_DOTCMS_CORE/dotCMS/src/main/webapp/html/js/dojo/custom-build",
    packages: [
      "dojo",
      "build",
      "dijit",
      "dojox"
    ],
    layers: {
      "dojo/dojo": {
        customBase: false,
        boot: true,
        include: [
          "dojo/dojo"
        ],
      },

      "build/build": {
        include: [
          "build/build"
        ]
      },
    }
};

Make sure you updated PATH_TO_DOTCMS_CORE in that code

4. At the end your folder should look like this:

.
├── build
│   └── build.js
├── dijit
├── dojo
├── dojoConfig.js
├── dojox
└── util

Open you terminal

1. Navigate to your folder: dojo-release-VERSION_NUMBER-src
2. Run: node dojo/dojo.js load=build --profile ./dojoConfig.js --release

If everything went correctly you'll see a bunch of warnings BUT no errors and you should have modified and new dojo files in your DotCMS core repo.

Test it out and you're good to go.