CSE 190: Internet E-Commerce

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/dom2.shtml • http://wsabstract.com/javatutors/dom4.shtml • http://wsabstract.com/javatutors/dom5.shtml • http://wsabstract.com/javatutors/dom6.shtml • Reference Book: Programming Microsoft Internet Explorer 5 by Scott Roberts

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

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

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

Walking tree Program exampleChapter 6: VBWebhost example Dim doc as HTMLDocument Dim elem as IHTMLElement Set doc = WebBrowser1.Document ‘ Show HTML of document, from <body>..</body> 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”

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

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

IE: Hosting the Control VB, VJ++ Hosting: • Add “Microsoft Internet Controls” to References 2. Either: • Set InternetExplorer1 = new InternetExplorer • Or: Drag WebBrowserCtl onto new form VC++ hosting (ATL): • 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 );

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

Events: Page Loading Simple Page: • BeforeNavigate2 • DownloadBegin • DownloadComplete • NavigateComplete2 • DocumentComplete

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

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

CSE 190: Internet E-Commerce