Creating the Page
|
The page you ll create isn t complex; it consists of just two LinkButton controls and an Image control. Figure 5-1 shows a picture of the slideshow page you re going to create.
Figure 5-1: The slideshow page when it s running.
Create the page and add controls
-
In Web Matrix, from the File menu choose New and create a new ASP.NET page named
SlideShow1.aspx. -
Type in a heading for the page such as My Vacation Slides, and style it as Heading 1.
-
From the Web Controls tab of the Toolbox, drag the following controls onto the page and set their properties as indicated.
Control
Property Settings
LinkButton
ID: buttonPrevious
Text: Previous
LinkButton
ID: buttonNext
Text: Next
Image
ID: imageSlide
I m deliberately not telling you to set the Height and Width properties for the Image control. As with the HTML <img> element, if you set the size of the Image control, all the images it displays are crammed or stretched to fit into the control s dimensions. If you do want all the images to occupy the same space, however, set the Image control s Height and Width properties.
You can also decorate your page a little with colors and fonts. As an example, in HTML view, you can set the page s background color to dark blue by adding a bgcolor attribute with the value of darkblue to the <body> tag:
<body bgcolor="darkblue">
To give the buttons a contrasting look, in Design view select the Previous and Next buttons, and in the Properties window, set their ForeColor property to white. Next open the Font node in the Properties window and set the Name subproperty to Verdana and the Size subproperty to X-Small.
I don t mean to belabor the details. The point is that you can set all the appearance properties by selecting the controls and using the Properties window. After you ve designed the page the way you like, the next step is to build the slide list.
Building the Slide List
In this section, I ll show you one way to hard-code the list of slides into the page. First you need to declare several variables by switching to Code view and typing in the following code at the top of the page:
Dim path As Strin Dim slideNames(5) As Strin Dim currentSlide as Integer
Here you declare three variables, path, slideNames, and currentSlide. The path variable is declared to contain a string (that is, a string of characters). The currentSlide variable will contain a simple numeric value (an integer). That value will change as the page runs. The slideNames variable is an array that can contain multiple values in this case, multiple strings. The digit 5 tells Microsoft Visual Basic .NET that you ll keep up to 6 values in the array that is, the array is dimensioned to 6. Why 5 when we mean 6? Remember that when you count items in the .NET Framework, you always need to start at 0.
Notice that the variables are declared at the top of the program outside of any subroutine or function on the page. They are therefore global variables, available to any subroutine or function on the page. So, the scope of the variables isn t a single subroutine, but rather is the entire page. You can set the values of the variables in one routine and then read or change their values in another routine.
In contrast, any variables that you declare inside a subroutine or function are local variables, available only within that routine. They exist only as long as the routine is executing. You ll see examples of local variables later in the book.
Loading the Slide List and Initializing the Page
Declaring the variables is the preliminary part of the page programming. What you need to do now is define what happens when the page actually runs. You need to accomplish two basic tasks to initialize the slideshow: loading the slide array with the names of the slides to display and setting the Image control s ImageUrl property to point to one of your graphics files. If you don t set the ImageUrl property, naturally, no image will be displayed in the page.
Remember that the page will run from scratch every time it s posted back that is, every time the user clicks a button on the page. Therefore, you ll need to perform these two tasks every time the page runs. The logical place to perform these tasks is in the handler for the Page_Load event, which is raised every time the page makes a round trip.
To build a hard-coded list of slides, in Code view create a handler for the Page_Load event by typing code such as the following below the variable declarations:
Sub Page_Load( path = "images/ slideNames(0) = "Mexico_church1.jpg slideNames(1) = "Mexico_church2.jpg slideNames(2) = "Mexico_church4.jpg slideNames(3) = "Mexico_convent.jpg slideNames(4) = "Mexico_street1.jpg slideNames(5) = "Mexico_street5.jpg imageSlide.ImageUrl = path & slideNames(0 End Sub
The code assigns a different slide to each element of the array, using the array element numbers 0 through 5. After the array is filled, the program sets the ImageUrl property to the first slide. The full name of each slide consists of the path plus the name of the individual slide. So the program concatenates the values of the path variable and the first element in the imageSlide array using the & operator. Your code can differ from my example code in the following ways:
-
You would use the names of your own graphics files, of course; the files used in this code are from slides of a vacation I took in Mexico.
-
The number of elements in the slidesNames array must match the number of elements to which you dimensioned the array in the previous section. If you dimensioned the array to 6, for example, you need to be sure you have a picture for each element from 0 through 5.
 |
An absolute path is a complete path plus file name, starting with the drive letter, like this:
C:\WebMatrix\images\Mexico_church1.jpg
You virtually never want to use an absolute path when specifying the location of a file in a Web application because the browser will treat an absolute path as a path to a folder on the local computer. For example, in our slideshow page, if you use C:\WebMatrix\images in the path variable, the address of the graphic for a slide would be like the absolute path in the preceding example. If that address is sent to the browser, the browser will look in the C:\WebMatrix\images directory on the local computer, which won t work unless the same files happen to exist on the local computer under the same folders.
Instead, you want to use relative paths. In the slideshow page, for example, we specified that the path variable should contain just "images/". When the slideshow page runs, "images/" plus the graphic file name will be tacked onto the current server path to form a path such as the following:
http://www.dev1.eraserver.net/MIKEPOPE/images/ mexico_church1.jpg
I was pretty insistent in the early part of the chapter that you should keep your graphics in a folder underneath the folder where the page is located. By doing so, you ll be able to use a relative path to point to them.
|
