Internet Technology 1 Presentation 9: DHTML

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

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

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

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

Ingeniørhøjskolen i Århus Slide 6 DOM DOM: Document Object Model – / / 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

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

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

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

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

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

Ingeniørhøjskolen i Århus Slide 12 DOM Browser Support Warning: - This is data from Wikipedia.com - -Please check references! -Check vendors

Ingeniørhøjskolen i Århus Slide 13 Solving Cross Browser Problems Cross Browser DHTML Compatibility check –Ex: –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()

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 – Can be done server side as well (.NET, JSF)

Ingeniørhøjskolen i Århus Slide 15 Read more on DOM DEITEL is too loose Read more at – – –

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

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

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)

Ingeniørhøjskolen i Århus Slide 19 af 51 All.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Object Model <!-- 14 var elements = ""; function start() 17 { 18 for ( var loop = 0; loop < document.all.length; ++loop ) 19 elements += " " + document.all[ loop ].tagName; pText.innerHTML += elements; 22 alert( elements ); 23 } 24 // --> Elements on this Web page: 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.

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 !.

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

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

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

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

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

Ingeniørhøjskolen i Århus Slide 26 af 51 Index.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3 " Frames collection The browser window is broken into two horizontal frames. The top frame (upper) displays file top.html. The bottom frame (lower) is initially empty.

Ingeniørhøjskolen i Århus Slide 27 af 51 Top.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " The frames collection <!-- 14 function start() 15 { 16 var text = prompt( "What is your name?", "" ); 17 parent.frames( "lower" ).document.write( 18 " Hello, " + text + " " ); 19 } 20 // --> Cross-frame scripting! 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?

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.

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

Ingeniørhøjskolen i Århus Slide 30 af 51 Onload.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " DHTML Event Model - onload <!-- 13 var seconds = 0; function startTimer() { 16 // 1000 milliseconds = 1 second 17 window.setInterval( "updateTime()", 1000 ); 18 } function updateTime() { 21 seconds++; 22 soFar.innerText = seconds; 23 } 24 // --> Seconds you have spent viewing this page so far: 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.

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.

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

Ingeniørhøjskolen i Århus Slide 33 af 51 Bubbling.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " DHTML Event Model - Event Bubbling <!-- 14 function documentClick() 15 { 16 alert( "You clicked in the document" ); 17 } function paragraphClick( value ) 20 { 21 alert( "You clicked the text" ); if ( value ) 24 event.cancelBubble = true; 25 } document.onclick = documentClick; 28 // --> By setting the cancelBubble method to true, disables event bubbling.

Ingeniørhøjskolen i Århus Slide 34 af 51 Bubbling.html Program Output Click here! 35 Click here, too! 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.

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

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

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

Ingeniørhøjskolen i Århus Slide 38 Events Illustrating Example – Study the link – try it out

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

Ingeniørhøjskolen i Århus Slide 40 DHTML Editor Example Greeting Card Editor Example – ive/en-us/dnaredcom/html/dhtmledcom.asphttp://msdn.microsoft.com/archive/default.asp?url=/arch ive/en-us/dnaredcom/html/dhtmledcom.asp – 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

Ingeniørhøjskolen i Århus Slide 41

Ingeniørhøjskolen i Århus Slide 42 Open Source Editor FCKEditor – Open source (Commercial License exists) Easy to implement with ASP,PHP,JSP,.NET Demo at: –

Ingeniørhøjskolen i Århus Slide 43 Dynamic Menues Simple Examples – Commercial Example: – DoJo: –

Ingeniørhøjskolen i Århus Slide 44

Ingeniørhøjskolen i Århus Slide 45

Ingeniørhøjskolen i Århus Slide 46

Ingeniørhøjskolen i Århus Slide 47

Ingeniørhøjskolen i Århus Slide 48 Firebug

Ingeniørhøjskolen i Århus Slide 49 AJAX / XML HttpRequestObject AJAX = Asynchronous JavaScript And XML Coined by Jesse James Garrett Feb 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)

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

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

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

Ingeniørhøjskolen i Århus Slide 53 AJAX Frameworks Simple AJAX: – (HttpRequestObject) – JavaScript based AJAX Frameworks –CleanAJAX: –Mootools Server–side based AJAX Frameworks –Microsoft ASP.NET AJAX: (video: ) –Java AJAX (Echo): –PHP AJAX (AJASON):