Creating User Interface

1
Creating User Interface

• ASP.NET
• http//sdetu/courses/csdc101/
• Lecture 09
• Tuesday, March 04, 2008

2
Agenda

• Recall
• Controls
• Layout style for Web form
• Server controls vs. HTML controls
• Bind control values to data items
• Write code to respond to user events on controls

3
Recall

• Web Forms
• Use of Web Form
• Architecture of Web forms
• Page Processing Stages

4
Controls

• Controls are the tools for all of the tasks you
  perform on a Web form.
• Defines the appearance of the form.
• Provides a way to get information and perform
  tasks on behalf of the user.
• Microsoft Visual Studio .NET includes two
  different types of controls that you can use on a
  Web form
• HTML Controls
• Server Controls

5
Layout style for Web form

• Two choices
• Grid layout
• Flow layout

6
Grid layout

• This is the default.
• Controls are placed exactly where you draw them
  and they have absolute positions on the page.
• Use grid layout for Windows-style applications,
  in which controls are not mixed with large
  amounts of text.

7
Flow layout

• This places controls relative to other elements
  on the page.
• If you add elements at run time, the controls
  that occur after the new element move down.
• Use flow layout for document-style applications,
  in which text and controls are intermingled.
• Flow Layout makes it easier to mix controls and
  text on a Web form
• Quick Look

8
Server controls vs. HTML controls
9
Server Controls vs. HTML Controls
10
Server Controls vs. HTML Controls
11
Server Controls vs. HTML Controls
12
Working with Text

• There are a lot of ways to display text on a
  page
• For read-only text, you can write directly to the
  Response object, as in Response.Write(Some
  text)
• you can use a Label control.
• you can use a TextBox control and set its
  ReadOnly property to True.
• you can use a Literal control and compose the
  text in HTM

13
TextBox Control Properties
14
Working with Tables and Lists
15
Data Binding

• An easy way to initialize the values of List Box
  and Dropdown List controls on a Web form.
• Controls can get their values from any data
  source in your application.
• Data sources can be any public data ,whether it
  is a database table, an array, a property of an
  object, or an expression combining several items.
  
• Example

16
Example

• Dim array() As String "This", "that", "and",
  "the",  "other"
• Bind this data to a control say, Dropdown List.
• Demo

17
Responding to user events on controls

• The Button, LinkButton, and ImageButton server
  controls all trigger post-back events to perform
  commands.
• A post-back event begins a request from the
  browser, causing the server to process the page'
  s events

18
Displaying Graphics and Advertisements

• A common use of graphics is for advertisements.
• There are many ways to display graphics on a Web
  form
• As a background
• As a foreground
• As a button
• As an ad

19
Displaying Graphics and Advertisements (Contd..)

• As a background
• Use the Background property of the Web form to
  display an image on the entire page.
• Use the BackImageUrl property of the Panel
  control to display a background image in one
  region of a page, rather than over the entire
  page.

20
Displaying Graphics and Advertisements (Contd..)

• As a foreground
• Use the Image control to display images in the
  foreground
• As a button
• Use the ImageButton control to display images
  that respond to user events.
• for an example of responding to click events on
  an image

21
Displaying Graphics and Advertisements (Contd..)

• As an ad
• Use the AdRotator control to display images from
  a list of ads.
• Ads displayed in the AdRotator control contain
  hyperlinks to the advertiser' s Web site.

22
Grouping Controls

• Place controls in a group when you want to
  manipulate a particular region of your Web form
  in code.
• Use the Panel control to group controls on a Web
  form.
• Panel control uses flow layout rather than grid
  layout.
• Example

23
Getting Dates

• Use the Calendar control to get or display date
  information.
• To get or set dates selected on the Calendar
  control
• Use the SelectionChanged event procedure and the
  SelectedDate or SelectedDates properties

24
Summary

• What are layouts.
• What are controls.
• How to use the controls.
• How to code user events
• Binding controls to data.

25
Questions ?
26
(No Transcript)