Web Engineering 1. Introduction 2. Client Side Programming Prof. - - PowerPoint PPT Presentation

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite1

Web Engineering

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt

Universität Karlsruhe Fakultät für Informatik Institut für Telematik Wintersemester 1999/2000

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite2

Web Engineering

Chapter 6: Programming and Implementation

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite3

Content

• 1. Introduction
• 2. Client Side Programming
• 3. Server Side Programming
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite4

What has to be implemented?

Infrastructure such as server, browser, or protocols static web pages dynamic pages

based on static or dynamic resources

applications on the web ... the WWW

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite5

Server Manages Resources

resources are uniquely identified on a server static resources

files are stored on the server HTML-pages, images, movies, scripts, programs

dynamic resources

files/content is dynamically generated on the server continuous data (audio, video) access to other systems (e.g. database)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite6

Programming in Distributed Systems

data transport

throughput, delay, bandwidth, etc.

data representation

number formats, character coding

error situation

client, server, “on the way“

IPC

Approaches

message, connection RPC, RMI, CORBA

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite7

WWW Applications

documents

information applications e.g. collection of data sheet from a chip manufacturer

Inherent client-server applications

• nline shop: customer is physically away from the shop

fight booking system: customers are distributed, data is central

standard applications

no installation, maintenance and update at the users site data is kept central, easy to backup e.g. text processor, email system, etc.

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite8

Structure of WWW Applications

backend

(part that runs on the server or is distributed over multiple servers)

application/process logic data storage

front-end

(part that runs on the client)

user interface input validation local calculations in some cases part of the application logic

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite9

Advantages of WWW Applications

no installation on the system of the user

(Browser is already there)

nearly no effort for the development of the network

functionality

analyzing usage

(what parts of the system, what functions are the most important, most used, ...?)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 10

Expectation on WWW Applications

short development time (?) simple development (?)

(no need for expensive client-server specialists)

strong copy protection,

• nly the user interface is distributed
• pen for new business models, e.g. pay by use (?)
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 11

Challenges when developing WWW Applications

scalability persistence transaction criteria security rapidly changing trends and fashions

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 12

Technology Overview Client

content that can be displayed/provided

text, HTML, images, videos, audio, ...

content and programs that can be interpret by the browser

dynamic HTML browser script: JavaScript, VBScript, SMIL, MathML, ...

programs that are executed in the context of the browser

Java Applets (Byte Code, Virtual Machine) ActiveX (Native Code, executed directly by the operating system)

programs that are pluged into the browser and executed in

the context of the browser for specific data types

Plug-Ins

external programs that are started by the browser to

handle data that can not be handled by the browser

helper applications

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 13

Technology Overview Server

content (e.g. HTML-pages) that contains statements that

can be replaced or executed:

SSI, XSSI server side scripting (Livewire, ASP, PHP, JSP, ...)

programs that create content

additional process: CGI In the context of the servers: Fast-CGI, Servlets, ...

extensions of web servers

NSAPI, IISAPI, Apache-Modules, ...

gateways and front-ends for databases application server dedicated/specific servers (see chapter 4)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 14

Content

• 1. Introduction
• 2. Client Side Programming
• 3. Server Side Programming
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 15

Client-Side Programming Overview by Example

HTML (forms) CSS, CSS2 (see chapter 3) XML (see chapter 3) BrowserScript (JavaScript, JScript, VBScript) Java Applets ActiveX Plug-Ins helper applications

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 16

HTML-Forms I

variables are sent by mail <FORM method=”POST" action="mailto:albrecht@teco.edu"> <input type=hidden name="session" value="331"> <p>Comments: <p><textarea name="Comments" rows="5" cols="35"></textarea> <p>Category: <p><select name="Category" size="1"> <option selected>A</option> <option>B</option> </select> </p> <p>Name:<input type="TEXT" name="Name" value size="35"> <p><input type="SUBMIT" value="submit"> <input type="RESET" value="reset"> </form>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 17

HTML-Forms II

methods to transmit data - method

GET - parameter are encoded in the URL POST - parameter are in the body

action that is called - action

URI e.g. mail address, URL of the CGI-script, URL of aServlets

encoding - enctype

MIME type of the data sent to the server application/x-www-from-urlencoded application/form-data

syntax – example <FORM method="GET|POST" action="URI" enctype="Code"> ... </form>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 18

Example 1: E-Mail

On the web page a button is displayed. When the user

clicks the button a mail is sent and so the receiver has the email address.

usually the browser asks whether the mail should be sent

• r not.

<HTML> <HEAD><TITLE>Example - Subscribe</TITLE></HEAD> <BODY> <FORM ACTION="mailto:albrecht@teco.edu?subject=Subscribe" METHOD="POST" ENCTYPE="multipart/form-data"> <B>Push Button to Subscribe</B><BR> <INPUT TYPE="SUBMIT" NAME="Subscribe" VALUE="Subscribe for Free!"> </FORM> </BODY></HTML>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 19

HTML-Forms - Widget Elements

input fields are identified by a name input -Tag

<input type=text name="username" size="20"> input fields with different functionality, e.g. text, password, file, checkbox, radio button, hidden fields (session), buttons (submit, reset)

text input fields

<textarea rows="5" cols="60" name"comment"> number of rows and columns

menus and lists

<select name"drink"> <option selected>Water <option>Wine </select> pull down menus, selection lists

• ne
• re

more elements can be selected

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 20

File Upload I

<h2>Please fill in the file-upload form below</h2> <form method='POST' enctype='multipart/form-data' action='mailto:albrecht@teco.edu'> File to upload: <input type=file name=upfile><br> Notes about the file: <input type=text name=note><br> <input type=submit value=Press> to upload the file! </form>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 21

File Upload II The Mail Sent

From albrecht Thu Jan 20 17:36:21 2000 Received: from teco.edu (teco154pc [129.13.170.154])by teco03a.teco.uni- karlsruhe.de (8.8.5/8.8.5) with ESMTP id RAA12998 for <albrecht@teco.edu>; Thu, 20 Jan 2000 17:36:21 +0100 (MET) Message-Id: <200001201636.RAA12998@teco03a.teco.uni-karlsruhe.de> Date: Thu, 20 Jan 2000 17:36:16 +0100 From: Albrecht Schmidt albrecht@teco.edu X-Mailer: Mozilla 4.6 [en] (WinNT; I) To: albrecht@teco.edu Subject: Form posted from Mozilla Content-type: multipart/form

• data; boundary=-----8731104
• ----8731104

Content-Disposition: form-data; name="upfile"; filename="C:\Bootlog.txt" Content-Type: text/plain [0012DFB6] Loading Device = C:\WINDOWS\HIMEM.SYS [0012DFB8] LoadSuccess = C:\WINDOWS\HIMEM.SYS ... EndTerminate = KERNEL

• ----8731104

Content-Disposition: form-data; name="note" Bootlog

• ----8731104
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 22

Browser Script

HTML file contains content (visualization) and script (execution)

extends HTML with control mechanisms

is interpret by the browser different scripting languages, e.g.

ECMAScript – standardized language (similar to JavaScript/JScript ) JavaScript, JScript(Netscape, Internet Explorer) VBScript (Internet Explorer)

mainly used for

(small) calculations without accessing the server input validation, input pre-processing animations, e.g. menus, images

• pen

additional windows (e.g. adverts)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 23

ECMAScript

Standard

ECMA-262

ECMAScriptLanguage Specification

2nd edition (August 1998)

"This ECMA Standard defines the ECMAScript scripting

language, a general purpose, cross-platform programming language.“

This ECMA Standard is based on several originating

technologies, the most well-known being JavaScript (Netscape Communications) and Jscript (Microsoft Corporation).

http://www.ecma.ch/

ftp://ftp.ecma.ch/ecma-st/Ecma-262.pdf

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 24

JavaScript – the Language

"JavaScript is a lightweight, object-based scripting language"

variables are not typed data types

Numbers (64Bit floating point) Booleans Strings Objects, Arrays

control structures

conditional execution ( if/else, switch/case) loops ( do/while, for, for/in, while)

functions/methods regular expressions – RegExp() – similar to Unix case sensitive

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 25

JavaScript – Events

"event handler" are executed when an event occurs event handler (selection)

• nChange
• nClick, onDblClick
• nKeyDown, onKeyPress, onKeyUp
• nLoad, onUnLoad
• nMouseOver
• nSubmit, onReset

event handler are assigned to HTML objects, e.g.

documents, windows images, links elements inside forms (e.g. buttons, input areas)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 26

JavaScript – Events (Example)

http://www.ora.com/catalog/jscript3/example/js3examples/16

• 1.html
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 27

Windows and Frames

Aus David Flanagan. JavaScript: The Definitive Guide 3nd Edition. 1998

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 28

• rder of
• bjects

http://rummelplatz.uni

• mannheim.de/~skoch/js/tutorial.htm

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 29

JavaScript object hierarchy (Navigator 4.0)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 30

JavaScript - Example I: Calculator

<HEAD><TITLE>Inch to cm</TITLE> <SCRIPT> function i2c(){//compute inch 2 centimeter document.form1.cm.value = document.form1.inch.value*2.54; } function c2i(){//compute centimeter 2 inch document.form1.inch.value = document.form1.cm.value/2.54; } </SCRIPT></HEAD> <BODY> <H1>Compute Inch to CM</H1> <FORM NAME="form1"> Inch: <INPUT TYPE=text NAME="inch" SIZE=12"> <BR> CM: <INPUT TYPE=text NAME="cm" SIZE=12"> <BR> <INPUT TYPE=button VALUE="Inch->cm" onClick="i2c()"> <BR> <INPUT TYPE=button VALUE="cm->Inch" onClick="c2i()"> <BR> <FORM></BODY>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 31

JavaScript Sample Applications

calculator

e.g. Firma Arlt (http://www.arlt.com)

http://www.teco.edu/lehre/webe/beispiele /js/calc.html

screen keyboard

Java Script-Keyboard (Stefan Schmidt, Kai Eckert)

http://www.teco.edu/lehre/webe/beispiele /js/keyboard.html

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 32

JavaScript - Example II: Input Validation

<html><head></head><body> <script language="javascript"> <!-- function formvalidator(theForm) { if (theForm.email.value == ""){ alert("Keine Emailadresse ?!"); theForm.email.focus(); return(false);} return(true); } //--> </script> <form action="albrecht @teco.edu"

• nsubmit="return formvalidator(this)”

name="form1" method=post> Name: <input type=textfield name=name><br> Email: <input type=textfield name=email><br> <input type=submit> </form> </body> </html>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 33

JavaScript – Open Source?

JavaScript/Jscript/VBScript – source code is

transmitted to the browser!

User can easy save and view the script code. This code

can be changed and executed again!

Browser script should not be used for software which

should be kept secret. All script code is published in source code!

cryptic code makes it more difficult to reuse but it does

not keep people from using and changing the code!

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 34

JavaScript – Scrambler – Example I

E.g. http://www.quadhead.de/jss.html

„JavaScript Scrambler is a utility for all JavaScript programmers who are fed up with the fact, that their source code can be stolen and simply modified. It will scramble any JavaScript source code until it is almost impossible to comprehend for others.“ ???

Features:

remove any carriage returns and line feeds from the source code, so the whole script code is placed in one line remove any unnecessary whitespaces, remove any tabs (ASCii 9) remove any comments scramble up to 100 function names (e.g. 'x48292' instead of 'Ticker') minimize the size of the script code and by that speed up script processing

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 35

JavaScript – Scrambler – Example II

Example:

Original:

<SCRIPT LANGUAGE="JavaScript"> <!-- Hide script from old browsers Speed = 100; // milliseconds between scrolls CharNum = 1; // number of chars scrolled per time period function doTicker() { text = " Welcome!"; Scroll(); } function Scroll() { window.setTimeout('Scroll()',Speed); window.status = text; text = text.substring(CharNum) + text.substring(0,CharNum); } doTicker(); //--> </SCRIPT>

Scrambled:

<SCRIPT LANGUAGE="JavaScript"><!-- Speed=100; CharNum=1;function x0822631(){text="Welcome!";x06530();} function x06530(){window.setTimeout('x06530()',Speed); window.status=text;text=text.substring(CharNum)+ text.substring(0,CharNum);}x0822631();//--></SCRIPT>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 36

JavaScript – Browser Support

JavaScript is very similar on the main browsers the used document object model (DOM) is different between

Netscape Communicator und MS Internet Explorer.

example If (navigator.appName == `Microsoft Internet Explorer´) { moviePtn = head1; } else { moviePtn = document.head1; } moviePtn.style.color = `green´;

Reading (German) Praktisches Arbeiten mit HTML 4Detlef Beyer c't 8/1998 208

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 37

Information on JavaScript

Netscape JavaScript Guide

http://developer .netscape.com/docs /manuals/communicator/jsguide4/index.htm

David Flanagan. JavaScript: The Definitive Guide, 3nd

• Edition. 1998.
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 38

Java

„Java is Simple, Object-oriented, Distributed, Interpreted, Robust, Secure, Architecturally Neutral, Portable, High-Performance, Dynamic.“

http://java.sun.com/docs/white/langenv/index.html http://www.euroyellowpages.com/exhibitn/javafeat.html

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 39

Java Applets

Java source code is compile into byte-code Java class files contain byte-code byte-code is executed at the client

• ften there is a Java Virtual Machine (JVM) in the browser

JVMs are available for many different operating systems

each Applet must be derived from the class Applet Applets have designated methods that are called from

the Browser, e.g.

init(), destroy(), start(), stop(), paint()

classes can be dynamically loaded at runtime

http://java.sun.com/docs/books/tutorial/applet/index.html

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 40

Java Applets – HTML Container

HTML is the container for applets values for variables can be provided for the applet

• PARAM NAME
• this.getParameter()

<APPLET CODE="Animator.class" WIDTH=460 HEIGHT=160 ALT="If you could run this applet, you'd see some animation"> <PARAM NAME="imageSource" VALUE="images/Beans"> <PARAM NAME="endImage" VALUE=10> <PARAM NAME="soundSource" VALUE="audio"> <PARAM NAME="soundtrack" VALUE="spacemusic.au"> Your browser is completely ignoring the &lt;APPLET& gt; tag! </APPLET>

example

http://www.teco.edu/lehre/webe/beispiele /applets/java-sample.html

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 41

Java Applet Example (1)

import java.applet.Applet; import java.awt.Graphics; public class Simple extends Applet { StringBuffer buffer; public void init() { buffer = new StringBuffer(); addItem("initializing... "); } public void start() { addItem("starting... "); } public void stop() { addItem("stopping... "); } public void destroy() { addItem("preparing for unloading..."); } void addItem(String newWord) { System.out.println(newWord); buffer.append(newWord); repaint(); } public void paint(Graphics g) { //Draw a Rectangle around the applet's display area. g.drawRect (0, 0, size().width - 1, size().height - 1); //Draw the current string inside the rectangle. g.drawString(buffer.toString (), 5, 15); } }

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 42

Java Applet Example (2)

import java.applet.Applet; import java.awt.Graphics; import java.awt.event.*; public class Simple extends Applet implements MouseListener { String banner; // The text to be displayed public void init() { banner = getParameter("text"); if (banner == null) { banner = "No Text Parameter"; } System.out.println("initializing... Banner=" + banner); addMouseListener (this); } ... public void paint(Graphics g) { g.drawRect (0, 0, getSize().width - 1, getSize().height - 1); g.drawString(banner, 5, 45); } public void mouseClicked(MouseEvent e) { banner="Mouse Clicked!"; System.out.println("MouseEvent..." + e.toString()); repaint(); } ... }

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 43

Applet Security - Sandbox Model

no access to the local file system

no access to sound and video input

no network connections

exception connection to the origin host are allowed

limited access to system functions

not: System.exit(), Runtime.exec()

no access to the local clipboard limited access to system properties new concepts

signed Applets different java.lang.SecurityManager

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 44

Applet Security – Evolution 1.0

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 45

Applet Security – Evolution 1.1

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 46

Applet Security – Evolution 1.2

http:// java.sun. com/products/jdk/1.2/docs/guide/security/index.html http://java.sun.com/products/jdk/1.2/docs/guide/security/spec/se curity-specTOC.fm.html

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 47

ActiveX

Microsoft component model

• nly available for Win32 platform

used in the Intranet difficulties in the Internet

security different code for different os and hardware architectures acceptance

HTML uses as container Local copy of the program is stored Plug-Ins for Internet Explorer are realized as ActiveX Components

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 48

ActiveX - Agent Example - Genie

<HTML><HEAD><TITLE>New Page</TITLE></HEAD> <BODY> <OBJECT ID="Agent1" WIDTH=32 HEIGHT=32 CLASSID="CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F" CODEBASE="#VERSION=2,0,0,0"> <PARAM NAME="_cx" VALUE="847"> <PARAM NAME="_cy" VALUE="847"> </OBJECT> <Script language= VBScript> Dim Genie Agent1.Connected = true Agent1.Characters.Load "Genie", "http://agent.microsoft.com/agent2/chars/genie/genie.acf" set Genie = Agent1.Characters("Genie") Genie.Show 'Make the character look confused and let him ask Genie.Play "confused" Genie.Speak "Hey! What are you doing?" </Script> </BODY> </HTML>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 49

ActiveX - Agent Example - Peedy

http://www.teco.edu/lehre/webe/beispiele/agents/peedy.html http://www.teco.edu/lehre/webe/beispiele/agents/robby.html Examples only work with IE5 running Win95/98 on Intel x86

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 50

Plug-Ins: Overview

Browser offers a defined interface

methods of the Plug-In are called by the Browser methods in the Browser can be called from Plug-In e.g. Netscape Plug-In

Plug-In is responsible for handling a specific MIME-Type

display

• f

complete documents in HTML embedded, e.g. <EMBED SRC="playbtn.rpm" CONTROLS=PlayButton>

Plug-Ins are modules that are dynamically loaded when needed programming knowledge necessary Plug-Ins must be distributed an accepted by the user Plug-Ins can be faster than Java Applets (native code) access to local resource

s possible (file system, Audio/Video, Network)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 51

Plug-Ins: Applications

display/visualize graphic formats

e.g. CGM, PNG, CAD

multimedia

e.g. Flash, Shockwave, QuickTime, VRML

text, presentations and other data formats

z.B. PDF, DVI, MS PowerPoint, MS Word

execution environments

Tcl /Tk, X-Window, WinFrame

distributed applications

e.g. chat, Calendar, Net2Phone

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 52

Plug-Ins: Communication

two possible ways to hand over data from the browser

to the Plug-In

in a file as stream (usually better)

communication within the

browser

browser methods Plug-In methods LiveConnect, interface to Java

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 53

Extending Browser

Browser is available as component or class

e.g. using Microsoft Internet Explorer as part of the software developed using the method BeforeNavigate can be used to execute a method before a URL is loaded

• nly useful if distribution and acceptance is given, e.g. a

specific browser for staff example, Visual Basic Project

http://www.teco.edu/lehre/webe/beispiele/webbrowser1.zip

e.g. java classes that render HTML

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Kapitel 5- Seite 54

Helper-Applications

any MIME-Type any application

must be installed on the client

data transfer

temporary file, stdin

limited feedback from the application to browser limited control of the application by the browser useful for group work an CSCW