Post on 25-Dec-2015
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