CSE 190 Internet ECommerce Lecture 3 Programming Internet

Programming Internet Explorer Today’s talk covers: • Navigating the Document Object Model (DOM) •

Resources • Document Object Model, Programming the IE, DHTML • Links: – http: //wsabstract.

Document Object Model (DOM) • HTML/DOM Example 1. htm, DOM Example 2. htm

Document Object Model (DOM) (Scott Robert’s book: chapter 11: html spy) Internet Explorer: DOM

Why use IE? Alternatives: • Mozilla, KDE, Win. Inet, socket libraries Benefits: • Dominant

Walking tree Program example Chapter 6: VBWebhost example Dim doc as HTMLDocument Dim elem

Walking tree, interfaces IWeb. Browser 2 IHTMLWindow IHTMLDocument IHTMLBody. Element IHTMLForm. Element IHTMLAnchor. Element

Loading page ‘ GET url Browser. Navigate 2 “http: //www. ucsd. edu“ ‘ POST

IE: Hosting the Control VB, VJ++ Hosting: 1. Add “Microsoft Internet Controls” to References

Event System • Why events? • Event sequence for page loading • Hooking events

Events: Page Loading Simple Page: • Before. Navigate 2 • Download. Begin • Download.

Events: Page Loading (cot’d) Page With Frames: • Before. Navigate 2 • Download. Begin

Dynamic HTML (DHTML) • Event Handlers: on. Click (of a hyperlink), on. Load, etc.

Slides: 14

Download presentation

CSE 190: Internet E-Commerce Lecture 3

Programming Internet Explorer Today’s talk covers: • Navigating the Document Object Model (DOM) • Responding to IE’s Event system • Challenges and limitations • Browser Helper Objects

Resources • Document Object Model, Programming the IE, DHTML • Links: – http: //wsabstract. com/javatutors/dom 2. shtml – http: //wsabstract. com/javatutors/dom 4. shtml – http: //wsabstract. com/javatutors/dom 5. shtml – http: //wsabstract. com/javatutors/dom 6. shtml • Reference Book: Programming Microsoft Internet Explorer 5 by Scott Roberts

Document Object Model (DOM) • HTML/DOM Example 1. htm, DOM Example 2. htm

Document Object Model (DOM) (Scott Robert’s book: chapter 11: html spy) Internet Explorer: DOM Top Level: Accessing the DOM: • Hosting the Control • Loading the page • Walking the tree

Why use IE? Alternatives: • Mozilla, KDE, Win. Inet, socket libraries Benefits: • Dominant platform • Javascript compatibility • Programmatic ease Drawbacks: • Scalability • Black box

Walking tree Program example Chapter 6: VBWebhost example Dim doc as HTMLDocument Dim elem as IHTMLElement Set doc = Web. Browser 1. Document ‘ Show HTML of document, from <body>. . </body> Msg. Box doc. body. inner. HTML For each elem in doc. all Msg. Box elem. tag & “ “ & elem. inner. HTML Next ‘ Find named element Msg. Box doc. all( “foo” ). tag ‘Find first form, change contents of username field (no on. Change event) doc. forms(0). Item( “username” ). Value = “cypherpunk”

Walking tree, interfaces IWeb. Browser 2 IHTMLWindow IHTMLDocument IHTMLBody. Element IHTMLForm. Element IHTMLAnchor. Element IHTMLImg. Element IHTMLInput. Text. Element IHTMLFrame. Element

Loading page ‘ GET url Browser. Navigate 2 “http: //www. ucsd. edu“ ‘ POST url, form. Data Browser. Navigate 2 “http: //www. ucsd. edu”, post. Data

IE: Hosting the Control VB, VJ++ Hosting: 1. Add “Microsoft Internet Controls” to References 2. Either: – – Set Internet. Explorer 1 = new Internet. Explorer Or: Drag Web. Browser. Ctl onto new form VC++ hosting (ATL): 1. Create new ATL Object (HTMLControl) 2. Within On. Create() method, call wnd. Create. Control( IDH_ATLWBHOST ) 3. Set. External. Dispatch( (IAtl. Wb. Host. UI*) this ); 4. Fetch the pointer to the browser: wnd. Query. Control( IID_IWeb. Browser 2, (void**) &m_sp. Browser );

Event System • Why events? • Event sequence for page loading • Hooking events for individual page items

Events: Page Loading Simple Page: • Before. Navigate 2 • Download. Begin • Download. Complete • Navigate. Complete 2 • Document. Complete

Events: Page Loading (cot’d) Page With Frames: • Before. Navigate 2 • Download. Begin • Download. Complete • Navigate. Complete 2 • Document. Complete (whole frame) • . . . Document. Complete (first frame) • . . . Document. Complete (second frame) • . . . Document. Complete (whole frame)

Dynamic HTML (DHTML) • Event Handlers: on. Click (of a hyperlink), on. Load, etc. – Attached to specific elements via attributes that denote functions invoked upon events – Java/DHTML Example 1. htm and DHTML Example 2. htm – Other examples: Change appearance of text if mouse over, etc. • Server side scripts: e. g. , Live wire