荔园在线

荔园之美,在春之萌芽,在夏之绽放,在秋之收获,在冬之沉淀

[回到开始] [上一篇][下一篇]


发信人: Jobs (温少), 信区: Visual
标  题: What's New for DHTML in Internet Explorer 5.5
发信站: BBS 荔园晨风站 (Mon Dec 13 16:39:18 1999), 站内信件

What's New for DHTML in Internet Explorer 5.5
Posted December 7, 1999

Editor's note: The following article refers to Internet
Explorer 5.5 Platform Preview, which is available for download
at http://msdn.microsoft.com/downloads/webtechnology/ie/iepreview.a
sp.

Introduction
This document covers new Dynamic HTML (DHTML) features in
Internet Explorer 5.5 Platform Preview. Although users will
benefit from some of the enhancements, such as improved
navigation performance and print preview, I'd like to talk
about what's new for DHTML script authors, and how it will make
this an exciting platform for development.


--------------------------------------------------------------------------------
The Internet Explorer team focused on providing a robust set of
features that would enable developers to add their own custom
elements.
--------------------------------------------------------------------------------

Internet Explorer 5.5 is built on the architecture of previous
Internet Explorer releases, which allowed the development team
to focus on providing a robust set of additional features that
advance the platform by enabling developers to add their own
custom elements for others to use in their DHTML documents.


One of the key feature areas that has gained from this
significant attention is the Component Model. This term refers
to a number of individual features that, when put together,
allow third parties to build new DHTML elements to extend
functionality, such as a tree type list control, that are as
rich and robust as built-in HTML elements, such as INPUT,
TEXTAREA, and SELECT. Built around the DHTML behavior support
introduced in Internet Explorer 5, the new component features
allow greater encapsulation and reuse of code without worry
about potential name conflicts, unforeseen style inheritance,
and so forth.

Another area that has been enhanced is that of HTML+Time, such
as improved synchronization capabilities with streaming media.
For example, a streaming video can have DHTML timed to appear
at the same time as certain key points in the video stream. The
SMIL-Boston draft  specification for full multimedia
presentation recently published by the World Wide Web
Consortium (W3C) is also supported in this version of Internet
Explore.

Finally, we've added a set of DHTML features that don't fall
neatly into an area, such as the component model or multimedia,
but help provide completeness -- some very cool new design
capabilities, and improved cascading style sheet (CSS) support,
which we'll discuss in the final section of this article.


An understanding of previous DHTML support available in
Internet Explorer 5 will be beneficial in understanding this
article, which is meant as an overview of the new features
available to DHTML content authors. Full reference
documentation, including samples, is available from the MSDN
Online Web Workshop DHTML, HTML and CSS area.?

Component Model
A number of aspects go into making a full and robust model for
building reusable DHTML components. Here we'll discuss some of
the new features and why they play a key part in building up a
rich component out of DHTML.

The objective of the component model functionality is to allow
a component author to write a DHTML behavior that is the basis
for a custom element, such that they can implement the
equivalent of any of the standard HTML elements and provide
custom elements that the document author can make use of with
the same level of reliability as those standard elements.

Element Behaviors
Element behaviors refer to new types of DHTML behaviors that
are supported in Internet Explorer 5.5. Building on the
existing behavior support in Internet Explorer 5, element
behaviors provide a different method of binding to an element
and can be implemented in script or native binary code in much
the same way as the behaviors supported in Internet Explorer 5 -
- which, for clarity, we will refer to as attached behaviors,
as they are attached to any element either through CSS
declaration of the behavior property or procedurally through
addBehavior and removeBehavior. Element behaviors, by contrast,
bind to the element such that they can never be detached and
they are considered an intrinsic part of the element.


Only one element behavior is allowed per element, unlike
attached behaviors, and only custom elements (those that have
an explicit namespace) can have an element behavior. An element
behavior should be considered to be the custom element, which
can then be programmed to as if it were a standard HTML
element. Attached behaviors remain appropriate for many uses,
and element behaviors should not be considered as better or
superceding attached behaviors, but the element behavior
mechanism offers a number of advantages to those wishing to
develop their own custom elements.

So what does all this talk about robust custom elements mean?
Consider developing a custom element, <MYSTUFF:TREE>, for a
DHTML document that provides a rich tree control UI. You many
wish to use the <MYSTUFF:TREE> element in your documents in the
same way as you can use standard HTML elements (such as DIV,
SPAN, INPUT, SELECT, and so forth). However, the traditional
attached behavior mechanism for elements does not allow this
usage, because it employs a secondary attachment mechanism that
takes place after the custom element has been created.



For example, if the element were to be created in script using
the createElement method, and a behavior were attached using
CSS, any script following createElement and referring to a
method supplied by the behavior would quite probably fail -- as
the behavior would not have been attached at that time. Using
element behaviors allows immediate behavior instantiation, and
the methods provided by the behavior can be relied on to be
present. Additionally, the element behavior can be used without
fear of a change in the CSS declaration that would result in
the behavior being removed unexpectedly.

For the full details of how to use and write your own Element
Behaviors take a look at
http://msdn.microsoft.com/workshop/author/behaviors/overview/ide
ntityb_ovw.asp.

ViewLink
ViewLink refers to a feature that allows element behaviors to
have DHTML user interface without affecting the document in
which the behavior is used. To understand what this really
means, let's examine a typical DHTML behavior in Internet
Explorer 5. If we take a look at the Calendar Behavior, we see
a custom element, <CAL:CALENDAR>, with a behavior attached that
causes the rendering of a fully dynamic calendar for date
selection. The display of the calendar UI is achieved using
DHTML with a <TABLE> to lay out the grid of the calendar and
script to provide the dynamic user functionality. In order for
the calendar to be displayed, the table must be inserted into
the main document to which the behavior is attached using the
innerHTML method on the element. While this works, it has a
number of disadvantages when it comes to building complex
applications. These disadvantages surround the fact that the
main document is being polluted with content that the original
document author, using the CAL tag, was not aware of.


For example, if a style rule defines all tables as pink with
purple borders of 10 pixels, then the calendar will start to
render in that fashion. The author of the document will
think, "That's weird. I just told my tables to render that way,
and it's affected my calendars as well." For the document
authors, the fact that this component uses a table is purely an
implementation detail that they should not be aware of. There
are also potential conflicts of names as a mix of like-named
behaviors from different behavior authors might inject content
into the main document. The ViewLink feature addresses this
problem by allowing content to be fully encapsulated, so that
the primary document that uses the element behavior can have no
fear that its document structure is going to be polluted, and
the behavior author need not worry about the document
specifying styles that influence the behavior in unexpected
ways.

So how does ViewLink work? By building on some features in
Internet Explorer 5, where document fragments are allowed
separately from the main document, we can now ViewLink such a
separate fragment so it can render for a particular element.
This allows separate fragments of DHTML to be linked together
for visual effect but remain in isolation from each other as
far as the Object Model is concerned.

For a more in depth discussion and full samples, see
http://msdn.microsoft.com/workshop/author/behaviors/overview/vie
wlink_ovw.asp.

Editing
To complete the ability to write custom elements that can
function in the same fashion as a standard HTML element, there
is now support for editable regions within an HTML document.
This means that any element in a document can be switched into
edit mode at any time without requiring a full reload of the
document. These rich editing elements can then allow developers
to create custom data entry fields for forms For more details
and a sample see
http://msdn.microsoft.com/workshop/author/dhtml/reference/proper
ties/contenteditable.asp.

Other really cool stuff
For the rest of this article we抣l look at various new features
in Internet Explorer 5.5 that do not fall neatly into the
component model area.


Frames without Windows
A major work item for the Internet Explorer 5.5 development
team has been to make frames and iframes more efficient. In
previous version of Internet Explorer, frames had been
implemented by hosting another instance of the main browser
component for each frame. While this was a straightforward
technique for implementing frames, it wasn't necessarily very
efficient. Using much of the same technology as is used for the
ViewLink feature, Internet Explorer can now host documents for
frames and display them without having to instantiate more
instances of the browser components. This gives us two great
benefits: First, performance of frames pages is greatly
improved, and so architecting an application that uses frames
to componentize certain aspects becomes realistic; second, some
very cool effects can be achieved.

In previous versions of Internet Explorer, frames and iframes
could not play in the world of z-index-positioned components;
while you could position an <IFRAME> on a page, it could not
have content from the host document laid over it by using a
greater z-index value. In Internet Exploration 5.5, this
ability now works. The other visual ability is for frames to be
transparent. By declaring the background of the frame's
document to be transparent, you can have the background of the
containing document appear through.

See http://msdn.microsoft.com/workshop/author/dhtml/overview/inlinef
loatingframes.asp for more information.

PopUp
Another new feature, PopUp. allows a document fragment to be
displayed in its own window, so that it is the topmost window
in the system. This is particularly useful for displaying menus
that might render outside the instance of the browser. See
http://msdn.microsoft.com/workshop/author/dhtml/reference/object
s/popup.asp.

Colored Scroll Bars
In Internet Explorer 5.5, you can also now specify the color of
scroll bars. DHTML documents no longer need to have the Windows
operating system's standard gray scrollbars, but can instead
have scroll-bar colors set to any color by using CSS. This is
particularly useful for generating a UI with a more consumer
feel by coordinating the scroll-bar colors to follow the visual
theme of the rest of the document. See
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/scr
ollbarColor.htm.



Zoom
Ever wanted to zoom into a particular part of a document? In
Internet Explorer 5.5, zoom is supported as a CSS property on
any element. This allows some interesting visual effects, but
can also be used to display a large document on the screen and
allow a user to highlight certain areas; or the functionality
could possibly provide the basis of an accessibility aid.

See http://msdn.microsoft.com/workshop/author/dhtml/reference/proper
ties/zoom.asp.

Improved CSS support
The CSS styles of borders, padding, and margins are now
supported on inline elements. What抯 an inline element? The
term refers to elements such, as <SPAN> and <B> that can wrap
across lines of text -- as opposed to block elements that take
up a rectangular area of the page and cannot wrap (although
their contents can), such as TABLE and DIV. Also added is
support for dotted and dashed borders on the border-style
property in CSS.



Finally there抯 support for first-letter and first-line pseudo-
elements. This allows support for newspaper- and magazine-style
layout of articles such that the first letter and first line of
a paragraph of content have different font sizes. See
http://msdn.microsoft.com/workshop/author/dhtml/reference/pseudo
_elements/firstLetter.asp and
http://msdn.microsoft.com/workshop/author/dhtml/reference/pseudo
_elements/firstLine.asp.


Summary
Hopefully, this whirlwind tour of new features supported in
Internet Explorer 5.5 has been useful and prompts you to
investigate and experiment with the new capabilities. There are
other new features included in Internet Explorer 5.5 that fall
beyond the scope of this particular article -- such as support
for vertical text, which allows content in countries where the
language is usually written vertically to display content such
as Japan. And some of the features touched on here deserve more
in-depth coverage, such as writing robust element behaviors. We
will cover those topics in greater detail soon.



--
☆ 来源:.BBS 荔园晨风站 bbs.szu.edu.cn.[FROM: bbs@192.168.11.111]


[回到开始] [上一篇][下一篇]

荔园在线首页 友情链接:深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店