JavaScript Editor
JavaScript Debugger|
| ||
Before you create a Web application, you must have the Internet Information Server (IIS) running on the target server (which also must have the .NET Framework installed) that will host your application. The reason IIS must be running on the target server is that Visual Basic will create the files you need and host them directly on the server when you create the Web application (usually in the IIS directory named wwwroot).
To create a new Web application, select the File|New menu item in Visual Basic, just as you would to create a new Windows application. This time, however, select the ASP .NET Web Application icon, as shown in Figure 14.1. You can enter the name for the new application as you see in that figure. I'm going to call this first application WebApplication1.
Instead of specifying a local or network disk location in the Location box, you enter the location you want to use on a Web server. I'm using a local server (that is, a server on my computer) named STEVE in Figure 14.1, so the location is "http://STEVE". If I had wanted to store the application in a directory such as Ch14 (for Chapter 14), I could have entered the location "http://STEVE/Ch14". That would make the URL for the main Web form in the application, which is WebForm1, "http://STEVE/Ch14/applicationname/WebForm1.aspx". That's the URL that gets launched when I (or someone else) want to run the application. For applications on the Internet, that URL might look something like this: "http://www.starpowder.com/Ch14/applicationname/WebForm1.aspx". If you're unsure what server you want to use, click the Browse button next to the Location box in Figure 14.1. To create the Web application, click the OK button.
Similarly, to open a Web application that you've already created, use the File|Open Project From Web menu item (not the File|Open menu item). Visual Basic will ask for the URL of the server to use, then open the Open Project dialog you see in Figure 14.2. You can browse to the VBPROJ file you want and click Open to open it.
Once you've created the WebApplication1 application, you'll see the main Web form, WebForm1.aspx, open in the Visual Basic IDE, as shown in Figure 14.3. This new project is in fact like a Windows application project in many ways; for example, you can set project options—like debugging versus release versions—the same way you would with Windows projects.
You'll also see some new files in the Solution Explorer; here's an overview of what they do:
AssemblyInfo.vb contains all the information for your assembly, such as versioning and dependencies.
Global.asax handles application level ASP requests.
Styles.css can be used to define default HTML style settings.
Web.config contains application settings for the ASP .NET application.
Projectname.vsdisco is an XML file that contains links about an ASP .NET Web application.
WebForm.aspx is the Web form itself.
References to these .NET Framework namespaces: System, System.Data, System.Drawing, System.Web, System.Web.Services, and System.Xml.
There is also a VBPROJ file on the server in the application's folder for the Visual Basic project itself, and you can open the application in Visual Basic using that VBPROJ file. When you start adding Visual Basic code to the application, a file with the extension .aspx.vb is created as well.
Note that the text in Figure 14.3 in the Web form indicates that it is in grid layout mode, which means you can place controls where you want them in the Web form, just as you would in a Windows form. The other layout option, which you set with the pageLayout property, is flow layout, which is the layout that browsers usually use. With flow layout, the controls you add to a Web form "flow," much like the words in a word processor's page, changing position when the page changes size. To anchor your controls, use grid layout. You can set the Web form's properties in the Properties window, like bgColor, to set the form's background color, just as you can for Windows controls.
| Note |
There's a difference between the properties you'll see in the Properties window for Web forms versus Windows forms—Web forms support properties that you'll normally find in HTML pages, like bgColor (for the background color), vLink (for the color of hyperlinks the user has already visited), text(for the foreground color used for text), and so on. And note that these properties start with lowercase letters, unlike Windows forms properties, which start with capital letters. |
You can now add controls to the Web form, just as you can with Windows forms. In this case, we'll use Web server controls, so click the Web Forms tab in the toolbox, making the Web server controls appear in the toolbox, as you see in Figure 14.4.
Just as you would with a Windows form, add two text boxes, TextBox1 and TextBox2, to WebForm1, and a button with the caption "Click Me", as you see in Figure 14.4. (The small boxed arrow at upper left in each control indicates a server control, which is run at the server.) Also, add a list box control, ListBox1, to WebForm1, and add six items to it as you would to a Windows form list box; click the ellipsis ("…") button in the Items entry in the Properties window, and enter "Item 0" to "Item 5" in the ListItem Collection Editor dialog. This gives you the result you see in Figure 14.4.
The Web form itself, WebForm1.aspx, is where the actual HTML that browsers will open is stored. You can see that HTML directly if you click the HTML button at the bottom of the Web form designer (next to the Design button), as you see in Figure 14.5.
This is close to the HTML that a Web browser will open, and you can edit this HTML directly (which we'll do later in this chapter). Note the ASP elements in this document, which begin here with <%@ and <asp:. These ASP elements will be executed by IIS, which will create standard HTML from them. This HTML is then sent to the browser—that's how ASP works: ASP elements are executed in the server, which creates the HTML corresponding to the various ASP commands. That creates the final HTML that the browser actually sees, without any ASP elements in it.
Here's what WebForm1.aspx looks like—as you can see, this is just standard HTML, with ASP elements embedded in it for IIS (note in particular the Codebehind attribute, which connects this code to the appropriate Visual Basic code):
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="First.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>First Web Application</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/ _
intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Button id=Button1 style="Z-INDEX: 101; LEFT: 108px;
POSITION: absolute; TOP: 77px" runat="server"
Text="Button" Width="106px"Height="23px"></asp:Button>
<asp:TextBox id=TextBox2 style="Z-INDEX: 104; LEFT: 240px; POSITION:
absolute; TOP: 124px" runat="server" Width="205px"
Height="24px"></asp:TextBox>
<asp:ListBox id=ListBox1 style="Z-INDEX: 103; LEFT: 107px; POSITION:
absolute; TOP: 125px" runat="server" Width="107px" Height="71px"
AutoPostBack="True">
<asp:ListItem Value="Item 0">Item 0</asp:ListItem>
<asp:ListItem Value="Item 1">Item 1</asp:ListItem>
<asp:ListItem Value="Item 2">Item 2</asp:ListItem>
<asp:ListItem Value="Item 3">Item 3</asp:ListItem>
<asp:ListItem Value="Item 4">Item 4</asp:ListItem>
<asp:ListItem Value="Item 5">Item 5</asp:ListItem>
</asp:ListBox>
<asp:TextBox id=TextBox1 style="Z-INDEX: 102; LEFT: 240px;
POSITION: absolute; TOP: 78px" runat="server" Width="204px"
Height="22px"></asp:TextBox>
</form>
</body>
</HTML>
This doesn't look much like the Visual Basic code we've been working with throughout the book. That will appear in another file, WebForm1.aspx.vb.
Double-click the button in WebForm1 now. Doing so opens the code designer you see in Figure 14.6; the code here is definitely Visual Basic, and it runs on the server.
| Tip |
As with Windows forms, you also can select events to add code to in a code designer by selecting the object (such as a control or Web form) to work with in the left drop-down list box, and the event you want to handle in the right drop-down list box. |
The Visual Basic code is stored in a file named WebForm1.aspx.vb. (This is also called the "code-behind" file.) Now that you've double-clicked the button in the Web form, the corresponding Click event handler opens in the code designer:
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
⋮
End Sub
You can enter code for this button just as you can in Windows forms. For example, to display the message "Welcome to Web programming" in the text box when the button is clicked, you can use this code:
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
TextBox1.Text = "Welcome to Web programming."
End Sub
In the same way, I'll add code to display the current selection, when that selection changes, in the list box's SelectedIndexChanged event handler:
Private Sub ListBox1_SelectedIndexChanged(ByVal sender As _
System.Object, ByVal e As System.EventArgs) Handles _
ListBox1.SelectedIndexChanged
TextBox2.Text = "You selected Item " & sender.SelectedIndex
End Sub
| Tip |
In fact, it's possible to embed Visual Basic code directly in ASPX files—no ASPXVB "code-behind" file needed. Take a look at "Embedding Visual Basic Code in Web Pages" in the Immediate Solutions section of this chapter for the details. |
Here's what the whole file, WebForm1.aspx.vb, looks like when you've added this code:
Public Class WebForm1
Inherits System.Web.UI.Page
Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
Protected WithEvents ListBox1 As System.Web.UI.WebControls.ListBox
Protected WithEvents TextBox2 As System.Web.UI.WebControls.TextBox
Protected WithEvents Button1 As System.Web.UI.WebControls.Button
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub _
InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
End Sub
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
TextBox1.Text = "Welcome to Web programming."
End Sub
Private Sub ListBox1_SelectedIndexChanged(ByVal sender As _
System.Object, ByVal e As System.EventArgs) Handles _
ListBox1.SelectedIndexChanged
TextBox2.Text = "You selected Item " & sender.SelectedIndex
End Sub
End Class
These two files, WebForm1.aspx and WebForm1.aspx.vb, form the core of the WebApplication1 application from a programming point of view. There are some other important files as well; I'll take a look at them, too.
As in Windows applications, the AssemblyInfo.vb file includes information about the assembly itself, and you can set version and other information here:
Imports System.Reflection
Imports System.Runtime.InteropServices
' General Information about an assembly is controlled through the following
' set of attributes. Change these attribute values to modify the
' information associated with an assembly.
' Review the values of the assembly attributes
<Assembly: AssemblyTitle("")>
<Assembly: AssemblyDescription("")>
<Assembly: AssemblyCompany("")>
<Assembly: AssemblyProduct("")>
<Assembly: AssemblyCopyright("")>
<Assembly: AssemblyTrademark("")>
<Assembly: CLSCompliant(True)>
'The following GUID is for the ID of the typelib if this project is _
exposed to COM
<Assembly: Guid("3499736A-B472-459D-A21D-539E8DF8CA6B")>
' Version information for an assembly consists of the following four _
values:
'
' Major Version
' Minor Version
' Build Number
' Revision
'
' You can specify all the values or you can default the _
Build and Revision Numbers by using the '*' as shown below:
<Assembly: AssemblyVersion("1.0.*")>
The Web.config file contains information on how the server will handle your project. You can set options for tracing, security, and permission here, including how to make sure that no one can download your code from the server. This file is written in XML, and here's what it looks like:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<!-- DYNAMIC DEBUG COMPILATION
Set compilation debug="true" to insert debugging symbols
(.pdb information) into the compiled page. Because this creates
a larger file that executes more slowly, you should set this
value to true only when debugging and to false at all other times.
For more information, refer to the documentation
about debugging ASP .NET files.
-->
<compilation defaultLanguage="vb" debug="true" />
<!-- CUSTOM ERROR MESSAGES
Set customErrors mode="On" or "RemoteOnly" to enable custom error
messages, "Off" to disable.
Add <error> tags for each of the errors you want to handle.
-->
<customErrors mode="RemoteOnly" />
<!-- AUTHENTICATION
This section sets the authentication policies of the application.
Possible modes are "Windows",
"Forms", "Passport" and "None"
-->
<authentication mode="Windows" />
<!-- AUTHORIZATION
This section sets the authorization policies of the application.
You can allow or deny access to application resources by user or
role. Wildcards: "*" means everyone, "?" means anonymous
(unauthenticated) users.
-->
<authorization>
<allow users="*" /> <!-- Allow all users -->
<!-- <allow users="[comma separated list of users]"
roles="[comma separated list of roles]"/>
<deny users="[comma separated list of users]"
roles="[comma separated list of roles]"/>
-->
</authorization>
<!-- APPLICATION-LEVEL TRACE LOGGING
Application-level tracing enables trace log output for every page
within an application. Set trace enabled="true" to enable application
trace logging. If pageOutput="true", the trace information will be
displayed at the bottom of each page. Otherwise, you can view the
application trace log by browsing the "trace.axd" page from your
Web application root.
-->
<trace enabled="false" requestLimit="10" pageOutput="false"
traceMode="SortByTime" localOnly="true" />
<!-- SESSION STATE SETTINGS
By default ASP .NET uses cookies to identify which requests belong to
a particular session. If cookies are not available, a session can be
tracked by adding a session identifier to the URL. To disable cookies,
set sessionState cookieless="true".
-->
<sessionState
mode="InProc"
stateConnectionString="tcpip=127.0.0.1:42424"
sqlConnectionString=
"data source=127.0.0.1;user id=sa;password="
cookieless="false"
timeout="20"
/>
<!-- PREVENT SOURCE CODE DOWNLOAD
This section sets the types of files that will not be downloaded.
As well as entering a httphandler for a file type, you also must
associate that file type with the xspisapi.dll in the App
Mappings property of the Web site, or the file can be downloaded
It is recommended that you use this section to prevent your
sources being downloaded.
-->
<httpHandlers>
<add verb="*" path="*.vb"
type="System.Web.HttpNotFoundHandler,System.Web" />
<add verb="*" path="*.cs"
type="System.Web.HttpNotFoundHandler,System.Web" />
<add verb="*" path="*.vbproj"
type="System.Web.HttpNotFoundHandler,System.Web" />
<add verb="*" path="*.csproj"
type="System.Web.HttpNotFoundHandler,System.Web" />
<add verb="*" path="*.webinfo"
type="System.Web.HttpNotFoundHandler,System.Web" />
</httpHandlers>
<!-- GLOBALIZATION
This section sets the globalization settings of the application.
-->
<globalization requestEncoding="utf-8" responseEncoding="utf-8" />
</system.web>
</configuration>
Finally, the Styles.css file holds the Cascading Style Sheet (CSS) styles for the page. This is an important file when you want to start customizing your Web application's appearance in the browser, because it sets the styles used. CSS is the usual way to set styles for Web pages, but using CSS takes a little getting used to. For the details, check out a book on the subject—the HTML Black Book (The Coriolis Group) covers CSS styles in depth. Here's what Styles.css looks like; note that you can set the style (including font, font weight, and so on) for many HTML elements:
/* Default CSS Stylesheet for a new Web Application project */
BODY
{
BACKGROUND-COLOR: white;
FONT-FAMILY: Verdana, Helvetica, sans-serif;
FONT-SIZE: .8em;
FONT-WEIGHT: normal;
LETTER-SPACING: normal;
TEXT-TRANSFORM: none;
WORD-SPACING: normal
}
H1, H2, H3, H4, H5, TH, THEAD, TFOOT
{
COLOR: #003366;
}
H1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
H2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.75em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
H3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.58em;
font-weight: 500;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
H4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.33em;
font-weight: 500;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
H5, DT {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
H6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
TFOOT, THEAD {
font-size: 1em;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Arial, Helvetica, sans-serif;
}
TH {
vertical-align: baseline;
font-size: 1em;
font-weight: bold;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Arial, Helvetica, sans-serif;
}
A:link {
text-decoration: none;
color: #3333cc;
}
A:visited {
text-decoration: none;
color: #333399;
}
A:active {
text-decoration: none;
color: #333399;
}
A:hover {
text-decoration: underline;
color: #3333cc;
}
SMALL {
font-size: .7em;
}
BIG {
font-size: 1.17em;
}
BLOCKQUOTE, PRE {
font-family: Courier New, monospace;
}
UL LI {
list-style-type: square;
}
UL LI LI {
list-style-type: disc;
}
UL LI LI LI {
list-style-type: circle;
}
OL LI {
list-style-type: decimal;
}
OL OL LI {
list-style-type: lower-alpha;
}
OL OL OL LI {
list-style-type: lower-roman;
}
IMG {
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
}
As you proceed in Web application programming, you'll probably want to customize this file to set the way various HTML elements are displayed.
|
| ||
Free JavaScript Editor
JavaScript Editor