Previous Page TOC Next Page



Appendix A


Internet Explorer 3.0


by Weiying Chen


Microsoft Internet Explorer 3.0 provides a number of revolutionary features to the Web users. These features include ActiveX content, personalization capability, Internet mail, news, chatting, and Internet security support.

ActiveX content features include HTML enhancement, ActiveX controls used inside IE 3.0, ActiveX scripting use including VBScript and JavaScript, ActiveX document support so that the Document object such as Microsoft Word can be seamlessly embedded in the IE 3.0.

This appendix will focus on the ActiveX content features and along with a discussion on the other features such as Internet security, personalization, and communication. Each of the ActiveX content features will be presented in detail and reflected in the example used next.

ActiveX Content Feature Showcase


Let's take a look at the Web page shown in Figure A.1.

Figure A.1. ActiveX Content Feature showcase.

Note


To view this page, please create a directory called xa under wwwroot and then copy all the *.htm, *.gif, *.dll and *.doc files contained in the CD to that directory. And make sure redir.dll is under scripts directory. redir.dll does not include this CD because it is not created by me, but it can be found in a lot of places. Enter http://yourmachine/xa/a1.htm in the address edit box in the IE 3.0.

There are three frames in this page. IE 3.0 supports frame which includes bordered, borderless, targeted window, and floating frame. Frame allows you to divide the page into independent windows. Each independent window is actually a browse. Look at the source code for this page in Listing A.1.

Listing A.1. a1.htm source code.


<HTML>

<HEAD>

<TITLE>

ActiveX Programming Unleashed - Appendix A

</TITLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF TOPMARGIN=0 LEFTMARGIN=0 VLINK=#000080>

<FRAMESET rows = "25%, *" FRAMEBORDER=0>

<FRAME name="top" src ="/xa/a2.htm" scrolling="NO">

<FRAMESET cols="55%,*" FRAMEBORDER = 0>

    <FRAME name = "leftbottom" marginwidth=5 marginheight=5  SCROLLING ="yes" 

[icc]src="/xa/a3.htm">

    <FRAME name = "rightbottom" marginwidth=10 marginheight=10 SCROLLING="yes"

[icc]src="/xa/a4.htm">

</FRAMESET>

</FRAMESET>

</BODY>

</HTML>

In Listing A.1, Tag FRAMESET defines layout of frames within a page. The attribute rows divides the page into rows. In this case, there are two rows. cols divides the page into columns. 25% means that the first row will occupy 25% of the window. FRAME tag defines the independent windows. The window style can be specified by using attributes such as MARGINWIDTH, MARGINHEIGHT, SCROLLING, FRAMEBORDER, and so on. NAME attribute can be used to specify the frame name. There are three frames in the frameset, named top, leftbottom, rightbottom.

ActiveX Controls and ActiveX Scripting


The frame named top consists of five elements, its source address is a2.htm. This frame demonstrates ActiveX content, including the use of VBScript and JavaScript, object model exposed by IE 3.0, ActiveX control used in VBScript, aligning text in adjacent cells by baseline and marquee.

The first element is the .GIF about Internet Explorer. The second element is the greeting (good morning, good afternoon, and good evening) depending on when the page is viewed, which is written in JavaScript. The third is to display your machine name, which is implemented by VBScript and an ActiveX control named lst44.dll. lst44.dll is created in Chapter 4, "Creating OLE Automation Servers." The fourth is the .GIF dotted line. The last one is a scrolling marquee using marquee tag.

Let's take a look at Listing A.2 for the source code (a2.htm) of the frame named top.

Listing A.2. a2.htm source code.


<HTML>

<HEAD>

<OBJECT   ID="MachineName"

     CLASSID="clsid:C566CC25-182E-11D0-A6AD-00AA00602553"

    CODEBASE="http://weiying1/xa/lst44.dll"

    ALIGN="baseline" BORDER="0" WIDTH="0" HEIGHT="0"

    TYPE="application/x-oleobject">

</OBJECT>

</HEAD>

<BODY BGCOLOR=#FFFFFF TOPMARGIN=0 LEFTMARGIN=0 VLINK=#000080>

<TABLE CELLPADDING=3 BORDER=0 CELLSPACING=0>

<TR VALIGN=TOP >

<TD>

<IMG SRC="/xa/ie.gif"  WIDTH=360 HEIGHT=60>

</TD>

<FONT SIZE=4>

<TD VALIGN=MIDDLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

    var date = new Date()

    var hour = date.getHours()

    if (hour < 12)

        document.write("Good morning!")

    else

        if (hour < 17)

            document.write("Good afternoon!")

        else

            document.write("Good evening!")

-->

</SCRIPT>

<SCRIPT LANGUAGE="VBSCRIPT">

    document.write "<br>Your machine name is:"

    document.write MachineName.getMachineName

</SCRIPT>

</FONT>

</TD>

</TR>

</TABLE>

<IMG SRC="dot.gif" WIDTH=600 HEIGHT=1>

<FONT SIZE=2 COLOR="green"><MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT BORDER="0">

Microsoft Internet Explorer 3.0 with ActiveX technologyt</MARQUEE></FONT>

<IMG SRC="dot.gif" WIDTH=600 HEIGHT=1>

</BODY>

</HTML>

In Listing A.2, tag OBJECT inserts an OLE control; its ID is MachineName. CLASSID identifies the object implementation. CODEBASE identifies the codebase for the object. TYPE indicates the internet media type.

Observant readers will notice the following code. Note that the following code is abridged from Listing A.2 to emphasize the essential parts:


<TD VALIGN=MIDDLE>

<SCRIPT LANGUAGE="JavaScript">

Attribute VALIGN for tag TD will align text in adjacent cells by baseline. This is a features provided by IE 3.0 for enhanced tables. The other features for enhanced tables are rows and columns grouping, selectable borders, and background-images placement in individual table cells.

Tag SCRIPT specifies the inclusion of a script. The attribute LANGUAGE indicates in which ActiveX scripting language the enclosed script is written. There are two popular scripting languages: VBScript and JavaScript.

VBScript and JavaScript both support a set of built-in functions. For instance,


var date = new Date()

date is an object provided by JavaScript.

In addition to the built-in functions, the ActiveX scripting languages can also access the object model exposed by IE 3.0. For instance, in the following code:


<SCRIPT LANGUAGE="VBSCRIPT">

    document.write "<br>Your machine name is:"

</SCRIPT>

document is the object exposed by the IE 3.0. write is a method exposed by the document object. Besides document object, there are other objects such as window, form, navigator, history, and so forth exposed by the IE 3.0. All these objects expose a set of methods, properties, or events. IE 3.0 also provides a set of intrinsic controls, which is used as the input in the form tag. The intrinsic controls include checkbox, hidden, image, password, radio, reset, submit, and text.

VBScript and JavaScript can also use the functionality exposed by the ActiveX controls. For instance:


document.write MachineName.getMachineName

MachineName is an OLE automation server. getMachineName is the method exposed by this automation server. MachineName.getMachineName will return the name of the machine where the browser is running.

HTML Enhancement and ActiveX Document


The frame named leftbottom demonstrates the use of VBScript, Meta tag, object model exposed by IE 3.0, ActiveX document, floating frames. Leftbottom frame consists of six elements: three .GIF and three floating frames. Take a look at Listing A.3 for the a3.htm source code.

Listing A.3. a3.htm source code.


<BODY BGCOLOR=#FFFFFF TOPMARGIN=0 LEFTMARGIN=0 VLINK=#000080>

<TABLE BORDER=0  ALIGN=left CELLSPACING=5>

<TR>

<TD ALIGN=left VALIGN=TOP>

<IMG SRC="/xa/active.gif">

</TD>

</TR>

<TR>

<TD>

<iFRAME SRC="/xa/active.htm" NAME="float1" WIDTH=400 HEIGHT=110 FRAMEBORDER=0>

<FRAME SRC="/xa/active.htm" NAME="float1" WIDTH=400 HEIGHT=110 FRAMEBORDER=0>

</iFRAME>

</TD>

</TR>

<TR>

<TD ALIGN=left VALIGN=TOP>

<IMG  SRC="/xa/secure.gif" ALT="Bullet">

</TD>

</TR>

<TR>

<TD>

<iFRAME SRC="/xa/secure.doc" NAME="float2" WIDTH=400  HEIGHT=110 FRAMEBORDER=0>

<FRAME SRC="/xa/secure.doc" NAME="float2" WIDTH=400  HEIGHT=110 FRAMEBORDER=0>

</iFRAME>

</TD>

</TR>

<TR>

<TD ALIGN=left VALIGN=TOP>

<IMG  SRC="/xa/more.gif" ALT="Bullet">

</TD>

</TR>

<TR>

<TD>

<iFRAME SRC="http://www.microsoft.com/ie/ie3/" NAME="float3" WIDTH=400 HEIGHT=

[icc]110 FRAMEBORDER=0>

<FRAME SRC="http://www.microsoft.com/ie/ie3/" NAME="float3" WIDTH=400  HEIGHT=

[icc]110 FRAMEBORDER=0>

</iFRAME>

</TD>

</TR>

</TABLE>

In Listing A.3, tag IFRAME indicates a "floating" window in a web page. The floating frame can be inserted into any place where an image can be put in a conventional browser. There are three floating frames in Listing A.3. They are called float1, float2, and float3.The SRC attribute specifies the source address for the floating frame. The source for float1 is active.htm as indicated in the following code:


<FRAME SRC="/xa/active.htm" NAME="float1" WIDTH=400 HEIGHT=110 FRAMEBORDER=0>

The source for float2 is secure.doc as indicates as follows:


 <FRAME SRC="/xa/secure.doc" NAME="float2" WIDTH=400  HEIGHT=110 FRAMEBORDER=0>

The source for float3 is http://www.microsoft.com/ie/ie3/ as indicated as follows:


<FRAME SRC="http://www.microsoft.com/ie/ie3/" NAME="float3" WIDTH=400  HEIGHT=110 FRAMEBORDER=0>

Different source will take different effect. Float1 will display different content every 20 seconds. Float2 is a Word document that can be seamlessly placed in the browser. Besides Word documents, Microsoft Excel and Visio documents can be placed in the browser seamlessly, too. The reason is that IE 3.0 is a document object container, whereas Word, Excel, and Visio are document objects. Any document object can be seamlessly placed inside a document object container. Float3 displays the web page at http://www.microsoft.com/ie/ie3/. You can click link in float3. The reason is that a frame is actually a browser.

The source for float1 is active.htm. Listing A.4 will explain how float1 works. active.htm demonstrates the following ActiveX content features: style sheet, VBScript, object model exposed by IE 3.0, and Meta tag.

Listing A.4. active.htm source code.


<html>

<head>

<META HTTP-EQUIV="Refresh" CONTENT="20; URL=active.htm">

<STYLE>

    BODY {font: 12pt/13pt Arial; color: white}

</STYLE>

<title>VBScript Sample</title>

</head>

<body bgcolor=green  topmargin=0 leftmargin=0>

<script language="vbscript">

<!--

On Error Resume Next

DIM Feature(10)

lowerbound=0

i=0

Feature= "Authoring Features, new  HTML Enhancement including Style Sheet,

[icc]Table Enhancement, Frames etc"

i=i+1

Feature="ActiveX controls  including ""legacy"" control, OLE automation

[icc]server, and Java Applet used in IE 3.0"

i=i+1

Feature="ActiveX Scripting including VBScript and JavaScript"

i=i+1

Feature="Internet Server Framework including ISAPI and Server side

[icc]Scripting"

i=i+1

Feature ="ActiveX Document enables document object embedded in IE 3.0

[icc]seamlessly"

i=i+1

Feature="Active VRML, ActiveMovie"

i=i+1

Feature="Compatible with Netscape Plug in technology"

Randomize()

pick = Int((i + 1) * Rnd )

QA = Feature(pick)

document.write "<TD BGCOLOR=green>"

document.write QA

document.write "</font>"

-->

</script>

</BODY>

</HTML>

In Listing A.4, tag META provides information about an HTML document using a Name/Value pair to the browsers. There are four attributes used by META tag. They are HTTP-EQUIV, CONTENT, NAME, and URL. The CONTENT attribute specifies the value for the name/value pair. NAME specifies the name of the name/value pair. HTTP-EQUIV binds the content element to an HTTP header field. URL indicates the document's URL. The following code will tell the browser to refresh the content from active.htm every 20 seconds:


<META HTTP-EQUIV="Refresh" CONTENT="20; URL=active.htm">

Observant readers notice the following code:


<STYLE>

    BODY {font: 12pt/13pt Arial; color: white}

</STYLE>

Tag STYLE specifies the rendering information. Information enclosed between the beginning STYLE tag and ending STYLE tag overrides client defaults. Attribute font groups font-family, font-size, line-height, font-weight, font-style together. The font-weight and font-style must be specified before other font attributes. This code


{font: 12pt/13pt Arial; color: white}

can be expanded into


P {font-family: Arial;

    font-size: 12pt;

    line-height: 13pt};

For more information on style sheets, please refer to Appendix F, "HTML Enhancement by Internet Explorer 3.0."

Forms and ISAPI


The rightbottom frame demonstrates the use of ISAPI DLL, forms, and tables. When the Download button is clicked with option IE 3.0 for Windows 95, the corresponding URL will be navigated to. Figure A.2 demonstrates that frames can be used as a browser.

Figure A.2. Redirect to a URL.

Listing A.5 demonstrates the ActiveX content feature including internet server framework, particularly, ISAPI DLL, and forms.

Listing A.5.a4.htm source code.


<BODY BGCOLOR=BLACK  TOPMARGIN=0 LEFTMARGIN=0 VLINK=#000080>

<TABLE>

<TR>

<FORM NAME="IEFamily" METHOD=GET ACTION="/scripts/redir.dll">

<FONT FACE="ARIAL" SIZE=2>

<IMG SRC="/xa/hot.gif" WIDTH=22 HEIGHT=14>

Internet Explore Family<BR>

<SELECT NAME="Target">

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/11.htm">IE 3.0 for

[icc]Windows 95

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/10.htm">IE 3.0 for

[icc]Windows NT 4.0

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/09.htm">IE 3.0 Patch

[icc]for Windows 95 & NT 4.0

<OPTION VALUE="http://206.204.65.109/cgi-bin/ieitar.pl">IE 3.0 128 Bit Version

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/07.htm">IE 2.0 for

[icc]Windows 95

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/0600.htm">IE 2.0 for

[icc]Windows NT(i386)

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/0500.htm">IE 2.0 for

[icc]Windows NT(PPC)

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/0400.htm">IE 2.0 for

[icc]Windows NT(MIPS)

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/0300.htm">IE 2.0 for

[icc]Windows NT(Dec Alpha)

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/02.htm">IE 2.1 for

[icc]Windows 3.1

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/01.htm">IE 2.1 for

[icc]Macintosh

<OPTION VALUE="http://www.microsoft.com/msdownload/ie/00.htm">IE 2.01 for

[icc]Windows 3.1

<OPTION VALUE="http://www.microsoft.com/ie/download/ieadd.htm">Additional

[icc]Features & Add-ons

</SELECT><P>

</FONT>

<INPUT VALUE="Download" TYPE=submit>

</FORM>

</TR>

<TR>

<BR>

<BR>

<BR>

<FORM NAME="AddsOn" METHOD=GET ACTION="/scripts/redir.dll">

<FONT FACE="ARIAL" SIZE=2>

<IMG SRC="/xa/hot.gif" WIDTH=22 HEIGHT=14>

Additional Features and Add-ons<BR>

<SELECT NAME="Target">

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/10.htm">NetMeeting for

[icc]Windows 95

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/09.htm">Internet Mail

[icc]and News for Windows 95

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/08.htm">Internet Mail

[icc]and News for Windows NT 4.0

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/0100.htm">Comic Chat

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/03.htm">Citrix

[icc]WinFrame Web Client

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/07.htm">ActiveMovie

[icc]1.0

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/0000.htm">DirectX 2

[icc]for Windows 95

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/0400.htm">VRML 1.0

[icc]ActiveX Control

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/0600.htm">Macromedia

[icc]Shockwave ActiveX Control

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/0500.htm">HTML Layout

[icc]Control

<OPTION VALUE="http://www.microsoft.com/msdownload/ieadd/02.htm">IE 3.0

[icc]International Extensions

</SELECT><P>

</FONT>

< INPUT VALUE="Download" TYPE=submit>

</FORM>

</TR>

</TABLE>

In Listing A.5, tag FORM denotes a form. There are three attributes used by a FORM tag. They are ACTION, METHOD, and TARGET. The value associated with ACTION is an address(called action URL) to carry out the action of the form. METHOD indicates how the form data should be sent to the server. It can be GET or POST. GET will append the argument to the action URL. And the server can retrieve the value of the argument via QUERY_STRING environment variable. POST sends the form data to the server. TARGET means to load the results into the targeted window.

Observant readers notice that some tags are very frequently used, such as HTML, HEAD, BODY, FORM, TABLE, TD, TR, SCRIPT, OBJECT, MARQUEE, FRAME, STYLE, and FONT. For detailed information on HTML tags, please refer to http://www.microsoft.com/workshop/author/newhtml/.

IE Family and Add-Ons


From Listing A.5, the Internet Explorer family is indicated in the form IEFamily. Internet Explorer has the following versions:

The minimum installation only includes the browser. A typical installation includes the Internet Mail and News plus the following additional features and add-ons list. Full installation includes Internet Mail and News, NetMeeting for Windows 95, ActiveMovie, and the HTML Layout Control.

The form AddsOn enumerates the additional features and Add-ons in case more software is needed beyond the full installation. The add-ons are


Personalization, Internet Security, and Communication Feature


Along with the ActiveX content feature support by IE 3.0, personalization, internet security, and internet communication, such as mail, news, and chat are supported by the browser itself or by installing the add-on software.

Personalization capability allows Web users to change and size toolbar and linkbar so that parents can take control of their children by selecting a different level to access the Web, and can use the keyboard to surf the Web.

Internet Security includes the following items. Authenticode provides the ability to verify the source before download happens. Client authentication via digital personal certificate enables you to securely identify yourself to others on the Internet. Secure communication protocol such as Secure Socket Layer(SSL) 2.0, 3.0, and Private Communications Technology(PCT) enables you to do internet banking and on-line stock trading.

Summary


IE 3.0 with the ActiveX technology provides an innovative browser to the Web user. Creating dazzling Web pages becomes reality, using the browser becomes easier, and surfing the Web is much safer.

Previous Page Page Top TOC Next Page