Download presentation
Presentation is loading. Please wait.
Published byPeregrine Douglas Modified over 7 years ago
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
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.