1 / 52

Client-side technologies

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.

burian
Download Presentation

Client-side technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related