JavaScript Client

JavaScript Client

JavaScript Client

The purpose of this tutorial is to show how you can use the WebdavClient Javascript class to perform various operations on files and folders located in your Autocad WS account.

Using this JavaScript class you will be able to -

  • Connect to an AutoCAD WS account
  • Query the account file and folder structure.
  • Perform different files operation such as copy, delete, rename, create folder.
  • Upload and download files from the account.
  • Query file metadata such as last modified, permission and thumbnails.
  • Launch a drawing in the WS web editor.

The WebdavClient JS class relies on the standard Webdav protocol to communicate with the Autocad WS service. This http based industry protocol is supported across multiple languages such as C++, C#, Java and JavaScript. Click here for a tutorial on accessing AutoCAD WS using C#.

This tutorial demonstrates how to perform the operations mentioned above in JavaScript. We’ve also embedded the client source code which can download here below. Click here to download full source code of this sample.

Constructor

The constructor of the WebdavClient class expects three arguments:

  1. url: The Webdav server addres. For example, if you want to connect to Autocad WS server, use: ‘https://dav.autocadws.com’
  2. username: the username of your account in the Webdav server
  3. password: the password of your account in the Webdav server

The following code creates new WebdavClient class, connecting to Autocad WS Webdav server, with the username ‘someuser’ and the password ’123456′.

var client = new WebdavClient('https://dav.autocadws.com', 'someuser', '123456');

PROPFIND
The PROPFIND method is used to retrieve info about files and folders in AutoCAD WS account.

The PROPFIND function receives three arguments:

  1. handler: an object which may define the callback functions onError and onSuccess, which are called when an error occurs during the request or when request is finished successfully.
  2. path: relative path to the folder/file for which we wish to retrieve information.
  3. depth: indicates whether the method is to be applied only to the resource (Depth = “0″), to the resource and its internal members only (Depth = “1″), or the resource and all its members (Depth = “infinity”).

The following code sends PROPFIND request to the server, requesting info for all files/folders residing directly in ‘/Site’ folder.

//A handler the implements onSuccess and onError functions
var handler = new PropfindHandler();
 
// request properties of all files/folders residing directly under the 'Site' folder.
client.PROPFIND(handler, '/Site', 1);

This example uses the PropfindHandle. We will show the code of that object in a moment. But before we do that, we should take a look at the response from the Webdav server. The server return an XML which holds info about the files/folders. The following is an example of such xml:

    /Site/filea.dwg
 
      HTTP/1.1 200 OK
 
        2011-12-01T17:42:21-08:00
        filea.dwg
 
    /Site/fileb.dwg
 
      HTTP/1.1 200 OK
 
        2011-12-01T17:42:21-08:00
        fileb.dwg

As you can see, each files/folder returned in ‘d:response’ tag. In this case, the server returned information about two files, ‘filea.dwg’ and ‘fileb.dwg’. For each file, the server states the creation date and its name.

Your will probably want your handler’s onSuccess function to parse the returned XML and do something with the retrieved info.
The following code shows the very simple PropfindHandler, which shows an alert message box containing the status code in case of an error, or the names of the files/folders returned by the server in case of success:

function PropfindHandler()
{
}
 
PropfindHandler.prototype.onSuccess = function(result)
{
    var names = '';
 
    // each file/folder is defined within a 'response' tag
    var items = this.getElementByTagName(result.content, 'd', 'response');
 
    for (i = 0; i < items.length; i++)
    {
        var props = this.getElementByTagName(items[i], 'd', 'prop')[0]; 
 
        var displayNameTag = this.getElementByTagName(props, 'd', 'displayname')[0];
        var displayName = displayNameTag.childNodes[0].nodeValue;
 
        names += displayName + '/n';
    }
 
    alert(names);
};
 
PropfindHandler.prototype.onError = function(result)
{
    alert(result.status);
}

If the account using username ‘someuser’ has the folder ‘Site’ and the files ‘filea.dwg’ and ‘fileb.dwg’ in the folder, the user will see a Message box with the names of the files:

filea.dwg
fileb.dwg

COPY. MOVE, DELETE
Copy, move and delete are called in the same way as the PROPFIND method, differed in the parameters passed.
All of them recieve a handler object, similarly to the PROPFIND method, but in this case there is no info returned to be parsed. However, you should use the onSuccess and onError callbacks to know if the request finished successfully and to recieve the status code in case of an error.

The following code:

  1. copies ‘/Site/filea.dwg’ to /OtherSite/fileb.dwg’
  2. moves ‘/Site/filec.dwg’ to /OtherSite/filed.dwg’
  3. deletes ‘/Site/filee.dwg’
var handler = new FSHandler();
 
var overwrite = true;
 
client.COPY(handler, '/Site/filea.dwg', '/OtherSite/fileb.dwg', overwrite);
client.MOVE(handler, '/Site/filec.dwg', '/OtherSite/filed.dwg', overwrite);
client.DELETE(handler, '/Site/filee.dwg');

The following code shows the FSHandler object that show a message box with the message ‘success’ in case the request ended successfully or the message ‘error’ with the status code in case of an error:

function FSHandler()
{
}
 
FSHandler.prototype.onSuccess = function(result)
{
    alert('success');
};
 
FSHandler.prototype.onError = function(result)
{
    alert('error: ' + result.status);
}

same-domain policy and proxy.php
The same origin policy prevents document or script loaded from one origin from getting or setting properties of a document from a different origin.
This means that we can’t send Webdav requests to a server that does not reside in the same domain as the JS file.
This is a a problem, as the Webdav server probably resides in a different domain from the client. We will bypass this problem using a php proxy.
The proxy should reside in the same domain as the client. Requests will be sent to the proxy, which will in turn send the requests to the Webdav server and return the answers to the client. The following line in the php file defines the real Webdav server address:

$real_destination_host = "https://dav.autocadws.com";

You must make sure your server is configured to run php files.
Click here for instruction on how to Install and Configure PHP 5 to Run with Apache on Windows.

Launching a drawing in the Autocad WS editor

To open a drawing in the AutoCAD WS online editor simply invoke the OpenDrawing method of the client, passing the path of the drawing with the target account:

client.OpenDrawing('/Site/filea.dwg');

Uploading files
You would probably want to implement a way for the user to select a file on his local file system and upload it to the Webdav server.
Some browsers will not give you access to user’s file system, so implementing this functionality with javascript is not always possible.
In our sample we used SWFUpload library to add upload functionality.
WFUpload is a small JavaScript/Flash library which gives you the option to easily add an Upload button to your html. The Flash code communicates with the js code through Flash’s ExternalInterface class. For more information on SWFUpload including examples, visit SWFUpload website

Download the JavaScript client application sample code.