Building Solutions For Internet Explorer 5.0
Advertisement
This presentation is the property of its rightful owner.
1 / 28

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

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

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Building solutions for internet explorer 5 0

Building Solutions For Internet Explorer 5.0 Dave MassyProgram ManagerInternet ExplorerMicrosoft Corporation


Agenda

Agenda

  • Introduction

  • Internet Explorer - The Rich Client

  • Dynamic HTML

  • Components - Behaviors

  • Summary


Introduction

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


Xml transfer model

XML Transfer Model

Network

Client

Server

XSL/

HTML

Browser

DB

ASP

XML

Parser

XMLdoc

XML

Parser


Internet explorer as the rich client

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


Dynamic html

Dynamic HTML

  • Internet Explorer 4.0

    • Introduced Dynamic HTML

  • Internet Explorer 5.0

    • Enhanced DHTML support

      • Performance

      • Robustness

      • Completeness

      • Components


What is dynamic html

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>


Cascading style sheets css

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>


Enable enterprise ready applications

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> …


Page rendering performance

Page Rendering Performance

IE

Load Time

4.01

IE 5

0

100

200

300

400

Tasks


Enable enterprise ready applications1

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


Enable enterprise ready applications2

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)


Persistence example

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>

...


New object model support

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


Example table editing with the dom

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;

}


Vector markup language

Vector Markup Language

  • Can put vector graphic shapes directly on the HTML Page

  • Work just like any HTML Elements

  • Examples

    • VML Editor, Stock Graphs


Make dhtml more accessible

Make DHTML More Accessible

Designer/Author

CSS and HTML

Engineer

Scripting

Business Manager


Dhtml behaviors

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


Dhtml behaviors extend existing html tags

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)


  • Dhtml behaviors define custom tags

    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>


    Custom tags in html

    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


    Building behaviors easy

    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


    Building behaviors in script

    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>


    Behaviors object model

    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


    Resources

    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


    In closing

    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.


  • Login