AngularJS. Bootstrap. JSF. And Tetris.


Name Score
{{}} {{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:


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.