Click the links to the left to see the example popup windows using
IFRAMES, DHTML, HTML component architecture.
This page makes use of the HTML component architecture
available in Microsoft IE browsers from version 4 onward to
create and display dialog boxes.
The advantages of the HTML component architecture include
being able to build custom controls without using unsecure
and hard to maintain Active-X components and encapsulating
the behavior of the control in a single, reusable file.
The description and behavior
of the dialog boxes is completely encapsulated in a file called
dialog.htc. This page links in a stylesheet called dialog.css.
By simply including this stylesheet into a page, the dialog box
behavior is instantly available. Any page that includes this .css
file will be able to make javascript calls to create and set the
content of popup windows and dialog boxes. These windows can
also be included in a menu bar to create individual menus and even
context sensitive menus. We will use this component to build menus
in a later article.
The code for the links is as simple as:
<a href="javascript:dialogx = document.body.createPopupFrame('pleasewait.html','center');
dialogx.show();">Centered. Content from file</a>
This example creates a popup window in the center of the window
that calls it and fills it with the contents of the local html file
as given. The frame will automatically size itself to the content
in the html file.
<a href='javascript:dialogx = document.body.createPopupFrame("http://www.woofie.com","absolute",200,20,400,400);
dialogx.setContent();'>Positioned absolutely</a><BR>
This next example will create a popupframe and fill it with the
contents returned from the URL. Instead of 'centered', the positioning
parameter is 'absolute' causing the frame to be positioned at the
coordinates listed: top, left, width, height. If width and height
are not given, the frame will attempt to size itself.
Great! How do I do this?
Simple. Download the zip file dialog.zip containing dialog stylesheet dialog.css, the HTML component dialog.htc, and this page and put them in the same
directory as your page. You will note that the dialog.htc component
behaviour is attached to the body style in dialog.css. One can attach
many behaviors to any style and those properties and methods in the
component are readily available to any element with that style.
Since these are components, separate elements using the same style
will
each have their own instance of the component. This is a very
powerful property of HTML components. Each component has its own
variables, known as properties, separate from every other component.
This allows one to have many instances of the same component on a
page at one time without having to write code to keep track of them
all. Each element is a separate object with its own properties.
One can add and change behaviors, properties, and methods of each
element simply by assigning a different component file via
the behaviour-url: property in the style for that element.
A grid could be implemented with different editors
(defined by components) attached to different columns. One column
could have a pulldown component editor on every cell. Another column
could use a simple textentry area. A third column could use
a completely custom component you design.
The next article will build on this simple component.
I will also talk about custom graphing components that take
advantage of scalable vector graphics now available in IE.