AppSuite:Changes

Changes

7.6.0

grunt

grunt has superseded jake as a build system. In this section all changes will be described.

Instead of a shell wrapper around jake (the `build-appsuite` script), grunt should now be invoked directly. The recommended workflow will be described in the next subsections, where all tasks relevant for development will be explained in detail.

Grunt is a well documented task-runner (see http://gruntjs.com) and there is a large community writing plugins. Unless stated otherwise, we implemented standard grunt behaviour and rely on best-practice introduced by the grunt community.

local configuration

All local configuration is now done in `grunt/local.conf.json` using the JSON format. This replaces the `local.conf` file, that was sourced into build-appsuite shell script. This new way is more platform independent.

building the UI

Details on this would be out of scope on this article. To get further information please see our Getting Started with grunt guide.

appserver

The functionality of the appserver is now provided by the grunt-contrib-connect plugin. The `connect` task should be run in conjunction with the `watch` task like this:

grunt connect watch

This will start the appserver middleware and start watching for changed files. In case you don't want this behaviour, you have to start the `connect` task with the keepalive option (as documented in the grunt-contrib-connect documentation):

grunt connect:server:keepalive

Bower

Most of our third party front-end libraries are now managed via bower. The location for these libraries has changed from lib/ to bower_components/. These files will be handled when building by the new grunt build system and copied or concatenated accordingly.

Warning: Manual editing/patching/hacking files in "bower_components/" is deprecated.

However if you are positive that there is a bug in one of these libraries a possible course of action would be to fork the package on github and commit your patch there and create an upstream pull request, in any case this should be handled by the frontend team.

An up-to-date list of packages maintained by bower can be reviewed in the bower.json file in the ui root.

• jquery
• underscore
• mediaelement
• bootstrap
• bootstrap-datepicker
• bootstrap-typeahead
• font-awesome
• open-sans-fontface
• backbone
• backbone-validation
• Chart.js
• bigscreen
• jquery-placeholder
• jquery-imageloader
• textarea-helper
• requirejs
• bootstrap-accessibility-plugin

Read more about bower here.

Require.js

Require.js updated from 2.1.8 to 2.1.11

We also changed the way style files are included in the require.js define() method. less and css files are now defined in the same way as javascript files, WITHOUT its extension.

• less!io.ox/calendar/style.less => less!io.ox/calendar/style
• css!io.ox/calendar/style.css => css!io.ox/calendar/style

jQuery

jQuery was updated from 2.0.3 to 2.1.0

If you experience any issues please check this blogpost for changes.

Underscore.js

Underscore was updated from Version 1.4.4 to Version 1.6

Please read the changelog.

Hint: Look for "Removed the ability to call _.bindAll with no method name arguments", this was pretty much the only issue we had whilst updating.

Backbone.js

Backbone.js was updated from 0.9.x to Version 1.0.0

Please read the changelog.

Note: We currently cannot update to 1.1.2, which is the current version of backbone, but will do so in the near future, when we resolve our issues.

Bootstrap

Bootstrap was updated from 2.2.2 to 3.1.1

Please read the Bootstrap 2 to Bootstrap 3 migration guide, as there are many significant changes, to markup and styles.

All bootstrap plugins and our core components have been updated accordingly.

Note: In Bootstrap 3 the typeahead plugin was dropped in favor of Twitters typeahead.js. This change would break our current autocomplete functions, so we added the Bootstrap 3 Typeahead (https://github.com/bassjobsen/Bootstrap-3-Typeahead) for backwards-compatibility.

See also changes for themes below.

Themes

We cleaned up definitions.less and removed duplicate and obsolete definitions. If you want to override specific bootstrap default values you can do so by overriding variables from "/bower_components/bootstrap/less/variables.less" in your themes definitions.less file.

Mixins were also removed from definitions and reside now in a separate file "/apps/themes/mixins.less".

We also changed the option "relativeUrls" back to the default used in less (see http://lesscss.org/usage/#command-line-usage-relative-urls). So if you referenced any assets using relative URLs, you would need to change them to be relative to the base css file. We decided to do this change, because we generate CSS files into the themes folder and referencing images that are not in the themes folder has been error-prone in the past. Now all URLs are unified and it's immediately obvious, where this URL points to.

Font Awesome

Font Awesome was updated to it's latest version (4.0.3). You can read about the changes here.

These classes have been replaced in our core components:

• icon-align-justify => fa fa-align-justify
• icon-align-left => fa fa-align-left
• icon-angle-left => fa fa-angle-left
• icon-angle-right => fa fa-angle-right
• icon-archive => fa fa-archive
• icon-arrow-down => fa fa-arrow-down
• icon-arrow-up => fa fa-arrow-up
• icon-book => fa fa-book
• icon-bookmark => fa fa-bookmark
• icon-bookmark-empty => fa fa-bookmark-o
• icon-caret-down => fa fa-caret-down
• icon-caret-right => fa fa-caret-right
• icon-chevron-left => fa fa-chevron-left
• icon-chevron-right => fa fa-chevron-right
• icon-circle => fa fa-circle
• icon-circle-arrow-right => fa fa-circle-arrow-right
• icon-cloud-download => fa fa-cloud-download
• icon-cog => fa fa-cog
• icon-collapse-alt => fa fa-minus-square-o
• icon-comment-alt => fa fa-comment-o
• icon-download-alt => fa fa-download
• icon-edit => fa fa-edit
• icon-envelope => fa fa-envelope
• icon-envelope-alt => fa fa-envelope-o
• icon-exclamation => fa fa-exclamation
• icon-expand-alt => fa fa-plus-square-o
• icon-external-link => fa fa-external-link
• icon-external-link-sign => fa fa-external-link-square
• icon-eye-open => fa fa-eye
• icon-file => fa fa-file
• icon-film => fa fa-film
• icon-folder-close => fa fa-folder
• icon-folder-open => fa fa-folder-open
• icon-gear => fa fa-cog
• icon-group => fa fa-group
• icon-list-alt => fa fa-list-alt
• icon-lock => fa fa-lock
• icon-magic => fa fa-magic
• icon-mail-forward => fa fa-mail-forward
• icon-minus-sign => fa fa-minus-circle
• icon-music => fa fa-music
• icon-ok => fa fa-check
• icon-paper-clip => fa fa-paperclip
• icon-pencil => fa fa-pencil
• icon-picture => fa fa-picture-o
• icon-play => fa fa-play
• icon-plus-sign => fa fa-plus-circle
• icon-print => fa fa-print
• icon-qrcode => fa fa-qrcode
• icon-question-sign => fa fa-question-circle
• icon-refresh => fa fa-refresh
• icon-remove => fa fa-times
• icon-remove-circle => fa fa-times-circle
• icon-reorder => fa fa-bars
• icon-reply => fa fa-reply
• icon-resize-full => fa fa-expand
• icon-retweet => fa fa-retweet
• icon-rss => fa fa-rss
• icon-search => fa fa-search
• icon-shopping-cart => fa fa-shopping-cart
• icon-signin => fa fa-sign-in
• icon-spin => fa fa-spin
• icon-star => fa fa-star
• icon-table => fa fa-table
• icon-tag => fa fa-tag
• icon-th => fa fa-th
• icon-th-large => fa fa-th-large
• icon-th-list => fa fa-th-list
• icon-tint => fa fa-tint
• icon-trash => fa fa-trash-o
• icon-unlock => fa fa-unlock
• icon-user => fa fa-user

TinyMCE

TinyMCE was updated from 3.4.7 to 3.5.10.