Implementing DHTML Behavior Script Components
arunsnarayanan
3 views
24 slides
Mar 12, 2025
Slide 1 of 24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
About This Presentation
DHTML, or Dynamic HTML, is a combination of HTML, cascading style sheets (CSS), and JavaScript used to create dynamic and interactive web pages. With DHTML, you can make web page elements change without needing a full page reload, enhancing the user's experience.
Slide Content
DHTML BEHAVIOURS
Computer Call
April 08, 1999
Computer Call
April 08, 1999
AGENDA
•Evolution of Browser technology
•DHTML Behaviors
•XML + DHTML Behaviors
•Building DHTML Behaviors
•Extending Browser capabilities
•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
•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
•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
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
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`
•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
•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:
•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 PROCESSHTML Content/StyleScript
.htm, .html.css .htc
.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
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>
•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>
•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: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
•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
•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>
•(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()
{…}
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);
•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
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
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>
•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
•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>
•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>
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 3
- Slides 24
- Age 266 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
33 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
31 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
27 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
29 views