Assignment 2 -- Events, Variables, Methods

1. PageEvents.aspx -- The page illustrates page and control events. A label control is used to display the output.

1. Create a new web form containing three controls: a textbox, a button and a label.

2. Add an onTextChanged event handler to the textbox and an onClick event handler the button. Double clicking on the button in VS will automatically create the handler subroutines.

3. In the handler subroutine concatenate appropriate text to the label control to show that the event has fired.

4. Add a Page_Load subroutine and add text to the label each time it fires.

5. Inside the Page_Load subroutine add an if else block that indicates if the page is posting back or loading.

6. In the Page directive (very top of page) add Trace="true" This will provide the trace report.
   

2. Calculator.aspx -- The calculator uses the OnClick event associated with each button to call the appropriate subroutine for each type of calculation. There are five buttons and five subroutines. Within each subroutine the appropriate calculation is performed and the result is assigned to a label control. The five buttons: 

• each has a unique id (such as btnAdd)

• use the button's text property to define the text that appears on the button

• use the OnClick property to call a specific subroutine (with a name like "Add_click").

Use Visual Studio's design mode to drag two textboxes and five buttons onto the design area. Create the button handlers (subroutines) by double clicking on each button.

Each subroutine has only a single line of code. The text from the textboxes must be converted to a double floating point value (e.g. Convert.ToDouble(tbxInput1.text) to perform the appropriate mathematical operation (otherwise the two strings are concatenated). The result must then be converted back to a string and assigned to the label. 

C# does not support syntax for exponents. Use the Pow method of the Math class (for documentation Google ".net math.pow").

3. FontPicker.aspx - This assignment uses a for loop to iterate through each character of a message entered in a textbox.  Each character is passed to a method named PathBuilder to build a string composed of html image tags. Look at the source code in the example to see the output. Steps:

• Start with the class example FontPickerCSharp.aspx (source).

• Create a textbox, button, dropdown list (documentation) and a label for displaying the image tags.

• Use RequiredFieldValidator controls for the textbox and the dropdown list. The validator for the dropdown list needs to have its initial value property set to the initial value of the dropdown list.  

• The button onClick event uses a for statement to parse each character out of the user's message. The length of the message can be determined by using the textboxes Length property (i.e. tbMessage.Text.Length)

• Inside the loop parse out each character using the textbox's Substring method and pass the character to a function (method) named GetImageTag(..).

• GetImageTag(..) is passed a single character. It uses a C# switch statement (or you could use if else if) to select the correct font and write the image tag. The font name is retrieved from the droplist's SelectedItem.Text property.

• Concatenate the character directly into the file name.  For instance:
         case "Chunk Red":
               return strPath + "Chunk/red/" + strChar + "9.jpg'>";
               break;
         case ...
  

• The local variable strPath contains the common portion of the image urls. The common part of the path for all images is: 
             "<img src='http://yorktown.cbe.wwu.edu/sandvig/images/alphabet/"
   

• Each font/color combination is stored in a separate folder and uses a slightly different naming convention. The directory / naming convention for each font is (where x is the character desired).

Font	Directory & File
Chunk Red	chunk/red/x9.jpg
Deco Blue	deco/blue/x1.gif
Animals	animals/x4.gif
Elegant Red	elegant/red/4x.gif
Funky	funky/x3.jpg
Tape Punch	punch/black/x7.gif

• Look at the html source code on the working sample to see the image tags sent to the browser. (optional: to add line breaks to your html source code include the line break escape character (\n) in your output string. This won't affect the appearance of the rendered html, only that of the html source code.)  
    

• Replace spaces in the message with <br> tags. This is easily done in StringBuilder by making the first test in the If then statement if (strChar == " ") ... 

• Most ASP.NET server controls will write client-side JavaScript that will automatically post the form when the value in the control is changed by the user. To have your form automatically posted when the user selects a different font add the following to your dropdown list control:
       AutoPostBack="true" OnSelectedIndexChanged="btnSubmit_Click"
  
  where "btnSubmit_Click" is the name of the handler for the button click event.  

• By default the contents of all server controls are automatically stored in the viewstate. While this feature is often convenient the viewstate field can get quite large if the controls hold a lot of data. In FontBuilder.aspx the label control that contains the html image tags can be quite large. We don't need this data to be stored in the page viewstate so turn the viewstate off for the label control by adding to its tag: EnableViewState = "false". Compare the difference between the size of the hidden viewstate in the example above to FontBuilderViewState.aspx which has viewstate on (for dramatic results put in a long message).  

4. AnalogClock.html -- The .NET class library includes several classes for image generation and manipulation. Just for fun, let's cut and paste the code for an analog clock. The clock isn't very useful but it is a good illustration what can be done with .NET.  Copy and paste the following two files. AnalogClock.html (view source from sample) is a simple html file with an image tag and a metarefresh tag.  It calls "ClockImage.aspx" (view source) which generates a clock image with the current time.