Dynamic HTML (DHTML) Overview Cascading Style Sheets Document Object Model Event Model Filters and Transitions Data Binding Cross-Browser Compatibility Links

What is DHTML Generally, DHTML refers to applications that allow a Web page to change dynamically without requiring information to be passed to/from a web server. More specifically, DHTML refers to the interaction of HTML, CSS and Scripting language (JavaScript). Crucial component of DHTML is DOM (Document Object Model) DHTML = HTML + CSS + JavaScript + DOM

Why comes DHTML To make Web pages interactive. HTML pages have static nature. DHTML provides us with enhanced creative control so we can manipulate any page element at any time. It is the easiest way to make Web pages interactive. It doesn’t increase server workload and require special software to support.

Cascading Style Sheets (CSS) The purpose of CSS is to define styles for a document's content. To specify font sizes and faces, margin heights and widths, borders and padding, even text decoration. To create absolutely and relatively positioned content.

CSS CSS brings powerful layout and design capabilities to DHTML. CSS provides an efficient way to define universal style. Separation the structure of document from content allows greater manageability and makes changing the style easier.

CSS evolution CSS1 (W3C Recommendation in Dec. 1996) It describes the CSS language as well as a simple visual formatting model. CSS2 (May. 1998) It builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables. CSS3 (under development) Concentrate on modularization.

Adding Style to A Document Use an outside style sheet, either by importing it or by linking it. Embed a document-wide style in the element of the document. Provide an inline style exactly where the style needs to be applied.

Examples Definition Rule H1 { font-size: 24pt; color: green }.dark { font-weight: bold } Create Style and Grouping Styles (css1.html) Linking external style sheets (imported.html)

Other Methods to Define Styles Using Document Object Model to Define Styles Example: document.tags.H1.color = "red"; Using JavaScript to Define Styles (NS 4.0+) tags.P.fontSize = "18pt"; with (tags.P) { fontSize = "18pt"; tags.P.color ="green"; color ="green"; tags.P.marginLeft = "20pt"; marginLeft = "20pt"; } tags.H1.color = "blue";

Document Object Mode (DOM) DOM is a platform- and language-neutral interface that allow programs and scripts to dynamically access and manipulate the content, structure and style of documents. DOM chooses OMG IDL to provide language- independent specification of the DOM interfaces and provides language bindings for Java and ECMAScript.

DOM evolution Level 0 (Netscape Navigator 3.0 and MS IE 3.0) Level 1 (Oct. 1998) Contains functionality for document navigation and manipulation of the content and structure of HTML and XML documents.

Level 2 (Nov. 2000) It is made of a set of core interfaces to create and manipulate the structure and contents of a document and a set of optional modules. These modules contain specialized interfaces dedicated to XML, HTML, an abstract view, generic style sheets, CSS, Events, traversing the document structure, and a Range object. It builds on the Level 1. Level 3 (Draft, under development) Expands Level 2 to define some DOMUtility interfaces.

Objects and Collections supported by IE 5.0 Some Objects window document body history location navigator event screen Some Collections all anchors applets forms frames images links …

Examples Combination of Dynamic Positioning, Content and Styles (dynamicposition.html) Using the frames Collection (index.html, top.html)

Event Model DHTML provides full support for keyboard and mouse events on all page elements. Some popular events ONLOAD ONCLICK ONMOUSEMOVE ONMOUSEOVER ONMOUSEOUT ONFOCUS and ONBLUR ONERROR (for error handling) … Example (onmouseoverout.html)

Filters and Transitions Use and combine filters to achieve special effects. Create animated visual transitions between Web pages. Modify filters dynamically using DHTML.

Examples Flip filters: flipv and fliph (flip.html) Transparency with chroma Filter (chroma.html) Add shadows to text (shadow.html) Filter blendTrans (blendtrans2.html) Filter revealTrans (revealtrans.html)

Data Binding TDC – Tabular Data Control Bind a TABLE and other HTML elements to Data Source Objects (DSOs). Sort and filter data directly on the client without involving the server. Filter data to select only records appropriate for a particular application. Navigate backwards and forwards through a database with the Move methods. Example (advancesort.html)

Cross-browser Compatibility (Cross-platform) Most popular browsers are Microsoft’s Internet Explorer (IE) and Netscape’s Navigator (NS). Many features of them are common. Both support HTML, CSS, DOM and JavaScript. Most of their features are incompatible.

Cross-browser Compatibility Features specific to IE 4.0+ VBScript, JScript ActiveX Control Data Binding Filter and Transition OpenType font Features specific to NS 4.0+ JavaScript Style Sheets BitStream font tag

Even when NS and IE expose similar objects for scripting, the syntax is not always the same. Format of references to element’s properties and methods differs between IE 4.0 and NS 4.0. Example: Position an object (obj) at a specific pixel coordinate(x,y). IE 4.0NS 4.0 obj.pixelLeft(x);obj.moveTo(x, y) obj.pixelTop(y);

Cross-browser Strategies Include the contents of the style sheet inside a comment ( ) so that browsers that do not recognize the element will ignore it. Create and redirect browser to specific pages using browser detection. Design for common denominator. Custom APIs. Create some JavaScript library for different browsers loading. Building DHTML standard is on the way!

Browser Detection function start() { if ( navigator.appName == "Microsoft Internet Explorer" ) { if ( navigator.appVersion.substring( 1, 0 ) >= "4" ) document.location = "newIEversion.html"; else document.location = "oldIEversion.html"; } else document.location = "NSversion.html"; }

Links Microsoft DHTML Document Netscape DHTML Document DOM & CSS Library (Great Site! Demo and Code available) Examples shown in the presentation

Thanks! Thanks!