Module Title



Client-side technologies

Overview

[pic]

Objectives

This module describes client-side technologies for web-based (browser-based) applications.

What You Will Learn

• Writing dynamic web pages

• Writing behaviors for Internet Explorer

• Understanding technologies to separate content and view

• Understanding and use XML

Related Topics Covered in This Lesson

• XM

Recommended Reading

• Some specifications from W3C

• MSDN Online

Section 1: Overview

[pic]

Section 1: Introduction

Traditional Applications

Traditional applications use operating system functions for user input and output. This application type directly use OS functions. Graphical user interfaces are built with a rich set of controls like treeviews, toolbars and more.

Web-based applications

Web based applications use browsers as front end. The UI and the data are described by HTML.

Section 1: Introduction

[pic]

Traditional Applications

Traditional applications have full access to all operating system functions. They can store data on harddisk, read system informations and use all user interface features. There are no restrictions (except the user rights).

A rich set of controls makes it easy to write comfortable graphical user interfaces. Elements can be enabled or disabled, hidden or visible and much more. Users (and developers) have access to a rich set of controls. Menues, toolbars, multi column listviews are native parts of the operation system.

These clients are known as fat clients – the comfort has it's price. The component DLLs are big and plattform dependant. Consequently, the applications are plattform dependant too.

These applications must be installed by a setup programm. Each update – bug fixing, new functionality - requires a new installation.

Section 1: C# Overview

[pic]

Web-based applications: common aspects

Web-based applications use browsers as front-end. These browsers loads HTML from a web server. The communication works with standard protocolls, like HTTP/HTTPS.

The data structure is described and often formatted with HTML. HTML supports only a small set of input controls. New browser generations support Cascading Style Sheets for formatting. HTML tags are only used to structure the data; the display is controlled by styles.

But the functionality is limited. System access is denied.

Complex validation of data input requires a server roundtrip.

Additionally there are differences between the browsers. Each browser uses it's own default fonts, paragraph margins and more.

On the other side, web pages requires no setup. Each page request loads the newest version of a HTML file. Updates work immediately.

Section 1: Introduction

[pic]

Web-based applications: HTML

HTML is static. The browser loads and displays a page (HTML file). That's it. The content and display are fixed and can only be changed by a new page load.

The input in form controls can't be validated, if the browser dosn't support scripts. The reaction of wrong input data is minimal: display of a messagebox.

Keep in mind: supporting script dosn't means support DHTML. The HTML elements must be available as objects for dynamic use.

The GUI is simple: buttons, simple listboxes and images. Popup menues and changeable content are missing. You can't disable or hide elements.

Dynamic operations are server based. This means, new content or another display format requires a new page – requires a server request.

This application type is acceptable for "read only" applications, like magazines, product infopages and comparable presentations. Banking applications or online stores needs more.

Section 2: Introduction

[pic]

Web-based Applications: CSS

HTML offers tags like or for output formatting. Structure- and format-informations are mixed. Additionally each browser has another means of "what is ".

Separate content and view

Cascading Style Sheets (CSS) is a specification by the World Wide Web Consortium (W3C) that describes how to specify the visual layout features of a document. CSS enables you to control the margins, coloring, background images, fonts, and other things. Using style sheets, you can create Web pages with minimal graphics, and therefore much smaller downloads. Style sheets also provide you with a higher level of typographic control, and they enable you to make changes to an entire site through the use of linked style sheets.

Styles can be embeded, linked or inline. Inline styles are usefull for single element formats. If a style is coupled with many elements, it should be described in a style block. For use in a single file, you can embed the style sheet, for more than one file link it.

Examples

red text, yellow border on bottom

This inline style formats a paragraph as red text with a blue border on bottom.

H1 {font-size: 15pt; font-weight: bold}

This style is bound on all H1 tags in the page.

A linked style sheet

The style sheet in the file styles.css is linkes to the page.

Section 2: Introduction

[pic]

Web-based applications: DHTML

DHTML is a major step in the evolution of web-based applications. Structure and content are changeable on the client, the GUI is no longer static. Furthermore it's a HTML-based GUI, but the elements can be manipulated by scripts.

Dynamic HTML provides authors with enhanced creative control so they can manipulate any page element at any time. Dynamic HTML is also the easiest way to make Web pages interactive, using open, standard-based technologies.

All this without server requests.

Section 2: DHTML

[pic]

DHTML

What is DHTML? What does Dynamic mean?

What is a Document Object Model and what is it's role by dynamic web pages? The term "DOM" has several meanings. There is the W3C DOM, Microsofts view of a DOM and the first definition of a DOM from Netscape.

Scripts play a key role for dynamic pages. Object cannot act alone, a mechanism is necessary to call the methods.

Section 2: DHTML

[pic]

What is DHTML?

DHTML = HTML + DOM + Script

To support DHTML, a browser must initially support HTML. (This is the normal HTML). In the second step, the browser exposes all HTML elements as objects. These objects can easily be manipulated, by changing their attributes or applying methods to them at any time.

The Dynamic HTML Object Model doesn't define a whole new set of tags or attributes; it makes the tags, attributes, and CSS attributes totally programmable.

Dynamic content

Text or graphics can be added, deleted, or modified on the fly. For example, a Web page can display an updated headline, without refreshing the page. The text surrounding the headline will reflow automatically.

Scripts

The objects allonedoesn't make the page dynamic. Scripts call the methods and propertys – they are the dynamic factor.

Dynamic styles

Any CSS attribute, including color and font, can be updated without a server round-trip. For instance, text can change color or size when a mouse pointer passes over it. Multimedia filters and transition effects can be applied to HTML elements simply by adding the filter CSS attribute.

Section 2: DHTML

[pic]

Document Object Model(s)

Think off Word or Excel: You have documents, and you have objects to manipulate this documents with VBA. For a web browser the document is the HTML page. The objects are wrappers, accessible by scripts.

But DOM isn‘t equal DOM. The first DOM was designed by Netscape, with a small set of functions. The content of a page is changeable only while it is being loadad. You can work on the input fields and navigate to another page.

Microsoft enhance this model, and make all elements accessible as objects. It's the most comprehensive model, with great properties for content updates.

The W3C has designed his own browser independant model. It's equal to the XML model. Internet Explorer supports this model too.

Section 2: DHTML

[pic]

The W3C DOM

The W3C Document Object Model (DOM) is a platform- and language-neutral interface that permits script to access and update the content, structure, and style of a document. The DOM includes a model for how a standard set of objects representing HTML and XML documents are combined, and an interface for accessing and manipulating them. Web authors can use the DOM interface in Microsoft® Internet Explorer 5 and later to take advantage of this dynamic model.

The key advantages of the DOM are the abilities to access everything in the document, to make numerous content updates, and to work with content in separate document fragments. Many tasks, such as moving an object from one part of the document to another, are highly efficient and easy to perform using DOM members.

Benefits of the DOM

Using the DOM has many advantages for manipulating the document tree. With the DOM, content authors can:

• Move one part of the document tree to another without destroying and re-creating the content.

• Create elements and attach them to any point in the document tree.

• Organize and manipulate new or existing tree branches in a document fragment before inserting the objects back into the tree.

Creating nodes

The following code creates a paragraph element (P) and appends it to the DIV element with the id div1.

set p = document.createElement("P")

div1.appendChild p

Remove nodes

You can remove element with the removeChild method. But before, you schould check, wheter there are any childnodes.

if div1.hasChildNodes then

div1.removeChild div1.childNodes(0)

end if

Section 2: DHTML

[pic]

The Internet Explorer DOM

Before the W3C has recommended a model, Microsoft build it's own model for Internet Explorer. Sometime it's called Dynamic HTML Object Model.

Access anything (all)

With the Dynamic HTML Object Model every single element on the page is accessible. The document features a collection called the all collection. It contains all of the elements on the page. This collection is indexed by name and ID.

You can get all objects in the document with the following code:

a = document.all

for each e in a

' use e

next

If you need paragraphs only, use this statement:

a = document.all("p")

The argument is always a tagname like p, table or input.

If an element has an id, you can access this element directly by this id.

text

p1.innerText = "new text"

Changing text on the page

You can change the actual HTML on the page, on the fly. There are four interesting properties to enable this:

• innerText

• outertext

• innerHTML

• outerHTML

The last two changes the structure sa well.

The inner properties only apply to container elements -- such as DIV, SPAN, and H1 -- and can be used to replace the actual HTML inside a container. The outer properties apply to all HTML tags in the body of the document, and can be used to replace an entire element and its contents.

The innerText and outerText properties return a textual representation of the HTML, without the HTML tag information. The innerHTML and outerHTML properties return the actual HTML string, with all of the embeded HTML information.

Using the innerHTML or outerHTML properties tells Internet Explorer to treat the new string and HTML, and to parse it accordingly. Using the innerText or outerText methods tells Internet Explorer to insert the supplied string literally into the document, without parsing it.

These properties give access to the underlying HTML and also the plain text of the elements on the page.

Change paragraph text:

p1.innerText=“new text“

Change the HTML structure:

p2.innerHTML="normal text bold text normal text"

Dynamic styles

Remember the section about CSS. You can format a paragraph with a style:

text

This style can be changed anytime. You access the style attributes via the style property:

p1.style.color="blue“

Events

GUI applications are coupled with their event model. One of the key shortcomings of previous HTML Object Models was that the event model was incomplete. Only a small set of events was available for a selected set of tags. With the Dynamic HTML Object Model, all elements offer a full set of mouse, keyboard, focus, and specialized events.

Section 2: DHTML

[pic]

Scripting

Scripting enables you to manipulate objects and to work with data in your HTML code. Many Web sites employ scripting to check the browser a user is running, to validate input, work with applets or controls, and communicate to the user.

Two of the most popular scripting languages today are ECMAScript (formerly known as JavaScript) and VBScript.

Microsoft offers a flexible solution, to add scripting to aaplications. With interfaces, applications (hosts) can call any scripting engine. The implementation of the script itself—language, syntax, persistent format, execution model, and so on—is left to the script vendor.

JScript

JScript is Microsoft's implementation of an ECMA-compliant scripting language (like JavaScript) that is oriented specifically at the Internet. JScript is not Java and has nothing to do with Java. It is closer in syntax to C or C++.

JScript supports three separate classes of objects for use within JScript:

• Objects provided by the JScript engine

• Objects provided by Internet Explorer

• Objects provided via the OBJECT tag.

VBScript

Visual Basic Scripting Edition, also known as VBScript, enables authors to create scripts using a subset of the Microsoft Visual Basic language. VBScript is a strict subset of the Visual Basic for Applications language that is used in applications such as Microsoft Excel and the Visual Basic development system. VBScript only supports the use of Variants. It also must be safe for the World Wide Web, so it does not include functionality that directly accesses the client machine's operating system or file system. For example, you cannot use file I/O or read the registry on the client machine.

VBScript provides support for three separate classes of objects:

• Objects provided by the VBScript engine (the core run-time functionality with a minimal set of basic Visual Basic objects).

• Objects provided by Internet Explorer.

• Objects provided via the OBJECT tag.

Section 3: Behaviors

[pic]

Behaviors

This section describe behaviors. There are different types of behaviors, and two ways, to write behaviors. Additionaly there are some default behaviors from Micrsoft.

Section 3: Behaviors

[pic]

Behaviors

DHTML behaviors are simple, lightweight components that encapsulate specific functionality or behavior on a page. When applied to a standard HTML element on a page, a behavior enhances that element's default behavior. For example, a behavior can be created that toggles the display property of an element's children by one mouse click. When this behavior is applied to a standard UL element on a page, it enhances the unordered list's default behavior to expand and collapse when clicked.

As encapsulated components, behaviors provide easy separation of script from content. This not only makes it easy to reuse code across multiple pages, but also contributes to the improved manageability of the page.

There are three types of behaviors:

• attached behaviors

• element behaviors

• viewlinks

Attached behaviors

DHTML behaviors were introduced in Microsoft® Internet Explorer 5 and made it possible to modify the behavior of standard HTML elements by setting the behavior attribute of a Cascading Style Sheets (CSS) entry or by using the addBehavior method in script. DHTML behaviors, in the form introduced in Internet Explorer 5, are now referred to as attached behaviors, to distinguish them from Element Behaviors—which use a different binding mechanism and have other unique characteristics.

Attached behaviors aren't permanently bound to a tag. An attached behavior binds asynchronously to an element and modifies its behavior, and it can be attached or removed programmatically.

Section 3: Behaviors

[pic]

Behaviors

Element behaviors

Element Behaviors are imported into a Web page by a special processing instruction, where it is synchronously bound to a custom element. Once an Element Behavior has been downloaded and parsed, it exists as a first-class element in the document hierarchy and remains permanently bound to the custom element. Element Behaviors differ significantly from attached behaviors in this respect.

Element Behaviors enhances attched behaviors ins several ways. They provide new features that complement the existing capabilities of attached behaviors and provide additional robustness and reliability.

Viewlinks

Viewlinks are a special type of element behaviors. The major difference to a element behavior is the hidden source af a viewlink. The HTML elements of an element behavior are visible in the source, deliverd by the innerHTML property. The elements inserted by a viewlink aren't visible in the HTML source. Don't misunderstand: the content of both types is displayed in the page, but only the code of a "normal" element behavior is returned as part of the source.

Note: only the original HTML source being loaded from the server can be displayed by the View source code menu.

Section 3: Behaviors

[pic]

Internet Explorer Default Behaviors

anchorClick

Enables the browser to navigate to a folder view.

You can use the anchorClick behavior and the exposed folder property to display the files and folders on a Web server in a Web folder view, similar to the Microsoft® Windows® folder view.

download

Downloads a file and notifies a specified callback function when the download is complete.

homePage

Contains information about a user's homepage.

httpFolder

Contains scripting features that enable browser navigation to a folder view.

saveFavorite

Enables the object to persist data in a Favorite.

saveHistory

Enables the object to persist data in the browser history.

saveSnapshot

Enables the object to persist data when a Web page is saved.

userData

The userData behavior persists information across sessions by writing to a UserData store. This provides a data structure that is more dynamic and has a greater capacity than cookies. The capacity of the UserData store depends on the security zone of the domain.

Section 3: Behaviors

[pic]

Implementing Behaviors as HTC

Dynamic HTML (DHTML) behaviors are components that can be implemented in a number of ways. For several years, the task of writing components has been limited to developers using C++ and Visual Basic. As of Internet Explorer 5, script developers can use HTML Components (HTC) or Windows Script Components (WSC) to implement their own DHTML behaviors in script.

An HTC file is nothing but an HTML file, saved with an .htc extension, that contains scripts and a set of HTC-specific tags that expose properties, methods, and events. The first line in a HTC file should contain the tag PUBLIC_COMPONENT with the tagName attribute. Later, in the HTML file, the behavior is familiar by this tagname.

(The LblEdit behavior is part of the module samples. It implements a label-edit-pair.)

Next, you can define property, methods and events. Also you can attach page events to the behavior. Behaviors are inserted into the HTML page by a custom tag. This tag is the container for the actual content. The behavior inserts this content dynamically at runtime. It can use one of the Document Object Models. But, what is the right time to do that? Internet Explorer fires an event, when the custom tag is processed. This event can be attached with the following code:

This means: install an event handler named Init for the behaviors oncontentready event. The behavior is referenced internally as element. (Think on the keywords this and me for class members access.) Init is implemented in the Script block.

The LblEdit example defines three properties:

The behaviors script

The working script is included in a standard script block as well as in web pages.

'+variable and constant declarations

Public Sub Init()

'* first create the HTML elements

set lbl = document.createElement("LABEL")

element.appendChild lbl

set txt = document.createElement("INPUT")

element.appendChild txt

txt.type="TEXT"

if Not IsEmpty(strCaption) then

lbl.innerText=strCaption

else

strCaption=""

end if

if Not IsEmpty(strText) then

txt.value=strText

else

strText = ""

end if

if IsEmpty(bVisible) then bVisible = true

bInit=true

End Sub

The Init function first creates, then insert HTML elements for a label and an input tag. Next, the internal variables are checked. Before Internet Explorer fire the oncontentready event, it processes the custom tag and calls the corresponding property for every attribute. This means, the putCaption, putText and putVisible procedures can be called before Init. Consequently, these functions must check the state of the elements. If the function is called before the object is created, only the value is stored in a variable.

Public Sub putCaption(newValue)

strCaption = newValue

if Not IsEmpty(lbl) then

lbl.innerText = strCaption

end if

End Sub

Section 3: Behaviors

[pic]

Implementing Viewlinks

Behaviors offer the default object, which has several properties that are used in association with viewlink. A viewlink is established for an Element Behavior when the viewLink property refer to an document object. The object that is assigned to the viewLink property is the document fragment. By default, there is no vielink defined for an element behavior, so the initial value of the viewLink property is null.

The PUBLIC:DEFAULTS element is the declarative form of the defaults object. The attributes supported by the PUBLIC:DEFAULTS element correspond to the properties collection of the defaults; so either script or declarations can be used to set the defaults object properties. The PUBLIC:DEFAULTS element is used in the component section of an HTC file, where the initial properties of the defaults object can be set.

defaults.viewLink=document

In Viewlinks, you can embed directly the HTML content. Instead of inserting content with DOM methods, you write some HTML tags, included in a body tag.

(The LblEdit behavior is written as viewlink too. See LblEdit_vl.htc and Test_LblEdit_vl.htm.)

Section 3: Behaviors

[pic]

Using behaviors

Attached behaviors

Internet Explorer provides two ways to apply a behavior to an element.

• Through scripting, using the addBehavior method.

The addBehavior method is the dynamic way of applying a behavior to an element. When the method is called, the behavior is appended to a list of behaviors being applied to the element (as opposed to overwriting the behavior that might have already been attached to that element at the time the method was called). Once attached, the behavior can be detached anytime using the removeBehavior method.

tagid.addBehavior "behavior.htc"

• Through CSS, using the proposed new CSS behavior attribute.

If you've ever used CSS to change the style of an element, then you already know how to apply a behavior to an element on a page using the proposed new behavior attribute.

STYLE="behavior:url(behavior.htc)"

Element behaviors/Viewlinks

There are several steps to use a element behavior:

• Declare a namespace

• Use the Import tag to load the HTC file.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download