Getting Started with IT Hit AJAX File Browser
Download the tar.gz archive here and unpack it. The AJAX File Browser is fully functional and does not have any limitations. However the trial period is limited to 1 month. After the trial period expires the AJAX File Browser will stop working.
The most simple way to test the control is to run it together with NtfsStorage sample provided with IT Hit WebDAV Server Engine. Configure the NtfsStorage sample on site root as described here. Than copy content of \ITHitAJAXFileBrowser_x_x_x_x\Browser folder under the \ITHitWebDAVServerEngine_x_x_x_x\Samples\NtfsStorage\Storage folder. Finally type http://localhost:xxxx/index.html in a browser.
Adding AJAX File Browser on a Web Page
To add IT Hit AJAX File Browser on a web page follow this steps:
- Add
<script> tag referencing ITHitAJAXFileBrowser.js to your web page:
<script src="ITHitAJAXFileBrowser.js" type="text/javascript"></script>
- Add theme CSS to your web page:
<style type="text/css">
@import "themes/default_inc.css";
</style>
At this point only one Vista-like theme is supported.
- Add tag with ID that will contain AJAX File Browser and apply
ih_vista class to this tag:
<div id="AjaxFileBrowserContainer" class="ih_vista" style="width: 100%; height: 100%"></div>
- Create the AJAX File Browser Settings object:
var settings = {
Id: 'AjaxFileBrowserContainer', // (required) ID of the HTML control in which Ajax File Browser will be created
Url: 'http://webdavserver.com/dav/', // (required) the root folder to be displyed in Ajax File browser
Style: 'height: 500px; width: 700px', // (required) always provide size of the control
FileIconsPath: '/browser/icons/', // path to the folder where file icons are located
MsOfficeTemplatesPath: 'http://webdavserver.com/dav/templates/', // path to MS Office templates, always specify full path
SelectedFolder: 'http://webdavserver.com/dav/Sales/' // folder to be selected, same as SetSelectedFolder call
};
At a minimum you must specify the parent object ID, WebDAV server URL, size of the control and icons path. Usually you will also specify selected folder and path to Microsoft Office templates. Here is the descrption of each property:
Id - html object or tag ID in which AJAX File Browser will be created.
Url - WebDAV server URL. It will be displayed as a root node in AJAX File Browser.
Important! According to latest HTML 5 standard, if your WebDAV server is located on a different domain or on a different port the server must attach the Access-Control-Allow headers to server responses. Find more detailes here.
Style - At a minimum you must provide size of the control here.
Important! If your page runs in XHTML mode and you set height of the control to 100% all parent controls including HTML and BODY tags must be set to 100%:
<style type="text/css"> html, body { height: 100%;} </style>
FileIconsPath - path to the folder where file icons are located. By default AJAX File Browser searches for file icons in 'icons/' folder.
SelectedFolder - specifies node to be selected in a tree. The AJAX File Browser will load files and folders list in Files Panel and will automatically expand necessary tree nodes if required.
MsOfficeTemplatesPath - path to the folder where Microsoft Office templates are located. You must always specify full URL with domain. To verify that your server meets all Microsoft Office requirements read the Settings for Microsoft Office article. This propery is required only if you run AJAX File Browser in IE and want to create Microsoft Office Word, Excel and Power Point documents. Using Settings object you can customize the AJAX File Browser appearence. The full description of this object could be found here.
- Create the control, paasing settings object as a parameter:
var ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings);
Here is how your HTML code will finally look like:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>IT Hit AJAX File Browser</title>
<style type='text/css'>
@import '/browser/themes/default_inc.css';
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
</style>
<script src='/browser/ITHitAJAXFileBrowser.js' type='text/javascript'></script>
<script type='text/javascript'>
function InitAjaxFileBrowser() {
var webDavServerPath = 'http://webdavserver.com/dav/';
var settings = {
Id: 'AjaxFileBrowserContainer',
Url: webDavServerPath,
Style: 'height: 100%; width: 100%',
FileIconsPath: '/browser/icons/',
MsOfficeTemplatesPath: webDavServerPath + 'templates/',
SelectedFolder: webDavServerPath
};
var ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings);
}
</script>
</head>
<body onload='InitAjaxFileBrowser();'>
<div id='AjaxFileBrowserContainer' class='ih_vista' style='width: 100%; height: 100%'></div>
</body>
</html>
Selecting Folder Node in a Tree
To programmatically set the selected node in a tree after the control is created use the SetSelectedFolder method:
ajaxFileBrowser.SetSelectedFolder('http://webdavserver.com/folder/');
This will load files and folders list in the right part of the control and automatically expand necessary tree nodes if required. This call is identical to setting SelectedFolder property of AJAX File Browser Settings object while creating the control.
To get a selected tree node use GetSelectedFolder method. It will return HierarchyItem JavaScript object:
var item = ajaxFileBrowser.GetSelectedFolder();
alert(item.Href);
Getting and Setting List of Selected Files and Folders
You can use the AJAX File Browser control for creating File Open / Select dialogs. To get list of selected items use GetSelectedItems method. It will return an array of HierarchyItem JavaScript objects:
var selectedItemUrls = '';
var aSelectedHierarchyItems = ajaxFileBrowser.GetSelectedItems();
for(var i=0; i<aSelectedHierarchyItems.length; i++){
selectedItemUrls += aSelectedHierarchyItems[i].Href + ' ';
}
To set selected item in a control use SetSelectedItems method. In this method you must pass either array of URLs or array of HierarchyItem objects:
var aSelectedItems = new Array();
aSelectedItems[0] = 'http://webdavserver.com/folder/file.doc';
aSelectedItems[1] = 'http://webdavserver.com/folder/install.exe';
aSelectedItems[2] = 'http://webdavserver.com/folder/';
ajaxFileBrowser.SetSelectedItems(aSelectedItems);
The tree will expand to show content of the necessary folder if required. Note that all items must be located in the same folder. All items located in the folder other than the first item will be ignored.
Selection Events
When user selects folder in a tree the OnSelectedFolderChanged event is fired. When selected items change the OnSelectedItemsChanged event is fired:
ITHit.Events.AddListener(ajaxFileBrowser, 'OnSelectedFolderChanged', onSelectedFolderChanged);
ITHit.Events.AddListener(ajaxFileBrowser, 'OnSelectedItemsChanged', onSelectedItemsChanged);
...
function onSelectedItemsChanged() {
var selectedItemsInput = document.getElementById('SelectedItems');
selectedItemsInput.value = "";
var aSelectedHierarchyItems = ajaxFileBrowser.GetSelectedItems();
for (var i = 0; i < aSelectedHierarchyItems.length; i++) {
selectedItemsInput.value += aSelectedHierarchyItems[i].Href + '\n';
}
}
function onSelectedFolderChanged() {
alert(ajaxFileBrowser.GetSelectedFolder().Href);
}
Double-Click Event
When user double clicks on a file or folder the OnDoubleClick event is fired. The AJAX File Browser passes the HierarchyItem object to the event handler.
ITHit.Events.AddListener(ajaxFileBrowser, 'OnDoubleClick', onDoubleClick);
...
function onDoubleClick(oHierarchyItem) {
if (oHierarchyItem.ResourceType != ITHit.WebDAV.Client.ResourceType.Folder) {
return false;
}
} AJAX File Browser Control Events Demo
|