The Internet Explorer web browser from Microsoft can
be used as a container for ActiveX controls such as the
component edition of Zed. Support for ActiveX controls
was introduced in Internet Explorer 3.0, and they are supported
(to some extent) in other web browsers through the use of
third-party plugins. The Zed component brings to the
web browser the ability to enter mathematical expressions
directly in the browser, thereby enabling the user to interact with
symbolic computations as part of more interesting
mathematical applications.
By way of introducing the types of applications that one
can create in the web browser using Zed, consider this
Users Guide. One common limitation of the
documentation for a program is that one reads the
documentation using a program that is separate from the
program itself. Using methods from the Zed Custom API,
this Users Guide integrates, within the browser,
both the reading of the documentation and user exploration of
the features of the editor. Various sections from the
Basic Use part of the
Users Guide include hyperlinks in the text
that activate a separate frame, containing an instance of the Zed
component, where you can try out the editing techniques
described in the text. The MathML Reference
section contains dozens of MathML examples, associated with
each of the content elements of MathML, so that by
clicking on the example link, you can experiment with the
operations that allow you to create each of the elements
and attributes available in the editor. Other sections
in this Users Guide can contain links and
include mathematical information as needed to illustrate
certain concepts. Creating the documentation in this
fashion provides a concrete starting point for much more complex
applications that can be developed using the API.
Embedding an instance of the Zed component is typically
done through the use of the HTML <object> element.
You will typically want to give the element an id
attribute for later reference, supply the desired width and height
of the displayed area, and supply initial values for each
property you need to use for your application.
The following code demonstrates each of these tasks, and also
contains the class id attribute that is needed to identify
the Zed component:
<object id="zedit" width="100%" height="100%"
classid="CLSID:8D917303-E449-465A-B882-90EFB15B8492">
</object>
For this Users Guide, since the goal was to
have the Zed component available on demand, but not
initially displayed, a somewhat different approach is used.
The index page for the Users Guide (the file
Doc/Users/index.html)
is essentially just a frameset that defines a navigation frame
with links to each section, a frame for the main viewing area,
and a frame for the Zed examples. This last frame is initially
given zero height, making it initially invisible.
<html>
<head>
<link type="text/css" rel="stylesheet"
href="Style/Sections.css">
<script type="text/javascript" src="Script/example.js">
</script>
<title>Zed Users Guide</title>
</head>
<frameset name="left" cols="180,*">
<frame name="toc" src="Contents.html">
<frameset name="right" rows="*,0">
<frame name="main" src="Cover.html">
<frame name="zed" src="ZedEdit.html">
</frameset>
...
Initially, this third frame is loaded with an essentially empty
document, which you can find as the file
Doc/Users/ZedEdit.html.
While the <body> of this file is empty, the <head>
contains the same declarations as shown above, including one
that loads a few JavaScript methods contained in the file
Doc/Users/Script/example.js.
The function exopen does most of the work, by clearing
the frame document, and creating new markup for the page that
includes the <object> element described earlier.
It also installs an event handler for the Zed Submit
event, so that you can close the window by pressing the
Enter key.
function exopen( name )
{
...
if ( parent.right )
parent.right.rows = "*,120";
doc.clear();
doc.writeln(
'<object id="zedit" width="100%" height="100%" \
classid="CLSID:8D917303-E449-465A-B882-90EFB15B8492"> \
</object>' );
doc.writeln(
'<script language="JavaScript" for="zedit" event="submit()"> \
parent.main.exclose();</script>' );
doc.close();
doc.zedit.MmlSource = name;
}
The exopen function takes as its argument the name of the
MathML example file to be opened. Using this function, the
HTML markup used to create the example links can be kept to
a minimum:
<a href="javascript:exopen('quadratic')">quadratic.mml</a>
While you can see the results of this example many other places
in this Users Guide, the above example link
gives you an opportunity to explore a bit more of the structure
of how these examples are constructed, as a starting point for
creating your own applications.
