Chapter 13 Web Navigation Controls

CONTENTS

Microsoft IE30 Button-Menu Control
- Source
- Properties
- Methods
- Events
- Example
Microsoft IE30 Popup Menu Control
- Source
- Properties
- Methods
- Events
- Example
Microsoft IE30 Popup Window Control
Microsoft IE30 PreLoader Control
- Source
- Properties
- Method
- Events
- Example
Microsoft IE30 Stock Ticker Control
Microsoft IE30 View Tracker Control
- Source
- Properties
- Method
- Events
- Example
Microsoft IE30 Timer Control
- Source
- Properties
- Method
- Event
- Example
Payment and Address Selector Control
IntraApp

When you develop dynamic Web pages with a Web Graphical User Interface, your applications approach the realms of normal desktop systems. The Button-Menu, Popup Menu, Popup Window, View Tracker, and the PreLoader controls enable you to provide your Web application user with an easy, friendly way to navigate through your system.

With static Web pages, the user is limited to the toolbar presented by the Web browser-the navigation is commonly done with the back and forward buttons, while the search, home, and refresh buttons provide a little more functionality.

You can use the Timer control to "actively" interact with the user by trapping the passage of time from your VBScripts. Other controls, described in this chapter as the Stock Ticker and the Payment and Address Selector. are suited for a specific user interface. For developing an effective Web appli-cation, these navigation controls rank next to the form and database controls in terms of their usability and importance.

This chapter concentrates on the Graphical User Interface (GUI), particularly the navigation and windowing controls. These controls help you to manage the user navigation from a web page similar to normal applications.

You will learn about each of these controls and discover where you can get them. Then you will learn about the properties, methods, and events available for use with each control.

Microsoft IE30 Button-Menu Control

The Microsoft IE30 Button-menu control implements a configurable menu for Web pages. This control is simple enough that you can load and display it quickly. It has good functionality to handle menu-related functions from VBScript or JavaScript.

Source

Vendor Information:

Figure 13.1 : Microsoft IE30 Button-Menu control

Properties

Table 13.1 Control Properties

Property	Description
`Alignment`	Aligns the caption of the text
`Caption`	Menu title
`CodeBase`	Origin of the control, including URL, file type, and version number
`ItemCount`	Number of items in the menu
`Height`	Vertical height of the object
`ID`	Name of the object or control
`MenuItem`	Menu item to be displayed
`Width`	Width of the control in points

Methods

Table 13.2 Control Methods

Method	Description
`AboutBox`	Displays the About window
`Additem`	Adds a menu item
`Clear`	Clears all menu items
`GetItem`	Fetches the name of the menu item
`PopUp`	Displays the menu as a pop-up
`RemoveItem`	Deletes the item from the menu

Events

Table 13.3 Control Events

Event	Description
`Click`	Triggers when the user clicks the menu. The user has not selected any menu item at this time.
`Select`	Triggers when the user selects a menu item

Example


<HTML>

<HEAD>

<TITLE>Menu Example</TITLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<OBJECT ID="mnuFile" WIDTH=80 HEIGHT=25 align=middle

 CLASSID="CLSID:52DFAE60-CEBF-11CF-A3A9-00A0C9034920">

     <PARAM NAME="CODEBASE"VALUE="

	 http://activex.microsoft.com/controls/iexplorer/btnmenu.ocx#Version=4,70,0,1161">

    <PARAM NAME="_ExtentX" VALUE="1693">

    <PARAM NAME="_ExtentY" VALUE="529">

    <PARAM NAME="Caption" VALUE="File">

    <PARAM NAME="Menuitem[0]" VALUE="New">

    <PARAM NAME="Menuitem[1]" VALUE="Open">

    <PARAM NAME="Menuitem[2]" VALUE="Save">

    <PARAM NAME="Menuitem[3]" VALUE="Close">

    <PARAM NAME="Menuitem[4]" VALUE="">

    <PARAM NAME="Menuitem[5]" VALUE="Exit">

</OBJECT>

<OBJECT ID="mnuEdit" WIDTH=80 HEIGHT=25 align=middle

 CLASSID="CLSID:52DFAE60-CEBF-11CF-A3A9-00A0C9034920">

     <PARAM NAME="CODEBASE" VALUE=

	 "http://activex.microsoft.com/controls/iexplorer/btnmenu.ocx#Version=4,70,0,1161">

    <PARAM NAME="_ExtentX" VALUE="1693">

    <PARAM NAME="_ExtentY" VALUE="529">

    <PARAM NAME="Caption" VALUE="Edit">

    <PARAM NAME="Menuitem[0]" VALUE="Undo">

    <PARAM NAME="Menuitem[1]" VALUE="Redo">

    <PARAM NAME="Menuitem[2]" VALUE="">

    <PARAM NAME="Menuitem[3]" VALUE="Cut">

    <PARAM NAME="Menuitem[4]" VALUE="Copy">

    <PARAM NAME="Menuitem[5]" VALUE="Paste">

</OBJECT>

</BODY>

</HEAD>

Microsoft IE30 Popup Menu Control

The Microsoft IE30 Popup Menu control implements a pop-up menu for Web pages. The menu provides a user-friendly Graphical User Interface (GUI) element.

Source

Vendor Information:

Figure 13.2 : Microsoft IE30 Pop-up Menu control

Properties

Table 13.4 Control Properties

Property	Description
`Alignment`	Aligns the caption of the text
`Caption`	Menu title
`CodeBase`	Origin of the control, including URL, file type, and version number
`ItemCount`	Number of items in the menu
`Height`	Vertical height of the object
`ID`	Name of the object or control
`MenuItem`	Menu item to be displayed
`Width`	Width of the control in points

Methods

Table 13.5 Control Methods

Method	Description
`AboutBox`	Displays the About window
`Additem`	Adds a menu item
`Clear`	Clears all menu items
`GetItem`	Fetches the name of the menu item
`PopUp`	Displays the menu as a pop-up
`RemoveItem`	Deletes the item from the menu

Events

Table 13.6 Control Events

Event	Description
`Click`	Triggers when the user clicks the menu by using the mouse. The user has not selected any menu item at this time.
`Select`	Triggers when the user selects a menu item

Example


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>

    <OBJECT ID="IEPOP1" WIDTH=0 HEIGHT=0

 CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2">

    <PARAM NAME="_ExtentX" VALUE="0">

    <PARAM NAME="_ExtentY" VALUE="0">

    <PARAM NAME="Menuitem[0]" VALUE="Popup menu Item #1">

    <PARAM NAME="Menuitem[1]" VALUE="Popup menu Item #2">

    <PARAM NAME="Menuitem[2]" VALUE="Popup menu Item #3">

    <PARAM NAME="Menuitem[3]" VALUE="Popup menu Item #4">

    <PARAM NAME="Menuitem[4]" VALUE="Popup menu Item #5">

</OBJECT>

    <OBJECT ID="btnShowMenu" WIDTH=187 HEIGHT=40

     CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">

        <PARAM NAME="Caption" VALUE="Show Popup Menu">

        <PARAM NAME="Size" VALUE="3964;847">

        <PARAM NAME="FontCharSet" VALUE="0">

        <PARAM NAME="FontPitchAndFamily" VALUE="2">

        <PARAM NAME="ParagraphAlign" VALUE="3">

    </OBJECT>

    <SCRIPT LANGUAGE="VBScript">

Sub btnShowMenu_Click()

     Call IEPOP1.PopUp

end sub

Sub IEPOP1_Click(ByVal x)

    Alert "Menu click on Popup menu item #" & x 

End Sub

</SCRIPT>

</BODY>

</HTML>

Microsoft IE30 Popup Window Control

The Microsoft IE30 popup window control implements a window that appears on command. It displays popup help, tool tips, or a Web page in a window.

NOTE

Source

Vendor Information:

Properties

Table 13.7 Control Properties

Property	Description
`Alignment`	Aligns the caption of the text
`Caption`	Menu title
`CodeBase`	Origin of the control, including URL, file type, and version number
`Height`	Vertical height of the object
`ID`	Name of the object or control
`Width`	Width of the control in points

Figure 13.3 : Microsoft IE30 Popup Window control

Methods

Table 13.8 Control Methods

Method	Description
`AboutBox`	Displays the About window
`PopUp`	Displays the pop-up window
`Dismiss`	Removes the pop-up window from the display

Events

The Microsoft IE30 Popup Window control does not provide any events.

Example


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>

    <SCRIPT LANGUAGE="VBScript">

<!--

Sub IeLabel1_Click()

PreVu1.Popup "http://www.microsoft.com/activex/gallery/gallery.htm", True

end sub

-->

    </SCRIPT>

    <OBJECT ID="IeLabel1" WIDTH=500 HEIGHT=50

     CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">

        <PARAM NAME="_ExtentX" VALUE="0">

        <PARAM NAME="_ExtentY" VALUE="0">

        <PARAM NAME="Caption" VALUE="Click Here for popup Window">

        <PARAM NAME="Angle" VALUE="0">

        <PARAM NAME="Alignment" VALUE="4">

        <PARAM NAME="Mode" VALUE="1">

        <PARAM NAME="FillStyle" VALUE="0">

        <PARAM NAME="FillStyle" VALUE="0">

        <PARAM NAME="ForeColor" VALUE="#000000">

        <PARAM NAME="BackColor" VALUE="#C0C0C0">

        <PARAM NAME="FontName" VALUE="Arial">

        <PARAM NAME="FontSize" VALUE="12">

        <PARAM NAME="FontItalic" VALUE="0">

        <PARAM NAME="FontBold" VALUE="0">

        <PARAM NAME="FontUnderline" VALUE="0">

        <PARAM NAME="FontStrikeout" VALUE="0">

        <PARAM NAME="TopPoints" VALUE="0">

        <PARAM NAME="BotPoints" VALUE="0">

    </OBJECT>

    <OBJECT ID="PreVu1" WIDTH=0 HEIGHT=0

     CLASSID="CLSID:A23D7C20-CABA-11CF-A5D4-00AA00A47DD2">

        <PARAM NAME="_ExtentX" VALUE="0">

        <PARAM NAME="_ExtentY" VALUE="0">

    </OBJECT>

</BODY>

</HTML>

Microsoft IE30 PreLoader Control

The Microsoft IE30 PreLoader control enables you to preload the existing cache on the user's system, including Web pages, graphics, sounds, or anything else you want. It can be used to speed up a user's time on your pages by preloading information while the user is reading through a page. This control will start downloading a page from an URL when enabled and will trigger the complete event when finished. This is a back-end control-a control that works behind the scenes without any direct user interface and without any visible output, as it is invisible at runtime.

Source

Vendor Information:

Figure 13.4 : Microsoft IE30 Stock Ticker control

Properties

Table 13.9 Control Properties

Property	Description
`Bytes`	The amount of data transferred in bytes
`CacheFile`	The local Web page cache file name
`CodeBase`	Origin of the control, including URL, file type, and version number
`Enable`	True to enable the control
`ID`	Name of the object or control
`Percentage`	The amount of data transferred in percentage
`URL`	The download Web page URL

Method

Table 13.10 Control Method

Method	Description
`AboutBox`	Displays the About window

Events

Table 13.11 Control Events

Event	Description
`Complete`	Triggers when the Web page download is completed successfully
`Error`	Triggers when the control encounters an error during downloading

Example


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>



<OBJECT ID="PreLoader1" WIDTH=0 HEIGHT=0

 CLASSID="CLSID:16E349E0-702C-11CF-A3A9-00A0C9034920">

    <PARAM NAME="_ExtentX" VALUE="0">

    <PARAM NAME="_ExtentY" VALUE="0">

    <PARAM NAME="URL" VALUE="www.mcp.com">

    <PARAM NAME="enable" VALUE="0">

</OBJECT>



</BODY>

</HTML>

Microsoft IE30 Stock Ticker Control

The Microsoft IE30 stock ticker control implements the display of continuous data. The main application is the stock market data. The data can be in text or the XRT format. The XRT format is the Microsoft Windows Open Services Architecture Extensions for Real-Time Market Data.

Source

Vendor Information:

Properties

Table 13.12 Control Properties

Property	Description
`BackColor`	The background color of the control display
`CodeBase`	Origin of the control, including URL, file type, and version number
`DataObjectActive`	True, if the control is active
`DataObjectName`	Data source name
`DataObjectNameProperty`	The property that has the data name in the data source
`DataObjectRequest`	The request string to get the data object name
`DataObjectValueProperty`	The property that has the data object value in the data source
`ForeColor`	The control's foreground color
`Height`	Vertical height of the object
`ID`	Name of the object or control
`OffsetValues`	Vertical offset, in pixels, of the data from the name
`ReloadInterval`	The interval to reload the data from the URL
`ScrollSpeed`	Displays the scroll speed
`ScrollWidth`	The scroll distance
`Width`	Width of the control in points

Method

Table 13.13 Control Method

Method	Description
`AboutBox`	Displays the About window

Events

The Microsoft IE30 Stock Ticker control does not provide any events.

Example


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

<OBJECT ID="iexrt1" WIDTH=292 HEIGHT=108

 CLASSID="CLSID:0CA4A620-8E3D-11CF-A3A9-00A0C9034920">

    <PARAM NAME="_ExtentX" VALUE="6181">

    <PARAM NAME="_ExtentY" VALUE="2286">

    <PARAM NAME="DataObjectName" VALUE="H:\BOOK\ActiveX\V1\13-04.xrt">

    <PARAM NAME="DataObjectNameProperty" VALUE="Name">

    <PARAM NAME="DataObjectValueProperty" VALUE="Value">

    <PARAM NAME="DataObjectRequest" VALUE="*">

    <PARAM NAME="ScrollSpeed" VALUE="100">

    <PARAM NAME="ReloadInterval" VALUE="5000">

    <PARAM NAME="ForeColor" VALUE="#FF0000">

    <PARAM NAME="BackColor" VALUE="#0000FF">

    <PARAM NAME="BackColor" VALUE="16711680">

    <PARAM NAME="ScrollWidth" VALUE="5">

    <PARAM NAME="DataObjectActive" VALUE="1">

    <PARAM NAME="DataObjectVisible" VALUE="0">

    <PARAM NAME="OffsetValues" VALUE="10">

</OBJECT>

</HEAD>

<BODY>

</BODY>

</HTML>

Microsoft IE30 View Tracker Control

The Microsoft IE30 view tracker control implements an activeX control to recognize events when a user scrolls through a portion of the Web page. That is, the View Tracker control can be placed on a Web page and it will trigger events as the user scrolls through that page.

Source

Vendor Information:

Properties

Table 13.14 Control Properties

Property	Description
`CodeBase`	Origin of the control, including URL, file type, and version number
`Height`	Vertical height of the object
`ID`	Name of the object or control
`Image`	The image to be displayed for the control
`Width`	Width of the control in points

Method

Table 13.15 Control Method

Method	Description
`AboutBox`	Displays the About window

Events

Table 13.16 Control Events

Event	Description
`OnHide`	Triggers when this control is in the viewing area
`OnShow`	Triggers when this control is no longer visible

Example


<OBJECT ID="IeTrk1" WIDTH=17 HEIGHT=15

 CLASSID="CLSID:1A771020-A28E-11CF-8510-00AA003B6C7E"

 DATA="DATA:application/x-oleobject;BASE64,

 IBB3Go6izxGFEACqADtsfiFDNBIIAAAAUwEAAD4BAAAm6gEAAAAAAA== ">

</OBJECT>

Microsoft IE30 Timer Control

The Microsoft IE30 timer control implements a timer function that can be recognized from the script-you set the timer interval and it triggers a periodic event at that fixed interval. Scripts can be used to perform tasks in response to those event. This is a back-end control that works behind the scenes without any direct user interface. The Timer Control does not have any visible output as it is invisible at runtime.

Source

Vendor Information:

NOTE

Properties

Table 13.17 Control Properties

Property	Description
`CodeBase`	Origin of the control, including URL, file type, and version number
`Enabled`	True, when the timer control is active
`Height`	Vertical height of the object
`ID`	Name of the object or control
`Interval`	The time interval, in milliseconds, when the timer event will trigger
`Width`	Width of the control in points

Method

Table 13.18 Control Method

Method	Description
`AboutBox`	Displays the About window

Event

Table 13.19 Control Event

Event	Description
`Timer`	Triggers after every unit of time shown by the interval property

Example


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>

    <SCRIPT LANGUAGE="VBScript">

<!--

Sub IeTimer1_Timer()

'==========================================

'Some code to respond to the periodic event

'In this case every 30 seconds

'==========================================

end sub

-->

    </SCRIPT>

    <OBJECT ID="IeTimer1" WIDTH=38 HEIGHT=38

     CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-00AA00A47DD2">

        <PARAM NAME="_ExtentX" VALUE="804">

        <PARAM NAME="_ExtentY" VALUE="804">

        <PARAM NAME="Interval" VALUE="30">

    </OBJECT>

</BODY>

</HTML>

Payment and Address Selector Control

The Microsoft IE30 Payment and Address Selector control implements the secure address and payment information store at the local machine. You can use this control in your electronic commerce projects as a means to collect, save, and transmit credit card information, address information, and so on.

Source

Vendor Information:

Figure 13.5 : Payment and Address Selector control

Properties

Table 13.20 Control Properties

Property	Description
`AcceptedTypes`	The types of cards accepted by the control
`CodeBase`	Origin of the control, including URL, file type, and version number
`DarkShadow3D`	The color for the 3-D dark shadow
`Face3D`	The color for the 3-D face
`Font`	The font for the control
`GrayTextColor`	The color for gray text
`Height`	Vertical height of the object
`Hilight3D`	The 3-D highlight color
`ID`	Name of the object or control
`Left`	The location of the left corner of the control
`Light3D`	The color for light 3-D shadow
`OrderHash`	the order's data hash or signature
`Shadow3D`	The 3-D shadow color
`TextColor`	The color for the text foreground
`Width`	Width of the control in points

Methods

Table 13.22 Control Methods

Method	Description
`AboutBox`	Displays the About window
`GetLastError`	Fetches the error encountered
`GetPaymentValues`	Displays the payment form and gets entries from the user
`GetValue`	Fetches a single element

Events

The Payment and Address Selector control does not provide any events.

Example


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>



<OBJECT ID="PaymentSelector1" WIDTH=155 HEIGHT=127

 CLASSID="CLSID:87D3CB66-BA2E-11CF-B9D6-00A0C9083362">

    <PARAM NAME="_ExtentX" VALUE="3281">

    <PARAM NAME="_ExtentY" VALUE="2667">

    <PARAM NAME="Hilight3D" VALUE="#dae1ed">

    <PARAM NAME="Light3D" VALUE="#b4c3dc">

    <PARAM NAME="Face3D" VALUE="#b4c3dc">

    <PARAM NAME="Shadow3D" VALUE="#587ab1">

    <PARAM NAME="DarkShadow3D" VALUE="#000000">

    <PARAM NAME="TextColor" VALUE="#000000">

    <PARAM NAME="GrayTextColor" VALUE="#587ab1">

    <PARAM NAME="Font" VALUE="MS Sans Serif, 10.0">

    <PARAM NAME="AcceptedTypes" VALUE="">

    <PARAM NAME="Total" VALUE="">

    <PARAM NAME="OrderHash" VALUE="">

</OBJECT>



</BODY>

</HTML>

IntraApp

The DameWare intraApp control implements a virtual desktop or application launcher that enables the user to set up and host local or Web based applications. This can act as a home page for applications, especially for intranet applications. The application icons, title, and so on, are laid out in a configuration file (the format is the same as the Windows INI file).

Source

Vendor Information:

Figure 13.6 : IntraApp control

Properties

Table 13.23 Control Properties

Property	Description
`BackColor`	The background color of the control
`BorderStyle`	Set to True to enable the border around the control
`ButtonText`	The text of the run or open folder button
`CodeBase`	Origin of the control, including URL, file type, and version number
`ConfigurationFile`	The configuration file that contains the settings
`ForeColor`	The foreground color of the control
`ItemCount`	Number of items in the menu
`Height`	Vertical height of the object
`hWND`	The window handle of the control window
`ID`	Name of the object or control
`Width`	Width of the control in points

Methods

Table 13.24 Control Methods

Method	Description
`AboutBox`	Displays the About window
`DisplayProperties`	Displays the Properties dialog box for the items in this control
`Execute`	Starts an application item in this control

Events

The DameWare IntraApp control does not provide any events.

Example


<OBJECT ID="IntraApp1" WIDTH=173 HEIGHT=122

 CLASSID="CLSID:94C31Cf1-2698-11D0-b10F-0000f63A6615">

    <PARAM NAME="_Version" VALUE="65536">

    <PARAM NAME="_ExtentX" VALUE="3688">

    <PARAM NAME="_ExtentY" VALUE="2588">

    <PARAM NAME="_StockProps" VALUE="41">

</OBJECT>