| Name |
Score |
| {{trow.name}} |
{{trow.score}} |
|
|
It's time for a fresh take on JSF. BootsFaces brings the clean look and feel of Bootstrap to the JSF world. AngularFaces
adds AngularJS to the equation. AngularTetris takes both frameworks and pushes the envelope. Be honest: does it look like
server-side templating?
The settings tab uses the panelGrid of BootsFaces and the automatic generation of labels of AngularFaces. The resulting source
code is very compact.
The highscore tab uses SmartTable to generate the table on the client. The <ngsync> tag
only transfers the payload data to the client. As a result, the network is used a lot more
efficient than with a traditional JSF or PrimeFaces data table.
The game tab itself is basically a two-dimensional grid. It's displayed by an AngularJS ng-repeat directive.
The data structure of the playground is a bit odd. Basically, it's simply a two-dimensional array of integers.
Unfortunately, it's difficult to translate such an array to JSon from Java. So I chose to model both the
rows and the cells as full-blown objects. That make for slightly clumsy code, but it does the trick.
The AngularJS controller is responsible for hiding the buttons and for displaying the highscore table.
It adds a certain degree of responsiveness to the JSF application.
The GameController withing the AngularJS controller is responsible for running the game itself. It has been
implemented in Javascript. If you're interested in the source code of the game controller,
please look at the GitHub repository:
GameController.js
Tetromino.js (the Tetris bricks)
CSS file
There's nothing special about the JSF beans. The Grid class represents the entire playground. Actually, in the current
version it doesn't play an important role. It simply initializes the AngularJS model of the game with empty fields.
The Row class represents a row of picture elements.
The Cell class represents an individual pixel. In theory, a simple two-dimensional array of integers suffices to represent the playground.
Introducing the Row and the Cell classes became necessary because the limitation of JSon and the JSon parsers on the Java and Javascript side.