Web Component Architecture

A Web component is developed using a file called an initialization file (.ini) that specifies settings for the component, optional HTML files that contain scripting to add the functionality of an interactive component, and optional image files and other files to be included in the HTML file. The initialization file is saved to the following directory:

 
 C:\<Office_Directory>\Office11\<LanguageID>\webcomp 

NOTE

The Language ID is a numeric identifier for your version of Office. For example, the English version of Office uses 1033 as the Language ID.


HTML files and additional files required by the component are saved in a subfolder underneath the folder where the initialization file is saved. The name of that subfolder must be identical to the name of the Web component as specified in the initialization file.

Understanding the Initialization File

Web components all rely on an initialization file for their functionality. This file simply describes the component, specifies how it is to appear in FrontPage, and points to any other files that the component relies on. Let's have a look at a typical initialization file. Listing D.1 shows the initialization file from the JumpURL Web component that is included with the FrontPage 2002 Software Developer's Kit.

Listing D.1 The JumpURL Initialization File

[View full width]

 [Component] Name="JumpURL" Caption="Creates drop-down menu lists by automatically generating the JavaScript and HTML graphics/ccc.gif code" Sorted=True Type=Text [Component.Options] Option1=JumpURL with Go Button Option2=Instant JumpURL [JumpURL with Go Button] Name="JumpURL with Go Button" Description="Insert drop-down menu list with Go Button into your document." URL="C:\Program Files\Microsoft Office\Office10\1033\webcomp\jumpURL\jumpURL.htm" [Instant JumpURL] Name="Instant JumpURL" Description="Insert drop-down menu list into your document." URL="C:\Program Files\Microsoft Office\Office10\1033\webcomp\jumpURL\jumpURL2.htm" 

The initialization file is broken up into sections with each section header surrounded by square brackets. In the JumpURL file shown in Listing D.1, most of the sections for an initialization file are listed. The JumpURL component is added to the Insert Web Component dialog box in FrontPage using the settings specified in the initialization file as seen in Figure D.2.

Figure D.2. The JumpURL and its sub-options as seen in the Insert Web Component dialog box in FrontPage.

graphics/ap04fig02.gif

The [Component] Section

The first section in the initialization file is the [Component] section. The [Component] section contains many different settings for the Web component, some of which are seen in Listing D.1.

The following settings are used in the [Component] section:

  • Name This text appears in the FrontPage Insert Web Component dialog box. In the case of the JumpURL initialization file in Listing D.1, JumpURL is displayed in the Insert Web Component dialog box.

  • CommentText Specifies the purple comment text that appears in FrontPage's Design view when the Web component is inserted on to a page. This setting is not included in the initialization file in Listing D.1 because the JumpURL component uses sub-options and the CommentText setting is not used if a component uses sub-options.

  • Type This optional setting specifies how the component appears in the Insert Web Component dialog box. Values for this setting are Text, IconAndText, and Image. If it is not specified, it defaults to Text.

  • ImageFile This optional setting specifies the name of the icon file that is used for the component in the Insert Web Component dialog box.

  • Caption This optional setting is only included if your component has sub-options. Sub-options appear in the right side of the Insert Web Components dialog box, and the text specified with the Caption setting appears directly above the list of sub-options.

  • Sorted This optional setting specifies whether sub-options are sorted by name. If the value is not equal to True or 1, sub-options will appear in the same order as they are listed in the initialization file.

TIP

To make your Web component stand out in the Web Component list, create an icon for it.


The [Component.Options] Section

The next section of the initialization file is the [Component.Options] section. This section specifies any sub-options for the component. Sub-options appear in the right side of the Insert Web Component dialog box, as you saw in Figure D.2. The [Component.Options] section of the initialization file contains a list of sub-options for the component defined as Option1, Option2, and so on. The value of each setting in the [Component.Options] section specifies the section in the initialization file that contains settings for that particular sub-option.

In Listing D.1, you can see that the JumpURL component has two sub-options called JumpURL with Go Button and Instant JumpURL. Therefore, there will be a JumpURL with Go Button section and an Instant JumpURL section in the initialization file. Each one of these sections can have the following settings:

  • Name The name that is displayed in the right side of the Insert Web Components dialog in FrontPage.

  • Description This optional setting specifies the text displayed at the bottom of the Insert Web Component dialog box when the component is selected.

  • URL This URL is the path to the file that displays when the component is inserted. The URL can be an HTTP path on the Internet or Intranet, or it can be a file path to the user's local machine or a network share.

  • ImageFile This optional setting specifies the image file to be displayed next to the component's name in the Insert Web Component dialog box.

The [<ComponentName>.HTML] Section

The last section of the initialization file, and one that is not present in Listing D.1, is an optional section used for noninteractive components called [<ComponentName>.HTML]. For example, if the Instant JumpURL sub-option of the JumpURL component were a noninteractive component, the section would be called [Instant JumpURL.HTML], and it would contain settings to specify the HTML to insert when the option is selected. This section is only used if a URL setting is not specified for the sub-option.

The [<ComponentName>.HTML] section has a setting called HTMLn, where n is equal to an incrementing numeric value. Suppose you were developing a noninteractive component called InsertJimcoLink that added a link to the Jimco Add-ins Web site when it was selected. In that case, the [<ComponentName>.HTML] section would appear as shown here:

 
 [InsertJimcoLink.HTML] HTML1="<a href='http://www.jimcoaddins.com'>Jimco Add-ins</a>" 

When the component is selected and inserted, FrontPage would simply insert the HTML specified in the initialization file. If other lines of HTML were required, they could be specified as HTML2, HTML3, and so on.

Understanding the HTML File(s)

The HTML file for a Web component consists of the user interface for the component and script that is used to provide for the functionality of the component. For example, the JumpURL component allows you to build a dropdown list that will take you to a URL you specify depending on which option you select in the dropdown. Figure D.3 shows the jumpURL.htm page opened in FrontPage, and Figure D.4 shows the user interface for the JumpURL Web component. The size of the window that is displayed for the Web component is not configurable. It will always be 608x427 in size. However, the window is resizable by the user of your component by dragging the borders.

Figure D.3. The jumpURL.htm page provides the user interface for the JumpURL Web component.

graphics/ap04fig03.jpg

Figure D.4. The JumpURL Web component dialog box in FrontPage.

graphics/ap04fig04.jpg

When you configure the Web component inside the dialog box, client-side JavaScript runs on the page that determines how the Web component behaves. In the case of the JumpURL component, the script is fairly complex, but it's much less complex than learning C++ a complicated and complex computer language that is used to write FrontPage Components.

TIP

A FrontPage Component (also called a FrontPage Web Component) is similar to a Web component, but the user interface of a FrontPage Component can be much more complex because they aren't made from HTML files.


Figure D.5 shows the JumpURL component after it has been inserted in a Web page. This component is a genuine FrontPage Web component, and if you look at the code of the page (seen in Figure D.6), you can see that FrontPage uses the <webbot> tag to store information about the component. This makes it very easy to edit the component by simply double-clicking on it inside of FrontPage to bring up the component's user interface.

Figure D.5. The JumpURL component after being inserted on to a Web page.

graphics/ap04fig05.gif

Figure D.6. The code for the JumpURL that was inserted shows the familiar <webbot> tag.

graphics/ap04fig06.gif

In case you haven't yet realized it, this approach has an incredible benefit to Web component developers. You can keep the files that implement your Web component on a Web site or on a network share. If you need to fix a bug or add a feature, you simply make your change and then overwrite the existing files. The next time that a user of your component pulls up the component, she will automatically see the new version.

TIP

If you host your Web component on the Internet instead of on the user's local machine, the user of your component will have to be connected to the Internet whenever he is using your component. Otherwise, he will see an error message in the dialog box for your component. Keep that in mind when you are deciding on where to hose your component.




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