The VWD Express 2005 IDE
Introducing the integrated development environment.
What we have before us is the VWD Express IDE (Integrated Development Environment). Right now, it seems a bit intimidating with all its options and menus but once we get familiar with the environment, it will become very easy to use.
When we start a new project, the VWD Express IDE opens in the `source view'. As shown in the figure above, the source view contains some HTML code. This is the first page of our site and it is named as `Default.aspx'. We can use this page as our home page by modifying it or we can ignore this page and add new pages to work on. In the coming chapters, we will learn how to add new pages to our project.
Note: Every web page created in ASP.NET 2.0 has the extension aspx. This extension tells the web server that this page is an ASP.NET page and should be processed accordingly.
The source view is useful for developers who have some experience with HTML. Here, we can type the HTML code for our page. The programming code (in VB.NET or C#) can also be added in this view. However, it is recommended that we use the source view for HTML code and write the programming code in a separate file.
Note: It is very important that we understand the different types of codes used in ASP.NET 2.0 web pages.
The HTML code is used for formatting the page. It controls the look of our page. For example, we can specify the headings, paragraphs, text colors, font sizes etc. using the HTML Code.
The Programming code is used to control the user interaction and events. We can code the process that should occur when the user clicks a button, when the page is loaded into the browser for the first time or when the user selects an item to purchase from our site. Programming code is written in VB.NET or C#.
It is possible to write both the HTML code and the programming code in the same page. For this, the source view of the page is used. However, this makes the page very lengthy and complicated as both codes are mixed together. There is a separate file available for our page where we can place the programming code. This method separates the HTML code from the source code, making it easy to manage both codes. This is known as code-behind model and we should use this model whenever possible. Later in this text, we will learn where to put our programming code separately.
What if we do not have much experience with HTML? In this case, we can use the `Design View'. Just below the horizontal scroll bar, there are tabs for Design View and Source View. Clicking on the `Design' tab will switch the view from source to design.
The design view opens into a blank page. It is much cleaner as there is no HTML code to confuse us. The other elements of the IDE mostly remain the same as in the source view. We now have a couple of different options in the menu bar. In addition, the `Formatting Tool Bar' now appears in the design view.
In this view, we can design our page just as we would do in a word processing software like MS-Word. We can click inside the page and start typing the contents of the page. The formatting tool bar can be used to format our text. We can add headings, paragraphs, bulleted lists, tables and images and format them. All of these and more can be done without writing any HTML Code. That is not all. From the design view, we can add elements like textboxes, buttons, drop-down lists and check boxes into our page just by dragging them from the Toolbox and dropping them onto our page. After we design our page, we can switch back to the source view and see all the equivalent HTML code generated automatically by the VWD IDE! This is a great feature if we want to learn HTML.
Let us now look at some of the important elements of VWD IDE.
