Mgmt 362a Bookstore Application: Client Tier

1
29

• Mgmt 362a Bookstore Application Client Tier
• Introducing Web Controls

2
Objectives

• In this tutorial you will learn
• Create an ASP.NET Web Site project in Visual Web
  Developer 2005 Express.
• Create and design ASPX pages.
• Use Web Form controls.
• Reposition controls, using the Style attribute.

3
29.2 Creating an ASP.NET Web Application
Figure 29.2 Creating an ASP.NET Web Application
in Visual Studio .NET.

• Creating the project
• Visual Web Developer
• File gt New Web Site

4
29.2 Creating an ASP.NET Web Application (Cont.)
Figure 29.3 Solution Explorer window for the
Bookstore project.
5
29.2 Creating an ASP.NET Web Application (Cont.)
Figure 29.4 Web Forms tab in Toolbox.

• Viewing the Toolbox
• View gt Toolbox

6
29.2 Creating an ASP.NET Web Application (Cont.)

• Two viewing modes of the Web Form Designer
• Design mode
• Source mode

7
29.2 Creating an ASP.NET Web Application (Cont.)
Figure 29.5 Design mode of Web Form Designer.
8
29.2 Creating an ASP.NET Web Application (Cont.)
Figure 29.6 Source mode of Web Form Designer.
9
29.3 Creating the Books.aspx Page
Figure 29.7 Setting the File Name property of
the ASPX page.
10
Good Programming Practice

• Change the ASPX pages name to a uniqueand
  meaningful name for easy identification. The name
  you choose must end with the .aspx extension for
  the page to be identified as an ASPX page.

11
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.8 Setting the Title property of
Books.aspx.
12
29.3 Creating the Books.aspx Page (Cont.)

• Background color
• Specified by the BgColor property of the ASPX
  page
• Click the ellipsis in the BgColor property to
  display the Color Picker dialog

13
Portability Tip

• When specifying colors for Web applications,
  itis best to use a color from the Web Palette
  tabof the Color Picker dialog, to ensure that
  colors display correctly when the application
  isaccessed through a Web browser.

14
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.9 Light blue selected in the Color
Picker dialog.
15
29.3 Creating the Books.aspx Page (Cont.)

• Adding a Label to the ASPX page
• Toolbox
• Standard group
• ID property
• Identifies controls
• Similar to the Name property in Windows controls
• (switch away from MS standards to HTML standards)

16
Good Programming Practice

• Web controls with names and functionality
  similarto those of Windows controls should be
  given the same suffixes recommended in earlier
  tutorials.For example, a Label Web control with
  the text Available Books can be named
  availableLabel

17
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.10 Label control displayed in the
ASPX page.
18
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.11 Setting the font size of the Label
control.
19
29.3 Creating the Books.aspx Page (Cont.)

• Option Absolutely Positioned
• Allows modification of the position of controls
  on the Web Form
• Select Tools gt Options to display the Options
  dialog
• Show all settings checkbox
• Expand the HTML Designer node
• Click CSS Positioning
• Select Absolutely positioned in the drop down
  list

20
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.12 Setting absolute positioning in
the Options dialog.
21
29.3 Creating the Books.aspx Page (Cont.)

• Exact position of a Label
• Select Format gt Style to display the Style
  Builder dialog
• Click Position to display the positioning options
• Top position
• Left position

22
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.13 Style Builder dialog for a Label
control.
23
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.14 Complete Label displayed in Design
mode.
24
29.3 Creating the Books.aspx Page (Cont.)

• Horizontal Rule
• HTML Control
• Inserts a horizontal line on a Web Page to
  separate content

25
Good Programming Practice

• When naming a Horizontal Rule control, use
  thesuffix HorizontalRule following a word
  thatdescribes the controls use.

26
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.15 Style Builder dialog for the
Horizontal Rule control.
27
29.3 Creating the Books.aspx Page (Cont.)
Figure 29.16 Design mode of Books.aspx.

• Add a ListBox to the Web Form

28
29.3 Creating the Books.aspx Page (Cont.)

• RequireFieldValidator control
• Ensures that a book in the ListBox is selected
• Displays an error message when no title is
  selected in the ListBox
• ControlToValidate property

29
29.3 Creating the BookInformation.aspx Page
Figure 29.17 Add New Item - Bookstore dialog.

• Add a new ASPX page

30
29.3 Creating the BookInformation.aspx Page
(Cont.)
Figure 29.18 Setting a Labels ForeColor
property.

• Add a Label to the new ASPX page
• Set the ForeColor property

31
29.3 Creating the BookInformation.aspx Page
(Cont.)

• Image control
• Toolbox
• Standard group
• Properties
• Height
• Width
• BorderWidth
• BorderStyle
• Style Builder dialog
• Format gt Style

32
Good Programming Practice

• When naming an Image Web control, use thesuffix
  Image following a word that describeswhat the
  Image will display.

33
29.3 Creating the BookInformation.aspx Page
(Cont.)
Figure 29.19 Design of the BookInformation.aspx
page without the Table.
34
29.3 Adding the DetailsView Control

• DetailsView control
• Displays information in a structured manner
• Toolbox
• Data group
• Gridlines property
• Both value

35
Good Programming Practice

• When naming a DetailsView control, use thesuffix
  DetailsView following a word that describes what
  information the DetailsView will display.

36
29.3 Adding the DetailsView Control (Cont.)
Figure 29.20 Design of the BookInformation.aspx
page.
37
29.3 Running the Bookstore Application
Figure 29.21 Empty ListBox of the Books.aspx
page.

• Debug gt Start Debugging

38
Results at end of T29

• There will be no book titles in the page as we
  havent yet added the code for the data about the
  books.