Building For Internet Explorer 5.0

1
Building Solutions For Internet Explorer 5.0
Dave MassyProgram ManagerInternet
ExplorerMicrosoft Corporation
2
(No Transcript)
3
Agenda

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

4
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

5
XML Transfer Model
Network
Client
Server
XSL/ HTML
Browser
DB
ASP
XML Parser
XMLdoc
XML Parser
6
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

7
Dynamic HTML

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

8
What Is Dynamic HTML?

• Every HTML Element is Programmable
• Change Content without reloading the page
• innerHTML to access content of Element, e.g.,
• This is content of Span s1
• Click
  me

9
Cascading Style Sheets (CSS)

• Styles to format content
• Every Style is Programmable
• Change Formatting without reloading the page,
  e.g.,

This is content
of Span s1 Clic
k me function change() if
(s1.style.color'red') s1.style.color'blue
' else s1.style.color'red'

10
Enable Enterprise-Ready Applications

• Application-fast, not just browser-fast
• Faster
• Large documents and data binding
• Smarter
• Fixed table layout
• WIDTH600
• WIDTH300

11
Page Rendering Performance
IE
Load Time
4.01
IE 5
0
100
200
300
400
Tasks
12
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

13
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)

14
Persistence Example
content"snapshot" .save
History behaviorurl(defaultsaveHistory) TYLE Save the text in a
Textarea VALUE"default text" Save the
style attributes of a DIV CLASSsaveHistory IDZ STYLE"background-color
red"default div text
...
15
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

16
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
17
Vector Markup Language

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

18
Make DHTML More Accessible
Designer/Author CSS and HTML
Engineer Scripting
Business Manager
19
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

20
DHTML BehaviorsExtend existing HTML tags

• Use CSS behavior attribute to apply behavior to
  any tag
• .mask behavior url(mask.htc)
• .blue background-color blue
• Secure - its just script HTML
• Behaviors can expose new object model
• New methods, properties, and events
• Implement behaviors in either script or compiled
  code (COM object)

21
DHTML BehaviorsDefine custom tags

• New in Internet Explorer 5.0 Use CSS with
  custom tags
• Declare XML namespace
• Use CSS and behavior to define default style for
  custom tags
• _at_media all
• MYNS\FLYcolorredbehaviorurl(fly.htc)
• Use custom tags with HTML
• This content will fly

22
Custom Tags In HTML

• Custom tag Namespaces avoid name conflicts
• This is not an HTML 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
  tag

23
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

24
Building Behaviors In Script

• (collapsing bullet point)
  
  attachEvent("onclick",
  event_onclick) function event_onclick()
  for (i 0 i mystyle childreni.style
  if (mystyle.display "none")
  mystyle.display "" else
  mystyle.display "none"
  

25
Behaviors - Object Model

• Properties
• Refer to delay property name in script
• Methods
• Script function named start
• Events
• /
• Call finfly.fire() inscript to fire event

26
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.0by Scott
  Roberts
• DHTML for Dummies by Michael Hyman

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

28
(No Transcript)