Sunday, January 29, 2006

JavaScript Debugging in 2005

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/javascript_debugging_in_2005.htm]

I had written about JavaScript debugging in 2003 with the Running Documents Window. In 2005 they do things a little differently. Instead of the running documents window, there is the script explorer.

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.

Wednesday, January 25, 2006

Pair and Triplet classes

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/pair_and_triplet_classes.htm]

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.

Thursday, January 5, 2006

Sudoku board enhanced with DHTML

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/sudoku_board_enhanced_with_dhtml.htm]

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:

Sudoku Board

 The Sudoku mentioned above has a lot of JavaScript on it. Some initial interesting JavaScript features are:

  • You can navigate the cells with the arrow keys, and it highlights the current cell. This kind of functionality can be implemented by using the onkeydown, onkeyup, and onfocus events to first select another cell (using .select() ), and then change the style (using .style=).
  • If you type multiple values into a cell - something that's useful to record your notes - then the text shrinks accordingly to make room. This can also be done by the onkeyup event setting the styles.
  • If you type an invalid value into a cell, like the letter "a" (only digits are allowed), it won't let you - there is JavaScript to block invalid user input. This can be done by returning false on the onkeydown event (i.e.: onkeydown="return IsValid()" ).
  • If you click the "paste" button, it gets the text from the JavaScript clipboard, serializes it into a board object, and then updates the UI. Vice versa with the paste.

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.

Tuesday, December 27, 2005

Adding and Removing items from an Html ListBox

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/adding_and_removing_items_from_an_html_listbox.htm]

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