BIT 285: (Web) Application Programming

Lecture 03: Tuesday, January 13, 2015

Visual Studio, ASP.NET, and the "Lucky 7" Game

Instructor: Craig Duckett

2

JUST A HEAD'S UP: Assignment 1: Web Forms is due Tuesday, February 3, (zipped and uploaded to StudentTracker by midnight)

We are having issues with the new StudentTracker server. I will be working on it this week and will try to resolve these issues by next week. If I cannot resolves the issues I will be setting up Canvas for the uploading of the three Assignments and the tracking of grades.

The Help Guides section of the BIT285 web site has invaluable information available for the learning of ASP.NET.

Let's have another look at these now.

3

http://www.microsoftvirtualacademy.com/

4

5

"In computer programming, an application programming interface (API) is a set of routines, protocols, and tools for building software applications. An API expresses a software component in terms of its operations, inputs, outputs, and underlying types. An API defines functionalities that are independent of their respective implementations, which allows definitions and implementations to vary without compromising each other. A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together."

From Wikipedia: API

API: Application Programming Interface

6

What is an API?

An API, or Application Programming Interface, at its most fundamental level, is how software applications to talk to each other using the Internet. An API allows you to open up data and other digital resources, to public developers, businesses, or even between departments and locations within a company. APIs are increasingly the way in which companies exchange data, services and complex resources, both internally, externally with partners, and openly with the public.

More specifically, a Web API might be described as: “A set of Hypertext Transfer Protocol (HTTP) request messages, along with a definition of the structure of response messages, which is usually in an Extensible Markup Language ( XML ) or JavaScript Object Notation ( JSON ) format.”

Quite a mouthful, but as this class progresses we will be learning about and using Web APIs—and XML or JSON—in creating and building out our web applications.

NOTE: In this class I will be using the term “API” to mean “Web API” unless otherwise specified.

7

What Are APIs Used For?APIs enable software, or even hardware to communicate over the Internet, in a secure way. The World Wide Web, uses the Internet, to allow humans to communicate, and share information. APIs, use the Internet to allow websites, web applications, mobile applications, and devices to communicate, and share information.

• APIs Deliver Functionality to Websites• APIs Are Behind Web Applications• APIs Power Mobile Applications• APIs Connecting Physical Devices

APIs are part of every aspect of our increasingly digital lives. APIs provide the connectivity everyone needs from the cell phone in your pocket, to all the tools you use at the office, and in our home security, appliances, and entertainment.

8

Who Uses APIs?APIs may sound like something that is only for geeks, but APIs are making data and resources available to any adventurous individuals—no programming experience required. APIs are being employed by non-technical folks to get the content, data, and other digital resources they need to build applications, visualizations, and the analysis they need to solve real world problems.

When it comes to APIs, there are two dimensions:

• API Providers - You are designing, deploying, and managing one or many APIs for use either privately, amongst partners, or to the public.

• API Consumers - You are building websites, web applications, mobile applications, data analysis, data visualizations, or connecting devices to the Internet using APIs.

In an ideal world, everyone is both API provider, as well as a consumer—whether you are a business, organization, government agency, or everyday individual. APIs impact everyone.

9

APIs in Object-Oriented Languages (like Java)In its simplest form, an object API is a description of how objects work in a given object-oriented language – usually it is expressed as a set of classes with an associated list of class methods.

For example, in the Java language, if the class Scanner is to be used (a class that reads input from the user in text-based programs), it is required to import the java.util.Scanner library, so objects of type Scanner can be used by invoking some of the class' methods:

import java.util.Scanner;

public class Test { public static void main(String[] args) { System.out.println("Enter your name:"); Scanner keyboard = new Scanner(System.in); String name = keyboard.nextLine(); System.out.println("Your name is " + name + "!"); keyboard.close(); } }

In the example above, methods nextLine() and close() are part of the API for the Scanner class. More generally, in object-oriented languages, an API usually includes a description of a set of class definitions, with a set of behaviors associated with those classes. This abstract concept is associated with the real functionality exposed, or made available, by the classes that are implemented in terms of class methods. in object-oriented languages, the API defines a set of object behaviors, possibly mediated by a set of class methods. In such languages, the API is still distributed as a library. For example, the Java language libraries include a set of APIs that are provided in the form of the JDK used by the developers to build new Java programs. The JDK includes the documentation of the API in JavaDoc notation.

10

What About Web APIs?When used in the context of web development, a Web API is typically defined as a set of Hypertext Transfer Protocol (HTTP) request messages, along with a definition of the structure of response messages, which is usually in an Extensible Markup Language (XML) or JavaScript Object Notation (JSON) format.

While "Web API" historically has been virtually synonymous for web service, the recent trend has been moving away from Simple Object Access Protocol (SOAP) based web services and Service-Oriented Architecture (SOA) towards more direct Representational State Transfer (REST) style web resources and Resource-Oriented Architecture (ROA).

Part of this trend is related to the Semantic Web movement toward Resource Description Framework (RDF), a concept to promote web-based ontology engineering technologies.

Web APIs allow the combination of multiple APIs into new applications known as "mashups".

NOTE: We will be introducing XML and/or JSON into our web applications as the quarter progresses, and will wrap things up with two weeks of REST at the end of the quarter.

11

API Examples: Amazon Kindle, Netflix, Facebook, etc

Recommended Video (4:37 minutes): https://www.youtube.com/watch?v=4JjN54aaF74

12

Aspx Code Generated for a Default Form

13

WALK THROUGH: Aspx Code Generated for a Default Form1. Create a new ASP.NET Empty Web Site (File > New > Web Site… > Templates > Visual C# > ASP.NET Empty Web Site)

called lec3demo1 and add a new Web Form to it (right-click on the lec3demo1 project and select Add > Add New Item… > Web Form and use the default Default.aspx name.

2. If it is not already selected and open, select the Default.aspx file and open it in Source view.

14

Aspx Code Generated for a Default Form CONTINUED

HISTORICAL NOTE: The <% %> Tags

In ASP.NET it is actually possible to place C# code directly onto an HTML web page by putting it between <% and %> tags.

ASP.NET’s precursor (simply known as ASP), had no "code-behind" files (C# in a separate file with the .cs extension), so all of the C# code was put on the aspx page inside of the <% %> tags.

Since ASP.NET introduced "code-behind" files, it is rare to see this done today.

Understanding the Page Tag

The first tag is enclosed in <% %> tags. This line is never sent to web browsers and is used instead to inform ASP.NET which programming language (C#) and which "code-behind" file (Default.aspx.cs) should be used for this page.

15

Aspx Code Generated for a Default Form CONTINUED

When AutoEventWireup is "true", ASP.NET does not require that you explicitly bind event handlers to a page event such as Load.

When you have AutoEventWireUp turned on, ASP.NET will automatically recognize you have a method with the Page_Load syntax and call it automatically:

private void Page_Load(object sender, EventArgs e){

}

This gives you a cleaner code-behind. Notice that if it wasn't specified as such you would have to explicitly tell ASP.NET how to handle the page load event with something like this:

this.Load += new System.EventHandler(this.Page_Load);

The Inherits="_Default" piece means the page inherits from the _Default class. If you open the Default.aspx.cs "code-behind" file, you'll see the class name is _Default.

16

Aspx Code Generated for a Default Form CONTINUED

IMPORTANT NOTE: runat= "server"

When an HTML tag is marked with runat="server" it becomes available to ASP.NET instead of being a normal 'static' tag.

This means that you can modify its contents using C# code, which we will be doing with our web applications as the quarter progresses.

For this reason, any ASP.NET controls have to be inside <form> tags with runat="server" to work correctly.

Although you could place 'static' HTML content outside the <form> tags, it is best to keep all of your page’s content between the <form> and </form> tags.

ASP.NET will only allow you to have one form with runat="server" per page. IMPORTANT!

17

Aspx Code Generated for a Default Form CONTINUED

The !DOCTYPE html declares that HTML5 will be used for the page.

The xmlns attribute specifies the xml namespace for a document, and used to prevent name conflicts. The xmlns attribute is required in XHTML, invalid in HTML 4.01, and optional in HTML5. You could remove the line here, and just have <html> and everything would work just fine because HTML5 has been declared in the DOCTYPE.

NOTE: It is possible to edit the template file to remove the xmlns line from pages auto-generated by drilling down where Visual Studio is installed*, but this is not recommended.

The remaining tags are standard HTML with the exception of runat="server" which was discussed in the previous slide.

* C:\Program Files (x86)\Microsoft Visual Studio 11.0\Web\WebNewFileItems\Csharp\WebForm.aspx

18

HTML Generated on a New Web Form

19

HTML Generated on a New Web FormThe HTML generated for a new Web Form is based on a template that contains pretty standard HTML elements, except for the ASP.NET elements discussed in the previous slides.

As a developer, it is up to you to add additional HTML elements to the page, as well as style it using CSS (Cascading Style Sheets) whether inline, internal, or through an external stylesheet file. You can do this manually, as you would with a 'static' web page, or you can use some of the features that are available through Visual Studio.

FYI: For a refresher, see the following slides available on the main BIT285 page:

• HTML: Relative and Absolute Links

• CSS: Inline, Internal, External Usage

• Javascript: Inline, Internal, External Usage

20

HTML5/CSS3 Elements by Browserhttp://www.html5.test

What this means is, just because you are building ASP.NET enabled pages in Visual Studio, you will still need to test your work in the various browsers to make sure the HTML/CSS elements do what you intend them to do.

21

Visual Studio Features for Working with HTML• IntelliSense

• Snippets

• Smart indentation

• If you change the starting tag for an element, the ending tag will be changed too

• If you enter the opening tag followed by the letters that are capitalized in the name of a control, like <cb for the asp:CheckBox control, IntelliSense will list the control.

• When you start the entry of an attribute, IntelliSense lists the attributes that apply to the HTML element.

22

Visual Studio Features for Working with HTMLIntelliSense and Snippets

Press the Tab key twice and the snippet will be entered for the tag.

Start a tag and IntelliSense offers options of the available elements…

23

Visual Studio Features for Working with HTMLSmart Indentation and Tag Changes

If you press the Enter key when the cursor is in the content area the ending tag is dropped down two lines with the cursor where you want it.

Changing and opening tag automatically changes the closing tag too.

24

Visual Studio Features for Working with CSSCreating an External Style Sheet in Visual StudioRight-click on the project in the Solution Explorer, then choose Add > Style Sheet, and give it a name.

25

Visual Studio Features for Working with CSSEntering and Editing Styles for an External Style Sheet• Open the style sheet in the Editor, and enter the styles into the style sheet.

• If necessary, modify the aspx code so it provides the id and class names that you need for the selectors in the style sheet.

• After you enter a rule set or a series of rule sets, switch to Design view to see whether the styles are working the way you want them to. Or, test the form in a browser.

How to Comment Out and Uncomment CSS Rules

• Press Ctrl+K and then Ctrl+C to comment out selected rules, or Ctrl+K and then Ctrl+U to uncomment them. Or, click the Comment or Uncomment button in the Style Sheet toolbar.

How to Use the CSS Outline Window

• Use the View > Other Windows > Document Outline command, then to navigate to a rule set in the style sheet, click on its selector in this window.

26

Using Visual Studio to Create and Modify Styles: The New Style Dialog Box

How to Create a New Style

• From Design view, open the New Style dialog box by choosing the Format > New Style command or by selecting Apply New Style from the Target Rule drop-down list in the Formatting toolbar. You can also open this dialog box from the Apply Styles window.

• In the New Style dialog box, enter or select the Selector for the style, select Existing Style Sheet from the Define In list, and use the Browse button for the URL entry to find the style sheet you want the new style to be placed in.

• To specify the rules for the style, select a Category and set the values for the properties in that category. Then, continue with any of the other categories.

For those of you who use Dreamweaver, you can definitely see where Microsoft got the, uh, idea.

27

Using Visual Studio to Create and Modify Styles: The Apply Styles Window

Display the Apply Styles Window

In Designer view, select View > Apply Styles

28

Using Visual Studio to Create and Modify Styles: The Apply Styles Window

The Apply Styles Window

• To view the properties for a style, just point to the style in the Apply Styles window. • To apply a class style to one or more elements, select the elements and click on the style in the Apply Styles

window. That adds the appropriate class attribute to the HTML for the elements.• To apply one or more class styles to a single element, select the element, hold down the Ctrl key, and click on

the styles that you want to apply in the Apply Styles window. Repeat this process to remove one or more classes from an element.

• To start a new style, click the New Style button in the Apply Styles toolbar. Or, select any style and choose New Style from its drop-down list.

• To modify an existing style, select it and choose Modify Style from its drop-down list. • To delete a style, select it and choose Delete Style from its drop-down list. • To remove all class and inline styles for selected elements, click Clear Styles. This removes the class and style

attributes from the elements.

The Apply Styles window lets you work with the styles defined in external style sheets as well as inline styles and internal styles. It lists the styles for class and id selectors. The Apply Styles window has a toolbar that lets you create a new style, attach a style sheet to the current page, or display how the styles are displayed in the window

29

Using Visual Studio to Create and Modify Styles: The CSS Properties Window

How to Use the CSS Properties Window

In Designer view, select View > CSS Properties

30

Using Visual Studio to Create and Modify Styles: The CSS Properties Window

How to Use the CSS Properties Window

• To review the properties for an element, select it and click the Summary button. Then the Applied Rules pane shows all of the rule sets that have been applied to the element, and the CSS Properties pane shows all of the roles that have been applied. If a role has been overridden, it is crossed out in the CSS Properties pane.

• To modify the styles for an element in the Designer select it. Or, to modify the styles for an existing rule set, select it in the Applied Rules pane. Then, in the CSS Properties pane, click on a property and change the value in the column to the right of it.

• To sort the properties by category, alphabetically, or by the properties that have been applied, use the buttons in the toolbar for this window.

The CSS Properties window can be used to review the styles applied to a selected element. It can also be used to modify styles. This window is especially useful for analyzing the styles for a selected element when more than one rule set applies to it. Then, you can see the sequence in which the rules are applied and any rules that are overridden are crossed out.

31

Using Visual Studio to Create and Modify Styles: The Manage Styles Window

How to Use the Manage Styles Window

In Designer view, select View > Manage Styles

32

Using Visual Studio to Create and Modify Styles: The Manage Styles Window

How to Use the Manage Styles Window

• To move a style from one style sheet to another, drag and drop it on the style sheet name or "Current Page". • To change the order of the styles in the style sheet, select Categorize by Order from the drop-down Options list

in the Manage Styles toolbar. Then, drag and drop a style in its new location. • To display the properties of a style in the Manage Styles window, point to it. • To show the preview for a style, select it in the Manage Styles window. If the preview isn't displayed, select

Display Selected Style Preview from the drop-down Options list.

The Manage Styles window provides a convenient way to move the styles used by a page from one style sheet to another. That includes the styles in both internal and external style sheets. • All styles in an external style sheet appear under the name of that style sheet. • All styles in an internal style sheet appear under the Current Page heading, but only when a control that uses an

embedded style is selected in the Designer.

33

An Introduction Standard Server Controls

The Standard Server Controls are the ones in the Standard group of the Toolbox. These are the ones that get data from and present data in a web form.

34

Common Server Controls

List Server Controls

When to Use HTML Elements Instead of Server Controls

• When the contents of the controls are not going to change, you might use HTML elements instead of server controls because server controls have some overhead.

When to Use Server Controls instead of HTML

• When the contents of the controls are going to change, you should use server controls so it's easy to change the controls by using C# in the "code-behind" file.

• If you don't know how to code the HTML for the elements you want to use, server controls can help you get around that. Just add the controls to a form, use the Properties window to set their attributes, and let ASP.NET generate the HTML.

In the tables to the left, the HTML column shows the HTML elements that are rendered for each server control. The Prefix column shows prefixes that are commonly used in the IDs for these controls.

35

How to Use C# to Work with the Data in Server Controls

Like other objects, server controls have events that are fired when certain actions are performed on them. The table below summarizes some of these events for the common controls. When you click on a Button control, for example, the Click event is fired. And when you change the text in a Textbox, the TextChanged event is fired. If your application needs to respond to an event, you code a method called an event handler. When you generate an event handler from Visual Studio, an event attribute that names the event handler is added to the aspx code for the control. Then, you enter the C# code for the event handler in the page's code-behind file.

Common Control Events

36

How to Use C# to Work with the Data in Server Controls CONTINUED

1. In the lec3demo1 project, open the Default.aspx file in Source view and add <h2></h2> tags inside the <div> tags of the <form> and give it the content text Lecture 3 Demo.

2. Add some CSS style—either internal in the <head> or by adding an external style sheet—to format the <h2> tag in some way. Run your program to test by hitting the F5 key or by invoking the green arrow icon on the Toolbar.

37

How to Use C# to Work with the Data in Server Controls CONTINUED

3. Switch to Design view, and from the Standard toolbox drag-and-drop a Label to the web form just below the h2 content; click just to the right of the Label and press the Enter key to drop down a line.

4. Drag-and-drop a Textbox and place it below the Label; click just to the right of the Textbox and press the Enter key to drop down a line.

5. Drag-and-drop a Button and place it below the Textbox; click just to the right of the Button and press the Enter key to drop down a line.

6. Drag-and-drop a second Label and place it below the Button ; click just to the right of the Label and press the Enter key to drop down a line.

7. Run your program to test by hitting the F5 key or by invoking the green arrow icon on the Toolbar.

38

How to Use C# to Work with the Data in Server Controls CONTINUED

8. Click on the first Label, named Label1 by default, and in the Properties pane on the right-hand side, scroll all the way to the bottom and change its ID name to lblInstructions. You'll notice that the control name at the top of the Properties panel is also renamed to lblInstructions.

NOTE: It is common practice among Visual Studio programmers (whether C# or Visual Basic) to give controls prefixes based on the type of control they are as well as a meaningful name. This way when the programmer is working in the "code-behind" file, he-or-she can see what type of control is being used by its prefix simply by the code. This is why we change the control name to lblInstructions instead of just Instructions. See Slide 31 above for more examples of prefixes for different controls.

39

How to Use C# to Work with the Data in Server Controls CONTINUED

9. In the Properties panel, scroll up to the Text field and change its value from Label to Please Enter Your Name. After doing so, you'll note the text also changes on the Label on the web form.

40

How to Use C# to Work with the Data in Server Controls CONTINUED

10. Select the Textbox on the web form, and in the Properties panel, scroll down to the ID field and change its value from Textbox1 to txtNameField. After doing so, you'll not the text also changes on the Label on the web form.

41

How to Use C# to Work with the Data in Server Controls CONTINUED

11. Select the Button on the web form, and in the Properties panel, scroll down to the ID field and change its value from Button1 to btnClickMe

12. Scroll up to the Text field and change its value from Button to Click Me

42

How to Use C# to Work with the Data in Server Controls CONTINUED

13. Select the second Label on the web form, and in the Properties panel, scroll down to the ID field and change its value from Label2 to lblMessage

14. Scroll up to the Text field and change its value from Label to Watch Me!

43

How to Use C# to Work with the Data in Server Controls CONTINUED

15. Switch over to Source view to look at the code that Visual Studio has generated for you.

44

How to Use C# to Work with the Data in Server Controls CONTINUED

16. Switch back to Design view and double-click on the Click Me button. This will display the 'code-behind' Default.aspx.cs file where you will see some code has automatically been generated for you, an event handler for the button's click event. When the button is clicked, any code between the opening and closing curly braces { and } (or as I like to call them, "squiggles") will run.

45

How to Use C# to Work with the Data in Server Controls CONTINUED

17. Add the following line of code to the btnClickMe_Click button click event between the { and } squiggles:

lblMessage.Text = "Your name is " + txtNameField.Text;

46

How to Use C# to Work with the Data in Server Controls CONTINUED

18. Run your program to test that it works as planned. If not, troubleshoot for typos, missing semi-colons, etc.

47

How to Use C# to Work with the Data in Server Controls CONTINUED

19. If I wanted to, instead of having the second lblMessage label's Text show Watch Me!, I could have left it blank, and also changed its Visible field from true to false in order to hide it at run time, then when I clicked the button I could change the label's visibility back to true and display the message.

48

TO BE CONTINUED ON THURSDAY

49

Lecture 03: In-Class ExerciseFrom the menu bar, select Lectures and go to the Lectures 03 bar and select Lecture 03 ICE to begin working on today's in-class exercises.