Upgrading Ajax File Browser from Previous Versions

This article describes how to upgrade your Ajax Browser from previous versions to the latest version.

Upgrading to v3.x

The v3.x provides a new approach to opening documents for editing from server based on protocols. The Java applet is removed and replaced by protocol installers targeting Windows, OS X and Linux. If opening of a document failed, the the Ajax File Browser JavaScript will automatically request installation on a dav: on a client machine.

The 3.x version does not have any breaking changes in the Ajax File Browser API.

Upgrading to v2.1.x.x.

The new Ajax Browser v2.1 provides asynchronous loader with progress bar. It detects web browser version and loads files required to create desktop or mobile version of Ajax Browser.

Note that while using this new asynchronous is recommended, the old synchronous approach, used in v2.0 and earlier is also supported.

Follow the steps below to upgrade your code to use the new loader:

  1. Replace reference to ITHitAJAXFileBrowser.js with reference to ITHitAJAXFileBrowserLoader.js:
    <script src="/ITHitService/AjaxFileBrowser/ITHitAJAXFileBrowser.js" type="text/javascript"></script>
    <script src="/ITHitService/AjaxFileBrowser/ITHitAJAXFileBrowserLoader.js" type="text/javascript"></script>
    This will include a loader script to your web page that will detect web browser version and will load mobile or desktop version of Ajax Browser as well as to display progress while loading files required for Ajax Browser.
    You can also force the platform specifying Platform parameter in settings, see below.
  2. Remove links to Ajax Browser CSS files, both theme file and icon file CSS:
    <style type="text/css">
            @import "/ITHitService/AjaxFileBrowser/themes/windows_8/include.css";
            @import "/ITHitService/AjaxFileBrowser/themes/windows_8/icons_24.css";
    </style>
    The CSS files will be loaded automatically you do not need to include any CSS files anymore.
    The toolbar icons size and theme are now specified in settings object via IconsSize and ThemeName parameters.
  3. Add BasePath property to your settings. This property points to the URL where Ajax Browser files are located. (The folder where ITHitAJAXFileBrowserLoader.js resides).
    var settings = {
      ...
      BasePath: '/Browser/',
      ...
    }

    Note that Ajax Browser files are loaded using XmlHttpRequest. In case your Ajax Browser files are located on the server that is different from the one on which the page with Ajax Browser is located your server must enable CORS requests on the server.

  4. Remove FileIconsPath property from settings.
    var settings = {
      ...
      FileIconsPath: ‘/icons/’,
      ...
    }
    Now path to icons folder is calculated relatively to BasePath specified above.
  5. Remove PluginsPath property from settings.
    var settings = {
      ...
      PluginsPath: ‘/plugins/’,
      ...
    }
    Now Java applet path is calculated relatively to BasePath specified above.
                       
    You still need to specify (absolute) path to MS Office path templates, so keep the MsOfficeTemplatesPath property.
  6. Specify theme via ThemeName settings property (optional):
    var settings = {
      ...
      ThemeName: 'windows_8',
      ...
    }
    This parameter must be the name of the one of the folders under the ‘\themes\’ folder.
  7. Specify icons size via IconsSize setting property  (optional):
    var settings = {
      ...
      IconsSize: 24 // 16, 24, 32, 48, 64, 72,
      ...
    }
  8. Specify platform via Platform parameter (optional):
    var settings = {
      ...
      Platform: 'desktop',         // 'desktop', 'mobile', 'auto'
      ...
    }
  9. Replace the synchronous constructor with a new asynchronous loader. Replace:

    ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings);


    with: 

    var loader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
    loader.oninit = function (ajaxFileBrowser) {
        // This event is fired when control is loaded and created.
        // For example you can set selected folder here...
    };
    loader.LoadAsync(); // starts loading Ajax Browser files asynchronously

    The Ajax Browser Control object is passed as a parameter to init event. You can manipulate this object the way you were doing in v2.0 and earlier versions.

You can see how the entire page with Ajax Browser code looks like here.

Updating Event Handlers

The Ajax Browser v2.1 provides new asynchronous methods for selecting folder Tree Panel and selecting items in Files Panel: SetSelectedFolderAsync and SetSelectedItemsAsync. You can find here how to use these methods.

While the old synchronous methods, provided with v2.0 and earlier, such as SetSelectedFolder and SetSelectedItems, are functional, it is recommended to update your code to use the new asynchronous methods.

Upgrading to v1.5.x.x.

The Ajax Browser v1.5.x.x is provided with new themes and the ih_vista theme that was included with Ajax Browser v1.3.x.x and earlier versions are deprecated. To upgrade your web page that contains Ajax Browser follow this steps:

  1. Download and replace the IT Hit Ajax Browser files if needed. The folders structure in the new version is identical to the old version.
  2. Update the link to theme CSS file. You will need to update the folder name in which theme is stored. For example replace Browser/themes/ih_vista/include.css with Browser/themes/golden/include.css.
  3. Replace the ih_vista CSS class specified on your container control (the one in which Ajax Browser is created) with ih_style class.
Note that all new themes are using the same CSS class – ih_style.

After the upgrade, you may need to refresh your web page pressing Ctrl-F5 (Ctrl-r in Safari) to reload all files or clear the web browser cache.