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

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:

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 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 = attributes are optional end tag = empty element = 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