cse 190: internet e-commerce
DESCRIPTION
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: - PowerPoint PPT PresentationTRANSCRIPT
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:
Document Object Model (DOM)(Scott Robert’s book: chapter 11: html spy)
Accessing the DOM:• Hosting the Control• Loading the page• Walking the tree
Why use IE?Alternatives:• Mozilla, KDE, WinInet, socket libraries
Benefits:• Dominant platform• Javascript compatibility• Programmatic ease
Drawbacks:• Scalability• Black box
Walking tree Program example Chapter 6: VBWebhost example
Dim doc as HTMLDocumentDim elem as IHTMLElement
Set doc = WebBrowser1.Document
‘ Show HTML of document, from <body>..</body>MsgBox doc.body.innerHTML
For each elem in doc.allMsgBox elem.tag & “ “ & elem.innerHTML
Next
‘ Find named elementMsgBox 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 urlBrowser.Navigate2 “http://www.ucsd.edu“
‘ POST url, formDataBrowser.Navigate2 “http://www.ucsd.edu”, postData
IE: Hosting the ControlVB, VJ++ Hosting:1. Add “Microsoft Internet Controls” to References2. 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 );
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