1. MIS 3200 – Unit 1.2 Visual C#.NET OOP Objects Toolbox
Naming Convention
HTML: Properties and Limitations

2. Visual C#.NET short forms
Object Oriented Programming Language (OOP)
Uses an Integrated Development Environment (IDE), which is a program used to do your work, just like Microsoft 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
Design side of web pages are written in HTML
Web pages that include a code behind side end with ASPX

3. OOP Object Programming Language
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 it 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

4. 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

5. 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.

6. 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
A lower case prefix and
A usage identifier that describes the function of the object.
Use CamelBack notation

7. Tool Box Objects
Visual Web Developer (VWD) has a large collection of Objects or Controls located in the toolbox.
Controls are added to a web page by dragging them from the Toolbox and dropping them on the page.

8. Some Naming prefixes btn --- Button ckb --- Check Box lbl --- Label
lst List Box
mnu --- Menu
rb --- Radio Button
Rbl --- Radio Button List
txt --- Text Box
See the Coding Standards handout
for a full list of prefixes.

9. Example object names Button1 Unacceptable Names Name The_List btnExit
lblName
lstCollege
txtStreetAddress
Acceptable Names

10. Tools for Web Site Design
HTML (structure)
Code
Modify the look of the page
Respond to events
Implement business logic

11. Open your MIS Web Site
Before your start … be sure to copy your ASPPub folder to your desktop! Do this always.
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

12. Opening a web site

13. 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.

14. Split View
Selecting text or a control in one view automatically selects in same thing in the other view.

15. HyperText Markup Language (HTML)
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>
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 />

16. 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!)

17. 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

18. 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

19. 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 the right hand column, 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.

20. Editing 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

21. 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

22. Using Styles (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 on the header area in the Design View
Click anywhere in the header and click <div.header>
Select the
Background Color tool
Click on a Bobcat green,
then OK

23. More changes Click to the right of the About button
You should see selected at the bottom of the window
Select the Background Color tool
Click on a Bobcat green, then OK
Save all of the open files

24. 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

25. 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…

26. Code 2 – add new web page Select C# Select Web Form
Name the Form LastnameU1L1.aspx
Check both checkboxes
Click Add 1 2 3 4 5

27. 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

28. Code 4 – change the Title
From Source view, change the page Title to “Yourname – U1L1 – First Code”
Switch to Design view
Click in the MainContent area and type “Please enter your name: ”

29. Code 5 – add a TextBox Expand and pin the Toolbox
Locate the TextBox control (you may have to scroll down the ToolBox)
Click on the TextBox, drag it after the text you just entered and drop it

30. Code 6 - naming the TextBox
Name the TextBox
Be sure the new TextBox is selected
Sort the Properties window alphabetically (right-click the TextBox and choose Properties if you do not see the Properties Window)
Scroll to the top until you see (ID)
Select the default name, TextBox1, and replace it with txtName

31. Code 7 Add the next Control 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

32. Code 8 – adding a Label Add one additional Control
Click to the right of the Button and press Enter
Locate the Label Control on the Toolbox and drag it to the new paragraph.
Change the Label’s (ID) to lblOutput
By default the Text of a Label is set to Label – we need to delete that text
Set the Label’s Visible property to False

33. Code 9 – take a look Run the page
Does anything happen when you press the button?
Why? Or Why not?

34. 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

35. Code 11 – create a method
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

36. 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.

37. 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

38. 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)

39. 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.

40. 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 what 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.

41. 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)

42. 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)
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

43. Code 19 – almost done
We need to make lblOutput visible. We do this by setting it’s Visible property to True.
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

44. Code 20 – Add comments to the final page
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.

45. 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

46. And the result is…

47. One more thing We need to link this web page to our MIS3200 page
Click on the MIS3200 folder
Open the MIS3200 home page you made last class
Click after your welcome message and press Enter
Drag a Hyperlink control into the new paragraph

48. Oops, continued Change the (ID) of the Hyperlink to hlUnit1L1
Change its Text to “Unit1 L1”
Select NavigateUrl and click the … to open the Select URL window
Locate and select your page in the Unit 1 folder (see next page)
Press OK

49. Oops, in pictures

50. And finally, submission details
Copy your ASPPUB page to ASPNET server
Make sure it works
(see Unit 1.1, slides for help on moving your ASPPub folder to your ASPNET account)
Submit your MIS Portfolio’s public URL to the Unit 1.2 L1 drop box.
Submit your default MIS portfolio address
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!!

51. Directions for Unit 1.2 L2
This assignment allows you to develop your About page
Open the About page in Source view (About.aspx)
Change the Page Title to “About Joe Bobcat” (but, use your own name!) – note, do not re-name or move the About.aspx file
Switch to Design mode
Change the ABOUT heading to ABOUT ME
Change the heading to the same color as your master page heading
Change the text color to White

52. Directions - Continued
Delete Put Content Here and replace it with a table (Table menu, Insert Table) with 4 rows and 2 columns.
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)

53. Directions - Continued
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)
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)
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
Add a Button under the table
Change its (ID) to btnSeeMe
Change the Text property to See Me

54. Directions – Continued 2
Add a second Button next to the first
Change its (ID) to btnHideMe
Change the Text property to Hide Me
Change Visible property to False
Click to the right of the button, press the space bar twice
Drag an Image Control to the page
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

55. Directions – Continued 3
Double-click the See Me button to create a method (see slide 45, step 17 for help with the following)
Make imgMe visible
Make btnHideMe visible
Make btnSeeMe invisible
Return to the aspx page in Design view and double-click the Hide Me button
In the new method, make imgMe invisible
Make btnHideMe invisible
Make btnSeeMe visible

56. Directions – Continued 4
In the Page_Load method
Set Focus to btnSeeMe
Add required page level and method level comments (including Page_Load! - slides 46 & 47)
Create a link to the About page on your MIS3200 home page
Name the hyperlink hlUnit1L2
Change its Text to Unit1 L2
Run and test the page
Copy the ASPPub folder to the ASPNET server and submit the MIS Portfolio URL to the Unit 1.2 L2 dropbox

57. For our next class…
Prepare for the Unit 1 quiz by reviewing the Unit 1.1 & 1.2 lecture notes (and any notes from class).

58. Review! Identify the following as events or properties:
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