Internetteknologi ITNET1

1
Internetteknologi (ITNET1)

• Presentation 13
• DHTML

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
• DEITELs chapters on DHTML only touches some of
  the posibilities in DHTML. DEITEL also lacks
  important elements, such as cross browser
  compatibility issues

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
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
• -gt More possibilities e.g. browser based HTML
  editor
• Alternatives Flash/Shockwave, Java Applets,
  ActiveX and other plug-in technologies

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
DOM

• DOM Document Object Model
• http//www.w3.org/TR/2003/REC-DOM-Level-2-HTML-200
  30109/
• 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

7
DOM Tree Structure

• Tree structure of a document

8
Firefox 2 DOM Inspector
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
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
IE4 vs NN4 DOM

• NN4
• ltscript language"JavaScript" type"text/JavaScrip
  t"gt
• function aFunction()
• document.layers.ElmRef.left300
• document.layers.ElmRef.top300
• lt/scriptgt
• ltlayer idElmRefgt A XHTML LAYER Container
  ELement lt/layergt
• IE4
• ltscript language"JavaScript" type"text/JavaScrip
  t"gt
• function aFunction()
• document.all.ElmRef.left300
• document.all.ElmRef.top300
• lt/scriptgt
• ltdiv idElmRefgtA XHTML DIV Container
  ELementlt/layergt

12
DOM Browser Support

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

13
Solving Cross Browser Problems

• Cross Browser DHTML Compatibility check
• Ex http//www.w3schools.com/htmldom/dom_obj_ifram
  e.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
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/
• Can be done server side as well (.NET, JSF)

15
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

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
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
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
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig 13.2 all.html --gt 6
lt!-- Using the all collection --gt 7 8
lthtml xmlns "http//www.w3.org/1999/xhtml"gt 9
ltheadgt 10 lttitlegtObject
Modellt/titlegt 11 12 ltscript type
"text/javascript"gt 13 lt!-- 14
var elements "" 15 16
function start() 17 18
for ( var loop 0 loop lt document.all.length
loop ) 19 elements "ltbr
/gt" document.all loop .tagName 20
21 pText.innerHTML elements 22
alert( elements ) 23
24 // --gt 25 lt/scriptgt 26
lt/headgt 27 28 ltbody onload
"start()"gt 29 ltp id "pText"gtElements on
this Web pagelt/pgt 30 lt/bodygt 31 lt/htmlgt
All.html
20
Program Output
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
Dynamic Style

• Changing an elements style dynamic

ltscript gt document.all.para1.style.colorred
document.all.para1.style.backgroundColorwhite
document.all.para1.style.classNamesmallFonts
lt/scriptgt ltp idpara1gtThis is a textlt/pgt
23
Dynamic Content

• Content may be changed dynamic

ltscript gt document.all.para1.innerTexta new
text document.all.para1.innerHTMLltigta new
textlt/igt lt/scriptgt ltp idpara1gtThis is
content which will be changedlt/pgt
24
Dynamic Positioning

• We may change the x,y position dynamically

ltscript gt document.all.afs1.style.left200px
lt/scriptgt ltdiv idafs1 stylepositionabso
lutleft20topgt This section may be moved
dynamicallylt/divgt

• In effect animation is possible

25
Frames

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

26
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset
.dtd"gt 4 5 lt!-- Fig. 13.7 index.html
--gt 6 lt!-- Using the frames collection --gt 7
8 lthtml xmlns "http//www.w3.org/1999/xhtm
l"gt 9 ltheadgt 10 lttitlegtFrames
collectionlt/titlegt 11 lt/headgt 12 13
ltframeset rows "100, "gt 14 ltframe src
"top.html" name "upper" /gt 15 ltframe
src "" name "lower" /gt 16 lt/framesetgt 17
18 lt/htmlgt
Index.html
27
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 13.8 top.html --gt 6
lt!-- Cross-frame scripting --gt 7 8 lthtml
xmlns "http//www.w3.org/1999/xhtml"gt 9
ltheadgt 10 lttitlegtThe frames
collectionlt/titlegt 11 12 ltscript type
"text/javascript"gt 13 lt!-- 14
function start() 15 16
var text prompt( "What is your name?", ""
) 17 parent.frames( "lower"
).document.write( 18 "lth1gtHello,
" text "lt/h1gt" ) 19 20
// --gt 21 lt/scriptgt 22 lt/headgt
23 24 ltbody onload "start()"gt 25
lth1gtCross-frame scripting!lt/h1gt 26
lt/bodygt 27 lt/htmlgt
Top.html
What happens here?
28
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
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
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig. 14.2 onload.html
--gt 6 lt!-- Demonstrating the onload event
--gt 7 8 lthtml xmlns "http//www.w3.org/19
99/xhtml"gt 9 ltheadgt 10 lttitlegtDHTML
Event Model - onloadlt/titlegt 11 ltscript
type "text/javascript"gt 12 lt!-- 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 // --gt 25
lt/scriptgt 26 lt/headgt 27 28 ltbody
onload "startTimer()"gt 29 30
ltpgtSeconds you have spent viewing this page so
far 31 lta id "soFar"gtltstronggt0lt/stronggt
lt/agtlt/pgt 32 33 lt/bodygt 34 lt/htmlgt
Onload.html
31
Program Output
32
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.cancelBubbletrue

33
1 lt?xml version "1.0"?gt 2 lt!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 4 5 lt!-- Fig 14.9 bubbling.html --gt 6
lt!-- Disabling event bubbling --gt 7 8
lthtml xmlns "http//www.w3.org/1999/xhtml"gt 9
ltheadgt 10 lttitlegtDHTML Event Model -
Event Bubblinglt/titlegt 11 12 ltscript
type "text/javascript"gt 13 lt!-- 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 // --gt 29
lt/scriptgt 30 lt/headgt 31
Bubbling.html
34
32 ltbodygt 33 34 ltp onclick
"paragraphClick( false )"gtClick here!lt/pgt 35
ltp onclick "paragraphClick( true )"gtClick
here, too!lt/pgt 36 lt/bodygt 37 lt/htmlgt
Bubbling.htmlProgram Output
35
DHTML Events I
36
DHTML Events II
37
DHTML Events III
38
Events

• Illustrating Example
• http//www.xs4all.nl/ppk/js/eventexample.html
• Study the link try it out

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
DHTML Editor Example

• Greeting Card Editor Example
• http//msdn.microsoft.com/archive/default.asp?url
  /archive/en-us/dnaredcom/html/dhtmledcom.asp
• http//msdn.microsoft.com/archive/default.asp?url
  /archive/en-us/dnaredcom/html/cncpt.asp
• Using an ActiveX component only IE 5.5 gt
• Combined with server side Windows like

41
(No Transcript)
42
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/

43
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

44
http//www.w3schools.com/dhtml/tryit.asp?filename
trydhtml_menu_slide2
45
http//www.htmlgoodies.com/legacy/beyond/dhtml/dht
ml5.html
46
http//www.htmlgoodies.com/legacy/beyond/dhtml/men
u2.html
47
(No Transcript)
48
Firebug
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
Ajax Overview
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
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
AJAX Frameworks

• Simple AJAX
• http//www.w3schools.com/ajax/ajax_example.asp
  http//userportal.iha.dk/sw/index_with_http_reque
  st.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?tabid63
  id75 ) http//ajax.asp.net/default.aspx?tabid47
  
• Java AJAX (Echo) http//nextapp.com/platform/echo
  2/echo/
• PHP AJAX (AJASON) http//ajason.sourceforge.net/