1. Internet Technology 1 Presentation 9: DHTML

2. Ingeniørhøjskolen i Århus Slide 2 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 NOTICE: –It is not possible to cover all possibilities of modern DHTML

3. Ingeniørhøjskolen i Århus Slide 3 DHTML DHTML = Dynamic HTML – Client Side NOT a W3C Recommendation DHTML = (X)HTML + CSS + JavaScript + DOM –HTML (4.0+), CSS (1.0+), DOM (1+) XHTML, CSS, JavaScript and DOM has already been introduced Unifying these leads to dynamic content

4. Ingeniørhøjskolen i Århus Slide 4 What is Dynamic HTML Used for? Creating more dynamic & user freindly sites –script: style, position & content 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

5. Ingeniørhøjskolen i Århus Slide 5 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

6. Ingeniørhøjskolen i Århus Slide 6 DOM DOM: Document Object Model –http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML- 20030109/http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML- 20030109/ W3C: –Standard for accessing structured doucments –Core DOM used for XML –HTML DOM used for HTML –Representation of a document as a tree structure –API’s for e.g. JavaScript, Java, C++, C#, CLS

7. Ingeniørhøjskolen i Århus Slide 7 DOM Tree Structure Tree structure of a document

8. Ingeniørhøjskolen i Århus Slide 8 Firefox 2 DOM Inspector

9. Ingeniørhøjskolen i Århus Slide 9 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 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

10. Ingeniørhøjskolen i Århus Slide 10 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

11. Ingeniørhøjskolen i Århus Slide 11 IE4 vs NN4 DOM NN4: function aFunction(){ document.layers.ElmRef.left=300; document.layers.ElmRef.top=300; } A XHTML LAYER Container ELement IE4: function aFunction(){ document.all.ElmRef.left=300; document.all.ElmRef.top=300; } A XHTML DIV Container ELement

12. Ingeniørhøjskolen i Århus Slide 12 DOM Browser Support Warning: - This is data from Wikipedia.com -http://en.wikipedia.org/wiki/Comparison_of_layout_engineshttp://en.wikipedia.org/wiki/Comparison_of_layout_engines -Please check references! -Check vendors

13. Ingeniørhøjskolen i Århus Slide 13 Solving Cross Browser Problems Cross Browser DHTML Compatibility check –Ex: http://www.w3schools.com/htmldom/dom_obj_iframe.asp 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) Browser Detect: –If (IE) {…} else if (NetScape) {…} Object Detect: – if (document.images) { do something with the images array } –if (window.focus) window.focus()

14. Ingeniørhøjskolen i Århus Slide 14 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/http://www.dojotoolkit.org/ Can be done server side as well (.NET, JSF)

15. Ingeniørhøjskolen i Århus Slide 15 Read more on DOM DEITEL is too loose Read more at –Http://www.w3c.orgHttp://www.w3c.org –http://xml.coverpages.org/dom.htmlhttp://xml.coverpages.org/dom.html –http://www.quirksmode.org/?dom/contents.htmlhttp://www.quirksmode.org/?dom/contents.html

16. Ingeniørhøjskolen i Århus Slide 16 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

17. Ingeniørhøjskolen i Århus Slide 17 DHTML API / DOM All Elements are accesed via the DOM In JavaScript lecture, we used document.forms to access user data for validation This is called a ”Collection” – there are many collections for access

18. Ingeniørhøjskolen i Århus Slide 18 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 ”frames” collection –Ussed for frame access Several others (see previous slide)

19. Ingeniørhøjskolen i Århus Slide 19 af 51 All.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Object Model 11 12 13 <!-- 14 var elements = ""; 15 16 function start() 17 { 18 for ( var loop = 0; loop < document.all.length; ++loop ) 19 elements += " " + document.all[ loop ].tagName; 20 21 pText.innerHTML += elements; 22 alert( elements ); 23 } 24 // --> 25 26 27 28 29 Elements on this Web page: 30 31 The for loop loops through the elements of the all collection and display each element’s name. The length property of the all collection specifies the number of elements in the collection. The name of each XHTML element (given in the tagName property) in the collection is appended to elements. The innerHTML property is similar to the innerText property but can also include XHTML formatting. The all collection is a collection of all the XHTML elements in the page in the order they appear.

20. Ingeniørhøjskolen i Århus Slide 20 af 51 Program Output An alert dialog is displayed with all the names of the XHTML elements in the all collection. The XHTML elements are rendered on the page. Note comments are represented as !.

21. Ingeniørhøjskolen i Århus Slide 21 Three Properties we may Change For each element we may change: –Style –Content –Position Giving us (in effect) complete control of the page

22. Ingeniørhøjskolen i Århus Slide 22 Dynamic Style Changing an elements style dynamic … document.all.para1.style.color=’red’; document.all.para1.style.backgroundColor=’white’; document.all.para1.style.className=’smallFonts’; … … This is a text

23. Ingeniørhøjskolen i Århus Slide 23 Dynamic Content Content may be changed dynamic … document.all.para1.innerText=’a new text’; document.all.para1.innerHTML=’ a new text ’; … … This is content which will be changed

24. Ingeniørhøjskolen i Århus Slide 24 Dynamic Positioning We may change the x,y position dynamically … document.all.afs1.style.left=’200px’; … … This section may be moved dynamically In effect: animation is possible

25. Ingeniørhøjskolen i Århus Slide 25 Frames Usefull Frames collection Parent for moving up and Frames for down

26. Ingeniørhøjskolen i Århus Slide 26 af 51 Index.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4 5 6 7 8 9 10 Frames collection 11 12 13 14 15 16 17 18 The browser window is broken into two horizontal frames. The top frame (upper) displays file top.html. The bottom frame (lower) is initially empty.

27. Ingeniørhøjskolen i Århus Slide 27 af 51 Top.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 The frames collection 11 12 13 <!-- 14 function start() 15 { 16 var text = prompt( "What is your name?", "" ); 17 parent.frames( "lower" ).document.write( 18 " Hello, " + text + " " ); 19 } 20 // --> 21 22 23 24 25 Cross-frame scripting! 26 27 Function start takes in a user’s name and writes it in a frame in the browser. The write function is used to write text to the frame in the browser. The parent frame of the current frame is first referenced following that the lower frame is referenced. What happens here?

28. Ingeniørhøjskolen i Århus Slide 28 af 51 Program Output Browser prior to user entering a name. Dialog prompt for user to enter name. Browser updated with user name and Hello displayed in bottom frame.

29. Ingeniørhøjskolen i Århus Slide 29 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

30. Ingeniørhøjskolen i Århus Slide 30 af 51 Onload.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 DHTML Event Model - onload 11 12 <!-- 13 var seconds = 0; 14 15 function startTimer() { 16 // 1000 milliseconds = 1 second 17 window.setInterval( "updateTime()", 1000 ); 18 } 19 20 function updateTime() { 21 seconds++; 22 soFar.innerText = seconds; 23 } 24 // --> 25 26 27 28 29 30 Seconds you have spent viewing this page so far: 31 0 32 33 34 Function startTimer will call function updateTime every 1000 milliseconds. Method window.setInterval is used to invoke 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. The onload event executes when an element finishes loading.

31. Ingeniørhøjskolen i Århus Slide 31 af 51 Program Output The page will dynamically update the number of seconds that have elapsed since the page has loaded every second.

32. Ingeniørhøjskolen i Århus Slide 32 af 51 Event Bubbling 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

33. Ingeniørhøjskolen i Århus Slide 33 af 51 Bubbling.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 DHTML Event Model - Event Bubbling 11 12 13 <!-- 14 function documentClick() 15 { 16 alert( "You clicked in the document" ); 17 } 18 19 function paragraphClick( value ) 20 { 21 alert( "You clicked the text" ); 22 23 if ( value ) 24 event.cancelBubble = true; 25 } 26 27 document.onclick = documentClick; 28 // --> 29 30 31 By setting the cancelBubble method to true, disables event bubbling.

34. Ingeniørhøjskolen i Århus Slide 34 af 51 Bubbling.html Program Output 32 33 34 Click here! 35 Click here, too! 36 37 Clicking on the first p element triggers line 27 because the onclick event has bubbled up to the document level. Clicking on the second p element passes a value of true to function paragraphClick, which will disable the event bubbling for this event.

35. Ingeniørhøjskolen i Århus Slide 35 af 51 DHTML Events I

36. Ingeniørhøjskolen i Århus Slide 36 af 51 DHTML Events II

37. Ingeniørhøjskolen i Århus Slide 37 af 51 DHTML Events III

38. Ingeniørhøjskolen i Århus Slide 38 Events Illustrating Example –http://www.xs4all.nl/~ppk/js/eventexample.htmlhttp://www.xs4all.nl/~ppk/js/eventexample.html Study the link – try it out

39. Ingeniørhøjskolen i Århus Slide 39 DHTML Usage Examples Deitel illustrates a few –Image Change on mouse ”hover” (onmouseover) –Dynamic help for form fields (onfocus, onblur) –Validation (as seen before) Many possibilites –Dynamic menues Editing Facilities (see next) –Dynamic table sorting –Filters & Transitions

40. Ingeniørhøjskolen i Århus Slide 40 DHTML Editor Example Greeting Card Editor Example –http://msdn.microsoft.com/archive/default.asp?url=/arch ive/en-us/dnaredcom/html/dhtmledcom.asphttp://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.asphttp://msdn.microsoft.com/archive/default.asp?url=/arch ive/en-us/dnaredcom/html/cncpt.asp Using an ActiveX component – only IE 5.5 > Combined with server side = Windows like

41. Ingeniørhøjskolen i Århus Slide 41

42. Ingeniørhøjskolen i Århus Slide 42 Open Source Editor FCKEditor –http://www.fredck.com/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/http://www.fckeditor.net/demo/

43. Ingeniørhøjskolen i Århus Slide 43 Dynamic Menues Simple Examples –http://www.w3schools.com/dhtml/dhtml_examples.asphttp://www.w3schools.com/dhtml/dhtml_examples.asp Commercial Example: –http://www.opencube.com/vim6.0/template1.htmlhttp://www.opencube.com/vim6.0/template1.html DoJo: –http://www.dojotoolkit.org/demos/fisheye-demohttp://www.dojotoolkit.org/demos/fisheye-demo

44. Ingeniørhøjskolen i Århus Slide 44 http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slide2

45. Ingeniørhøjskolen i Århus Slide 45 http://www.htmlgoodies.com/legacy/beyond/dhtml/dhtml5.html

46. Ingeniørhøjskolen i Århus Slide 46 http://www.htmlgoodies.com/legacy/beyond/dhtml/menu2.html

47. Ingeniørhøjskolen i Århus Slide 47

48. Ingeniørhøjskolen i Århus Slide 48 Firebug

49. Ingeniørhøjskolen i Århus Slide 49 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)

50. Ingeniørhøjskolen i Århus Slide 50 Ajax Overview

51. Ingeniørhøjskolen i Århus Slide 51 Pros & Cons Pros –Bandwith: Reduces Server Post-back usage (Round-tripping anti- pattern) –GUI: “Windows-like” rich user interfaces, more smooth operation –Design: may encourage programmers to further separate content from presentation 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

52. Ingeniørhøjskolen i Århus Slide 52 AJAX Support The XMLHttpRequest object supported in –Internet Explorer 5.0+, –Safari 1.2, –Mozilla 1.0 / Firefox, –Opera 8+, –Netscape 7 Usually: get a complete framework

53. Ingeniørhøjskolen i Århus Slide 53 AJAX Frameworks Simple AJAX: –http://www.w3schools.com/ajax/ajax_example.asp http://userportal.iha.dk/~sw/index_with_http_request.htm (HttpRequestObject)http://www.w3schools.com/ajax/ajax_example.asp http://userportal.iha.dk/~sw/index_with_http_request.htm –http://userportal.iha.dk/~sw/res/external.jshttp://userportal.iha.dk/~sw/res/external.js JavaScript based AJAX Frameworks –CleanAJAX: http://clean-ajax.sourceforge.net/http://clean-ajax.sourceforge.net/ –Mootools http://mootools.net/http://mootools.net/ Server–side 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=47http://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/http://nextapp.com/platform/echo2/echo/ –PHP AJAX (AJASON): http://ajason.sourceforge.net/http://ajason.sourceforge.net/