Adding Behaviors to page elements in Microsoft Expression Web 2

Posted by: Minal Agarwal , on 3/22/2009, in Category Expression Web
Views: 28540
Abstract: In my last article, we created some interactive buttons but they will be of little use if we do not add behaviors to them. So in this article I will take you through the process of adding behaviors to your interactive buttons and other page elements.
Adding Behaviors to page elements in Microsoft Expression Web 2
A behavior is a combination of an event and an action that occurs when a user interacts with the web page or any element of the page. Behaviors in Microsoft Expression Web are time saving scripts that enable you to easily add some common tasks that could be performed by interactivity. For instance; a popup message, play sound, swap images or set text on the status bar. These are the actions that are triggered by some kind of event like mouse hover, mouse click, and so on.
In this article we will explore how to add behaviors to an element and modify them.
Add a behavior to an element
1.    If the Behaviors task pane is not visible in your workspace, go to Task Panes menu and select Behaviors else go to Format menu and choose Behaviors. The Behaviors task pane usually docks next to Apply/Manage Styles Task pane. You can undock and move to some other location.
     Behaviors task pane
2.    In the Design view select the page element you want to add behavior to. For example a button or some text.
3.    In the Behaviors task pane, click Insert and from the menu choose the action you want to perform.
     Insert menu
In this example I will select ‘Open Browser Window’. This action would open another page in a new browser window. This page could be a part of the same web site or a new web site. We will learn more about this in a moment.
4.    In this case ‘Open Browser Window’ dialog box appears. Specify the URL for the new browser window, a title, width and height of the window and other attributes like Navigation toolbar, statusbar, etc. See image below:
     Open Browser Window
A different dialog box is prompted for each action you select displaying that action specific options. Select the options you want and click OK.
5.    Then select the event under the Events section in the Behaviors task pane. Click on the drop down and choose the event at which you want the chosen action to be performed.
     Events 
6.    You may need to select some additional options that define the event for the action, depending upon the action you have chosen.
7.    Save your page and then preview in the browser.
Preview Page 
 
8.    You can add multiple behaviors for an object. For example an element has 6 behaviors, see image below:
     Multiple Events and Actions
The first three behaviors (highlighted in blue) are triggered by ‘onclick’ event and each onclick event performs a different action like Opening a browser window, play sound and display a popup message. Yes, this is possible the only fact to remember here is that the browser will perform these actions in the order in which they are specified provided your system allocates necessary memory. So first a new browser window would be opened, followed by the sound and lastly a popup message would be popped up. This is simple, isn’t it? But there are some tweaks to remember. Usually sound takes some time to buffer, hence would start a little late, probably after the third behavior viz. popup is displayed.
The up and down arrow buttons (highlighted in red) allow you to reorder your events + actions, just select the event and action and click on the arrows. If the arrow buttons are grayed out, the behaviors cannot be reordered.
Edit a behavior
1.    If the Behaviors task pane is not visible in your workspace, go to Task Panes menu and select Behaviors else go to Format menu and choose Behaviors. The Behaviors task pane usually docks next to Apply/Manage Styles Task pane. You can undock and move to some other location.
2.    Select the element with the behavior you want to change. The Behaviors task pane now displays all the behaviors associated with that element.
3.    Perform the changes with the following:
a.    Action: Double click on the action you want to modify in the Behaviors task pane to open the associated dialog box. Change the action properties over here and click OK.
b.    Event: Click on the down arrow next to the event you want to modify and choose any other event from the given list.
c.    Delete: Highlight the behavior you want to delete and click on Delete button.
d.    Up and Down arrows: Use these arrows to modify the order of the behaviors.
4.    Save your changes.
I hope you enjoyed reading this article. If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email  

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Shel on Monday, May 18, 2009 10:58 PM
Behaviors window sid NOT offer "onclick" or anything like it. Instead, it read my font type, (style3) and of course asthat woudln't apply to a popup window, didn't show the codes necessary.
Comment posted by Minal Agarwal on Tuesday, May 19, 2009 4:21 AM
Hi Shel,

When you say the behaviors window reads your font style, it is not the behaviors window, it is either the Apply Styles or Manage Styles task pane that you are looking at.
First you need to launch the Behaviors task pane. To do that go to Task Panes menu and choose Behaviors. The task pane would be now visible along with the Apply Styles and Manage Styles task pane. See image in step 1.
In Behaviors task pane when you click on the Insert button should you find the 'onclick' option in the drop down menu. For more details go through all the steps in the article carefully.

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook