A.2 Internet Explorer Tips | WebDAV. Next Generation Collaborative Web Authoring

Internet Explorer comes with a couple of small features that make it easier to work with WebDAV. One feature is simply a way to mark a link as a WebDAV collection, which allows the user to browse collections very naturally starting from Web pages. A more substantial tool is XMLHTTP, a component designed to make it easier to script HTTP requests and XML document handling within a Web page in IE.

A.2.1 Open Web Folders with Link in IE

There's a little-documented way of telling IE to open a WebDAV collection as a Web Folder, rather than doing an HTTP GET request as is normally done with links. The advantage to launching a Web Folder is that the user can immediately manage the contents of the folder, deleting, moving, copying, or renaming resources. Because the Web Folder opens as an Explorer window, the user can also drag and drop files to or from the Web Folder and other Explorer windows.

This is done with a style declaration that grants the behavior AnchorClick to an anchor (this is just a regular link, represented with an "a" element). The AnchorClick behavior causes the browser to navigate to a Web Folder when a link with that behavior is clicked. However, since the link is still just a link, any Web browser can understand the link normally.

The style element can be placed just after the opening body tag of an HTML page or anywhere else it's legal to define styles. The link can go anywhere in the page. The link contains two URLs: The folder attribute declares the URL of the Web Folder, and the regular href attribute declares an alternate URL.

 <html> <STYLE>A {behavior:url(#default#AnchorClick);}</STYLE> <a href="http://example.com/hr/"    folder="http://example.com/hr/">Link</a> </html

When this link is clicked, IE opens /hr/ as a Web Folder using a PROPFIND request and displays it as a folder, allowing the user to immediately move, copy, rename, or edit WebDAV resources. Browsers other than IE (or earlier than IE 5.5) will open the URL http://example.com/hr/ with a HTTP GET request instead, showing a static HTML page with a list of links to the resources in the collection, and the user has no direct ability to author those resources.

Another way to use this feature is to put two different URLs in the attributes of the link. The alternate page could be an error page, so browsers that ignore the folder attribute display an error instead.

 <STYLE>A {behavior:url(#default#AnchorClick);}</STYLE> <a href="http://example.com/unsupported-browser.html"    folder="http://example.com/hr/">Link to Web Folder</a>

With this link, browsers other than IE (or earlier than IE 5.5) will instead open a specific error page, rather than try to open the collection with a GET request.

The Web page containing this kind of link doesn't have to be stored on a WebDAV server itself. It could be a page hosted on a regular Web server, containing a link to a WebDAV collection on a WebDAV server.

The AnchorClick behavior is documented in MSDN Online [Microsoft03a]. It is intended for use with the anchor element only.

A.2.2 Open Web Folders with Script in IE

Another way to use IE to open Web Folders is to use a client-side script to launch a Web Folder. This has the advantage that the target for the Web Folder can be determined dynamically. Here's an example of a Web page that can be put in any WebDAV collection. When IE displays this Web page and the user clicks the button, IE shows the contents of the parent collection as a Web Folder.

 <html> <head><title>Web Folder Scripting</title></head> <body> <STYLE>    .hfolder{behavior:url('#default#httpFolder');} </STYLE> <SCRIPT> function openFolder(){    var sFolder=location.href.substring(0,       location.href.lastIndexOf("/"));    oViewFolder.navigate(sFolder); } </SCRIPT> <P>This page is hosted in a WebDAV collection. Push the button to view the parent collection using a WebDAV PROPFIND query. </P> <form> <input type="button"       onclick = "openFolder()" value="Go Up To Collection"/> </form> <span ID=oViewFolder CLASS = "hFolder"></span> </body> </html>

When the page is loaded, the STYLE element grants the httpFolder behavior (the ability to navigate to a Web Folder) to anything defined as class hFolder. The span at the bottom of the page is defined as class hFolder. Normally, a span element doesn't have the ability to navigate to a Web Folder, but style declaration gives it that ability. The form contains a button, and the button is the trigger for the openFolder() script. The openFolder() script dynamically determines what WebDAV collection to view, and tells the span to navigate to that collection.

The httpFolder behavior is documented in MSDN online as well [Microsoft03b]. It is much more flexible than the AnchorClick behavior because it can be used with many types of HTML elements, including "span" and the anchor or link element.

A.2.3 XMLHTTP in Web Page Scripts

MS IE versions 5.5 and later come with a component called XMLHTTP. It allows simple client-side code to build HTTP requests and parse HTTP responses, particularly if the request or response bodies are XML documents. The component can be used in many situations, but so far it has found wide use in Web pages with VB or JScript code to run the request through the component and handle the response.

XMLHTTP can be used in interesting ways inside Web pages. Because of its combination of XML and HTTP capabilities, the component makes it easy to script WebDAV requests. That means that the script downloaded from the server instructs the client how to make the WebDAV request, and then when the response is received, what to do with it.

Mozilla has a couple of modules that achieve nearly the same functionality as XMLHTTP. However, Mozilla supports more standardized W3C-defined approaches like the XML-DOM recommendation [Le Hors00] for XML processing. To handle scripted HTTP requests and responses, Mozilla supports the JavaScript XMLHTTPRequest object [Arvidsson02]. I recommend webfx.eae.net for information on using XML in browsers in general.

A.2.4 VBScript and XMLHTTP

Visual Basic Script (VBScript) is one of the IE scripting languages that can use the XMLHTTP component. VBScript only works with IE, but then again, so does the XMLHTTP component.

VBScript is syntactically much like Visual Basic (VB). Thus, this example can easily be adapted to apply to a VB application that needs to make WebDAV or HTTP requests.

The example is a page that does a PROPFIND request on a directory selected by the user. The code builds a PROPFIND request, sends it, and handles the response. The meat of the example is the Web page script, a single VBScript subroutine that loads a XMLHTTP object, sets it up, and sends it.

Listing A-1 shows a VBScript routine or subfunction that makes a PROPFIND request to the server and handles the response.

Listing A-1 VBScript subfunction to do PROPFIND.

 Sub cmdDoPropfind    Dim strDdirectoryName, propfindRequest, xmlDoc    strDirectoryName = directoryForm.text_directory.value    Set propfindRequest = CreateObject("Microsoft.XMLHTTP")    propfindRequest.Open "PROPFIND", strDirectoryName, FALSE    propfindRequest.send("")       Set xmlDoc = propfindRequest.responseXML    div_results.innerHTML = _       xmlDoc.transformNode(transformPROPFIND.documentElement) End Sub

Here's what this method does:

First, the function declares its local variables.
Then it initializes the local variable strDirectoryName to the name typed in by the user. As we'll shortly see, directoryForm is the name of the form, and text_directory is the name of the field, where the user types in the directory name to view.
The next local variable, propfindRequest, is created as an instance of the XMLHTTP object.
Now, propfindRequest is configured to send a synchronous PROPFIND request to the directory name ("FALSE" means not asynchronously, or in other words, synchronously).
The request is sent and the response returned synchronously (the Web page may freeze while this is happening).
Since the code waits until the response returns, the variable xmlDoc can immediately be set to the value of the response XML returned.
Finally, the div_results element (which appears inside the page as a placeholder for the table we're going to create) is given a bunch of text to display, consisting of the response XML transformed via the transformPropfind stylesheet.

This code referenced four objects outside the scope of the subfunction:

The form named directoryForm inside the main Web page
The field named textDirectory inside that form
The div_results HTML element inside the main Web page
The stylesheet named transformPropfind

To see how this routine works in the context of a Web page, Listing A-2 shows the entire Web page, repeating the VBScript routine and showing the stylesheet and HTML framework.

Listing A-2 Web page with VBScript, PROPFIND, and stylesheet formatting.

 <HTML> <HEAD>    <TITLE>Simple PROPFIND formatted with stylesheet</TITLE> </HEAD> <!-- The script does a PROPFIND request and formats the response      using the stylesheet. --> <script language="vbscript"> Sub cmdDoPropfind    Dim strDdirectoryName, propfindRequest, xmlDoc    strDirectoryName = directoryForm.text_directory.value    Set propfindRequest = CreateObject("Microsoft.XMLHTTP")    propfindRequest.Open "PROPFIND", strDirectoryName, FALSE    propfindRequest.send("")    Set xmlDoc = propfindRequest.responseXML    div_results.innerHTML = _       xmlDoc.transformNode(transformPROPFIND.documentElement) End Sub </script> <!-- The body of the Web page itself is very short. The form      allows the user to select a directory to propfind. The 'div'      element is where the output of the script is written. --> <BODY>    <form >       <input type=TEXT value="http://localhost:8080/hr/"           size="50">       <input type=BUTTON value="Show" ONCLICK="cmdDoPropfind">    </form>    <div ></div> </BODY> <!-- The stylesheet is in an xml island.      It produces a table with one row for each 'response'      element in the PROPFIND multistatus response. Each 'select'      attribute contains a XML Path statement that selects an XML      fragment from the XML response body. --> <xml docEmphStrong">transformPROPFIND">    <xsl:template xmlns:xsl="uri:xsl" xmlns:d="DAV:">       <table cellspacing="2" border="1">          <tr>             <th>Resource</th>             <th>Creation Date</th>             <th>Last Modified Date</th>          </tr>          <xsl:for-each select="d:multistatus/d:response">          <tr><td>             <xsl:value-of select="d:propstat/d:prop/ d:displayname"/>          </td><td>             <xsl:value-of select="d:propstat/d:prop/ d:creationdate"/>          </td><td>          <xsl:value-of             select="d:propstat/d:prop/d:getlastmodified"/>          </td></tr>       </xsl:for-each>       </table>    </xsl:template> </xml>

The page itself doesn't look terribly exciting because the example was kept simple and short. When the user types in a WebDAV collection URL and clicks Show, all the resources inside the collection are displayed in a table (see Figure A-1).

Figure A-1. VBScript example (after clicking Show).

graphics/ap01fig01.gif

Note that in this example the script, HTML body, and stylesheet components are all static. The client only needs to download these components once. The client can then do as many fast PROPFIND requests as needed without reloading the stylesheet or the Web page itself. Typically, this reduces server load and increases perceived user responsiveness.

The script, the HTML formatting, and the stylesheet can all be stored and downloaded in separate files. For example:

dopropfind.vbs for the VB function
displaypropfind.xml for the stylesheet
viewfolder.html for the rest

Multiple files can be useful when the subroutine and stylesheet are reused in more than one Web page. Each page imports the script file containing the correct subroutine and the XML file containing the relevant stylesheet. If the script file and stylesheet file are imported in more than one page, the client only has to download each file once and then cache and reuse them for a while.

A.2.5 JavaScript and XMLHTTP

XMLHTTP also works with JavaScript. It functions the same way, only the syntax is different. Listing A-3 is a trivial JavaScript function that does a PROPFIND to a URL.

Listing A-3 JavaScript and XMLHTTP.

 <SCRIPT language="JavaScript"> function GetData(url) {    var objHTTP = new ActiveXObject("Microsoft.XMLHTTP");    objHTTP.open("PROPFIND", url, false);    objHTTP.send("");    return objHTTP.text; } </SCRIPT>