Clientside technologies Technologies around the WebClient DHTML CSS
Client-side technologies Technologies around the Web-Client: DHTML, CSS, Behaviors, XML and more
Overview n Section 1: Introduction n Section 2: DHTML n Section 3: Behaviors n Section 4: Web. Forms n Section 5: XML n Section 6: The System. XML namespace n Summary
Section 1: Introduction n Traditional Applications n Web-based Applications n Common aspects n HTML n CSS n DHTML
Traditional Applications n Complex n Full user interface, based on OS-APIs System-Access n system information n file operations n and more n Plattform dependant n Requires Installation/Deployment
Web-based Applications: Common n Browser as front-end n HTML loaded from server n Using standard protocolls: HTTP/HTTPS n Limited GUI with HTML-elements n Browser-dependant n System n No differences access is denied setup required
Web-Based Applications: HTML n Minimized n Input validation most Validations require server-request n Static GUI n structure and content are fixed n output update requires server request n Dynamic n operations are server based Validation, DB querys, GUI update
Web -based Applications: CSS n Separate content and view n HTML describes the structure n CSS controls the formatting n style attributes controls display/formatting n color, border, alignment n visibility n position: relative, absolute n styles can be embedded, linked or inline
Web-based Applications: DHTML n Non-static n n GUI structure and content are changeable on the client n insert new elements n remove elements n change styles no server request required for new formats
Section 2: DHTML n What is DHTML? n Document Object Models n The W 3 C DOM n The Internet Explorer DOM n Scripting
What is DHTML? n DHTML n. A = HTML + DOM + Script DOM exposes HTML elements as objects n Objects are scriptable n Objects expose methods and propertys n Styles (CSS) are scriptable n The base is Standard HTML n Scripts are the dynamic factor
Document Object Model(s) n DOM isn‘t equal DOM n the „old“ model from Netscape n the W 3 C model n n equal to the XML model the IE model n the most comprehensive model n each page element is an object n great properties for content updates
The W 3 C DOM n Is platform- and language-neutral n Is simple: few elements, but complete n Works with HTML and XML n Access to everything in the document n Create new elements and insert at any point n Change existing content n Remove existing content
The Internet Explorer DOM n Access to all page elements n Changing text on the page n inner. Text, outer. Text n inner. HTML, outer. HTML n Changes the structure too n Collections n for important element lists simple use in VBScript (for each) n Full event model
Scripting n Scripts n Most are essential for dynamic pages browsers: Java. Script/ECMA-Script n Internet Explorer: different languages n Script Engines implement some COM interfaces n Microsoft: JScript, VBScript n Other vendors: Perl, Python, . . .
Section 3: Behaviors n Overview n attached behavior n element behaviors n View. Link n Internet Explorer Default Behaviors n Implementing n HTC n Binary n Using Behaviors
Behaviors n Lightweight components n encapsulate specific functionality n easy separation of script from content n Three n types of behaviors Attached behavior n applied to a standard HTML element n can be attached or removed programmatically
Behaviors n n Element behavior n included as custom tag n permanently bound Viewlinks n special type of element behaviors n content displayed in web page but not in source
Internet Explorer Default Behaviors n anchor. Click n download n home. Page n http. Folder n save. Favorite n save. History n save. Snapshot n user. Data
Implementing Behaviors as HTC n HTC files are HTML files n special n tagname, properties, . . . n public properties are coupled with internal functions n events n tags offer information about the behavior of Internet Explorer can be handled onccontentready
Implementing Viewlinks n defaults object offers vielink property n Nothing for element bahaviors n Reference to the document für vielinks n HTML elements directly included n No dynamic creation n Referenced by id n Checking of valid objects dropped
Using behaviors n Attached behaviors n Scripting: using the add. Behavior method n CSS: using the CSS behavior attribute n Element n behaviors/Viewlinks Embbeded trough custom tags
Binary Behaviors n Written n n complied code n hidden for end users n run faster n full system access Must implement at least two interfaces n n in C++ IElement. Behavior, IElement. Behavior. Factory Must implement sink objects for DHTML events
Section 4: Web. Forms n Definition n Web based Components n Input Validation n Templates n User Defined Controls n Templates n Mobile Controls
Definition n The Visual Basic programming model for the web server n Generates n Automatic browser detection and code generation n Produces browser specific HTML n Separation n Any n. A HTML for any browser between code and content CLR Language can be used rich set of controls is supported
Components of Web. Forms n HTML n server controls Server-side wrappers for HTML elements n Web Server Controls n More complex (composed) controls n Does not directly map to HTML n Validation n User Input validation n User n controls Custom Controls for your own elements
HTML Server Controls n. A server-side object model for HTML elements n properties and methods for server-side coding n properties settings result in client-side HTML attributes n Event-handling n on the server Example: Click-Event is routed to and handled on the server n Interaction with validation controls n Namespace: n <input System. Web. UI. Html. Controls id="Name" type=text runat="server">
Web Server Controls n More n complex controls Lists, Grids, Calendar n Detect output browser capabilities and create appropriate n Templates for some controls n Event caching n Same base functionality as HTML controls n Namespace: System. Web. UI. Web. Controls
Styles n Properties n for some CSS attributes (CSS = cascading style sheets) n Transformed to n client-side style tag n or alternative elements for non-CSS browsers n Style objects: encapsulate properties for more complex objects n example: Font n CSSStyle: a collection of text attributes n CSSClass: The CSS class to assign to the control
Validation Controls n. A mechanism for standard validation n Required. Field. Validator: n Compare. Validator: n Range. Validator: Required entry Comparison to a value Range checking n Regular. Expression. Validator: n Customization Pattern matching User-defined validation of error information
Client-side Validation n Validation on the client n For browsers with script support n The page includes a client-side Java. Script n Pattern n matching uses the client-side script engine Implementation differences are possible n Additional n In custom validation routines some cases: better user feedback
User Controls n Page-based n User custom controls are special Web Forms n Pages witout HTML and BODY tags n File extension is ascx n Simple n <%@ using: Register Tag. Prefix="My" Tag. Name="User. Ctrl" Src="User. Ctrl. ascx" %>
Custom Controls n Directly derived from System. Web. UI. Control n Implements some interfaces n INaming. Container n IPost. Back. Data. Handler n IPost. Back. Event. Handler n Overrides the Render method
Templates n Customize n. A the look of Web Controls template is a group of HTML elements n Supported n Defined for Data. Grid, Data. List and Repeater with the <template> element n Different Types: header, footer, item and so on
Data. Binding n Bind Web Controls to data stores n Different types of stores n From simple arrays to databases n Application specific classes n The Data Bind method n Updating data Sets
Mobile Controls n Targets n mobile Devices cell phones and Pocket PCs n Generate Wireless Markup Language if required n Separate SDK: . NET Mobile Web SDK n Namespace: n By System. Mobile. UI good design n 2 GUIs (PC + Mobile Device) n 1 code-behind file for the business logic code
Section 5: XML n XML Prologue n Definition and Syntax n Wellformed and valid documents n Document Object Model n XML related technologies n XPath n XSL(T) n The System. XML namespace
Extensible Markup Language n XML n it‘s a language describing another language n XML n is a meta language is a markup language you can taging data n XML is extensible n the set of symbols isn‘t fixed n you define the symbols n there are no predefined symbols
XML Use n XForms n next generation of HTML Forms n SOAP n Simple Object Access Protocol n XHTML n XML based definition of HTML
XML Rules n Allows an unlimited set of symbols n Symbols must follow some rules n < > “ ‘ & are reserved for internal use n : is reserved for experimentation with namespaces n Whitespaces: blank, tab, carriage return, linefeed n Hexcodes: #x 20, #x 9, #x. A, #x. D n Information is UNICODE text
XML Syntax n element n start n = start-tag content end-tag = < symbol [attributes] > attributes are optional n end tag = </symbol> n empty element = < symbol /> n content = elements | text n attribute = symbol = value
Wellformed XML n Symbols n Start n are case sensitive tags and end tags must match Special case: empty tag n Elements cannot overlap n Documents n must have a unique root element called document element n Attribute values must be enclosed in “ or ‘
Valid XML n Documents use only a defined set of symbols n Elements have straight relations n Elements use only specific attributes n Grammar Definition n Document Type Definition (DTD) n XML Schema
Document Type Definitions (DTDs) n DOCTYPE declaration n Element declaration n Attribute list declaration n Entity n DTD declaration Syntax isn‘t XML conform
XML Schema n Schemas n Can are wellformed XML n Data define default values for attributes types are supported n Order of elements can be defined n Number of occurrences can be defined
XML DOM n The n In W 3 C programming model for XML documents memory tree based representation n Documents can be parsed n Free access to all elements and attributes n Add, change und remove elements n MSXML usable in C++, Visual Basic and Scripting
XPath n XPath is a query language n Expressions n Query n are declarative, not procedural expressions are „path oriented“ A path reflects the XML tree n Usable through two MSXML methods n select. Sibgle. Node: returns a single node n select. Nodes: returns a node list
XSL(T) n XSL consists of two parts n XSLT: a transformation language n XSL FO: a set of formatting objects n Transformation can results in n a new XML document n other formats like HTML n pure text n Only transformation results are formatted n XSLT is supported by MSXML
Section 6: System. XML namespace n. NET XML concepts n XML is a key element in. NET n Unified programming model for n n XML data n table oriented data Three key components n Data. Set n Xml. Document n Xml. Data. Document
. NET DOM n Xml. Document n implements the W 3 C DOM comparable to MSXML n Integrated feature of the. NET classes n Developers can inherit new classes from Xml. Document n 3 load methods n load from string n load by Xml. Reader n load by Xml. Text. Reader
More. NET classes n Xml. Reader, n Xml. Node, Xml. Writer Xml. Linked. Node n Xml. Transform n Xml. Navigator (XSLT) (cursor ans XPath support) n Xml. Resolver n Xml. Name. Table
Xml. Reader and Xml. Writer n Reading n fast, non cached, forward only access n Abstract n and writing XML from a stream classes . NET implementations: Xml. Text. Reader, Xml. Node. Reader n Xml. Reader n Typed supports validation value access
Summary n Types n From of client applications HTML to DHTML n Separating n Object n XML content and view (CSS) Modells (W 3 C, Internet Explorer) and ist technologies
- Slides: 52