Clientside technologies

1
Client-side technologies
Technologies around the Web-Client DHTML, CSS,
Behaviors, XML and more
2
Overview

• Section 1 Introduction
• Section 2 DHTML
• Section 3 Behaviors
• Section 4 WebForms
• Section 5 XML
• Section 6 The System.XML namespace
• Summary

3
Section 1 Introduction

• Traditional Applications
• Web-based Applications
• Common aspects
• HTML
• CSS
• DHTML

4
Traditional Applications

• Complex user interface, based on OS-APIs
• Full System-Access
• system information
• file operations
• and more
• Plattform dependant
• Requires Installation/Deployment

5
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

6
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

7
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

8
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

9
Section 2 DHTML

• What is DHTML?
• Document Object Models
• The W3C DOM
• The Internet Explorer DOM
• Scripting

10
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

11
Document Object Model(s)

• DOM isnt 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

12
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

13
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

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

15
Section 3 Behaviors

• Overview
• attached behavior
• element behaviors
• ViewLink
• Internet Explorer Default Behaviors
• Implementing Behaviors
• HTC
• Binary
• Using Behaviors

16
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

17
Behaviors

• Element behavior
• included as custom tag
• permanently bound
• Viewlinks
• special type of element behaviors
• content displayed in web page but not in source

18
Internet Explorer Default Behaviors

• anchorClick
• download
• homePage
• httpFolder
• saveFavorite
• saveHistory
• saveSnapshot
• userData

19
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

20
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

21
Using behaviors

• Attached behaviors
• Scripting using the addBehavior method
• CSS using the CSS behavior attribute
• Element behaviors/Viewlinks
• Embbeded trough custom tags

22
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

23
Section 4 WebForms

• Definition
• Web based Components
• Input Validation
• Templates
• User Defined Controls
• Templates
• Mobile Controls

24
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

25
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

26
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
• ltinput id"Name" typetext runat"server"gt

27
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

28
Styles

• Properties for some CSS attributes
• (CSS cascading style sheets)
• Transformed to
• client-side style tag
• or alternative elements for non-CSS browsers
• Style objectsencapsulate properties for more
  complex objects
• example Font
• CSSStyle a collection of text attributes
• CSSClass The CSS class to assign to the control

29
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

30
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

31
User Controls

• Page-based custom controls
• User controls are special Web Forms
• Pages witout HTML and BODY tags
• File extension is ascx
• Simple using
• lt_at_ Register TagPrefix"My" TagName"UserCtrl"
  Src"UserCtrl.ascx" gt

32
Custom Controls

• Directly derived from System.Web.UI.Control
• Implements some interfaces
• INamingContainer
• IPostBackDataHandler
• IPostBackEventHandler
• Overrides the Render method

33
Templates

• Customize the look of Web Controls
• A template is a group of HTML elements
• Supported for DataGrid, DataList and Repeater
• Defined with the lttemplategt element
• Different Types header, footer, item and so on

34
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

35
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

36
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

37
Extensible Markup Language

• XML is a meta language
• its a language describing another language
• XML is a markup language
• you can taging data
• XML is extensible
• the set of symbols isnt fixed
• you define the symbols
• there are no predefined symbols

38
XML Use

• XForms
• next generation of HTML Forms
• SOAP
• Simple Object Access Protocol
• XHTML
• XML based definition of HTML

39
XML Rules

• Allows an unlimited set of symbols
• Symbols must follow some rules
• lt gt 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

40
XML Syntax

• element start-tag content end-tag
• start tag lt symbol attributes gt
• attributes are optional
• end tag lt/symbolgt
• empty element lt symbol /gt
• content elements text
• attribute symbol value

41
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

42
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

43
Document Type Definitions (DTDs)

• DOCTYPE declaration
• Element declaration
• Attribute list declaration
• Entity declaration
• DTD Syntax isnt XML conform

44
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

45
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

46
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

47
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

48
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

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

50
More .NET classes

• XmlReader, XmlWriter
• XmlNode, XmlLinkedNode
• XmlTransform (XSLT)
• XmlNavigator (cursor ans XPath support)
• XmlResolver
• XmlNameTable

51
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

52
Summary

• Types of client applications
• From HTML to DHTML
• Separating content and view (CSS)
• Object Modells (W3C, Internet Explorer)
• XML and ist technologies