OWA Web Controls
Before we look at samples and tools for using WSS Forms, we need to look at two controls offered by OWA that you can use in your applications: the rich edit control and the folder tree control. These controls are similar to the view control in that they are implemented as Hypertext Markup Language (HTML) Components (HTCs). The Training application shows how to use both of these controls.
Rich Edit Control
The rich edit control allows users to format text right inside the browser ”for example, by bolding or underlining or selecting fonts. This control is supported only by Internet Explorer (IE) 5.0 and later. The control is useful when you want to allow users to enter or display rich text. Figure 20-2 shows the rich edit control in action in the Training application.
Figure 20-2: The OWA rich edit control inside the Training application
The control itself is implemented as an HTC, just like the view control. To use the control inside a Web page, you include a style that points to the HTC for the control. This HTC is stored with the view control in the controls section of the /exchweb virtual directory as richedit.htc. The first step for using the rich edit control is to add a style to your page that defines the control and its name . The following code is from createcourse.asp in the Training application. It defines htmledit as a behavior that is implemented by richedit.htc.
<style> .htmledit { BEHAVIOR:url("/exchweb/controls/richedit.htc"); } </style> Next you add a textarea to your form that you want rich-text enabled, as shown in the following code:
<TEXTAREA class="htmledit" cols=41 name=description id=description rows=10 style="HEIGHT: 100px; WIDTH: 600px" tooltips="Paragraph Styles;Font Names;Font Size;Font Color;Bold;Italic;Underline;Align Left;Center;Align Right;Bullets;Numbered List;Decrease Indent;Increase Indent" headerStyleNames="Normal;Heading 1;Heading 2;Heading 3; Heading 4;Heading 5;Heading 6;Address;Formatted" fonts="Arial:Arial;Courier:Courier;Roman:Roman;System:System; Times New Roman:Times New Roman;Verdana:Verdana" imagePath="/exchweb/img/" textformat="text"> </TEXTAREA>
As you can see in the definition of the TEXTAREA , we declared the class as htmledit in order to use the rich text control. Then we set the tooltips , headerStyleNames , and imagePath properties. These are all properties found in the richedit.htc file. You will generally keep the standard properties and values shown in the previous code to enable your rich text control.
Once you include the rich text control, you can easily take the contents of the control and save them as the text for your item. You should be aware of a couple of things about how the control saves messages. First and foremost, the control returns HTML, not text, because it needs a way to retain the formatting you select in the control. Second, the HTML it returns contains special characters such as spaces and the greater-than and less-than signs in encoded form. You must be aware of this if you plan to redisplay the entered text in an IFRAME without using the rich text control to render the contents. Let's look at an example. The following is some sample text entered into the rich text control and saved into the body of an item:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=unicode"> <META content="MSHTML 5.50.4134.600" name=GENERATOR> </HEAD> <BODY> <PRE>This is some sample multi-space &nbsp;&nbsp;&nbsp;&nbsp; text <FONT face=System>Some Formatting This is a greater &gt; this is a less &lt;&nbsp;</FONT> </PRE> </BODY> </HTML>
In the HTML, single spaces are fine. However, when you put in multiple spaces, the control writes in &nbsp . If you do a greater-than or less-than, the control will write &gt; or &lt; , respectively. When you try to use the Active Server Pages (ASP) object's Response.Write method natively with the text returned with these special characters, instead of getting multiple spaces or a greater-than or less-than, you will get the actual &nbsp; . This is usually not what you want. You could fix this problem by allowing the rendering of the text to be done by the rich text control again. However, if you are presenting a read-only interface, this can confuse the user because it looks like the user should be able to modify the contents.
Instead, you should write a bit of shim code to modify the HTML that you stored from the rich text control to replace & with just & to turn &nbsp; into the correct HTML for a space, which is . This is an easy piece of code and is used in showcourses.asp to render the rich text descriptions of the courses that an instructor enters. The ASP code in the sample to correct this problem is shown here:
<TR> <TD> <B>Description:</B> </TD> <TD> <% iAppt.TextBody = replace(iAppt.TextBody,"&","&") Response.write iAppt.TextBody %> </TD> </TR>
Now you've got an easy way to add rich text editing to your dynamic Web applications without much coding at all.
Folder Tree Control
If you have ever used OWA, you've seen the folder tree that appears in the folder list for OWA. This folder tree mimics the folder tree in Outlook. There might be occasions when you want to display a folder tree but do not want to write your own HTML or ActiveX control to do this. In this case, you can use the folder tree control that is included with OWA. This control is also an HTC and is stored in the controls directory under the /exchweb virtual directory. The file is called Exchangetree.htc. Figure 20-3 shows the folder tree in action for the setup program for the Training application. The folder tree allows you to select where you want to install the application. It also allows you to add new folder sub trees to the folder tree and create new folders within the folder tree (if you have the required permissions). The folder tree uses Web Distributed Authoring and Versioning (WebDAV) under the covers to perform all of its operations and is entirely asynchronous, which forces you to listen for some callbacks from the control, as you will see in the code.
Figure 20-3: The folder tree control in the Training application in foldertree.asp
As in the two previous examples with the view and rich edit controls, when you work with HTCs you must add a tag to your HTML page to identify that you want the HTC available. Also, you must look through Exchangetree.htc for all the properties, methods , and events the control supports. I use only a limited subset of these interfaces ”the common ones ”for the sample application, and I do not have room to document all of the interfaces here, so you are better off looking at the control itself because most of the interfaces are straightforward to work with.
First we need to add a tag to our Web page to identify the HTC, as shown here:
<?XML:NAMESPACE PREFIX="WM"/> <STYLE> WM\:TreeView { BEHAVIOR:url(/exchweb/controls/ExchangeTree.htc) } </STYLE> Just as in the previous two samples, you must then add the actual control to your Web page and pass the default properties you want to specify for the control and the events that your code will handle from the control. The following code from foldertree.asp shows how to do this:
<WM:TreeView id="objTree" style='' onPickFolder = "objTree_OnPickFolder()" onAddHierarchy = "objTree_OnAddHierarchy()" imagePath = "/exchweb/img/" />
In the code, the TreeView control is added and given an ID of objTree . The code registers for two events ” onPickFolder , which is fired when a user picks a folder, and onAddHierarchy , which is called when a new folder tree is successfully added to the control. When you work with the control, you should use some of its methods, such as AddHierarchy , CreateFolder , MoveFolder , CopyFolder , or RenameFolder (to name a few). The full list of methods, properties, and events are in the HTC itself.
The next thing you must do with the control is to listen for the HTML window object's onload event. In this event, you must load whatever the default folder tree is for your user or application. Otherwise, the tree control will not know what to render by default. The following code implements this functionality. I'm using the folder tree control for a specific purpose, so I pass a parameter ( strDefaultTree ) along the URL, which is the path to the default tree to render such as http://server/public.
function window.onload() { var strDefaultTree = "<%=Request.Querystring("strDefaultTree")%>"; objTree.addHierarchy(strDefaultTree, true); } Next you just use the methods and write your event handlers for the control. The following snippet of code shows how to use the AddHierarchy and CreateFolder methods:
function addFolderTree() { window.event.returnValue = false; var strFolderTreePath = ""; strFolderTreePath = prompt("Please enter the path to the Folder Tree:","http://"); if (strFolderTreePath == "") { alert("You must enter a valid path!"); return; } else if (strFolderTreePath == null) { return; } else { //Add the folder tree to the hierarchy objTree.addHierarchy(strFolderTreePath, false); } } function createFolder() { window.event.returnValue = false; //Get the globally selected node if (strURLSelectedFolder == "") { alert("You must select a folder first!"); return; } else { var strFolderName = prompt("Please type a name for the folder", "New Folder"); if(strFolderName == "") { alert("You must enter a valid folder name!"); return; } else if(strFolderName == null) { return; } else { objTree.createFolder(strURLSelectedFolder, strFolderName, "urn:content-classes:folder"); } } } The addHierarchy method takes three parameters, of which the last two are optional. Looking through the JavaScript code for the function, the first parameter is the URL to the folder tree that you want to render. The second is a Boolean that specifies whether the tree should be expanded by default. A value of false will make the tree not expanded by default. The final parameter is an optional display name for the folder tree.
The createFolder method takes as its first parameter the URL of the parent folder in which you want to create the folder as a subfolder. The second parameter is the new folder name. The final parameter is the content class of the new folder. The control will attempt to create the new folder, and if successful, it will refresh with the new folder in its proper location.
You can also listen for events. The two events we registered for in the sample were onAddHierarchy and onPickFolder . The control calls the code when these events occur. As you can guess by their names, the onAddHierarchy event handler is called when a new hierarchy is added to the control, and the onPickFolder event is called when a user picks a folder. The following is the event handler code for both of these events:
function objTree_OnPickFolder() { //alert(event.URL); strURLSelectedFolder = event.URL; } function objTree_OnAddHierarchy() { //LastRenderedURL contains the URL to the last hierarchy //rendered by the control if(event.LastRenderedURL==document.all.cmdText.innerText) { //Just rendered out the correct URL, stop trying to render it document.all.cmdTextComplete.innerText = "True"; //Hide the status text document.all.AddingFolderTree.style.display = "none"; } } The onPickFolder code just sets a global variable to the URL of the folder that the user picked so that the rest of the code in the application can know that information. The onAddHierarchy code checks to see if the last URL that was rendered by the control is equal to the URL that the user wants to add to the control. If it is not, the code displays a nice message stating that it's loading the hierarchy you selected. Once the hierarchy is loaded and it is the last rendered URL, the code removes that message from the Web page because the folder tree is visible.
One event that I do not use but you should look at is the onContextMenu event. You can find more information about this control in the article "Customizing Microsoft Outlook Web Access" on the Microsoft Technet Web site. This event is called to display the custom right-click shortcut menus in OWA. You can customize these shortcut menus to add your own commands. I warn you that this is not for the faint of heart. It involves using another HTC called dropmenu.htc. The following code adds the necessary reference to this HTC to our Web page:
<?XML:NAMESPACE PREFIX="WM"/> <STYLE> WM\:DROPMENU { BEHAVIOR:url(/exchweb/controls/dropmenu.htc); } </STYLE> <LINK rel=stylesheet type=text/css href="/exchweb/controls/navbar.css"> The next step is to define your drop-down menu using the XML format that OWA understands, as in this example:
<WM:DROPMENU id=idDropMenu class="nbDropMenu" HOLDSTYLE=false menuName="itemMenu" style="font-family: arial; font-size:24"> <WM:MENUROW> <WM:MENUITEM type="default"> <WM:MENUITEMIMG/> <WM:MENUITEMCAPTION>My custom dropdown</WM:MENUITEMCAPTION> <WM:MENUITEMSCRIPT> MyJavaScriptHere();AnotherJavaScriptFunction(); </WM:MENUITEMSCRIPT> </WM:MENUITEM> </WM:MENUROW> <WM:MENUDIVIDER/> <WM:MENUROW> <WM:MENUITEM type="default"> <WM:MENUITEMIMG/> <WM:MENUITEMCAPTION>My custom dropdown2</WM:MENUITEMCAPTION> <WM:MENUITEMSCRIPT> CustomJavaScript();YetAnotherJavaScriptFunction(); </WM:MENUITEMSCRIPT> </WM:MENUITEM> </WM:MENUROW> </WM:DROPMENU>
Next we add to our folder tree definition that we want to also handle the oncontextmenu event. Here's the folder tree definition from before with this new event handler added:
<WM:TreeView id="objTree" style='' onPickFolder = "objTree_OnPickFolder()" onAddHierarchy = "objTree_OnAddHierarchy()" imagePath = "/exchweb/img/" oncontextmenu="myContextMenu()" />
Finally, we need to implement the myContextMenu function. The code for this is simple. It just calls the menuShow method, which shows our custom menu.
function myContextMenu() { // make our menu visible idDropMenu.menuShow(true); // Don't let the browser bubble up the right click event.returnValue = false; } 
EAN: 2147483647
Pages: 227