Dynamic Web Development with Seaside

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;
}'

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.