16.2Sudoku Component
First we define the class WebSudoku
which is the Sudoku UI. We will create this class in the new ML-WebSudoku
category:
WAComponent subclass: #WebSudoku
instanceVariableNames: 'sudoku'
classVariableNames: ''
poolDictionaries: ''
category: 'ML-WebSudoku'
This component will contain a Sudoku solver (an instance of MLSudoku
) which we will refer to using the instance variable sudoku
. We initialize this variable by defining the following WebSudoku>>initialize
method.
WebSudoku>>initialize
super initialize.
sudoku := MLSudoku new
Describing and registering the application. Now we add a few methods to the class side of our component. We describe the application by defining the description
method. We register our component as an application by defining the class initialize
method and declare that the component WebSudoku
can be a standalone application by having canBeRoot
return true:
WebSudoku class>>description
^ 'Play Sudoku'
WebSudoku class>>initialize
WAAdmin register: self asApplicationAt: 'sudoku'
WebSudoku class>>canBeRoot
^ true
Finally we define a CSS style for the Sudoku component:
WebSudoku>>style
^ '#sudokuBoard .sudokuHeader {
font-weight: bold;
color: white;
background-color: #888888;
}
#sudokuBoard .sudokuHBorder {
border-bottom: 2px solid black;
}
#sudokuBoard .sudokuVBorder {
border-right: 2px solid black;
}
#sudokuBoard .sudokuPossibilities {
font-size: 9px;
}
#sudokuBoard td {
border: 1px solid #dddddd;
text-align: center;
width: 55px;
height: 55px;
font-size: 14px;
}
#sudokuBoard table {
border-collapse: collapse
}
#sudokuBoard a {
text-decoration: none;
color: #888888;
}
#sudokuBoard a:hover {
color: black;
}'