Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Behavior Code

Learn to use IE 5's DHTML behaviors in a browser-based VB application.

y now I am sure that many Visual Basic developers are leveraging their Visual Basic skills to do some Web development. In this Solution, I'll cover DHTML Behaviors, a new feature of Internet Explorer 5 that can be used in a Visual Basic DHTML application, Browser control, or HTML pages. (Just remember that it's IE5-specific.) I will introduce the concepts of a Behavior from a Visual Basic developer's perspective and help you further leverage your skills into this new and cool technology.

Behaviors allow you to add custom interfaces to any Element of an HTML document. The custom interface can include properties, methods, events, and event handlers. Once the Behavior is attached to an Element, the Behavior's interface blends seamlessly with the Element's standard interface. So an HTML page author can manipulate the Elements custom interface through script with the standard Element.Method syntax. A Behavior can control the element that it is attached to. It can also control the entire page through the DHTML object model's top-level Window object. First I'll explain how to create a Behavior and then I'll discuss how to attach it to an Element.

Creating a Behavior
A behavior is not written within the HTML page, but rather is stored in a separate file with an .htc extension. The Behavior is structured in a tagged format. The entire Behavior is enclosed in <PUBLIC:COMPONENT></PUBLIC:COMPONENT> tags. Following the opening tag is the Declarations section, in which you must declare any procedures that will be part of the Behavior's public interface. After the Declarations section is the scripting section which is enclosed in <script> tags. Within the script tags are the actual procedures that were declared in the Declarations section. You can also write code within the script tags, outside the body of a procedure, that will run when the Element attached to the Behavior loads. Here's a sample Behavior:

<PUBLIC:COMPONENT> <PUBLIC:METHOD NAME=Method1/> <PUBLIC:PROPERTY NAME=Name PUT= Put_Prop GET= Get_Prop/> <PUBLIC:EVENT NAME=Name ID=Event_1/> <PUBLIC:ATTACH EVENT=onclick FOR=document ONEVENT="Att_1()"/> <SCRIPT> 'code to run on load goes here Function Method1 Event_1.Fire 'code for implementation goes here End Function Function Put_Prop 'code for implementation goes here End Function Function Get_Prop 'code for implementation goes here End Function Function Att_1() 'code for implementation goes here End Function </SCRIPT> < /PUBLIC:COMPONENT>

There are four types of procedure declarations:

This declaration is used for methods and must have a matching procedure within the script tags. The Name attribute should be the name of the matching procedure.

This declaration is used for properties, and must have two procedures: one for the Property Let and one for the Property Get. The Get attribute should be the name of the Get procedure and the Put attribute should be the name of the Let procedure. The procedures do not have to be prefixed with let, get, or put.

This declaration is used to declare events. A procedure within the Behavior must raise the event in order for it to fire. The syntax for raising an event is the Event's ID attribute followed by fire, e.g. Event_1.fire

<PUBLIC:ATTACH EVENt=onclick FOR=document ONEVENT="Att_1()"/>
This declaration is used to allow the Behavior to respond to events within the document. In the Event tag, specify the event that you want to handle. In the For attribute, specify the object which raises the event, this may be either the Element (attached to the Behavior), Window, or Document objects. The OnEvent attribute should be the name of the function within the behavior that handles the event.

Attaching a Behavior
Behaviors are integrated with HTML Styles, so that you can attach a behavior through a style. The syntax is:


To attach a behavior stored in a file named MyBehavior.htc to a Link Element using an inline style, you would use the following syntax:

<A STYLE=" BEHAVIOR:URL(MyBehavior.htc)" HREF="www.devx.com">DevX</A>.

If the behavior is not in the same directory as the HTML page, then specify the directory path.

Sample Behavior
Here's a sample Behavior that allows an Element to hide or show its child elements. To see it in action (if you are running IE5) click here.

<PUBLIC:COMPONENT> <Public:Attach Event="onclick" For="element" ONEVENT="EvtShowHide()"/> <SCRIPT LANGUAGE="vbscript"> dim bHidden bHidden=false 'boolean value that flags when element is hidden ''''''''''''''''''''''''''''''''''''''''''''code that runs on load, sets styles for parent and child elements style.fontweight="bolder" style.cursor="hand" for i=0 to children.length-1 with children(i).style .cursor="default" .fontweight="normal" .position="relative" 'allows for element to be positioned relative to its container .posleft=10 end with next function EvtShowHide() dim s if window.event.srcElement is element then if bHidden=false then s="none" bHidden=true else s="block" bHidden=false end if for i=0 to children.length-1 children(i).style.display=s next end if end function </SCRIPT> </PUBLIC:COMPONENT>

Michael Gellis works at Flash Creative Management (a Microsoft Partner) as a Visual Basic developer. He is a Microsoft Certified Professional in VB5 and VB6 and is co-writing a book for Sybex on VB 6.0 and distributed applications. You can reach him here.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date