Implementing DHTML Behavior Script Components

DHTML BEHAVIOURS
Computer Call
April 08, 1999

AGENDA
• Evolution of Browser technology
• DHTML Behaviors
• XML + DHTML Behaviors
• Building DHTML Behaviors
• Extending Browser capabilities

INTERNET EXPLORER 3.0
• Great Browsing
• Supported HTML “standard”
• Offered Scripting capabilities to enhance web pages (JavaScript,
VBScript)
• Extensibility: ActiveX Controls & Java Applets let you build web based
applications
• Pioneered CSS support - separate content from style

INTERNET EXPLORER 4.0
• Interactive Experience
• Dynamic HTML Object Model : easier ways to build an active
web page by combining HTML and script
• Dynamic Content
• Dynamic Styles
• Data Binding
• Positioning
• Windowless ActiveX Controls: Multimedia effects
• Pioneered XML support
• DHTML scriptlets: encapsulated HTML content and script

INTERNET EXPLORER 5.0:
DHTML BEHAVIORS
• Component Model for HTML
• Separate behavior from content
• Using CSS behavior property
• Dynamic functionality
• Encapsulate
• Reuse
• Attach behavior to any existing HTML element
• Define custom tags using XML
• Lighter than DHTML Scriptlets in Internet Explorer 4.0

Author
HTML
Engineer
Scripting
Designer
CSS
MAKE DHTML MORE ACCESSIBLE
FOCUS ON YOUR CORE COMPETENCY

USING DHTML TODAY (1 OF 2)
• Three Disciplines
• Content author
• Designer
• Engineer
• Type of content
• News Article - Mostly content
• WebSite page - Mostly Design
• HR Application - Mostly engineering`

USING DHTML TODAY (2 OF 2)
• The Process:
• Step 1: Content author provides content
• Step 2: Designer adds look and feel
• Step 3: Engineer adds Dynamic functionality
• Error prone - Engineer could accidentally change content or
design
• Fragile - Subsequent content change could break Dynamic
functionality

DHTML WITH BEHAVIORS
• New Process:
• Step 1: Engineer creates “Reusable Encapsulated Script Components” i.e.
Behaviors
• Step 2: Content author provides content
• Step 2: Designer adds look and feel and dynamic functionality using CSS
• Dynamic Functionality is now more manageable.
• Engineer no longer has to apply skills to every document

NEW PROCESS
HTML Content/Style Script
.htm, .html .css .htc

PROPOSED CSS
BEHAVIOR PROPERTY (1 OF 2)
• Apply CSS behavior property to any tag
<style>
.mask {behavior:url(mask.htc);}
</style>
<input type=text class=mask maskType=date>
• Implement behavior in script or compiled code (COM component)
• Expose object model
• new methods, properties, and events

PROPOSED CSS BEHAVIOR PROPERTY (2 OF 2)
• Author once for all browsers
• Class= syntax
• CSS behavior property ignored by downlevel browsers
<input type=text class=mask maskType=date>
<UL class=List> Title
<LI> item 1
<LI> item 2
</UL>

DEFINE CUSTOM TAGS - XML
• Declare XML namespace
<HTML xmlns:myns />
• Define default style for XML tags
<STYLE>
@media all {
MYNS:FLY{color:red;behavior:url(fly.htc);}
}
</STYLE>
• Use XML tags with HTML
<MYNS:FLY>This content will fly</MYNS:FLY>

APPLYING CSS TO XML
• Applying CSS to XML
<XML:namespace prefix=”MYNS"/>
<style>
.myClass {background-color: green}
</style></head><body>
<MYNS:turnip style="color: blue">This is XML with
inline styles</MYNS:turnip><br>
<span class=myClass>I'm a SPAN with
class=myClass.</span><br>
<MYNS:carrot class=myClass>I'm an XML tag with
class=myClass.</MYNS:carrot>

XML IN HTML
• XML Namespaces avoid name conflicts
<MYNS:TITLE>This is not an HTML title
</MYNS:TITLE>
• Namespace is defined by the page author
• Downlevel Browsers ignore tags and render the content
• Use XML to define structure
• Example enclose all Product prices in <PROD:PRICE> tag

BUILDING BEHAVIORS: EASY!
• Script
• Author using JavaScript or VBScript
• Similar to script in the document
• Provides full access to the DOM
• Simple COM component
• Author on top of simple, well defined interfaces
• Create true extensions to the browser
• Provides access to the DOM

BUILDING BEHAVIORS IN SCRIPT
• (collapsing bullet point) <UL class=list>
<script language="jscript">
attachEvent("onclick", event_onclick);
function event_onclick(){
for (i = 0; i < children.length; i++){
mystyle = children[i].style;
if (mystyle.display == "none"){
mystyle.display = "";
} else { mystyle.display = "none";
} } }
</script>

EXPOSING PROPERTIES
AND METHODS
(ACCESSING THE BEHAVIORS OBJECT MODEL)
• Expose properties and methods to the document
<PUBLIC:method name=start />
<PUBLIC:property name=from />
……
<script language=JavaScript>
function start()
{…}

FIRING CUSTOM EVENTS
• Event Object is used to pass context
• Create Event Object
evObj = createEventObject();
evObj.SetAttribute(“result”, uniqueID);
• Fire Event
<PUBLIC:event id=finfly name=onFinishedFly
/>
<script language="jscript">
…..
finfly.fire(evObj);

SEMANTICS FOR NAME RESOLUTION WITHIN
HTCS
• Name resolution order
• First - Script
• Second Document of HTC
• Third - element
• Fourth - window

EXTEND BROWSER’S
CAPABILITIES WITH
BINARY BEHAVIORS
• Behaviors can also refer to a binary component
• Suitable for doing the things that a browser cannot do
• Simple set of interfaces
• Internet Explorer Specific components
• For example - Drawing

SUMMARY APPLYING BEHAVIOR
• HTML
<a href=“a.htm” style=“behavior:url(hilite.htc)”></a>
• Object
<a href =“a.htm” style=“behavior:url(#ohilite)”></a>
<object id=oHilite hieght=0 width=0….>
<PARAM NAME=“color” value=“Red”>
</object>
• Default behavior
<input style=“behavior:url(#default#savefavorite)” type=text id=txt1>

TIMING ISSUES
• It’s an asynchronous world
• Document and Behavior are downloaded separately
• One may complete before the other
• Wait for contentChange notification before accessing attributes of
the element
• Events:
• oncontentchange
• ondocumentready

BEHAVIORS - SECURITY
• HTCs are as secure as scripting
• Object Model of the Document
• It’s just script + HTML - known entity
• Binary HTCs (COM components)
• Security with ActiveX Controls
• Behavior declaration in the style refers to an OBJECT tag on the page
<OBJECT ID=“TURNIP” CLASSID=1234…
<STYLE>
.PARSNIP{behavior:url(#TURNIP);}
<STYLE>

Implementing DHTML Behavior Script Components

Recommended

More Related Content

Similar to Implementing DHTML Behavior Script Components (20)

More from Arun Seetharaman (14)

Recently uploaded (20)

Implementing DHTML Behavior Script Components