Client-side 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 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

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 • <input id="Name" type=text runat="server">

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 objects:encapsulate 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: • <%@ Register TagPrefix="My" TagName="UserCtrl" Src="UserCtrl.ascx" %>

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 <template> 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 • 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

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 • < > “ ‘ & 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 = < symbol [attributes] > • attributes are optional • end tag = </symbol> • empty element = < symbol /> • 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 isn‘t 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