1 / 28

Building Solutions For Internet Explorer 5.0 Dave Massy Program Manager Internet Explorer Microsoft Corporation

Building Solutions For Internet Explorer 5.0 Dave Massy Program Manager Internet Explorer Microsoft Corporation. Agenda. Introduction Internet Explorer - The Rich Client Dynamic HTML Components - Behaviors Summary. Introduction. XML - Defines the Structure of Data

omer
Download Presentation

Building Solutions For Internet Explorer 5.0 Dave Massy Program Manager Internet Explorer Microsoft Corporation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Solutions For Internet Explorer 5.0 Dave MassyProgram ManagerInternet ExplorerMicrosoft Corporation

  2. Agenda • Introduction • Internet Explorer - The Rich Client • Dynamic HTML • Components - Behaviors • Summary

  3. Introduction • XML - Defines the Structure of Data • XSL - Data Transformation • Transformation on Server or Client • Dynamic HTML - User Interface • Client Side only • Use Script to provide User Interaction

  4. XML Transfer Model Network Client Server XSL/ HTML Browser DB ASP XML Parser XMLdoc XML Parser

  5. Internet Explorer As The Rich Client • Deploy Applications on the server • No installation on Client Machine • Lower Administration Costs • Reduce Server hit • Greater Scalability • Integration with Office 2000

  6. Dynamic HTML • Internet Explorer 4.0 • Introduced Dynamic HTML • Internet Explorer 5.0 • Enhanced DHTML support • Performance • Robustness • Completeness • Components

  7. What Is Dynamic HTML? • Every HTML Element is Programmable • Change Content without reloading the page • innerHTML to access content of Element, e.g., <span id="s1">This is content of Span s1</span> <input type=text id=t1> <button onclick="s1.innerHTML=t1.value">Click me</button>

  8. Cascading Style Sheets (CSS) • Styles to format content • Every Style is Programmable • Change Formatting without reloading the page, e.g., <span id="s1" style="color:red">This is content of Span s1</span> <button onclick="change();">Click me</button> <script> function change(){ if (s1.style.color=='red') { s1.style.color='blue'; } else { s1.style.color='red'; } } </script>

  9. Enable Enterprise-Ready Applications • Application-fast, not just browser-fast • Faster • Large documents and data binding • Smarter • Fixed table layout <TABLE STYLE="table-layout:fixed” WIDTH=600> <COL WIDTH=100><COL WIDTH=300><COL WIDTH=200> <TR> …

  10. Page Rendering Performance IE Load Time 4.01 IE 5 0 100 200 300 400 Tasks

  11. Enable Enterprise-Ready Applications • Drag-and-drop • Full application-level drag-and-drop support • Between frames • To/from other applications • Context Menu Support • Print from Script • Dialog Extensions • Modeless • Resizeable

  12. Enable Enterprise-Ready Applications • Persistence • No 4k limit like cookies • XML format • Persist your own data: • In a single session (saveHistory) • Across sessions (saveFavorite) • Between pages on your site (userData)

  13. Persistence Example <HTML> <HEAD> <META NAME="save" content="snapshot"> <STYLE TYPE="text/css"> .saveHistory { behavior:url(#default#saveHistory);} </STYLE> </HEAD> <BODY> <H2>Save the text in a Textarea</H2> <TEXTAREA ID=Y CLASS=saveHistory VALUE="default text"> </TEXTAREA> <H2>Save the style attributes of a DIV</H2> <DIV CLASS=saveHistory ID=Z STYLE="background-color: red">default div text<BR></DIV> ...

  14. New Object Model Support • New support for W3C DOM Level 1 • Less knowledge of HTML required • Significantly faster • Allows operations on document tree • Create Elements • Create Text • Insert/Remove/Delete elements • Examples • Table Editor, Create Elements, Sorter

  15. Example - Table Editing With The DOM function addCell() { var r, p, c, nc, text; if (lastSelection == null) return false; r = lastSelection; if (r.tagName == "TD") { r = r.parentElement; c = lastSelection; } else c = null; nc = document.createElement("TD"); text = document.createTextNode("New Cell"); nc.insertBefore(text, null); r.insertBefore(nc, c); select(nc); return nc; }

  16. Vector Markup Language • Can put vector graphic shapes directly on the HTML Page • Work just like any HTML Elements • Examples • VML Editor, Stock Graphs

  17. Make DHTML More Accessible Designer/Author CSS and HTML Engineer Scripting Business Manager

  18. DHTML Behaviors • Make the power of DHTML more accessible to authors • Easy separation between content and behavior • Removes engineering bottleneck • Leverages engineering efforts across many pages • DHTML Behaviors • Extend the power of existing HTML tags • Extend the power of HTML by creating custom tags

  19. DHTML BehaviorsExtend existing HTML tags • Use CSS behavior attribute to apply behavior to any tag • <style> • .mask {behavior: url(mask.htc);} • .blue {background-color: blue;} • </style> • <input type=text class=mask maskType=date> • <input type=text class=blue> • Secure - it’s just script + HTML • Behaviors can expose new object model • New methods, properties, and events • Implement behaviors in either script or compiled code (COM object)

  20. DHTML BehaviorsDefine custom tags • New in Internet Explorer 5.0: Use CSS with custom tags • Declare XML namespace <HTML xmlns:myns /> • Use CSS and behavior to define default style for custom tags <STYLE> @media all { MYNS\:FLY{color:red;behavior:url(fly.htc);} } </STYLE> • Use custom tags with HTML <MYNS:FLY>This <B>content</B> will fly</MYNS:FLY>

  21. Custom Tags In HTML • Custom tag Namespaces avoid name conflicts • <MYNS:TITLE>This is not an HTML title </MYNS:TITLE> • Namespace is defined by the page author • Downlevel Browsers ignore tags and render the content • Use custom tags to define structure • Example enclose all Product prices in <PROD:PRICE> tag

  22. Building Behaviors: Easy! • Script • Author using JavaScript or VBScript • Similar to script in the document • Provides full access to the DOM • Simple COM component • Author on top of simple, well defined interfaces • Create true extensions to the browser • Provides access to the DOM

  23. Building Behaviors In Script • (collapsing bullet point) <UL class=list> • <script language="jscript"> • attachEvent("onclick", event_onclick); • function event_onclick(){ • for (i = 0; i < children.length; • i++){ • mystyle = children[i].style; • if (mystyle.display == "none"){ • mystyle.display = ""; • } else { mystyle.display = • "none"; • } } } • </script>

  24. Behaviors - Object Model • Properties • <PUBLIC:PROPERTY name=delay /> • Refer to delay property name in script • Methods • <PUBLIC:METHOD name=start /> • Script function named start • Events • <PUBLIC:EVENT name=onFinishedFly id=finfly /> • Call finfly.fire() inscript to fire event

  25. Resources • Websites • http://www.microsoft.com/windows/ie/ie5- Highlights major features • http://msdn.microsoft.com/workshop- Reference, Samples, Overviews • Books • “Dynamic HTML Reference and Software Development Kit” - Microsoft • “Programming Internet Explorer 5.0”by Scott Roberts • “DHTML for Dummies” by Michael Hyman

  26. In Closing • Internet Explorer 5.0 • Fast and Stable • Enabling Enterprise-Ready Applications • Bring the Power of DHTML to Everyone • Drag/Drop • Dynamic Properties • Persistence • Context Menus • DHTML Behaviors • Etc.

More Related