As a bit of trivia for the day, JavaScript can handle pseudo-hashtables, via the Array object. You can reference the item with its key, and enumerate through all the objects.
function DoHashTest()
{
var h = new Array();
h["aaa"] = "Aardvark";
h["bbb"] = "Babboon";
var s = "";
//This won't work, length will be 0.
for (var i = 0; i < h.length; i++)
{
s += h[i];
}
//Cycle through like a hash:
for (var i in h)
{
s += i;
}
}
We've migrated to MSTest, and are running tests through MSBuild. I came across an interesting issue (that seems like a bug).
Normally I would expect that if the test passes in Test Viewer (the UI), then it would also pass when I run it in MSTest from the command line, and it would still pass when I call it from MSBuild. However, I found this not always so.
One of my tests wrote out files to the temp directory, as generated by "System.IO.Path.GetTempPath()". I then cleaned up the test output by deleting the directory, and recreating it. This worked fine in both UI, and MSTest, but failed in MSBuild with the following error:
Run Configuration: Default Run Configuration
The batch file cannot be found.
C:\myProject\myBuild.msbuild(21,5): error MSB3073:
The command ""C:\Program Files\Microsoft Visual Studio 8\Common7\IDE\MsTest"
/testcontainer:C:\myTests.dll /resultsfile:myOutput\UnitTests.trx" exited with code 1.
Done building target "UnitTest" in project "myBuild.msbuild" -- FAILED.
By appending a sub directory to the temp directory, like "System.IO.Path.GetTempPath()" + "temp\", the tests all passed again. My guess is that MSBuild sent something to this output directory that my cleanup method was inadvertently deleting.
One immediate perk is that the script explorer has source code color-coded, whereas the running document window did not.
Check out Microsoft's Jerry Orman's blog to see how to debug in VS2005.
There are some Framework classes out there that are useful, but infrequently used. In my experience, System.Web.UI.Pair and System.Web.UI.Triplet are two such examples. These provide basic utilities (like serialization) to store two or three related objects into single object. They have predictable members, for example Pair has a "First" and "Second" property that can be set either in the constructor or once instantiated.
They're simple classes, but are easy and helpful to use in web applications. Of course you could write your own container, but this saves you the step.
I've blogged about Html, JavaScript, CSS, and combining them into DHTML. Normally I apply this to enterprise architecture, but you can apply this to online games too. One fun application of this is the Sudoku solver, editor, and generator at http://www.thetoolboxsite.com/Sudoku.aspx. Sudoku is a logic game of 9x9 cells, where each cell contains a single digit 1-9, and no row, column, or 3x3 square can have the same digit twice. Apparently it's becoming pretty popular, and hence people are making web versions of it. Here's a screen shot of a board in progress:
The Sudoku mentioned above has a lot of JavaScript on it. Some initial interesting JavaScript features are:
There's a lot more stuff going on there, but even with these there is a classic principle of programming: Making computer games teaches you things to make better enterprise applications! All of those input features could be useful to an enterprise app: using JavaScript validation to not even let you type invalid input, navigating and highlighting cells in a grid with the arrows (like in Excel), or juggling data to and from the clipboard. These are all good examples of using JavaScript to enhance your web UI.
ASP.Net makes things easy, like adding and removing items from an HTML listbox. The problem is that these items are stored as inner nodes... it's not just as simple as setting a value property. Therefore you modify items by modifying the DOM itself. Here's an Html page to do that. It gives each item a description and id (for lookup purposes). The methods that really matter (i.e. reuse them into your own code) are AddItem and RemoveItem. Both take a listBox object, and id, and AddItem also takes the text to display.
Note that in pure html, both the ListBox and Dropdown are created from the
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
script>
head>
<body MS_POSITIONING="FlowLayout">
<form id="Form1" method="post" runat="server">
<P>ID: <INPUT id="TxtId" type="text" name="Text1" runat="server" value="1234"> Text: <INPUT id="TxtContent" type="text" name="Text1" runat="server" value="ddddd">P>
<P><INPUT type="button" value="Add" onclick="DoAdd()" ID="Button1" NAME="Button1"> <INPUT type="button" value="Remove" onclick="DoRemove()" ID="Button2" NAME="Button2"> P>
<P><SELECT id="Select1" size="8" name="Select1" runat="server" style="WIDTH: 176px; HEIGHT: 128px">
<OPTION id="a1">aaaOPTION>
<OPTION id="b1">bbbOPTION>
<OPTION id="c1">cccOPTION>
SELECT>P>
form>
body>
html>
Every now and then it's nice to do some fun UI enhancements. We can use DHTML to select a row or column of a table. We can do this by:
Highlighting rows is easy, just add the event handles to the
<TABLE id="Table2" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD>Header 1TD>
<TD>Header 2TD>
<TD>Header 3TD>
TR>
<TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
<TD>aTD>
<TD>bTD>
<TD>cTD>
TR>
<TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
<TD>dTD>
<TD>eTD>
<TD>fTD>
TR>
TABLE>
Highlight columns is a little more tricky. As there isn't a "column" object (at least not to my knowledge), you need to select each cell individually. Therefore we need to add an id to each cell, and then cycle through them. Note that this doesn't interfere if you wanted to make the columns be hyperlinks, perhaps to fire off some "sort" method. If we give each cell a structured id like so:
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD id="td_0_a" onclick="SelectColumn('a')">Header 1TD>
<TD id="td_0_b" onclick="SelectColumn('b')">Header 2TD>
<TD id="td_0_c" onclick="SelectColumn('c')">Header 3TD>
TR>
<TR>
<TD id="td_1_a">aTD>
<TD id="td_1_b">bTD>
<TD id="td_1_c">cTD>
TR>
<TR>
<TD id="td_2_a">dTD>
<TD id="td_2_b">eTD>
<TD id="td_2_c">fTD>
TR>
TABLE>
... then we can use JavaScript to cycle through all the cells in a column:
<script language="javascript">
var strCurrentColumn = 0;
var intRowCount = 3;
function SelectColumn(strIndex)
{
//clear previous column
if ( strCurrentColumn != 0 )
{
for (var i = 0; i < intRowCount; i++) {
document.getElementById('td_' + i + '_' + strCurrentColumn).className = '';
}
}
//set new column:
strCurrentColumn = strIndex;
for (var i = 0; i < intRowCount; i++) {
document.getElementById('td_' + i + '_' + strCurrentColumn).className = 'SelectColumn';
}
}
script>
Lastly, we could combine these two approaches such that you could select both the column and row - that might be helpful for a big table. Also, you could have some script to give alternating rows different colors too.
These are all straight-forward techniques, and they may be able to make your tables a little more flashy.
