Washington State University



Making Web pages more Interactive version of the jackets program may make the argument that if the web page responds to selections the program user makes, then the web page feels more intuitive and easy to deal with.A great deal of research into human-computer interaction is performed each year, and one of the findings is that if the web page makes the program user feel more engaged then they can go into a mental flow state.In this version of the program code is placed onto each of the controls to make the webpage refresh and provide new information in response to the program user’s requests. Adding this interaction takes time and planning, but your progam users will be thankful.If you can make your programs more interactive and feel more like a back and forth discussion, then the program user may even suspend belief that they are interacting with a computer, and feel like they are being responded to as an attentive human might. Especially when processes are trying to generate participation (ie fundraising), adoption of self-service transactions (ie permitting or banking) or generate engagement (ie brand loyalty and purchases) the feel of the interface and processing is very important!'This program calculates the price of a jacket to be sold and delivered. A prior version put most of the code on a button click procedure. Doing that makes the calculations and error checking easier to handle. This version of the software leverages interactive list controls to give a more interactive user experience, which make web pages a little more engaging.'Test out this program and try to crash it. For example press the "Quote Price" button before making a) jacket selection, b) state selection, c) delivery selection to see the different error messages and how the errors are handled.'You do not need to polish your work for this class as much as this, as it takes a long time; but your final project should be interactive like this. The important thing is to make your program work correctly, giving correct calculations, and make sure the program user cannot crash it!!Partial Class IntroDevClass_Mod3_jackets Inherits System.Web.UI.Page Public Shared gdecTotal As Decimal Protected Sub ddlJacketInventory_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlJacketInventory.SelectedIndexChanged 'this next code displays the picture of the jacket. If nothing (.selectedindex = -1) or the first item on the list (selectedindex = 0) is selected (literally the term "select a jacket') then stop the program. Otherwise use the item # in the list to specify which picture to display. Compare this usage of the index#, the selectedIndex, to the next code segment where you test for which list item was selected (captured by the .selecteditem.text property). In a large scale production program a common routine would be to retrieve the product information from a database table (which allows the list to change) into an in-memory array table, which would serve as the datasource for the items collection of the dropdownlist. Select Case ddlJacketInventory.SelectedIndex Case 0, -1 imgInventory.ImageUrl = Nothing 'this clears out any picture Exit Sub 'no use continuing if a jacke was not selected. Case 1 'show the different pictures imgInventory.ImageUrl = "RedLeatherJacket.jpg" Case 2 imgInventory.ImageUrl = "BlackLeatherJacket.jpg" Case 3 imgInventory.ImageUrl = "SeaHawksJacket.jpg" End Select 'clear any prior error formatting ddlJacketInventory.BorderColor = Drawing.Color.White ddlJacketInventory.BorderWidth = 1 'set the value of the jacket into the variable and show the price in a label gdecTotal = ddlJacketInventory.SelectedValue txtOutput.Text = Nothing With Label1 .Text = "List price: " & gdecTotal.ToString("C2") .Visible = True End With End Sub Protected Sub rblStates_SelectedIndexChanged(sender As Object, e As EventArgs) Handles rblStates.SelectedIndexChanged 'The second user selection sets the state tax value and shows a picture. This procedure runs only when a selection is made in the radiobuttonList. Show the state flag and the sales tax % and clear any formatting that popped up as a result of a prior error. Select Case rblStates.SelectedItem.Text Case "Idaho" imgState.ImageUrl = "Idaho.gif" Case "Washington" imgState.ImageUrl = "Washington.png" Case "California" imgState.ImageUrl = "Oregon.png" End Select 'show the tax % in a label and clear out any error formatting With Label2 .Text = "State tax % " & rblStates.SelectedValue .Visible = True End With rblStates.BorderColor = Drawing.Color.White rblStates.BorderWidth = 1 txtOutput.Text = Nothing End Sub Protected Sub ddlDiscounts_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlDiscounts.SelectedIndexChanged 'we don't do anything to the price of the jacket here, but we do clear out the text in the output textbox in case there were any error messages there. txtOutput.Text = Nothing End Sub Protected Sub rblDeliveryOptions_SelectedIndexChanged(sender As Object, e As EventArgs) Handles rblDeliveryOptions.SelectedIndexChanged 'clear any formatting that popped up as a result of a prior error and show the shipping fee With Label3 .Text = "Shipping fee: " & rblDeliveryOptions.SelectedValue .Visible = True End With rblDeliveryOptions.BorderColor = Drawing.Color.White rblDeliveryOptions.BorderWidth = 1 txtOutput.Text = Nothing End Sub Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click 'notice that each data entry control is checked for valid data entry. Attention is brought to any errors. Notice the clever use of concatenating text so the output text looks well formatted 'Zero out any prior charge gdecTotal = 0 Select Case ddlJacketInventory.SelectedIndex 'the 0 index item on the dropdownlist asks you to select something so if the program reads index 0 or -1 (a non selection in the control, these these are both problems. A valid entry was not selected so that is also a reason to stop the program. Case Is <= 0 Response.Write("Select a jacket before asking for a price") txtOutput.Text = "Select a jacket before asking for a price" ddlJacketInventory.BorderColor = Drawing.Color.Red ddlJacketInventory.BorderWidth = 4 Exit Sub End Select 'if no state was selected then stop the program and put some formatting onto the control that needs to be fixed If rblStates.SelectedIndex = -1 Then txtOutput.Text = "Please select a state" rblStates.BorderColor = Drawing.Color.Red rblStates.BorderWidth = 4 Exit Sub Else 'a state selection was made so apply the tax based on different state sales tax, clear out any formatting as needed gdecTotal = ddlJacketInventory.SelectedValue gdecTotal += (gdecTotal * rblStates.SelectedValue) rblStates.BorderColor = Drawing.Color.White rblStates.BorderWidth = 1 End If 'moving down the page we go to the third control (this one is optional, as giving a discount in optional) Select Case ddlDiscounts.SelectedIndex Case -1, 0 'if no discount the calculate list price plus tax (the tax is calulated in the parentheses) txtOutput.Text = "List price is " & ddlJacketInventory.SelectedValue gdecTotal = ddlJacketInventory.SelectedValue + (ddlJacketInventory.SelectedValue * rblStates.SelectedValue) Case 1 To 3 ' in case index 1, 2 or 3 was selected 'set the price of the jacket, then deduct any discount gdecTotal = ddlJacketInventory.SelectedValue 'the list price is discounted if one of the discounts is selected in the list, apply the discount gdecTotal -= (gdecTotal * ddlDiscounts.SelectedValue) 'below we multiple the discount by 100 so it just looks nicer in the output (not .15 percent , but 15 percent) txtOutput.Text = "List price is " & ddlJacketInventory.SelectedValue & vbNewLine & "After " & ddlDiscounts.SelectedItem.Text & " discount " & (ddlDiscounts.SelectedValue * 100) & " percent applied, sales price is " & gdecTotal.ToString("C2") 'now add in the tax and add another line to the text shown to the program user gdecTotal += (gdecTotal * rblStates.SelectedValue) txtOutput.Text &= vbNewLine & "Discounted Price with tax: " & gdecTotal.ToString("C2") End Select 'apply differential shipping rate. First if no delivery service is selected then stop the procedure and draw attention to the error If rblDeliveryOptions.SelectedIndex = -1 Then Response.Write("Select a delivery service") txtOutput.Text = "Select a delivery service" rblDeliveryOptions.BorderColor = Drawing.Color.Red rblDeliveryOptions.BorderWidth = 4 Exit Sub Else 'if a valid shipping service is selected then tack on that price gdecTotal += CDec(rblDeliveryOptions.SelectedValue) txtOutput.Text &= vbNewLine & vbNewLine & rblDeliveryOptions.SelectedItem.Text & " shipping selected" txtOutput.Text &= vbNewLine & vbNewLine & "Total with tax and shipping is " & gdecTotal.ToString("C2") 'clear out any prior error formatting rblDeliveryOptions.BorderColor = Drawing.Color.White rblDeliveryOptions.BorderWidth = 1 End If End Sub Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click 'clear the form. txtOutput.Text = Nothing Label1.Text = Nothing Label2.Text = Nothing Label3.Text = Nothing 'we want the labels to pop-up when options are selected on the form so we again set their visibility to false so they become hidden Label1.Visible = False Label2.Visible = False Label3.Visible = False 'You can see that you clear all the list controls by setting their .selectedindex value to -1. rblStates.SelectedIndex = -1 ddlDiscounts.SelectedIndex = -1 ddlJacketInventory.SelectedIndex = -1 rblDeliveryOptions.SelectedIndex = -1 imgInventory.ImageUrl = Nothing imgState.ImageUrl = Nothing End SubEnd Class ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download