MIS 3200 – Unit 1

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

2. 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 Studio Express 2012 (VS Express) • The IDE has a Graphical User Interface (GUI) • Used for creating software programs • Also used for creating web pages

3. 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 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 Studio Express for Web (VSE) has alarge collection of Objectsor Controls locatedin the toolbox. • Controls are added to a web pageby dragging them from the Toolboxand dropping them on the page.

8. Some Naming prefixes • btn ---- Button • ckb---- Check Box • cbo ---- Combo Box • hsb ---- Horizontal Scroll Bar • lbl ---- Label • lst ---- List Box • mnu --- Menu • rb---- Radio Button • tmr ---- Timer • txt ---- Text Box • vsb ---- Vertical Scroll Bar See the Coding Standards handout for a full list of prefixes.

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

10. Tools for Web Site Design • HTML (structure) • Style sheets (presentation) • Code • Modify the 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 betweenDesign and Source view, or Split the screen and see both at the same time.

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

15. Source and Design Views • Source View shows the text and HTML tags that construct the page • Design View shows how the text and tags should be displayed (rendered) by a browser • HTML tells the browser how to display (render) the page, • 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.

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

17. 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, evenwhen there are errors in the HTML and other browsers don’t. You should ALWAYS checkyour pages in different browsers.

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

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

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

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

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

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

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

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

26. 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-clickingSite.master in the Solution explorer • Switch to Design mode • Click in the top of the header area in the Design View, slightly above Joe Bobcat’s MIS Portfolio. Loook for the tag: “<div.content-wrapper>”. • Click it to select it so that there is no box around it as shown below. • Next we will display the CSS properties windows

27. Displaying the CSS Properties • Click the View menu • Select CSS Properties • The CSS Properties window overlays the Toolbox (see next slide) • To keep the window open, click the “unpinned” icon to convert it to a “pinned” icon

28. Using CSS Properties The Applied Rules section shows all the cascading style sheets that have an effect on the selected control. As you click on different styles the CSS Properties list window (below it) 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.

29. Change a property • Click to the right of the background-color optionunder the Background section. • Click the little down arrow • Select “More Colors” for thecolor pallet, and pick Bobcat Green.

30. Master page header Your Master page header may look like this. Depending upon how wide your screen the green area may not cover the text for JOE BOBCAT’S MIS PORTFOLIO.

31. More changes • Click to the right of the About button • You should see <ul#menu> selectedat 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 Content/Site.css)and open Default.aspx this is where the style sheets are actually stored

32. 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. • If your page does not look exactly like this, consider restarting. It is easier to do now than later. • Design is difficult to control in VSE, so grading will be lenient for design elements

33. Combined effect-Alternative View • 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. • If your page does not look exactly like this, consider restarting. It is easier to do now than later. • Design is difficult to control in VSE, so grading will be lenient for design elements

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

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

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

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

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

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

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

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

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

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

44. 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. • VS Express creates the method on a special page called the “code-behind” page and takes you to it

45. Code 12 – Code-behind page The page has the same name as the aspxpage with the addition of .cs for C#. It isalso shown in the Solution Explorer nestedunder the .aspx page. This is the new method. All methods that deal withevents start with “protected void” and end withsomething similar to what you see in the () – we willdiscuss all of this later in the course. The methodname, btnDemo_Click, is constructed from the Control’s (ID) and the name of the event. These tell you wherethe cursor is on the page, in this case online 16, column 9 –in the middle of ournew method.

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

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

48. 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 thetxtName’s Text property.

49. 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 narrowto only those items that contain all yourletters. You can use the arrow keys tomove up and down the list. Once youselect the item you want you can pressthe Tab key to have it entered on the page.

50. 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 usingany of the techniques mentioned on the previous slide. (Properties are indicated by the icon you see to theleft of Text)