MIS 3200 – Unit 1
•
•
•
•
•
•
•
Visual C#.NET
OOP
Objects
Toolbox
Naming Convention
HTML: Properties and Limitations
Style Sheets
What is Visual C#.NET
• Object Oriented Programming Language (OOP)
• Uses an Integrated Development Environment
(IDE), which is a program used to do your work, just
like MS Word is used to create documents
• The IDE Visual Web Developer 2010 Express (VWD)
• The IDE has a Graphical User Interface (GUI)
• Used for creating software programs
• Also used for creating web pages
OOP
• Object
– An encapsulation of data and code that represents
something of importance to the developer
– So an Object is a piece of software that is created by
abstract piece software (called a Class) which governs the
features that would be in included when the Object is
created.
– These features or characteristics are unique
and are comprised of
• Properties, methods, and events
• Programming Language
– Give instructions to a computer, which in turn executes
the instructions
Object Characteristics
 Property - An attribute of an object
– Examples: Colors, Fonts, Height, Top
• Methods – something that an object does or
knows how to do
– Examples: Move, Add, Clear, Print
• Events – something that happens to an object
– Examples: Click, KeyPress, DoubleClick
Objects - continued
• Created, or instantiated, from classes
• A class is a template that defines an object
and its characteristics
• Similar to a blueprint. For example, the blueprint of a house
describes the characteristics, or properties, of the house such as
number of rooms, bathrooms, windows, doors, stairs, size, etc.
When you build a house you create an instance of the house – a
real object with properties described in the blueprint.
Naming objects
• Names are used to reference the object in the
program code
• Each name should identify the type of object
and the function of the object
• Each object name has two parts
Note: This is a common
convention used to help
document what the object
is and what it does.
– A lower case prefix and
– A usage identifier that describes the function of the
object. The usage identifier begins with an
Uppercase character
Tool Box Objects
• Visual Web Developer (VWD) has a
large collection of objects that can
be used to build web pages. These
are located in the Toolbox and are
generally called Controls or
ASP.NET controls (we will use the
term Controls).
• Controls are added to a web page
by dragging them from the Toolbox
and dropping them on the page
Some Naming prefixes
•
•
•
•
•
•
•
•
•
•
•
btn ---- Button
ckb ---- Check Box
cbo ---- Combo Box
hsb ---- Horizontal Scroll Bar
lbl ---- Label
See the Coding Standards handout
lst ---- List Box
for a full list of prefixes.
mnu --- Menu
rb ---- Radio Button
tmr ---- Timer
txt ---- Text Box
vsb ---- Vertical Scroll Bar
Example object names
Unacceptable Names
Button1
Name
The_List
Acceptable Names
btnExit
lblName
lstCollege
txtStreetAddress
Tools for Web Site Design
• HTML (structure)
• Style sheets (presentation)
• Code
– Modify the the look of the page
– Respond to events
– Implement business logic
Open your MIS Web Site
• Before your start … be sure to copy your ASPPub folder to
your desktop! This is something we will do every time we
want to make changes to our public URL MIS Portfolio.
– To do this, click on the ASPNET shortcut on your desktop, right-click
and copy the ASPPub folder (not ASPPub.old), paste the ASPPub folder
to your desktop.
• Start Visual Web Developer, click File, click Open Web Site,
click on the ASPPub folder on your desktop and click Open.
The next slide shows what
this should look like
Opening a web site
Default Web Application
Open the file(s) that you want to make
changes to by double-clicking on the
filename in the Solution Explorer
Click here to see
the toolbox
These buttons let you switch between
Design and Source view, or Split the
screen and see both at the same time.
Split View
Selecting text or a control in one view
automatically selects in same thing in
the other view.
What is the difference?
• Source and Design view show the same thing
– Source View shows the text and HTML tags that
define the page
– Design View shows how the text and tags should
be displayed (rendered) by a browser (“should” because
HTML tells the browser what you want the page to look like, e.g. bold, or a
header h2. As a result pages often look at least slightly different in different
browsers due to the standards implemented by the browser manufacturer.)
Why is this important to the web
page developer?
HTML
• HyperText Markup Language
– Used to describe how the text should be displayed
• Paragraphs, lists, headings, bold or emphasized text,
etc.
• Uses “tags” that always appear in pairs, an opening tag
and a closing tag
» <p>This is a paragraph</p>
» <h2>This is a second level heading</h2>
» <strong>this would be displayed in bold</strong>
More HTML
– A few tags have the opening and closing combined
• This is the tag for a new line (a break) <br />
• This is the tag for a horizontal line <hr />
– Tags can be nested but must not overlap
Correct nesting:
note that browsers
ignore extra spaces
and line breaks
incorrect nesting:
the green squiggles
are VWD telling you
something is wrong.
Some browsers attempt to display pages, even
when there are errors in the HTML and other
browsers don’t. You should ALWAYS check
your pages in different browsers.
Working with HTML
• You can enter or edit HTML tags directly in
Source view.
– For example, to add a title to your home page,
edit line 1 in source view replacing “Home
Page” with “Joe Bobcat’s Portfolio” (but use your own
name!)
Working with HTML 2
• You can also use VWD tools to add HTML to
your page.
– Working in Split view, (see next slide)
•
•
•
•
Select “My MIS Courses” in Design view
From the Block Format dropdown list, select Heading3
Notice that the text has changed in Display view
And HTML has been added to the Source view
The next slide shows what
this should look like
Using HTML from Design View
2) Select the tool you want to use,
In this case Block Format
1) Select the text you want to modify
Editing HTML Properties
These buttons let you change how
the properties are organized, either
by Category or Alphabetically. Your
instructors prefer Alphabetically.
After selecting something in either Source or Design View you
can use the Properties Explorer to see all the Properties
associated with the selected object, in this case the Page
object. Notice that the Page object has many more properties
than are shown on line 1 where you only see
properties that have assigned values. Properties may be
changed in the right-hand column.
Limitations of HTML
• Originally created more than 20 years ago and
• Contained a very limited set of tags because
computers at the time didn’t have graphics screens
• As computers and display devices became more
powerful, browser vendors started adding their own
special tags to HTML which lead to…
Limitations 2
• Pages being displayed differently, if at all, in different
browsers such as Lynx (a very early text-based browser),
Netscape, Internet Explorer, Opera, Firefox, Safari,
Chrome etc.
• Cascading Style Sheets were developed to solve this
problem and to allow much finer control over design.
Style Sheets
• Styles contain a series of rules that define
design oriented properties of a control
• Styles may be defined in a web page or in one
or more external Style Sheets.
• Several style sheets may work together to
influence how a single control is displayed
Creating Styles in Design View
• VWD automatically creates a style when it can’t use HTML
to handle a design request
• For example, if you want to change the color of some
text…
–
–
–
–
–
–
In Design View of Default.aspx, select MY MIS COURSES
From the toolbar at the top of VWD,
select the Background Color tool
(the right icon:
)
Click on a Bobcat green, then OK
Click on the Foreground Color tool
(the left icon)
– Click the center white spot on the color pallet, then OK
Styles in Design View 2
VWD created style1 with rules that set
the foreground (color) to white and
the background to dark green
The style is “applied” to the heading
through the Class property
The heading text is now white with a dark green background
Cascading Style Sheets - CSS
• Many different style sheets may influence a control
• The final result depends on the cascading order of
the style sheets with each new style sheet potentially
modifying the settings of previous sheets
• VWD has a CSS Properties window that can help
understand and modify CSS
Using CSS Properties (L1 prep)
• Let’s change the color of the title on our master page
(complete these steps before the L1)
– Load the master page by double-clicking Site.master in the
Solution explorer
– Switch to Design mode
– Click anywhere in the
header and click
<div.header>
– Next we will display
the CSS properties windows
Displaying the CSS Properties
1.
2.
3.
4.
Click the View menu
Click Other Windows
Select CSS Properties
The CSS Properties window overlays the
Toolbox (see next slide)
5. To keep the window open,
click the “unpinned” icon
to convert it to a “pinned” icon
Using CSS Properties
(note – you can click
and drag here to
change the window
size)
The Applied Rules section shows all the cascading style sheets that have
an effect on the selected control (the master page title in this case).
As you click on different styles the CSS Properties list shows the style
rules added or modified by the selected style.
This shows all the HTML tags associated with the selected control.
In this case a header tag <h1> is inside a <div> tag called “title” which
is inside another <div> called “header” etc. If you click one of these
tags the corresponding control is highlighted on the page.
This tells us that the .header style changes
the background color
Change a property
1. Click the + next to
background to expand
the list of properties
and click in the box to
the right of (background-color)
2. Click the little down arrow
3. Select a standard color or
click More Colors for the
color pallet
Master page header change
More changes
• Click to the right of the About button
• You should see
selected
at the bottom of the window
• Use the CSS Properties window to change the color
of this control to the same thing you used in the
previous slide
• Save all of the open files (Site.master and
Styles/Site.css) and open Default.aspx
this is where the style
sheets are actually stored
Combined effect
• With Default.aspx selected, press the run (
)button
Note, some browsers may cache (remember how it was before any changes)
the style sheet, so you may not immediately see the change – clicking the
refresh button in the browser should fix this
A gentle first look at C# code Unit 1.2 L1
• Create an L1 page under Unit1
– Right-click on the Unit1 folder and select Add New
Item…
Code 2 – add new web page
1. Select C#
2. Select Web Form
3. Name the Form
LastnameU1L1.aspx
4. Check both checkboxes
5. Click Add
1
2
3
4
5
Code 3 – select Master Page
– Because you checked
Select master page you
will see this page. Select
the one master page you
have
– (later there may be two or more
to choose from)
– click OK
Code 4 – change the Title
6. From Source view, change the page Title to
“Yourname – U1L1 – First Code”
7. Switch to Design view
8. Click in the MainContent area and type
“Please enter your name: ”
Code 5 – add a TextBox
9. Expand and pin the Toolbox
10.Locate the TextBox control
(you may have to scroll down the ToolBox)
11.Click on the TextBox, drag it after the text you
just entered and drop it
Code 6 - naming the TextBox
12.Name the TextBox
a. Be sure the new TextBox is selected
b. Sort the Properties window alphabetically (rightclick the TextBox and choose Properties if you do not see the
Properties Window)
c. Scroll to the top until you see (ID)
d. Select the default name, TextBox1, and replace it
with txtName
Code 7
13.Add the next Control
a.
b.
c.
d.
e.
f.
Click to the right of the TextBox
Press Enter to create a new paragraph
Locate the Button Control in the ToolBox
Drag a Button to the new paragraph
Change the Button’s (ID) property to btnDemo
Change the Button’s Text property to Click to see
message
Code 8 – adding a Label
14.Add one additional Control
a. Click to the right of the Button and press Enter
b. Locate the Label Control on the Toolbox and
drag it to the new paragraph.
c. Change the Label’s (ID) to lblOutput
d. By default the Text of a Label is set to Label – we
need to delete that text
e. Set the Label’s Visible property to False
Code 9 – take a look
• Run the page
– Does anything happen when you press the
button?
– Why? Or Why not?
Code 10 – where we are
• We added three Objects (Controls) to our web
page
• We changed several properties of the Controls
• But we haven’t told the page to pay attention
to any events
• We do that with methods linked to Objects
Code 11 – create a method
15.To create a method linked to the most
common event a Button sees, the Click event,
simply double-click the Button.
– VWD creates the method on a special page called
the “code-behind” page and takes you to it
Code 12 – Code-behind page
The page has the same name as the aspx
page with the addition of .cs for C#. It is
also shown in the Solution Explorer nested
under the .aspx page.
This is the new method. All methods that deal with
events start with “protected void” and end with
something similar to what you see in the () – we will
discuss all of this later in the course. The method
name, btnDemo_Click, is constructed from the
Control’s (ID) and the name of the event.
These tell you where
the cursor is on the
page, in this case on
line 16, column 9 –
in the middle of our
new method.
Code 13 – the plan
• What we want to happen
– Get the name from txtName
– Add a welcome message
– Put the results in lblMessage
– Make lblMessage visible
Code 14 – the process
• We will have to write a few lines of C# code
• Everything in C# is case sensitive so when we want to refer to
our TextBox we say txtName. If we use any other
capitalization C# won’t know what we mean.
• C# organizes code into blocks contained inside braces, { }. For
example, all the code we need for btnCDemo_Click must go
between the braces that are currently on lines 15 and 17.
• Every line of code in C# ends with a “;”
(much like sentences in English end with a period)
Code 15 – more process
• Contents of a TextBox are in it’s Text property
• Contents of a Label are in it’s Text property
• An assignment statement (an “=“ sign) is used to
copy data from one place to another
• If we just wanted the Label to show what was in the
TextBox we would write
This says to assign the Text property
of lblOutput the current value of the
txtName’s Text property.
Code 16 – a little help
• VWD provides a great deal of help when we are
writing code.
• As soon as you start typing VWD starts suggesting
this you might mean as in this example where only
the lower case letter “l” was entered
If you continue typing the list will narrow
to only those items that contain all your
letters. You can use the arrow keys to
move up and down the list. Once you
select the item you want you can press
the Tab key to have it entered on the page.
Code 17 – and more help
• Object names are separated from property
names by a period
• After you enter the object name, type a
period and VWD will show you all the things
that can come next
Select the Property you want using
any of the techniques mentioned on
the previous slide. (Properties are
indicated by the icon you see to the
left of Text)
Code 18 – continuing
• We want to put the name that is in txtName AND a
message in lblOutput
• C# allows to us stick text data (also know as string
data) together using the + operator (technically called
the concatenation operator)
16. The following line puts the word “Welcome” before
the users name and “Web development is fun” after
the name.
Notice the spaces and the period inside the quotation marks
Code 19 – almost done
17.We need to make lblOutput visible. We do
this by setting it’s Visible property to True.
18.Finally, to help the user we want the cursor
to be in txtName when the page loads. This
is how you can do that.
Note that this is in a different method, the Page_Load method.
We will talk about this method and what is happening here in
class.
Also note that Focus() is a method of web controls – methods
will always require the use of parentheses
Code 20 – Add comments to the final
page
19.Add comments
Add comments to your
page like you see here.
First, we need to explain
the purpose of the entire
page. Second, we need
to add comments to
every method on the
page.
Note how they all start
with //
Leaving comments out can be
very problematic. What may be
obvious to you may not be to
somebody else. Add comments
here to explain what Focus does.
Comments
// indicates that
any following text is
a comment
It is important to include descriptive comments. It is amazing what you will forget in
old code. Also, you never know who else may be working on your code – help them by
providing details about how it works!
Notice the placement of the comments. To
describe the btnDemo_Click method, they
are placed within the { } brackets
And the result is …
Oops, one more thing
We need to link this web page to our MIS3200 page
20. Click on the MIS3200 folder
21. Open the MIS3200 home page you made last class
22. Click after your welcome message and press Enter
23. Drag a Hyperlink control into the new paragraph
Oops, continued
24.Change the (ID) of the Hyperlink to hlUnit1L1
25.Change it’s Text to “Unit1 L1”
26.Select NavigateUrl and click the … to open
the Selet URL window
27.Locate and select your page in the Unit 1
folder (see next page)
28.Press OK
Oops, in pictures
And finally …
29.You should now be able to get to your new
page, starting from your MIS3200 class page
– try and and make sure it works. Submit
your MIS Portfolio’s public URL to the Unit
1.2 L1 drop box.
(see Unit 1.1, slides 40-41 for help on moving your ASPPub
folder to your ASPNET account)
This last step is VERY important. You will only receive credit
for L1 and L2 work and for homework assignments if we can
find them from your MIS Portfolio and MIS class
(MIS3200LastnameFirstname.aspx) page!!
Summary - two views, one page
• Visual Web Developer (WVD) provides two
different views of a web page
– Source View
• Shows the HTML that defines the page
• Allows us to work directly with HTML tags
– Design View
• Shows what the page will look like
• Allows us to design a page using drag-and-drop controls
– Split View (not a new view, rather the combination of both)
Directions for Unit 1.2 L2
This assignment allows you to develop your About page
1. Open the About page in Source view (About.aspx)
a.
Change the Page Title to “About Joe Bobcat” (but, use your own
name!) – note, do not re-name or move the About.aspx file
2. Switch to Design mode
3. Change the ABOUT heading to ABOUT ME
a.
b.
Change the heading to the same color as your master page
heading
Change the text color to White
Directions - Continued
4. Delete Put Content Here and replace it with a table (Table
menu, Insert Table) with 4 rows and 2 columns.
a.
b.
c.
d.
Label the top left column: Local Address
Label the top right column: Permanent Address
Make both of the labels bold and larger than the other text
Add your address information in the other cells of the table
(if you are not comfortable putting in your address since this could be accessed by anyone
on the Internet, just make up one)
Directions - Continued
5. Create an Images folder under ASPPub (this will hold images
for all of your MIS courses eventually – this is different than the
Images folder we created under MIS3200)
6. Download an image of you from somewhere and put it in
the Image folder (if you don’t have one right now then use a
different image)
7. Select the table.style1
(note, it may be table.style2 or higher) press the right arrow
key to get out of the table and press the Enter key to
create a new paragraph
8. Add a Button under the table
a.
b.
Change its (ID) to btnSeeMe
Change the Text property to See Me
Directions – Continued 2
9. Add a second Button next to the first
a.
b.
c.
Change its (ID) to btnHideMe
Change the Text property to Hide Me
Change Visible property to False
10. Click to the right of the button, press the space bar twice
11. Drag an Image Control to the page
a.
b.
c.
Change the (ID) of the Image to imgMe
Select the ImageUrl property, click …, select your image in the
Images folder
Change the Visible property to False
Directions – Continued 3
12. Double-click the See Me button to create a method
(see slide 54, step 17 for help with the following)
a. Make imgMe visible
b. Make btnHideMe visible
c. Make btnSeeMe invisible
13. Return to the aspx page in Design view and doubleclick the Hide Me button
a. In the new method, make imgMe invisible
b. Make btnHideMe invisible
c. Make btnSeeMe visible
Directions – Continued 4
14. In the Page_Load method
a. Set Focus to btnSeeMe
15. Add required page level and method level comments
(including Page_Load! - slides 55 & 56)
16. Create a link to the About page on your MIS220 home page
a. Name the hyperlink hlUnit1L2
b. Change its Text to Unit1 L2
17. Run and test the page
18. Copy the ASPPub folder to the ASPNET server and submit the
MIS Portfolio URL to the Unit 1.2 L2 dropbox
For our next class…
• Remember to complete your L3 before our
next class (see the drop box for directions).
• Prepare for the Unit 1 quiz by reviewing the
Unit 1.1 & 1.2 lecture notes (and any notes
from class).
Review!
• What Property of a
label controls what
the user sees in the
object?
• The prefix for a button
is_____?
• What do the following
acronyms mean: OOP,
GUI, RAD
• Identify the following
as events or
properties:
–
–
–
–
–
–
BackColor
Click
Text
BorderStyle
Page_Load
Visible