8.11

Now, we return to our case study and build a Web Forms-based user interface to the poker.dll assembly. We'll just code a simple version of the game that deals and draws cards, and scores hands. Figure 8.18 shows what the game looks like in the browser.Figure 8.18 Playing WebPok

The user interface consists of a table, 5 rows long, and 5 columns wide, and is laid out as follows:

Row 1A static <asp:label> which reads ".NET Video Poker"

Row 2A dynamic <asp:label> to display game messages and the score

Row 3Five <asp:image> controls to display the cards

Row 4Five <asp:checkbox> controls to allow the user to hold cards

Row 5An <asp:button> control for dealing and drawing cards

We'll use the code-behind approach. Listing 8.23 presents webpok.aspx which contains the user interface markup.

Listing 8.23 The WebPok Web Form

<!-- WebPok.aspx -->

<%@ Page Language="C#" Inherits="Poker.WebPok" Src="WebPok.cs" %>

<html> <head>

<title>

.NET Video Poker -

</title> </head> <body> <center>

<form runat="server">

The WebForms Version

<asp:table border="1" cellSpacing="0"cellPadding="5" runat="server">

<asp:tablerow runat="server"> <asp:tableCell columnSpan="5" horizontalAlign="center" runat="server"> <asp:label

text=".NET Video Poker" Font-Name="Verdana" Font-Size="12pt" Font-Bold="true" runat="server"/> </asp:tableCell> </asp:tablerow>

<asp:tablerow runat="server"> <asp:tableCell columnSpan="5" horizontalAlign="center" runat="server"> <asp:label

id="messageLabel" text="Click DEAL to Start" Font-Name="Verdana" Font-Size="12pt" Font-Bold="true" runat="server"/> </asp:tableCell> </asp:tablerow>

<asp:tablerow runat="server">

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:image id="card1"

ImageUrl="images/cb.gif" runat="server"/> </asp:tableCell>

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:image id="card2"

ImageUrl="images/cb.gif" runat="server"/> </asp:tableCell>

<asp:tableCell

horizontalAlign="center"runat="server"> <asp:image id="card3"

ImageUrl="images/cb.gif" runat="server"/> </asp:tableCell>

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:image id="card4"

ImageUrl="images/cb.gif" runat="server"/> </asp:tableCell>

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:image id="card5"

ImageUrl="images/cb.gif" runat="server"/> </asp:tableCell>

</asp:tablerow>

<asp:tablerow runat="server">

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:checkBox

id="hold1"

text="HOLD"

enabled="false" Font-Name="Verdana" Font-Size="12pt" Font-Bold="true" runat="server"/> </asp:tableCell>

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:checkBox

id="hold2"

text="HOLD"

enabled="false" Font-Name="Verdana" Font-Size="12pt" Font-Bold="true" runat="server"/> </asp:tableCell><asp:tableCell

horizontalAlign="center" runat="server"> <asp:checkBox

id="hold3"

text="HOLD"

enabled="false" Font-Name="Verdana" Font-Size="12pt" Font-Bold="true" runat="server"/> </asp:tableCell>

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:checkBox

id="hold4"

text="HOLD"

enabled="false" Font-Name="Verdana" Font-Size="12pt" Font-Bold="true" runat="server"/> </asp:tableCell>

<asp:tableCell

horizontalAlign="center" runat="server"> <asp:checkBox

id="hold5"

text="HOLD"

enabled="false" Font-Name="Verdana" Font-Size="12pt" Font-Bold="true" runat="server"/> </asp:tableCell>

</asp:tablerow>

<asp:tablerow runat="server"> <asp:tableCell columnSpan="5" horizontalAlign="center" runat="server"> <asp:button

id="dealDrawButton"

text="DEAL"

Font-Name="Verdana"

Font-Size="12pt"

Font-Bold="true"

OnClick="dealDrawHandler"runat="server"/> </asp:tableCell> </asp:tablerow>

</asp:table>

<asp:label id="handLabel" visible="false" runat="server"/>

</form> <center> </body> </html>

As you can see, the markup is very simple. When the page is first loaded, we display the backs of the cards and tell the user "Click DEAL to Start." Also, we have just one event handler in the page, which deals and draws cards:

<asp:button

id="dealDrawButton"

OnClick="dealDrawHandler" .../>

The dealDrawHandler is contained in the code behind the form, shown in listing 8.24.

Listing 8.24 The WebPok Web Form code

// file : WebPok.cs

// This is the codebehind logic for WebPok.aspx.

namespace Poker {

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

public class WebPok : System.Web.UI.Page {

protected void dealDrawHandler(object Source, EventArgs e) {

Hand h;

if (dealDrawButton.Text == "DEAL") {

// deal...

h = new SimpleMachine().Deal(); handLabel.Text = h.Text;

card1.ImageUrl="images/" + h.CardName(1) + ".gif"; card2.ImageUrl="images/" + h.CardName(2) + ".gif"; card3.ImageUrl="images/" + h.CardName(3) + ".gif"; card4.ImageUrl="images/" + h.CardName(4) + ".gif"; card5.ImageUrl="images/" + h.CardName(5) + ".gif"; enableCheckBoxes(true); clearCheckBoxes(); dealDrawButton.Text = "DRAW";

messageLabel.Text = "Hold Cards and Click DRAW";return;

 

draw...

 

 

 

string holdCards =

 

 

 

if

(holdLChecked)

holdCards

 

"1";

if

(hold2.Checked)

holdCards

 

"2";

if

(hold3.Checked)

holdCards

 

"3";

if

(hold4.Checked)

holdCards

 

"4";

if

(hold5.Checked)

holdCards

+=

"5";

h = new SimpleMachine().Draw(handLabel.Text, holdCards);

+

h.CardName(1)

+

".gif";

+

h.CardName(2)

+

".gif";

+

h.CardName(3)

+

".gif";

+

h.CardName(4)

+

".gif";

+

h.CardName(5)

+

".gif";

dealDrawButton.Text = "DEAL"; enableCheckBoxes(false);

messageLabel.Text = h.Title + " (Scores " + h.Score + ")";

}

private void enableCheckBoxes(bool flag) {

hold1.Enabled = hold2.Enabled = hold3.Enabled = hold4.Enabled = hold5.Enabled = flag;

}

private void clearCheckBoxes() {

hold1.Checked = hold2.Checked = hold3.Checked = hold4.Checked = hold5.Checked = false;

}

protected Button dealDrawButton;

protected Label handLabel,messageLabel;

protected Image card1, card2, card3, card4, card5;

protected CheckBox hold1, hold2, hold3, hold4, hold5;

The WebPok class consists of the dealDrawHandler method and a couple of utility methods for clearing and enabling/disabling the check boxes. Since we don't allow betting, we use the Poker.SimpleMachine class which supports dealing and drawing only. The dealDrawHandler method checks the caption of the button. If it is DEAL, it deals cards. Otherwise cards are drawn.