Introduction to Visual Web Developer 2005 - Express Edition

What is Visual Web Developer 2005 - Express Edition

Visual web developer is one of the express family members. As Microsoft definition, the express family is a free lightweight easy to use and easy to learn tools for hobbyist, novice, and student developers.

With Visual Web Developer you can create wonderful and full featured web sites while enjoying an easy and sophisticated environment and development tool for web applications.

In this tutorial we will explore this wonderful free tool along with its advantages especially for new web developers.

At First Sight

After downloading and installing the Visual Web Developer 2005 express edition form this link, run it and you will get this start up page as shown in figure1 below.

Figure 1 - Visual Web Developer

As you see, it nearly seems like Visual Studio 2005. If you clicked the "File" menu you will see the menu item "New Web Site ...", you can not create other types of applications except web applications. As Visual Studio you will have a toolbox, a properties window, a solution explorer window, a debugging menu, and so on. All these items give you the ability to control your application and visually designing it in a simple WYSIWYG drag and drop interface.

In the next sections we will take a tour to explore some features of Visual Web Developer 2005 Express edition, which can be summarized under ease of use, and ease of learning categories.

Suitable Environment For New Developers

Visual Web Developer Express Edition is focused on the needs of new developers and hobbyists. It provides you with a streamlined development environment helps you to develop dynamic web applications in an easy way. It provides you with a great set of tools, wizards, more than 60 reusable controls, and hundreds of reusable code snippets to reduce the time and effort needed to create an attractive professional web application.

Visual Web Developer supports HTML, CSS, JavaScript, XML, RSS, and Web Services. It also provides tools for  simplifying the debugging process, and the deploying process. You can fully customize the IDE development environment for your preferences and needs. You can also take advantages of a ready made starter kites, and more than 300 MB of documentation and samples that help you to get started.

Visually Design User Interface

The Visual Web Developer gives you the ability to visually designing your web sit through the use of toolbox, property window, login controls, webpart controls, navigation controls, document outline, master page, and table designer. Most of us are familiar with toolbox, and property windows so let's move to the next.

Login Controls provides you with the UI needed to create a new user or login to your web site. You can configure these controls to help user when they forget they passwords, and send an email to confirm registration. You can get all of that ready and function without the need to write lines of code.

Figure 2 - Login Control

Webpart Controls are a way to give site visitors the ability to personalize your web application by creating custom web portals ( like those found at www.my.msn.com ). Visual Web Developer provides the infrastructure required to manage this webpart controls through the web part management system.

Navigation Controls like SiteMapPath, TreeView, and Menu are ways to give the user or visitor the ability to navigate through your web site.

Figure3 - Menu Control

Document Outline view gives you a structured view of your web form. You can use this view to go directly to a specified component in your web form.

Figure 4 - Document Outline

Master Page are the page that every other page on the site inherits its look form. This gives your entire web site a consistent look and feeling.

Table Designer is an easy way for designing your tables as the dialog box in the next figure indicates. You can choose from ready made templates or create your own custom table. To add a table select "Layout / Insert Table" and the "Insert Table dialog box will appear.

Figure 5 - Table Designer

Visually Design Your Data

Visual Web Developer provides a set of controls dialogs and wizards to help you in communicating with a certain database or data source. First of all you can install SQL Server 2005 Express Edition while you are installing the Visual Web Developer. SQL Server Express Edition is a lightweight database server designed for smaller load web sites. Now let's browse what Visual Web Developer provides for ease of using manipulating and requesting data from a data source.

Data Source Configuration Wizard provides a step by step wizard to help you connecting to a data source, whether this source is an SQL database, an Access database, an XML database, and more. The wizard dynamically pulls the tables along with their fields from the data source allowing you to select the fields you want to display.

Figure 6 - Data Source Configuration Wizard

Data Enabled Controls are controls within which you can display dynamic data from a database like BulletedList control, and CheckBoxList control. You can bound these controls to a data source easily using menus and mouse clicks.

Figure 7 - Data Enabled Bulleted List

Query Designer is a visual tool that enabling you to visually design your database queries. Creating database queries is a complex work specially for new developers. You need to learn SQL query language, and remembering your tables names and fields. The query designer gives you the ability to design your query in a visual simple way through an easy to use drag and drop interface.

Figure 8 - Query Designer

Grid View control is a dynamic way to display data from a data source in a table like formats. You can edit your data, sort it, display a special set of it and more without writing a single line of code.

Figure 9 - Grid View Control

Easy To Debug

When you encounter a problem with your application you certainly debug it to explore this problem and fix it. Visual Web Developer provides some tools to simplify the debugging process. Some of these tools are:

Breakpoints used to pause your application at a certain line of code you need to examine and then you can trace each line of code to examine the variables and so on. You can also use the conditional breakpoint to pause at a certain line of code only if the condition is satisfied.

Debugger Visualizers used to display complex types of data like XML files. You can view the value of a selected data as a simple text, as an HTML code, or as an XML code.

Figure 10 - Debugger Visualizers

Debugger Data Tips used to view the contents of a variable quickly by simply placing your mouse cursor over it.

Figure 11 - Debugger Data Tips

Exception Assistant appears when an exception is encountered. It provides a detailed information about the occurred error some tips and recommendations for how to fix it.

Figure 12 - Exception Assistant

Easy To Configure

Visual Web Developer provides the ability for creating an application located at your file system, local IIS, FTP site, or a Remote site as shown in the following figure.

Figure 13 - The Open Web Site Dialog Box

It also provides Web Site Administration Tool which is a web based administrative interface for your site. You can use it to manage application settings, personalization information, data providers, users and roles, and more. By using this tool it will be easy to maintain your web site without changes the configuration files.

Figure 14 - Web Site Administration Tool

Easy To Deploy

Visual Web Developer provides two easy ways to deploy your web application. You can use the built in FTP support to easily deploy your files to the hosting provider without leaving the development environment, or copy your files and past them to the hosting server.

Figure 15 - Built in FTP Support

Easy To Learn

To make your task easy Microsoft provides a lot of learning materials all can be reached from within the Visual Web Developer environment. You can activate the optional installation component, the Microsoft MSDN 2005 Express Edition Library that contains more than 300 MB of documentation to help you mastering the Visual Web Developer. It contains API documentation, walkthrough, and samples.

You can also use the Dynamic Help to get a context sensitive help. You only need to place your mouse cursor over the control you need to get help about and then notice the help files displayed in to the Dynamic Help pane. You can also use the "How Do I?: section of help to get a great assistance of how to write your code and understanding how it works. At last you can connect directly to the ASP. Net community to ask a question, to provide product feedback, or to use the community search features.

Figure 16 - The Dynamic Help Pane

For further information

Refer to the online copy of Microsoft Developers Network at http://msdn.microsoft.com or use your own local copy of MSDN.