Adding Behaviors to page elements in Microsoft Expression Web 2
Posted by: Minal Agarwal ,
on 3/22/2009,
in
Category Expression Web
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.
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.
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:
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.
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.
8. You can add multiple behaviors for an object. For example an element has 6 behaviors, see image below:
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.
This article has been editorially reviewed by Suprotim Agarwal.
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!
Was this article worth reading? Share it with fellow developers too. Thanks!
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