Chapter 7

Adding Client-Side Functionality

This page serves as the companion web page for Chapter 7 of Expression Web 4 Step by Step.

Virtually all the functionality you’ve seen and used in Expression Web to this point has been intrinsic to Expression Web as an application. The goal of this chapter is to show you how you can use features within Expression Web to add functionality to an HTML page.

After completing this chapter, you will be able to:

  • Understand server-side versus client-side scripting
  • Use layers and behaviors
  • Use Data View in an HTML page
  • Create and use HTML forms

Understanding Server-Side VS Client-Side Scripting

Before you forge ahead in this chapter it’s important to understand the difference between server-side and client-side scripting. Without a foundation in the benefits of each and the differences between them, you won’t be effectively able to use the correct one at the correct time.

Using Layers and Behaviors

Expression Web 4 provides a visual interface for performing complicated dynamic HTML (DHTML) tasks. These tasks are accomplished by using the Expression Web 4 Layers and Behaviors task panes. In the next exercise, you will examine these capabilities and insert a DHTML-driven "viewer” into one of your pages. This viewer allows you to show information to a visitor in several ways without requiring navigation to different pages.

In this exercise, you will use the Interactive Buttons feature and the Layers and Behaviors panes to create a multimedia display area in your page

Interactive Buttons and Behaviors

Using Data View in an HTML Page

Based on just the fact that Data View has a menu of its own in Expression Web 4, one can assume that it’s fairly important. That would be an accurate assumption. Not only can the Data View work on ASP.NET pages, but there’s even functionality to include a data view in an HTM/HTML page. Including the Data View in an HTM/HTML page would be another good example of Client-Side scripting. In particular Expression Web uses JavaScript to make it work.

When you complete this exercise you will be able to insert a Data View into an HTM/HTML page, and customize its source code to provide a more appealing and useful result.  In this example the author's "community feed" is used:
http://social.expression.microsoft.com/profile/chris%20leeds,%20mvp/?type=forum

Data View in an HTML Page

Creating and Using HTML Forms

HTML Forms provide a way for you to collect user input and provide varied levels of user interaction. Forms can be used for anything from the most complex database application to the simplest of e-mail-producing contact forms. Expression Web provides several tools to assist in the creation of forms. All of the tools are available in the Toolbox pane, under the Form Control group.

In this exercise, you will create a simple contact form and configure it to handle the user input

Creating a Form in Expression Web 4
Resources
  • Huggins' Email Form Script
    • Former fellow MVP James Huggins has a great PHP form handler that's always up to date and tested.  One of my favorite PHP solutions.
  • CTRFX Form Wizard
    • This is a particularly useful form handler for those working with ASP.NET pages.  Just fill out the wizard and you'll get a working ASP.NET form that you can paste right into your page.
  • Veign's Email Recipes
  • Expression Form Handler
    • This is my contribution to the community. ;-)  It's actually just a single form version of the Enhanced Form Handler, but the Expression Form Handler is wrapped in a Personal Web Package and designed for Expression Web users and former FrontPage form users.

Key Points

  • Scripting functionality can take place on the server or in the browser.
  • Expression Web’s Layers and Behaviors enable you to create client-side functionality.
  • Expression Web enables you to insert a Data View on an HTML page.
  • HTML Forms are one of the oldest and most common ways users interact with a
    Web page.




You can easily make this a point to YOUR company OR hide it all together.