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 user interface, based on OS-APIs

Full 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 differences

System access is denied

No 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 are essential for dynamic pages

Most 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 Behaviors HTC Binary

Using 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 in C++ complied code

hidden for end users

run faster

full system access

Must implement at least two interfaces 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 between code and content

Any 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 controls User Input validation

User 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: System.Web.UI.HtmlControls

<input 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: a collection of text attributes

CSSClass: The CSS class to assign to the control

Validation Controls

A mechanism for standard validation

RequiredFieldValidator: Required entry

CompareValidator: Comparison to a value

RangeValidator: Range checking

RegularExpressionValidator: Pattern matching

CustomValidator: User-defined validation

Customization of error information

Client-side Validation

Validation on the client

For browsers with script support

The page includes a client-side JavaScript

Pattern matching uses the client-side script engine Implementation differences are possible

Additional custom validation routines

In some cases: better user feedback

User Controls

Page-based custom controls

User 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: System.Mobile.UI

By 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 is a meta language it‘s a language describing another language

XML 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-tag content end-tag

start tag = < symbol [attributes] > attributes are optional

end tag = </symbol>

empty element = < symbol />

content = elements | text

attribute = symbol = value

Wellformed XML

Symbols are case sensitive

Start 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 declaration

DTD Syntax isn‘t XML conform

XML Schema

Schemas are wellformed XML

Can define default values for attributes

Data types are supported

Order of elements can be defined

Number of occurrences can be defined

XML DOM

The W3C programming model for XML documents

In 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 are declarative, not procedural

Query 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, XmlWriter

XmlNode, XmlLinkedNode

XmlTransform (XSLT)

XmlNavigator (cursor ans XPath support)

XmlResolver

XmlNameTable

XmlReader and XmlWriter

Reading and writing XML from a stream fast, non cached, forward only access

Abstract classes .NET implementations:

XmlTextReader, XmlNodeReader

XmlReader supports validation

Typed value access

Summary

Types of client applications

From HTML to DHTML

Separating content and view (CSS)

Object Modells (W3C, Internet Explorer)

XML and ist technologies