Difference between revisions of "OOP Class8"

esse quam videri
Jump to: navigation, search
Line 1: Line 1:
 
[[Category:OOP]]
 
[[Category:OOP]]
  
 +
{{Anatomy of an aspx page}}
  
 +
==Simple Aspx Page==
  
==Motorvehicle Diagram==
+
http://iam.colum.edu/oop/classsource/class8/Aspx/hello.aspx [http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class8/Aspx/hello.aspx hello.aspx]
  
[[Oop Motorvehicle Diagram]]
+
http://iam.colum.edu/oop/classsource/class8/Aspx/hello2.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class8/Aspx/hello2.aspx hello2.aspx]
  
http://iam.colum.edu/oop/browser/browser.aspx?f=/classsource/class7/MotorvehicleRace
+
http://iam.colum.edu/oop/classsource/class8/Aspx/Label.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class8/Aspx/Label.aspx Label.aspx]
  
==Windows forms==
+
In class
 +
Build three hello aspx pages similar to the ones above
  
Events
+
==Dogs on the web==
:events from a windows form or web page are handled by event handlers. Events are raised when a user interacts with interface elements and handled by the event handlers.
+
[http://iam.colum.edu/oop/browser/browser.aspx?f=/classsource/class8/DogWeb DogWeb]
  
  
http://www.csharphelp.com/archives/archive253.html
 
  
===Examaple of event handlers and classes===
+
{{HTML and HTTP}}
http://iam.colum.edu/oop/MotorvehicleRace.zip
 
  
<csharp>
+
 
private void button1_Click(object sender, EventArgs e)
+
http://iam.colum.edu/oop/classsource/class9/htmlForms.html [http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class9/htmlForms.html htmlForms.html - source]
        {
+
 
            Console.WriteLine("button1 Clicked");
+
==Courses on the Web==
            MessageBox.Show("button1 Clicked")
+
[http://iam.colum.edu/oop/browser/browser.aspx?f=/classsource/class8/StudentWeb Student Web]
        }
+
 
</csharp>
+
==Response Object==
 +
 
 +
Response.Write()
 +
 
 +
http://iam.colum.edu/oop/classsource/class10/Response/Response1.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class10/Response/Response1.aspx Response1.aspx - source]
 +
 
 +
Response.End()
 +
 
 +
http://iam.colum.edu/oop/classsource/class10/Response/Response2.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class10/Response/Response2.aspx Response2.aspx - source]
 +
 
 +
Response.Clear()
 +
 
 +
http://iam.colum.edu/oop/classsource/class10/Response/ResponseClear.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class10/Response/ResponseClear.aspx ResponseClear.aspx - source]
 +
 
 +
Response.Flush()
 +
 
 +
http://iam.colum.edu/oop/classsource/class10/Response/ResponseFlush.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class10/Response/ResponseFlush.aspx ResponseFlush.aspx - source]
 +
 
 +
 
 +
===Debugging with response object===
 +
 
 +
Using the response buffer can be extreemely usefull for debugging. Sometime you may have to setup a small debug system to help catch errors in object that do not inherit from System.UI.Page.
 +
 
 +
Response.Flush()
 +
 
 +
http://iam.colum.edu/oop/classsource/class10/Response/ResponseDebug.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class10/Response/ResponseDebug.aspx ResponseDebug.aspx - source]
 +
 
 +
==Home Work==
 +
 
 +
Convert one of your classes to work as an aspx page.
 +
 
 +
Have a nice break....
 +
 
 +
 
 +
 
 +
 
 +
==Web Forms==
 +
Examples of Web Forms
 +
 
 +
http://iam.colum.edu/oop/classsource/class9/aspForms.aspx [http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class9/aspForms.aspx aspForms.aspx - Source]
 +
 
 +
'''todo''' examples of all the html elements and how they react to form submits
 +
 
 +
==Persisting Data==
 +
 
 +
===POST and GET===
 +
 
 +
an asps page posting to itself
 +
 
 +
 
 +
 
 +
==Events in c# on the web==
 +
 
 +
Event handlers
 +
 
 +
OnClick
 +
 
 +
http://iam.colum.edu/oop/classsource/class9/events/events1.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class9/events/events1.aspx events1.aspx - source]
 +
 
 +
OnCommand
 +
 
 +
http://iam.colum.edu/oop/classsource/class9/events/events2.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class9/events/events2.aspx events2.aspx - source]
 +
 
 +
http://iam.colum.edu/oop/classsource/class9/events/events3.aspx
 +
[http://iam.colum.edu/oop/gbrowser.php?file=/classsource/class9/events/events3.aspx events3.aspx - source]
  
 
==Home Work==
 
==Home Work==
  
 +
Create a web page with a button that uses your class.
  
 +
Create a windows form with a button the uses your class.
  
use Pair Programming to make tests and classes from the following UML
+
<csharp>
 +
using System;
 +
using System.Collections.Generic;
 +
using System.ComponentModel;
 +
using System.Data;
 +
using System.Drawing;
 +
using System.Text;
 +
using System.Windows.Forms;
  
[[OOP Students Classes Diagram]]
+
namespace WindowsDog
 +
{
 +
    public partial class Form1 : Form
 +
    {
 +
        Dog fido;
 +
       
 +
        public Form1()
 +
        {
 +
            InitializeComponent();
 +
            fido = new Dog();
 +
        }
  
If you need to add any supporting methods or properties that are not on the diagram feel free.
+
        private void btnBark_Click(object sender, EventArgs e)
 +
        {
 +
            lblBark.Text = fido.Bark();
 +
        }
  
  
<pre>
+
        public class Dog
Test Student()
+
        {
 +
            public string Name; // the dog's name
 +
            public int Age; // the dog's age
 +
            public int Weight; // the dog's weight
 +
            public string BarkSound; // the sound of the dog's bark
  
Jeff Meyers says hello.
+
            public Dog()
StudentDiagram.Student Jeff Meyers
+
            {
StudentID = 0000
+
                BarkSound = "Woof!!!";
0 Courses
+
            }
  
Test Student("Matina" , "Navratilova" )
+
            public string Bark()
 +
            {
 +
                return this.BarkSound;
 +
            }
 +
            public void Eat()
 +
            {
 +
                //put eat code here
 +
            }
 +
        }
 +
    }
 +
}
 +
</csharp>
 +
 
 +
<csharp>
 +
&lt;%@ Page language="c#" debug="True" trace="false"%&gt;
  
Matina Navratilova says hello.
+
&lt;script language="c#" runat="server"&gt;
StudentDiagram.Student Matina Navratilova
+
   
StudentID = 0000
+
    Dog fido;
0 Courses
+
   
 +
    public void Page_Load()
 +
    {
 +
        fido = new Dog();
 +
       
 +
       
 +
    }
  
Test Student("Dan", "Rockwood")
+
    public void Button1_OnClick(Object sender, EventArgs e)
 +
    {
 +
        Response.Write("Hello from Button1_OnClick");
 +
        lblBark.Text = fido.Bark();
 +
    }
  
Dan Rockwood says hello.
 
StudentDiagram.Student Dan Rockwood
 
StudentID = 0000
 
0 Courses
 
  
Make Some Course
+
    public class Dog
CourseName: Object Oriented Programming CourseName: 36-1300
+
    {
 +
        public string Name; // the dog's name
 +
        public int Age; // the dog's age
 +
        public int Weight; // the dog's weight
 +
        public string BarkSound; // the sound of the dog's bark
  
Add Course
+
        public Dog()
StudentDiagram.Student Dan Rockwood
+
        {
StudentID = 0000
+
            BarkSound = "Woof!!!";
5 Courses
+
        }
CourseName: Object Oriented Programming CourseName: 36-1300
 
CourseName: Media Theory and Design 1 CourseName: 36-1000
 
CourseName: Media Theory and Design 2 CourseName: 36-2000
 
CourseName: English 101 CourseName: 52-1000
 
CourseName: Gym 101 CourseName: 11-1111
 
StudentDiagram.Student Dan Rockwood
 
StudentID = 0000
 
4 Courses
 
CourseName: Object Oriented Programming CourseName: 36-1300
 
CourseName: Media Theory and Design 1 CourseName: 36-1000
 
CourseName: English 101 CourseName: 52-1000
 
CourseName: Gym 101 CourseName: 11-1111
 
StudentDiagram.Student Dan Rockwood
 
StudentID = 0000
 
5 Courses
 
CourseName: Object Oriented Programming CourseName: 36-1300
 
CourseName: Media Theory and Design 1 CourseName: 36-1000
 
CourseName: test 101 CourseName: 00-0000
 
CourseName: English 101 CourseName: 52-1000
 
CourseName: Gym 101 CourseName: 11-1111
 
  
Test Instructor
+
        public string Bark()
StudentDiagram.Instructor Edna Krabappel
+
        {
FacultyID = 0000
+
            return this.BarkSound;
1 Course
+
        }
CourseName: English 101 CourseName: 52-1000
+
        public void Eat()
 +
        {
 +
            //put eat code here
 +
        }
 +
    }
 +
&lt;/script&gt;
  
Test Pencil
+
&lt;html&gt;
StudentDiagram.Pencil.isSharp = True
+
&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
Dan has no pencil
+
&lt;/head&gt;
StudentDiagram.Pencil.isSharp = True
+
&lt;body&gt;
All work and no play makes Dan a dull student.
+
&lt;form runat="server"&gt;
StudentDiagram.Pencil.isSharp = False
+
test
All work and no play makes Dan a dull student.
+
    &lt;div id="div1" runat="server" style="background-color:Fuchsia"&gt;Hello in div&lt;/div&gt;
StudentDiagram.Pencil.isSharp = False
+
    &lt;asp:Label ID="lblBark" runat="server" &gt;&lt;/asp:Label&gt;
</pre>
+
    &lt;br /&gt;
 +
   
 +
   
 +
   
 +
    &lt;asp:Button ID="Button1" OnClick="Button1_OnClick" runat="server" Text="Bark" /&gt;
 +
&lt;/form&gt;
 +
&lt;/body&gt;
 +
&lt;/html&gt;
 +
</csharp>

Revision as of 14:48, 26 June 2008


Anatomy of an aspx page

Page Directive The page directive must be on the first line of an aspx page. It consists of Name/Value Pairs and sets parameters that will be used throughout the execution of the page ie. the language.

<%@ Page language="c#" debug="True" trace="False"%>

C# Code may be embedded in the page using script tags similar to javascript

<script language="c#" runat="server"> </script>

Notice the runat attribute is set to 'server'. This is what makes the code execute on the server rather than be parsed by the client.

Console applications start executing in the main method

<csharp>public static void Main() {}</csharp>

The .Net Framework can also execute on the web. Rather than having a Main method a web page starts it's execution with a method called Page_Load

<csharp>public Page_Load { }</csharp>

There are actually several method that are executed in an aspx page.

http://samples.gotdotnet.com/quickstart/aspplus/

Simple Aspx Page

http://iam.colum.edu/oop/classsource/class8/Aspx/hello.aspx hello.aspx

http://iam.colum.edu/oop/classsource/class8/Aspx/hello2.aspx hello2.aspx

http://iam.colum.edu/oop/classsource/class8/Aspx/Label.aspx Label.aspx

In class
Build three hello aspx pages similar to the ones above

Dogs on the web

DogWeb


HTML and HTTP

Http is a stateless protocol. There is mo mechanism built in to the protocol that allows the server to remeber clients or requests. An http simply responds to http verbs GET, POST, PUT, DEL, TRACE etc. contained in RFC 2068 HTTP/1.1

regular html forms post information using forms in 2 ways with a get or a post http request.

Get

Get send information to the server using the URI. Limited to 1024 character in some browsers and servers.

Example http://iam.colum.edu/oop/classsource/class9/simpleGet.html simpleGet.html - source

The simpleGet.html pages form has the action of 'simpleGet.aspx' this mean that when the form is submitted the browser will request the 'simpleGet.aspx' with whatever parameters are in the form. Since the method = get these pararmeters will show up are query string parameters

URI and querystring parameters

URI - Universal Resource Identifier http://src.doc.ic.ac.uk/computing/internet/rfc/rfc1630.txt RFC1630

Http URI

ProtcolHostPortPathFileFragment identifierQuerystring
http://info.cern.ch:8000/imaginary/test/file.html#link?test=yes

Post

Post posts the variables in the HTTP Header.

Example http://iam.colum.edu/oop/classsource/class9/simplePost.html simplePost.html - source

FirstName:
LastName:
Header Name 	Value HttpMethod 	GET
Connection 	keep-alive
Keep-Alive 	300
Accept 	text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Charset 	ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding 	gzip,deflate
Accept-Language 	en-us,en;q=0.5
Cookie 	ASP.NET_SessionId=ezfgw255ix0zd5yogj3eawej
Host 	imdev
Referer 	http://imdev/infod/jeff/
User-Agent 	Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1


REST

Representational state transfer

https://www.ibm.com/developerworks/webservices/library/ws-restful/

http://www.infoq.com/articles/rest-introduction


http://iam.colum.edu/oop/classsource/class9/htmlForms.html htmlForms.html - source

Courses on the Web

Student Web

Response Object

Response.Write()

http://iam.colum.edu/oop/classsource/class10/Response/Response1.aspx Response1.aspx - source

Response.End()

http://iam.colum.edu/oop/classsource/class10/Response/Response2.aspx Response2.aspx - source

Response.Clear()

http://iam.colum.edu/oop/classsource/class10/Response/ResponseClear.aspx ResponseClear.aspx - source

Response.Flush()

http://iam.colum.edu/oop/classsource/class10/Response/ResponseFlush.aspx ResponseFlush.aspx - source


Debugging with response object

Using the response buffer can be extreemely usefull for debugging. Sometime you may have to setup a small debug system to help catch errors in object that do not inherit from System.UI.Page.

Response.Flush()

http://iam.colum.edu/oop/classsource/class10/Response/ResponseDebug.aspx ResponseDebug.aspx - source

Home Work

Convert one of your classes to work as an aspx page.

Have a nice break....



Web Forms

Examples of Web Forms

http://iam.colum.edu/oop/classsource/class9/aspForms.aspx aspForms.aspx - Source

todo examples of all the html elements and how they react to form submits

Persisting Data

POST and GET

an asps page posting to itself


Events in c# on the web

Event handlers

OnClick

http://iam.colum.edu/oop/classsource/class9/events/events1.aspx events1.aspx - source

OnCommand

http://iam.colum.edu/oop/classsource/class9/events/events2.aspx events2.aspx - source

http://iam.colum.edu/oop/classsource/class9/events/events3.aspx events3.aspx - source

Home Work

Create a web page with a button that uses your class.

Create a windows form with a button the uses your class.

<csharp> using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms;

namespace WindowsDog {

   public partial class Form1 : Form
   {
       Dog fido;
       
       public Form1()
       {
           InitializeComponent();
           fido = new Dog();
       }
       private void btnBark_Click(object sender, EventArgs e)
       {
           lblBark.Text = fido.Bark();
       }


       public class Dog 
       {
           public string Name;		// the dog's name
           public int Age;			// the dog's age
           public int Weight;			// the dog's weight
           public string BarkSound;	// the sound of the dog's bark
           public Dog()
           {
               BarkSound = "Woof!!!";
           }
           public string Bark()
           {
               return this.BarkSound;
           }
           public void Eat()
           {
               //put eat code here 
           }
       }	
   }

} </csharp>

<csharp> <%@ Page language="c#" debug="True" trace="false"%>

<script language="c#" runat="server">

   Dog fido;
   
   public void Page_Load()
   {
       fido = new Dog();
       
       
   }
   public void Button1_OnClick(Object sender, EventArgs e)
   {
       Response.Write("Hello from Button1_OnClick");
       lblBark.Text = fido.Bark();
   }


   public class Dog 
   {
       public string Name;		// the dog's name
       public int Age;			// the dog's age
       public int Weight;			// the dog's weight
       public string BarkSound;	// the sound of the dog's bark
       public Dog()
       {
           BarkSound = "Woof!!!";
       }
       public string Bark()
       {
           return this.BarkSound;
       }
       public void Eat()
       {
           //put eat code here 
       }
   }	

</script>

<html> <head><title>Test</title> </head> <body> <form runat="server"> test

   <div id="div1" runat="server" style="background-color:Fuchsia">Hello in div</div>
   <asp:Label ID="lblBark" runat="server" ></asp:Label>
   <br />
   
   
   
   <asp:Button ID="Button1" OnClick="Button1_OnClick" runat="server" Text="Bark" />

</form> </body> </html> </csharp>