Agenda

What is DHTML and what is it used for? DOM and the Cross Browser Issues Properties og Collections Dynamic style, content and position Events Examples AJAX

Fundamentals of Web-Centric Development

Presentation 9: DHTML

NOTICE:
It is not possible to cover all possibilities of modern DHTML

Slide 2

Ingenirhjskolen i rhus

DHTML
DHTML = Dynamic HTML Client Side NOT a W3C Recommendation DHTML = (X)HTML + CSS + JavaScript + DOM
HTML (4.0+), CSS (1.0+), DOM (1+)

What is Dynamic HTML Used for?

Creating more dynamic & user freindly sites
script: style, position & content

XHTML, CSS, JavaScript and DOM has already been introduced Unifying these leads to dynamic content
Slide 3 Ingenirhjskolen i rhus

Validation of user input (already displayed during JS) Minimize Server Load Dynamic menu structures More stable GUI (AJAX) Dynamic Help Rollover graphics Event controlling = Windows-like user interface -> More possibilities e.g. browser based HTML editor Alternatives: Flash/Shockwave, Java Applets, ActiveX and other plug-in technologies
Slide 4 Ingenirhjskolen i rhus

How do we use DHTML

Using the DOM API we access XHTML elements We subscibe for events (as in Windows) and react using eventhandlers using e.g. JavaScript (or similar scripting language) used for manipulating the elements

DOM
DOM: Document Object Model
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML20030109/

W3C:
Standard for accessing structured doucments Core DOM used for XML HTML DOM used for HTML Representation of a document as a tree structure APIs for e.g. JavaScript, Java, C++, C#, CLS
Ingenirhjskolen i rhus

Slide 5

Ingenirhjskolen i rhus

Slide 6

DOM Tree Structure

Tree structure of a document

Firefox 2 DOM Inspector

Slide 7

Ingenirhjskolen i rhus

Slide 8

Ingenirhjskolen i rhus

DOM Versions / Levels

DOM level 0:
Browser Object Model (BOM) Pre DOM standardization De facto standard Each vendor has its own Supports e.g. FORM validation

Cross Browser Compatibility Issues

Different Vendors supports DOM (and CSS, HTML, XML, Graphics etc) differently Do not expect browsers to be W3C compliant Cross Browser Compatibility
Manual Difficult Expensive

DOM level 1:
Recommandation in October 1998 All HTML & XML elementer are objects in a trestructure May be manipulated with and added to

DOM level 2:
Recommandation Novemeber 2000 Event handling included. (eg OnClick), XML Namespaces

DOM level 3
Extensions and added standardization of more of the existing functionalities

Slide 9

Ingenirhjskolen i rhus

Slide 10

Ingenirhjskolen i rhus

IE4 vs NN4 DOM

NN4:
<script language="JavaScript" type="text/JavaScript"> function aFunction(){ document.layers.ElmRef.left=300; document.layers.ElmRef.top=300; } </script> <layer id=ElmRef> A XHTML LAYER Container ELement </layer>

DOM Browser Support

IE4:
<script language="JavaScript" type="text/JavaScript"> function aFunction(){ document.all.ElmRef.left=300; document.all.ElmRef.top=300; } </script> <div id=ElmRef>A XHTML DIV Container ELement</layer>

Warning:
- This is data from Wikipedia.com -http://en.wikipedia.org/wiki/Comparison_of_layout_engines -Please check references! -Check vendors

Slide 11

Ingenirhjskolen i rhus

Slide 12

Ingenirhjskolen i rhus

Solving Cross Browser Problems

Cross Browser DHTML Compatibility check
Ex: http://www.w3schools.com/htmldom/dom_obj_iframe.asp Check for which browser is being used OR which objects are supported (last is most common)

Cross Browser Toolkits

Toolkits available for Crow Broswer resolving Wraps different browser behavior in API Example:
DOJO (since 2004) Dojo Foundation: Non-profi organization Open source JavaScript toolkit BSD License and Academic Free License http://www.dojotoolkit.org/

Browser Detect:
If (IE) {} else if (NetScape) {}

Object Detect:
if (document.images)
{ do something with the images array }

Can be done server side as well (.NET, JSF)

if (window.focus)
window.focus()
Slide 13 Ingenirhjskolen i rhus Slide 14 Ingenirhjskolen i rhus

Read more on DOM

DEITEL is too loose Read more at
Http://www.w3c.org http://xml.coverpages.org/dom.html http://www.quirksmode.org/?dom/contents.html

Properties for Elements

In a DOM all elements have the following attributtes
id tagName className style children parentElement

Which may be used for identification, manipulation and navigation

Slide 15 Ingenirhjskolen i rhus Slide 16 Ingenirhjskolen i rhus

DHTML API / DOM

All Elements are accesed via the DOM In JavaScript lecture, we used document.forms to access user data for validation
Key window document frames history navigator plugins location event screen embeds filters forms images links ob ject collection plugins scripts styleSheets document document all anchors applets body

Important Collections in DHTML API / DOM

all collection (fra IE4) (hedder layer i NS4)
All Scriptable Elements

children collection
All HTML elements nested in a given element

forms collection
All Form elements in a given element

This is called a Collection there are many collections for access

frames collection
Ussed for frame access

Several others (see previous slide)

Slide 17

Ingenirhjskolen i rhus

Slide 18

Ingenirhjskolen i rhus

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig 13.2: all.html --> <!-- Using the all collection --> <html xmlns = "http://www.w3.org/1999/xhtml"> all <head> <title>Object Model</title> <script type = "text/javascript"> <!-var elements = "";

All.html
The for loop loops through the elements of the collection and display each elements name.

Program Output

The length property of the all collection specifies the number of elements in the collection.

function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += "<br />" + document.all[ loop ].tagName; pText.innerHTML += elements; alert( elements ); } // --> </script> </head> The all collection

The name of each XHTML element (given in the tagName property) in the collection is appended to elements.

<body onload = "start()"> <p id = "pText">Elements on this Web page:</p> </body> </html>

is a collection of all the XHTML elements in the page in the order they appear.

The XHTML elements are rendered on the page. Note comments are represented as !.

An alert dialog is displayed with all the names of the XHTML elements in the all collection.

The innerHTML property is similar to the innerText property but can also include XHTML formatting.
Slide 19 af 51 Ingenirhjskolen i rhus Slide 20 af 51 Ingenirhjskolen i rhus

Three Properties we may Change

For each element we may change:
Style Content Position

Dynamic Style
Changing an elements style dynamic
<script > document.all.para1.style.color=red; document.all.para1.style.backgroundColor=white; document.all.para1.style.className=smallFonts; </script> <p id=para1>This is a text</p>

Giving us (in effect) complete control of the page

Slide 21

Ingenirhjskolen i rhus

Slide 22

Ingenirhjskolen i rhus

Dynamic Content
Content may be changed dynamic
<script > document.all.para1.innerText=a new text; document.all.para1.innerHTML=<i>a new text</i>; </script> <p id=para1>This is content which will be changed</p>

Dynamic Positioning
We may change the x,y position dynamically
<script > document.all.afs1.style.left=200px; </script> <div id=afs1 style=position:absolut;left:20;top> This section may be moved dynamically</div>

In effect: animation is possible

Slide 23 Ingenirhjskolen i rhus Slide 24 Ingenirhjskolen i rhus

Frames
Usefull Frames collection Parent for moving up and Frames for down

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!-- Fig. 13.7: index.html --> <!-- Using the frames collection --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Frames collection</title> </head> <frameset rows = "100, *"> <frame src = "top.html" name = "upper" /> <frame src = "" name = "lower" /> </frameset> </html>

Index.html

The browser window is broken into two horizontal frames.

The top frame (upper) displays file top.html.

The bottom frame (lower) is initially empty.

Slide 25

Ingenirhjskolen i rhus

Slide 26 af 51

Ingenirhjskolen i rhus

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 13.8: top.html --> <!-- Cross-frame scripting --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>The frames collection</title>

Top.html Program Output

Function start takes in a users name and writes it in a frame in the browser. Browser prior to user entering a name.

<script type = "text/javascript"> <!-function start() { var text = prompt( "What is your name?", "" ); parent.frames( "lower" ).document.write( "<h1>Hello, " + text + "</h1>" ); } // --> </script> The write function </head> <body onload = "start()"> <h1>Cross-frame scripting!</h1> </body> </html>

Dialog prompt for user to enter name.

is used to write text to the frame in the browser. Browser updated with user name and Hello displayed in bottom frame.

The parent frame of the current frame is first referenced following that the lower frame is referenced.

What happens here?

Slide 27 af 51 Ingenirhjskolen i rhus Slide 28 af 51 Ingenirhjskolen i rhus

DHTML Events
Similar to Windows Event Model Events can capture user / browser interaction
Mouse movements / clicks, onclick, onmouseover, onfocus and more

Also used for capturing system events

onload, onerror, onbounce

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 14.2: onload.html --> <!-- Demonstrating the onload event --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>DHTML Event Model - onload</title> <script type = "text/javascript"> <!-var seconds = 0;

Onload.html
Function startTimer will call function updateTime every 1000 milliseconds.

function startTimer() { invoke // 1000 milliseconds = 1 second window.setInterval( "updateTime()", 1000 ); } function updateTime() { seconds++; soFar.innerText = seconds; } // --> </script> </head> <body onload = "startTimer()">

Method window.setInterval is used to function updateTime every second.

Function updateTime sets the innerText property of the element with soFar as an id to the number of seconds that have elapsed since loading.

<p>Seconds you have spent viewing this page so far: <a id = "soFar"><strong>0</strong></a></p> </body> </html>
Slide 30 af 51

The onload event executes when an element finishes loading.

Slide 29

Ingenirhjskolen i rhus

Ingenirhjskolen i rhus

Event Bubbling
Program Output

All events bubbles from a child element up to its parent element and continues to root element This behavior may be changed:
event.cancelBubble=true

The page will dynamically update the number of seconds that have elapsed since the page has loaded every second.

Slide 31 af 51

Ingenirhjskolen i rhus

Slide 32 af 51

Ingenirhjskolen i rhus

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig 14.9: bubbling.html --> <!-- Disabling event bubbling --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>DHTML Event Model - Event Bubbling</title> <script type = "text/javascript"> <!-function documentClick() { alert( "You clicked in the document" ); } function paragraphClick( value ) { alert( "You clicked the text" ); if ( value ) event.cancelBubble = true; } document.onclick = documentClick; // --> </script> </head>

Bubbling.html

32 33 34 35 36 37

<body> <p onclick = "paragraphClick( false )">Click here!</p> <p onclick = "paragraphClick( true )">Click here, too!</p> </body> </html>

Bubbling.html

Program Output
Clicking on the first p element triggers line 27 because the onclick event has bubbled up to the document level.

By setting the cancelBubble method to true, disables event bubbling.

T he e vent has bubb led up to the d oc um ent le vel

Clicking on the second p element passes a value of true to function paragraphClick, which will disable the event bubbling for this event.
T he ev ent ha s be en c anc e led

Slide 33 af 51

Ingenirhjskolen i rhus

Slide 34 af 51

Ingenirhjskolen i rhus

DHTML Events I
Ev e n t D e sc rip t io n

DHTML Events II
Ev e n t D e sc rip t io n

C lipb o a rd even ts onbeforecut onbeforecopy onbeforepaste oncopy oncut onabort onpaste D a ta b ind in g events onafterupdate onbeforeupdate oncellchange ondataavailable ondatasetchanged ondatasetcomplete onerrorupdate onrowenter onrowexit onrowsdelete onrowsinserted Fig . 1 4 .1 0 D y n a m ic
Fires b efo re a selection is cu t to the clipb o ard . Fires b efo re a selection is co p ied to th e clipb o ard . Fires b efo re a selection is p asted fro m th e clip b o ard . Fires w h en a selectio n is c op ied to th e clipb o ard . Fires w h en a selectio n is c u t to th e clip b o ard . Fires if im ag e tran sfer h as b een in terru p ted b y u ser. Fires w h en a selectio n is p asted fro m th e clip b o ard .

K ey b o a rd E ve nts onhelp onkeydown onkeypress onkeyup m a r q u e e ev en ts onbounce onfinish onstart M o u se ev en ts oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop onmousedown onmouseup Fig . 1 4 .1 0 D y n a m ic
Ingenirhjskolen i rhus
F ires w h en th e u ser in itia tes h e lp (i.e ., b y p re ssin g th e F 1 k e y). F ires w h en th e u ser p u sh es d o w n a k e y. F ires w h en th e u ser p resses a key. F ires w h en th e u ser en d s a k ey p ress. F ires w hen d ire ctio n. a scro llin g ma r qu e e b o un ces b ack in th e o th er

F ires w h en a m a r q u e e fin is h es its sc ro llin g . F ires w h en a m a r q u e e b e gin s a n ew lo o p .

Fires im m ed iately after a d atabo u nd o b ject h as b een up d ated . Fires b efo re a d a ta so u rce is u pd ated . Fires w h en a da ta so u rce has ch an g ed . Fires w h en n ew d ata fro m a d ata so u rce beco m e availab le. Fires w h en con ten t at a d ata so u rce h as ch an g ed . Fires w h en co m p leted . Fires w h en availab le. Fires w hen fin ish ed . a a tran sfer of d ata fro m th e d ata so u rce h as

F ires w h en th e co n text m en u is sh o w n (rig h t-click ). F ires w h en th e m o u se is d o u b le-c lic ked . F ires d u rin g a m o u se d rag . F ires w h en a m o u se d rag en d s. F ires w h en so m eth in g is d rag ged o n to an a rea. F ires w h en so m eth in g is d rag ged o u t o f an a rea. F ires w h en a d rag is h eld o v er an a rea. F ires w h en a m o u se d rag b eg in s. F ires w h en d u rin g a d rag . a m o u se b u tto n is released o ve r a va lid targ et

Fires if an erro r occu rs w h ile u pd atin g a d ata field . n ew ro w ro w of of d ata d ata fro m fro m th e th e d ata d ata sou rc e so u rce has is ju st

Fires w h en a row o f d ata fro m th e d ata so u rce is d eleted . Fires w h en a row o f d ata fro m th e d ata so u rce is in serted . HTM L e v e n t s.

F ires w h en a m o u se b u tto n is p re ssed d o w n . F ires w h en a m o u se b u tto n is relea sed . HTM L e v e n t s.

Slide 35 af 51

Slide 36 af 51

Ingenirhjskolen i rhus

DHTML Events III

Ev e n t D e sc rip t io n

Events
Illustrating Example
http://www.xs4all.nl/~ppk/js/eventexample.html

M iscellaneous Events o naft erpr int o nbef oree ditf ocu s o nbef orep rint o nbef oreu nloa d o ncha nge o nfil terc hang e o nlos ecap ture o npro pert ycha nge o nrea dyst atec han ge o nres et o nres ize o nscr oll o nsel ect o nsel ects tart o nsto p o nunl oad Fig . 14.10 D yn a m ic

Fires im mediately after the docum ent prints. Fires before an element gains focus for editing. Fires before a document is printed. Fires before a document is unloaded (i.e., the w indow was closed or a link was clicked). Fires w hen a new choice is made in a se le ct element, or when a text input is changed and the element loses focus. Fires w hen a filter changes properties or finishes a transition (see Chapter 15, Filters and T ransitions). Fires w hen the relea se Captu re method is invoked. Fires w hen the property of an object is changed. Fires changes. w hen the read yS tate form resets property (i.e., the of user an clicks element an

Study the link try it out

Fires w hen a <input type = "reset">).

Fires w hen the size of an object changes (i.e., the user resizes a window or frame). Fires w hen a window or frame is scrolled. Fires when t extar ea ). a text selection begins (applies to i nput or

Fires w hen the object is selected. Fires w hen the user stops loading the object. Fires w hen a page is about to unload. HTM L e v e n t s.

Slide 37 af 51

Ingenirhjskolen i rhus

Slide 38

Ingenirhjskolen i rhus

DHTML Usage Examples

Deitel illustrates a few
Image Change on mouse hover (onmouseover) Dynamic help for form fields (onfocus, onblur) Validation (as seen before)

DHTML Editor Example

Greeting Card Editor Example
http://msdn.microsoft.com/archive/default.asp?url=/arch ive/en-us/dnaredcom/html/dhtmledcom.asp http://msdn.microsoft.com/archive/default.asp?url=/arch ive/en-us/dnaredcom/html/cncpt.asp

Many possibilites
Dynamic menues Editing Facilities (see next) Dynamic table sorting Filters & Transitions

Using an ActiveX component only IE 5.5 > Combined with server side = Windows like

Slide 39

Ingenirhjskolen i rhus

Slide 40

Ingenirhjskolen i rhus

10

Open Source Editor

FCKEditor
http://www.fredck.com/FCKeditor/

Open source (Commercial License exists) Easy to implement with ASP,PHP,JSP,.NET Demo at:
http://www.fckeditor.net/demo/

Slide 41

Ingenirhjskolen i rhus

Slide 42

Ingenirhjskolen i rhus

Dynamic Menues
Simple Examples
http://www.w3schools.com/dhtml/dhtml_examples.asp

Commercial Example:
http://www.opencube.com/vim6.0/template1.html

DoJo:
http://www.dojotoolkit.org/demos/fisheye-demo
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slide2

Slide 43

Ingenirhjskolen i rhus

Slide 44

Ingenirhjskolen i rhus

11

http://www.htmlgoodies.com/legacy/beyond/dhtml/menu2.html

http://www.htmlgoodies.com/legacy/beyond/dhtml/dhtml5.html
Slide 45 Ingenirhjskolen i rhus Slide 46 Ingenirhjskolen i rhus

Firebug

Slide 47

Ingenirhjskolen i rhus

Slide 48

Ingenirhjskolen i rhus

12

AJAX / XML HttpRequestObject

AJAX = Asynchronous JavaScript And XML Coined by Jesse James Garrett Feb. 2005 Is actually DHTML with async server communication Widespread support Not W3C Usages:
Partial-page-update Pattern Minimizes HTML page loading operations (no need for frames) Real Time Form Data Validation Continuous Data Updates (refreshing) Advanced User Interface Controls (master detail etc)

Ajax Overview

Slide 49

Ingenirhjskolen i rhus

Slide 50

Ingenirhjskolen i rhus

Pros & Cons

Pros
Bandwith: Reduces Server Post-back usage (Round-tripping antipattern) GUI: Windows-like rich user interfaces, more smooth operation Design: may encourage programmers to further separate content from presentation

AJAX Support
The XMLHttpRequest object supported in
Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, Netscape 7

Cons:
Breaks HTTP convention higher complexity browser navigation Overly Complex OR magic components / toolkits Relies heavy on DHTML/JS problems with some browsers Search Engine integration (as in frames) is problematic Browser Navigation problematic

Usually: get a complete framework

Slide 51

Ingenirhjskolen i rhus

Slide 52

Ingenirhjskolen i rhus

13

AJAX Frameworks
Simple AJAX:
http://www.w3schools.com/ajax/ajax_example.asp http://userportal.iha.dk/~sw/index_with_http_request.htm (HttpRequestObject) http://userportal.iha.dk/~sw/res/external.js

JavaScript based AJAX Frameworks

CleanAJAX: http://clean-ajax.sourceforge.net/ Mootools http://mootools.net/

Serverside based AJAX Frameworks

Microsoft ASP.NET AJAX: (video: http://www.asp.net/learn/videos/view.aspx?tabid=63&id=75 ) http://ajax.asp.net/default.aspx?tabid=47 Java AJAX (Echo): http://nextapp.com/platform/echo2/echo/ PHP AJAX (AJASON): http://ajason.sourceforge.net/
Slide 53 Ingenirhjskolen i rhus

14