1. CSE 190: Internet E-Commerce Lecture 3

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

3. Resources Document Object Model, Programming the IE, DHTML Links: –http://wsabstract.com/javatutors/dom2.shtmlhttp://wsabstract.com/javatutors/dom2.shtml –http://wsabstract.com/javatutors/dom4.shtmlhttp://wsabstract.com/javatutors/dom4.shtml –http://wsabstract.com/javatutors/dom5.shtmlhttp://wsabstract.com/javatutors/dom5.shtml –http://wsabstract.com/javatutors/dom6.shtmlhttp://wsabstract.com/javatutors/dom6.shtml Reference Book: Programming Microsoft Internet Explorer 5 by Scott Roberts

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

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

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

7. Walking tree Program example Chapter 6: VBWebhost example Dim doc as HTMLDocument Dim elem as IHTMLElement Set doc = WebBrowser1.Document ‘ Show HTML of document, from.. MsgBox doc.body.innerHTML For each elem in doc.all MsgBox elem.tag & “ “ & elem.innerHTML Next ‘ Find named element MsgBox doc.all( “foo” ).tag ‘Find first form, change contents of username field (no onChange event) doc.forms(0).Item( “username” ).Value = “cypherpunk”

8. Walking tree, interfaces IWebBrowser2 IHTMLWindow IHTMLDocument IHTMLBodyElement IHTMLFormElement IHTMLAnchorElement IHTMLImgElement IHTMLInputTextElement IHTMLFrameElement

9. Loading page ‘ GET url Browser.Navigate2 “http://www.ucsd.edu“http://www.ucsd.edu ‘ POST url, formData Browser.Navigate2 “http://www.ucsd.edu”, postDatahttp://www.ucsd.edu

10. IE: Hosting the Control VB, VJ++ Hosting: 1.Add “Microsoft Internet Controls” to References 2. Either: –Set InternetExplorer1 = new InternetExplorer –Or: Drag WebBrowserCtl onto new form VC++ hosting (ATL): 1.Create new ATL Object (HTMLControl) 2. Within OnCreate() method, call wnd.CreateControl( IDH_ATLWBHOST ) 3. SetExternalDispatch( (IAtlWbHostUI*) this ); 4. Fetch the pointer to the browser: wnd.QueryControl( IID_IWebBrowser2, (void**) &m_spBrowser );

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

12. Events: Page Loading Simple Page: BeforeNavigate2 DownloadBegin DownloadComplete NavigateComplete2 DocumentComplete

13. Events: Page Loading (cot’d) Page With Frames: BeforeNavigate2 DownloadBegin DownloadComplete NavigateComplete2 DocumentComplete (whole frame)...DocumentComplete (first frame)...DocumentComplete (second frame)...DocumentComplete (whole frame)

14. Dynamic HTML (DHTML) Event Handlers: onClick (of a hyperlink), onLoad, 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