Transcript Document

Client-side
technologies
Technologies around the Web-Client:
DHTML, CSS, Behaviors, XML and more
Overview
 Section
1: Introduction
 Section
2: DHTML
 Section
3: Behaviors
 Section
4: WebForms
 Section
5: XML
 Section
6: The System.XML namespace
 Summary
Section 1: Introduction
 Traditional
Applications
 Web-based
Applications

Common aspects

HTML

CSS

DHTML
Traditional Applications
 Complex
 Full
user interface, based on OS-APIs
System-Access

system information

file operations

and more
 Plattform
dependant
 Requires
Installation/Deployment
Web-based Applications: Common
 Browser
as front-end
 HTML
loaded from server
 Using
standard protocolls: HTTP/HTTPS
 Limited
GUI with HTML-elements
 Browser-dependant
 System
 No
differences
access is denied
setup required
Web-Based Applications: HTML
 Minimized

Input validation
most Validations require server-request
 Static
GUI

structure and content are fixed

output update requires server request
 Dynamic

operations are server based
Validation, DB querys, GUI update
Web -based Applications: CSS
 Separate
content and view

HTML describes the structure

CSS controls the formatting
 style
attributes controls display/formatting

color, border, alignment

visibility

position: relative, absolute
 styles
can be embedded, linked or inline
Web-based Applications: DHTML
 Non-static


GUI
structure and content are changeable on the client

insert new elements

remove elements

change styles
no server request required for new formats
Section 2: DHTML
 What
is DHTML?
 Document
Object Models

The W3C DOM

The Internet Explorer DOM
 Scripting
What is DHTML?
 DHTML
= HTML + DOM + Script
 A DOM
exposes HTML elements as objects

Objects are scriptable

Objects expose methods and propertys

Styles (CSS) are scriptable
 The
base is Standard HTML
 Scripts
are the dynamic factor
Document Object Model(s)
 DOM
isn‘t equal DOM

the „old“ model from Netscape

the W3C model


equal to the XML model
the IE model

the most comprehensive model

each page element is an object

great properties for content updates
The W3C DOM
 Is
platform- and language-neutral
 Is
simple: few elements, but complete
 Works
with HTML and XML
 Access
to everything in the document

Create new elements and insert at any point

Change existing content

Remove existing content
The Internet Explorer DOM
 Access
to all page elements
 Changing
text on the page

innerText, outerText

innerHTML, outerHTML

Changes the structure too
 Collections

for important element lists
simple use in VBScript (for each)
 Full
event model
Scripting
 Scripts
 Most
are essential for dynamic pages
browsers: JavaScript/ECMA-Script
 Internet
Explorer: different languages

Script Engines implement some COM interfaces

Microsoft: JScript, VBScript

Other vendors: Perl, Python, ...
Section 3: Behaviors
 Overview

attached behavior

element behaviors

ViewLink
 Internet
Explorer Default Behaviors
 Implementing

HTC

Binary
 Using
Behaviors
Behaviors
Behaviors
 Lightweight
components

encapsulate specific functionality

easy separation of script from content
 Three

types of behaviors
Attached behavior

applied to a standard HTML element

can be attached or removed programmatically
Behaviors


Element behavior

included as custom tag

permanently bound
Viewlinks

special type of element behaviors

content displayed in web page but not in source
Internet Explorer Default Behaviors
 anchorClick
 download
 homePage
 httpFolder
 saveFavorite
 saveHistory
 saveSnapshot
 userData
Implementing Behaviors as HTC
 HTC
files are HTML files
 special

tags offer information about the behavior
tagname, properties, ...
 public
properties are coupled with internal
functions
 events

of Internet Explorer can be handled
onccontentready
Implementing Viewlinks
 defaults
object offers vielink property

Nothing for element bahaviors

Reference to the document für vielinks
 HTML
elements directly included

No dynamic creation

Referenced by id

Checking of valid objects dropped
Using behaviors
 Attached
behaviors

Scripting: using the addBehavior method

CSS: using the CSS behavior attribute
 Element

behaviors/Viewlinks
Embbeded trough custom tags
Binary Behaviors
 Written


complied code

hidden for end users

run faster

full system access
Must implement at least two interfaces


in C++
IElementBehavior, IElementBehaviorFactory
Must implement sink objects for DHTML events
Section 4: WebForms
 Definition
 Web
based Components
 Input
Validation
 Templates
 User
Defined Controls
 Templates
 Mobile
Controls
Definition
 The
Visual Basic programming model for the web
server
 Generates
HTML for any browser

Automatic browser detection and code generation

Produces browser specific HTML
 Separation
 Any
between code and content
CLR Language can be used
 A rich
set of controls is supported
Components of WebForms
 HTML

server controls
Server-side wrappers for HTML elements
 Web
Server Controls

More complex (composed) controls

Does not directly map to HTML
 Validation

User Input validation
 User

controls
Controls
Custom Controls for your own elements
HTML Server Controls
 A server-side
object model for HTML elements

properties and methods for server-side coding

properties settings result in client-side HTML
attributes
 Event-handling

on the server
Example: Click-Event is routed to and handled on
the server
 Interaction
with validation controls
 Namespace:
 <input
System.Web.UI.HtmlControls
id="Name" type=text runat="server">
Web Server Controls
 More

complex controls
Lists, Grids, Calendar
 Detect
browser capabilities and create appropriate
output
 Templates
for some controls
 Event
caching
 Same
base functionality as HTML controls
 Namespace:
System.Web.UI.WebControls
Styles
 Properties

for some CSS attributes
(CSS = cascading style sheets)
 Transformed
to

client-side style tag

or alternative elements for non-CSS browsers
 Style
objects:encapsulate properties for more
complex objects

example: Font
 CSSStyle:
 CSSClass:
a collection of text attributes
The CSS class to assign to the control
Validation Controls
 A mechanism
for standard validation
 RequiredFieldValidator:
 CompareValidator:
 RangeValidator:
Required entry
Comparison to a value
Range checking
 RegularExpressionValidator:
 CustomValidator:
 Customization
Pattern matching
User-defined validation
of error information
Client-side Validation
 Validation
 For
 The
browsers with script support
page includes a client-side JavaScript
 Pattern

matching uses the client-side script engine
Implementation differences are possible
 Additional
 In
on the client
custom validation routines
some cases: better user feedback
User Controls
 Page-based
 User
custom controls
controls are special Web Forms

Pages witout HTML and BODY tags

File extension is ascx
 Simple
 <%@
using:
Register TagPrefix="My"
TagName="UserCtrl" Src="UserCtrl.ascx" %>
Custom Controls
 Directly
derived from System.Web.UI.Control
 Implements
some interfaces

INamingContainer

IPostBackDataHandler

IPostBackEventHandler
 Overrides
the Render method
Templates
 Customize
the look of Web Controls
 A template
is a group of HTML elements
 Supported
for DataGrid, DataList and Repeater
 Defined
with the <template> element
 Different
Types: header, footer, item and so on
DataBinding
 Bind
Web Controls to data stores
 Different
types of stores

From simple arrays to databases

Application specific classes
 The
Data Bind method
 Updating
data Sets
Mobile Controls
 Targets

mobile Devices
cell phones and Pocket PCs
 Generate
Wireless Markup Language if required
 Separate
SDK: .NET Mobile Web SDK
 Namespace:
 By
System.Mobile.UI
good design

2 GUIs (PC + Mobile Device)

1 code-behind file for the business logic code
Section 5: XML
 XML
Prologue

Definition and Syntax

Wellformed and valid documents

Document Object Model
 XML
related technologies

XPath

XSL(T)
 The
System.XML namespace
Extensible Markup Language
 XML

it‘s a language describing another language
 XML

is a meta language
is a markup language
you can taging data
 XML
is extensible

the set of symbols isn‘t fixed

you define the symbols

there are no predefined symbols
XML Use
 XForms

next generation of HTML Forms
 SOAP

Simple Object Access Protocol
 XHTML

XML based definition of HTML
XML Rules
 Allows
an unlimited set of symbols
 Symbols
must follow some rules

< > “ ‘ & are reserved for internal use

: is reserved for experimentation with namespaces

Whitespaces: blank, tab, carriage return, linefeed

Hexcodes: #x20, #x9, #xA, #xD
 Information
is UNICODE text
XML Syntax
 element
 start

= start-tag content end-tag
tag = < symbol [attributes] >
attributes are optional
 end
tag = </symbol>
 empty
element = < symbol />
 content
= elements | text
 attribute
= symbol = value
Wellformed XML
 Symbols
 Start

are case sensitive
tags and end tags must match
Special case: empty tag
 Elements
cannot overlap
 Documents

must have a unique root element
called document element
 Attribute
values must be enclosed in “ or ‘
Valid XML
 Documents
use only a defined set of symbols
 Elements
have straight relations
 Elements
use only specific attributes
 Grammar
Definition

Document Type Definition (DTD)

XML Schema
Document Type Definitions (DTDs)
 DOCTYPE
declaration
 Element
declaration
 Attribute
list declaration
 Entity
 DTD
declaration
Syntax isn‘t XML conform
XML Schema
 Schemas
 Can
 Data
are wellformed XML
define default values for attributes
types are supported
 Order
of elements can be defined
 Number
of occurrences can be defined
XML DOM
 The
 In
W3C programming model for XML documents
memory tree based representation
 Documents
can be parsed
 Free
access to all elements and attributes
 Add,
change und remove elements
 MSXML
usable in C++, Visual Basic and Scripting
XPath
 XPath
is a query language
 Expressions
 Query

are declarative, not procedural
expressions are „path oriented“
A path reflects the XML tree
 Usable
through two MSXML methods

selectSibgleNode: returns a single node

selectNodes: returns a node list
XSL(T)
 XSL
consists of two parts

XSLT: a transformation language

XSL FO: a set of formatting objects
 Transformation
can results in

a new XML document

other formats like HTML

pure text
 Only
transformation results are formatted
 XSLT
is supported by MSXML
Section 6: System.XML namespace
 .NET
XML concepts

XML is a key element in .NET

Unified programming model for


XML data

table oriented data
Three key components

DataSet

XmlDocument

XmlDataDocument
.NET DOM
 XmlDocument

implements the W3C DOM
comparable to MSXML
 Integrated
feature of the .NET classes
 Developers
can inherit new classes from
XmlDocument
3
load methods

load from string

load by XmlReader

load by XmlTextReader
More .NET classes
 XmlReader,
 XmlNode,
XmlWriter
XmlLinkedNode
 XmlTransform
 XmlNavigator
(XSLT)
(cursor ans XPath support)
 XmlResolver
 XmlNameTable
XmlReader and XmlWriter
 Reading

fast, non cached, forward only access
 Abstract

and writing XML from a stream
classes
.NET implementations:
XmlTextReader, XmlNodeReader
 XmlReader
 Typed
supports validation
value access
Summary
 Types
 From
of client applications
HTML to DHTML
 Separating
 Object
 XML
content and view (CSS)
Modells (W3C, Internet Explorer)
and ist technologies