Front and Center: Building a Web Component

NOTE

The files that you create in this section are also found on the CD that accompanies this book.


I've always said that if you really want to learn how to do something, just do it. Let's build a Web component so that you can get a better understanding of exactly how they work.

Suppose you wanted to build a Web component that allows a user to insert an Add to Favorites link. You want to allow users to specify what text is used for the link. You also want to allow them to choose between a simple text link or a button. This is the perfect candidate for a Web component.

TIP

Because Web technologies are always changing, Web components represent the perfect way to implement added functionality in FrontPage. As Web technologies improve, you can redesign your Web component and the new version will be automatically delivered to the users of your component.


Creating an Initialization File

The first thing you will need is an initialization file. Open Notepad or your favorite text editor and create a new text file. Save the file as AddFavorite.ini in the directory of your choice (you will move it to the correct location later) and add the following code to it:

 

[View full width]

[Component] Name="Add to Favorites" Caption="Adds a link or button to add to Favorites." [Component.Options] Option1=AddToFavoriteLink Option2=AddToFavoriteButton [AddToFavoriteLink] Name="Add to Favorites Link" Description="Adds a link to add the site to Favorites." URL="C:\Program Files\Microsoft Office\Office11\1033\webcomp\AddFavorite\AddFavoriteLink.htm" [AddToFavoriteButton] Name="Add to Favorites Button" Description="Adds a button to add the site to Favorites." URL="C:\Program Files\Microsoft Office\Office11\1033\webcomp\AddFavorite\AddFavoriteButton graphics/ccc.gif.htm"

The initialization file will add a new Web component called Add to Favorites. It will have two sub-options one called Add to Favorites Link, and the other called Add to Favorites Button. The user interface for the Add to Favorites Link component is the AddFavoriteLink.htm file, and the user interface for the Add to Favorites Button component is the AddFavoriteButton.htm file. These files contain the implementation of the component, the code that makes it all work.

Creating the HTML Files

Create a new page in FrontPage, switch to Code view, and replace all HTML code in the file with the code from Listing D.2.

Listing D.2 The AddFavoriteLink.htm File

[View full width]

 <html> <head> <title>Add to Favorites</title> <script language="JavaScript"> <!-- function insertHTML(url, caption)   {   var code;   var linkText;   linkText = document.all.item("favText").value;   // generate some JavaScript...   code = '\n<SCRIPT LANGUAGE="JavaScript" type="text/javascript">\n';   code = code + '<!--\n';   code = code + 'function addFavLink(url, caption)\n';   code = code + '{\n';   code = code + '    if (document.all) {\n';   code = code + '      window.external.AddFavorite(url, caption);\n';   code = code + '    }\n';   code = code + '    return true;\n';   code = code + '};\n';   code = code + '-->\n';   code = code + '</'   code = code + 'SCRIPT>\n';   // generate HTML code...   code = code + '<a href="javascript:void(0);"     onclick="addFavLink(\'' + url + '\', \'' + caption + '\');">' +     linkText + '</a>'   window.external.WebComponent.PreviewHTML = code;   window.external.WebComponent.HTML = code;   window.external.WebComponent.Tag = "body";   window.external.Close(true);   return true;   } function defaultText()   {   document.all.item('favText').focus();   return true;   } </script> </head> <body bgcolor="#FFFFFF" scroll=no onload="defaultText();"> <table border="0" cellpadding="3" style="border-collapse: collapse"   bordercolor="#111111" width="532" height="358" bgcolor="#336699">   <tr>     <td valign=top height=300 width="532">     <p><b><font face="Arial" color="#FFFFFF" size="4">Add to Favorites Web     Component</font></b></p>     <p><b><font face="Arial" color="#FFFFFF" size="2">         Text for the Add to Favorites Link:</font></b><br>     <input type="text"  size="50" name="favText"          style="font-family: Arial; font-size: 10pt"></p>     <p><font face="Arial" color="#FFFFFF" size="2"><b>Favorite URL: </b></font><br>     <input type="text"  size="50" name="favURL"          style="font-family: Arial; font-size: 10pt"></p>     <p><b><font face="Arial" color="#FFFFFF" size="2">Favorite Caption:</font>         </b><br>     <input type="text"  size="50" name="favCaption"          style="font-family: Arial; font-size: 10pt"></td>   </tr>   <tr>     <td valign="top" align="right" width="532">           <br> <button  style="width:70" accesskey="o" onClick="insertHTML(document.all.item('favURL').value, document.all.item('favCaption') graphics/ccc.gif.value);"> <u>O</u>K </button>&nbsp;&nbsp; <button  accesskey="c" onClick="window.external.Close();"> <u>C</u>ancel </button>     </td>   </tr> </table> </body> </html> 

The code in Listing D.2 consists primarily of the insertHTML JavaScript function. The function takes two parameters one called url that will hold the URL for the favorite link, and one called caption that will hold the text to display in the browser window for the favorite link. The insertHTML function builds the JavaScript code that will be written to the page when the component is inserted and stores it in a variable called code.

At the end of the insertHTML function, some of the WebComponent properties are set with the following lines of code:

 
 window.external.WebComponent.PreviewHTML = code; window.external.WebComponent.HTML = code; window.external.WebComponent.Tag = "body"; 

This code sets three different properties: PreviewHTML, HTML, and Tag. These are properties of FrontPage Web components that determine how the component is added to the page.

  • PreviewHTML This property sets the HTML code that is used to render the component in Design view in FrontPage.

  • HTML This property sets the HTML code that displays the component in the Web browser or in Preview view in FrontPage.

  • Tag This property sets the HTML tag into which the component is inserted.

These properties are written into the <webbot> tag that FrontPage generates. After your Web Component has been inserted, it can be edited by double-clicking on it to bring up your Web Component dialog box. The Web Component properties are available to you when the component is being edited, which means that you can write more JavaScript into the component so that the values entered are repopulated into the component when it is edited.

To create the Web Component that uses a button instead of a link, create another new file, switch to Code view, and replace all the existing HTML with the HTML from Listing D.3.

Listing D.3 The AddFavoriteButton.htm File

[View full width]

 <html> <head> <title>Add to Favorites</title> <script language="JavaScript"> <!-- function insertHTML(url, caption)   {   var code;   var linkText;   linkText = document.all.item("favText").value;   // generate some JavaScript...   code = '\n<SCRIPT LANGUAGE="JavaScript" type="text/javascript">\n';   code = code + '<!--\n';   code = code + 'function addFavLink(url, caption)\n';   code = code + '{\n';   code = code + '    if (document.all) {\n';   code = code + '      window.external.AddFavorite(url, caption);\n';   code = code + '    }\n';   code = code + '    return true;\n';   code = code + '};\n';   code = code + '-->\n';   code = code + '</'   code = code + 'SCRIPT>\n';   // generate HTML code...   code = code + '<button    onclick="addFavLink(\'' + url + '\', \'' + caption + '\');">' + linkText + '</button>';   window.external.WebComponent.PreviewHTML = code;   window.external.WebComponent.HTML = code;   window.external.WebComponent.Tag = "body";   window.external.Close(true);   return true;   } function defaultText()   {   document.all.item('favText').focus();   return true;   } </script> </head> <body bgcolor="#FFFFFF" scroll=no onload="defaultText();"> <table border="0" cellpadding="3" style="border-collapse: collapse"  bordercolor="#111111" width="532"  height="358" bgcolor="#336699">   <tr>     <td valign=top height=300 width="532">     <p><b><font face="Arial" color="#FFFFFF" size="4">Add to Favorites Web     Component</font></b></p>     <p><b><font face="Arial" color="#FFFFFF" size="2">         Text for the Add to Favorites Button:</font></b><br>     <input type="text"  size="50" name="favText"          style="font-family: Arial; font-size: 10pt"></p>     <p><font face="Arial" color="#FFFFFF" size="2"><b> Favorite URL:</b></font><br>     <input type="text"  size="50" name="favURL"          style="font-family: Arial; font-size: 10pt"></p>     <p><b><font face="Arial" color="#FFFFFF" size="2">Favorite Caption:         </font></b><br>     <input type="text"  size="50" name="favCaption"          style="font-family: Arial; font-size: 10pt"></td>   </tr>   <tr>     <td valign="top" align="right" width="532">           <br> <button  style="width:70" accesskey="o" onClick="insertHTML(document.all.item('favURL').value, document.all.item('favCaption') graphics/ccc.gif.value);"> <u>O</u>K </button>&nbsp;&nbsp; <button  accesskey="c" onClick="window.external.Close();">  <u>C</u>ancel </button>     </td>   </tr> </table> </body> </html> 

Most of the code in these files consists of the HTML code necessary to render the user interface. As a power user of FrontPage, you should already be familiar with that code. The code in the insertHTML JavaScript function makes the Web component work. Going into the details of that JavaScript is outside of the scope of this chapter, but excellent resources are available on JavaScript if you need more information.

NOTE

For more information on JavaScript, read Special Edition Using JavaScript from Que Publishing.


Installing Your Component

Now that all the files for your component are complete, you simply need to copy the files into the correct locations and your Web component is ready for use.

Copy the AddFavorite.ini file to the C:\<Office_Folder>\Office11\<LanguageID>\Webcomp folder on your machine. On my computer, that folder is C:\Program Files\Microsoft Office\Office11\1033\Webcomp. It might be different on your computer.

Next, create a new folder inside the folder you copied the AddFavorite.ini file into and name the new folder AddFavorite. Copy the AddFavoriteLink.htm and the AddFavoriteButton.htm files into the AddFavorite folder. Your Web component is now installed and ready to be used.

Open or create a Web page in FrontPage and select Insert, Web Component. Scroll down the Component Type list until you find your Add to Favorites component and select it. Select either the Add to Favorites Link or the Add to Favorites Button component and then click Finish. Enter the information for your component and click OK to insert it. Save your page and preview it in your browser to see your component in action.

If you want to extend this component, you can add code to the defaultText JavaScript function that will repopulate the component's user interface with the previous values when the component is being edited. Experiment with Web components and have some fun!



Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net