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.

Posted by Tim Stall at 10:00 PM 0 comments

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