Search This Blog
Showing posts with label DHTML. Show all posts
Showing posts with label DHTML. Show all posts
Tuesday, 8 November 2011

Data Binding with Tabular Data Cotrol (TDC)

Posted by David Livingston J at 03:16 0 comments
 DATA BINDING IN DHTML! 
DHTML is a client-side scripting language that provides the features for doing data manipulations like data sorting and filtering at the client side, which ought to be done directly on the database at the server. With DHTML, data manipulations can be done on the client without involving the server and the network. It helps web application developers to produce more responsive data-intensive applications.
To do data manipulation on the client, data must be retrieved from the database on the server and stored in a file, with a format that could be understood by the object in DHTML. This process of storing and displaying data on a web page using files at the client side is called Data Binding. Data binding at the client side can be done with the help of objects called Data Source Objects (DSO).

Simple Data Binding:

Data Source Objects (DSO) are objects which are used for data access from files. One of the several DSOs available in IE 5.5 is the Tabular Data Control (TDC). The Tabular Data Control (TDC) is an ActiveX control that is added to a web page with the object element. This control can be used to bind an element like <span> in a web page with a data field available in a file so as to retrieve and display the data in it.
Element span is a grouping element – it doesn’t apply any inherent formatting to its contents. It is an inline-level element that displays its content with other text and with no line breaks. A similar element is the div element, but it displays its content on its own line, with margins above and below.
Data must be stored in a tabular format for the Table Data Control to access them from a web page. The rules for storing the data in a tabular form are as follows:
  1. The first row of the file may contain headers for the tabular data. Data are arranged in rows and columns.
  2. Data are enclosed by a special character like @.
  3. Data separators like | are used to separate data one from another in a record.

    Implementation:

    The ActiveX control is initialized using the <OBJECT> tag. The CLASSID (unique identifier) for the tabular data control is
    CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83
    Initialization of the Control
    <OBJECT ID="SomeID" CLASSID="CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83">
    ...
    ...
    ...
    </OBJECT>
     
    Any object, like applet, has a number of parameters. Parameters of the object are specified using the <PARAM> tag. The tabular data control has around 8 parameters.
DataURL: The path of the file that contains the data. For eg "data.txt".

UseHeader: Specifies whether the first line of the data file should be used as reference names for their respective fields below. If specified to false, use "Column1", "Column2" etc instead. The default value is false.
 
TextQualifier: Specifies the optional character that surrounds a field.
 
FieldDelim: Specifies the character that is used to separate each field in the data file. The default character is the comma (,). For eg, consider a data file where we have the fields data: *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|' and '*' is  the text qualifier.
 
RowDelim: Specifies the character used to mark the end of each row of data. The default character is the newline (NL) character.

Thus, an example complete initialization will look as follows : 
<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="YourDataFile.txt">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

The parameter names are not case sensitive. The Text Qualifier parameter is purely optional, though can be useful in helping you more easily distinguish between each data entry.

Example for Data binding in DHTML

<HTML>
<HEAD>
<TITLE></TITLE>

<STYLE>
BODY { font-size: 9pt; font-family: verdana, tahoma, sans serif, helvetica; }
TH A { color: white }
TH A:Hover { color: yellow }
</STYLE>

</HEAD>

<BODY>

<OBJECT id=tdcFile CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="file.csv">
<PARAM NAME="UseHeader" VALUE="True">
<param name="FieldDelim" value=";">
<param name="CaseSensitive" value="false">
</OBJECT>



<TR>
<TD COLSPAN=4><LABEL><B>Name:</B>&nbsp;</LABEL>
</TD>
</TR>





<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=2>
<TR BGCOLOR=#333366>
<TD><DIV ID='divDept'><FONT COLOR=#FFFFFF><B>All</B></FONT></DIV></TD>
<TR>
<TD>
<TABLE DATASRC="#tdcFile">
<THEAD>
<TR>
<TH BGCOLOR=#333366>Car</TH>
<TH BGCOLOR=#333366>Name</TH>
<TH BGCOLOR=#333366>Resp</TH>
<TH BGCOLOR=#333366>email</TH>
<TH BGCOLOR=#333366>doc</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD BGCOLOR=#EEEECC><DIV datafld=car></DIV></TD>
<TD BGCOLOR=#EEEECC><DIV datafld=name></DIV></TD>
<TD BGCOLOR=#EEEECC><DIV datafld=resp></DIV></TD>
<TD BGCOLOR=#EEEECC><A DATAFLD=Email STYLE='Text-Decoration: None' ONMOUSEOVER='if(this.href.indexOf("mailto:") == -1){ this.href = "mailto:" + this.href};'><SPAN datafld=Email></SPAN></A></TD>
<TD BGCOLOR=#EEEECC><A DATAFLD=doc STYLE='Text-Decoration: None' ONMOUSEOVER='if(this.href.indexOf("") == -1){ this.href = "" + this.href};'><SPAN datafld=doc></SPAN></A></TD>

</TR>
</TBODY>
<TFOOT>

</TFOOT>
</TABLE>

</TD>
</TR>
</TABLE>

</BODY>
</HTML>
Continue reading →

Applying Filters and Transition in DHTML

Posted by David Livingston J at 01:40 0 comments
FILTERS & TRANSITION! 
Filters and Transition are two features of DHTML that enable the programmer to achieve a great variety of effects, such as:
  1. Transitioning between pages with random dissolves and horizontal and vertical blinds
  2. Converting colored images to gray in response to a user action for disabling purpose
  3. Glowing some letters for emphasis
  4. Displaying text in three-dimensional appearance using drop shadow effect
Among these two features (filters and transitions), applying filters will result in changes that are persistent, but transitions are temporary. Transitions allow a user to transfer from one page to another with a pleasant visual effect such as a random dissolve.
Filters and Transitions are Microsoft Technologies available only in Windows-based versions of IE 5.5, and are not available in any other browsers. They can be applied to block-level elements such as div or p, and to in-line elements such as strong or em if the element has its height or width CSS properties set.

Flip Filters: FlipV and FlipH:

The flipv and fliph filters mirror text or images vertically and horizontally, respectively. Apply these filters to an element by setting its filter property of the style attribute to any one of these two filter (flipv or fliph) or both to get the mirror effect. The coding is as follows:
<h1 style = “filter: fliph”>A Mirrored Text</h1>
<p style = “filter: flipv fliph>Fully Mirred</p>

Transparency with the Chroma Filter:

Chroma filter is a filter which is applied to an image, to make a part of the image transparent to its background. This filter applies transparency effect to a part of the image having the color specified in the filter.
Chroma effect can be applied to an element of a web page using the two properties of the chroma filter: color and enabled. The color property specifies the color of the image for which we apply transparency effect and the property enabled specifies whether to apply the effect to the element or not. This effect can be applied to an image of a web page as follows:
<img id= “chromaImg” src= “trans.gif” style= “position: absolute;
filter: chroma” alt= “Transparent Image” />
chromaImg.filters(“chroma”).color = blue;
chromaImg.filters(“chroma”) = true;
In this example, if the picture named trans.gif has a portion with a color blue, then that part of the image will be made transparent so that the element at the back of the image will be visible through that image.

Mask Filter:

Mask filter allows an element of a web page to be displayed with a solid background and a transparent foreground. Mask filter has a property called color, which specifies the color of the solid background to the masked image or text. The foreground will have the transparency effect.
Example for the code that applies mask effect to a text displayed on an image using <div> element is as follows:
<body>
<h1> Mask Filters </h1>
<div style = “position: absolute; top:125; left:20;
filter: mask(color=red)”>
<h1 style = “font-family: courier, monospace”>
This is a text displayed with the mask effect </h1>
</div>
<img src = “gradient.gif” width = “400” height = “200”
alt = “Image with Gradient effect”/>
</body>

Adding Shadow to a Text:

Shadow filter adds depth to your text in order to create a shadowing effect that gives a three-dimensional appearance to the text. To apply shadowing effect to some text in a web page, apply the shadow filter to the text with values assigned to its direction and color properties.
The direction property of the shadow filter determines in which direction the shadow effect is applied – this can be set to one of eight directions expressed in angular notation – 0 (up), 45 (above-right), 90 (right), 135 (below-right), 180 (below), 225 (below-right), 270 (left) and 315 (above-right). The color property specifies the color of the shadow of the text.
To get the shadowing effect fully, we need to set another style called padding. Increasing the padding value from 0 to 100 provides greater distance between the text and the border of the element, allowing the full effect to be displayed. The following is an example code for applying shadowing effect to a header element in a web page:
<h1 id = “ShadowText” style = “position: absolute; top: 25; left: 25;
Padding: 10; filter: shadow(direction = 45, color = red)”>
A Heading with Shadow </h1>

Creating Gradients with Alpha filter:

Gradient is an effect that can be applied to an image to make it transparent to its background in three different styles: Linear, Circular and Triangular. Linear gradient applies transparency effect to an image gradually from one end to the other horizontally. Circular gradient gives the transparency effect from the centre of the image as a circle which gradually fades away as it enlarges.
Triangular gradient gives the transparency effect in triangular form. A picture is considered as a rectangle formed using four triangles. Each triangular area has transparency effect which is very less at the top and gradually increases more towards bottom. This kind of effect can be applied with the help of three properties of the alpha filter. They are: Style, Opacity and FinishOpacity.
Alpha filter can be applied to the div element, which acts as a container to an image in a web page. The style property determines in what style the opacity is applied: a value of 0 applies uniform opacity, a value of 1 applies a linear gradient, a value of 2 applies a circular gradient and a value of 3 applies a rectangular gradient.
The Opacity and FinishOpacity properties are both percentages that determine at what percentage the specified gradient starts and finishes, respectively. The following lines of code illustrate the application of this filter to an image placed on a div element of a web page:
<body>
<div id = “pic” style = “position: absolute; left: 0; top: 0;
filter: alpha(style = 2, opacity = 100, finishopacity = 0”>
<img src = “flag.bmp” alt = “flag”/>
</div>
</body>

Creating Motion with Blur:

The blur filter creates an illusion of motion by blurring text or images in a certain direction. It has three properties: add, direction and strength, the values of which specify the attributes of the blurring effect. The add property, when set to tree adds a copy of the original image over the blurred image, creating a more clear blurring effect.
The direction property determines in which direction the blur filter is applied. This is expressed in any one of the eight angular vales (0, 45, 90, 135, 180, 225, 270 and 315). The strength property determines how strong the blurring effect is. The following code implements such effects to a header line placed in a div element (block):
<body>
<div id=“blurText” style=“position: absolute, left: 150, top: 150,
padding: 0; filter: blur(add=1, direction=35, strength=50)
background-color: white”>
<h1> This is a header with Blurred effect </h1>
</div>
</body>
Continue reading →
Monday, 31 October 2011

DHTML Event Model!

Posted by David Livingston J at 05:00 0 comments
EVENT HANDLING IN DHTML! 

DHTML event model allows a Web Developer to write scripts that can respond to user interactions and change the page accordingly. This makes web applications more responsive and user friendly and can reduce server load in handling user interaction with the web page. Using the event model of DOM, scripts can respond to user interactions such as moving the mouse on a web page, scrolling up and down the screen or entering keystrokes in a text box.
Some of the most common and useful events that can be handled using DHTML event model are: onClick, onLoad, onError, onMouseMove, onMouseOver, onMouseOut, onFocus, onBlur, onSubmit, and onReset. For instance, we can handle the onreset event to prompt the user to confirm the reset operation (clearing the content of all the UI elements in a form) of the form in a web page.
Event onclick
When a user clicks on a specific item in our web page with the mouse, the onclick event fires. We can handle this event with the help of scripts written using JavaScript/VBScript. This can be done using JavaScript in one of the following two ways:
  1. Using the for property of the script element.
  2. Associating the script directly with the HTML element using its event property – onclick.
The following example illustrates the use of first method:


In the example above, 'for' property of the script element is used to specify the element to which the script applies, and 'event' property is used to specify the event for which this script has been written.

The following example shows how to handle the click event using onclick event property:


Form Events
Event onload:
The onload event fires whenever an element finishes loading (which includes all its children) successfully. Frequently, this event is used in the body element to initiate a script after the page gets loaded and displayed in the client area. 
Some of the uses of onload event are:
  1. Used to open a popup window once the page gets loaded
  2. Used to trigger a script when an image or Java applet gets loaded
Event onerror:
When something goes wrong while rendering the web page on a client machine, an error dialog appears to the user stating the reason for the error. The error dialog presented by the browser can be confusing to the user sometimes. To prevent this dialog box from displaying and to handle errors more elegantly, we can use the onerror event handler to launch a script that writes error messages to the status bar of the browser.

Mouse Related Events
OnMouseMove event:
The event OnMouseMove fires repeatedly whenever the mouse moves over the web page. The location of the mouse can be trapped from within the MouseMove event handler with the help of the event object. The properties offsetx and offsety of the event object give the location of the mouse cursor relative to the left-top corner of the object on which the event was triggered. Event object contains information about any events that occur on your web page.
OnMouseOver and OnMouseOut:
OnMouseOver and OnMouseOut are mouse related events that occur due to mouse movement on the web page. When the mouse cursor moves over an element, an OnMouseOver event occurs for that element. When the mouse cursor leaves the element, an OnMouseOut event occurs for that element.
While moving the cursor over an element, we can get the element’s id with the help of the event object and its srcElement property. The id property of the srcElement is the id attribute of the element on which the MouseOver event occurred.

More Form Events
OnFocus and OnBlur:
These are the events that occur on one of the form elements such as Button, Text etc. The OnFocus event fires when an element gains focus (i.e., when the user clicks a form field or when the user uses the Tab key to move between form elements) and OnBlur fires when an element looses focus (i.e., another control gains focus). With the help of these events, we can do data initialization and validation tasks.
OnSubmit and OnReset:
These events fire when a form is submitted or reset. Submit and Reset are two special buttons available in a data entry page to process the data further or to cancel.

 Event Bubbling:

Event bubbling is a process managed by the event model whereby events fired in Child elements bubble up to their Parent elements for handling. If the events are to be handled only in the child and not by its parents, this process of bubbling the event to its parent can be cancelled by setting the value true to the CancelBubble property of the event object.

Continue reading →

Document Object Model (DOM)

Posted by David Livingston J at 01:44 0 comments
DHTML OBJECT MODEL 


Document Object Model (DOM) is a standard defined by W3C for programming the web dynamically. It allows HTML elements to be accessed as objects having attributes, and methods. Through DOM, Web Developers have control over the content as well as presentation of their web pages by individually accessing  each and every element on their web pages in scripting.

With DOM, HTML elements can be accessed as objects, and attributes of HTML elements can be considered as properties of those objects. DOM allows objects to be scripted (using ID attribute) with languages like JavaScript and VBScript to achieve dynamic effects.

Object Referencing:

In DHTML, the whole web page containing various HTML elements including forms, frames and tables, is referred to as an object called Document object. The simplest way to refer to an element in scripting is by using the element's id attribute. Each HTML element is a child object within the Document object, and its various attributes can be manipulated by scripting.

Example:

In this example, the element p (paragraph) is identified using the name pText. It is referenced from the script written using JavaScript in the header section for changing the content of the paragraph. 

The initial content of the paragraph is “Welcome to our Web site!”. As soon as the web page gets loaded (i.e., brought into the memory of the computer displaying the web page) the content of the paragraph (identified as pText) will be displayed to the user in a message box.  Then the content  of the paragraph will be changed into “Hello, World!” using the propery innerText of pText.
Collection - all and children:

In DHTML, collection refers to an array of related objects used in a web page. There are several special collections in the object model of DHTML. Some of them are: all, anchors, applets, forms, images, links, scripts and stylesheets.

The collection - all refers to all the HTML elements in a document, in the order in which they appear. This collection provides an easy way of referring to any element, especially if it doesn't have an id. The following script illustrates the use of all collection:

document.all.length                  - gives the number of HTML elements in a web page
document.all[i].tagName          - refers to the name of the i-th element
doucment.all[i].innerElement   - refers to the content of the i-th element

Children collection:

This collection named children refers to all the child elements of a container element. For example, html is a container for two of its children – head and body. Similarly, body is a container for many elements, which include <p> element (paragraph).  Children collection provides an easy way to navigate all child  elements of a container element in an HTML document.
Continue reading →
Saturday, 29 October 2011

Introduction to DHTML!

Posted by David Livingston J at 00:41 3 comments

Dynamic HTML is an extension of HTML that expands the possibilities of web page design in presentation and user interaction. It is an umbrella term that refers to a combination of technologies such as HTML, CSS and Scripting languages suchas JavaScript and VBScript.



HTML is for static content, where as DHTML is for dynamic content. With the help of DHTML, we can create a web page with the following features:
  1. Animated content
  2. Dynamic effects and
  3. User interaction

Using DHTML we can create web pages that posses the power of both word processsing application and an Internet application. It gives authors creative control so that they can manipulate any element of the web page and change its style, positioning, and content at any time. It helps a web designer to present richly formatted web pages and allows the user interact with those pages dispayed on the browser.

Advantages of using DHTML:
  • Supported by most web browsers
  • Requires small file sizes (faster than Flash)
  • No plug-ins required for its execution
  • Easy to learn
  • Faster web experience (i.e., change the page content without loading new pages)
Three major functions of DHTML
  1. Positioning
  2. Style modificaiton and
  3. Event handling
Positioning precisely places blocks of content on the page, and if desired, moving those blocks around (strickly speaking, a subset of style modificaitons)

Style modification refers to on-the-fly altering the asthetics of content on the page

Event handling deals with the user interaction (called events) at the client side.


THE DOCUMENT OBJECT MODEL (DOM)

DHTML is a term used for referring to a set of technologies that include HTML, CSS, DOM and Scripting languages (VBScript/JavaScript). On one hand, DHTML uses HTML and CSS for structuring and formatting the content of a web page. On the other hand, it uses Scripting languages for controlling, accessing and manipulating the various elements of the web page.

HTML is a markup language with which we can present the content on a web page, where as CSS is for formatting the various elements on a web page. Scripting languages provide the power of a higher level language to a web page for perfroming some background operation. All these various technologies are united together in DHTML with the help of a standard Object Model called Document Object Model (DOM).

The DOM:

DOM is a standard that defines a programming interface between HTML and other technologies - CSS, Scripting languages like JavaScript. It is defined by World Wide Web Consortium (W3C) as follows:

“It is a platform independent and language neutral interface that lets programs and scripts dynamically access and update the doucment's structure, style and content.”

DOM defines a web page as a document object that consists of a hierarchy of other objects in it.  It considers each and every element of a web page as object, taking HTML into more object-oriented realm.

Through DOM, every element that a web page contains is regarded as object, including elements such as section, heading, image, list and paragraph. Using DOM, it is possible to add, delete or change an element of a web page after its display on the screen.

DOM functions by creating objects and managing the objects in a hierarchy. A parent object in DOM may have child objects and each child objects in turn can have other child objects under it. The following objects are considered as top level DOM objects: All, Anchors, Applets, Body, Documents, Embeds, Event, Filters, Forms, Frames, History, Images, Links, Location, Navigator, Plug-ins, Screen, Selection, Stylesheets, and Window.
Continue reading →
Subscribe to: Posts (Atom)
 

FFY Center for Learning (CSE) © 2011 FutureForYou Network. Supported by W3G Team and FutureForYou.in