Building Solutions For Internet Explorer 5.0
Download
1 / 28

Building Solutions For Internet Explorer 5.0 - PowerPoint PPT Presentation


  • 579 Views
  • Updated On :

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Building Solutions For Internet Explorer 5.0' - omer


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


    ad