The Life sample demonstrates visual and non-visual components which interact via containment, UJML events, and 'listener' interfaces. See Samples, Components, Interfaces, Component Events. It implements a simple Cellular Automaton simulator following the rules of Conway's Game of Life.

Once the sample is loaded, an 'About' screen appears. Press 'F2' to start and stop the simulator. 

Figure 1. Conway's Game of Life simulation displayed by the Life sample.

When stopped, the sample allows you to change the 'live' and 'dead' state of the cells (grid blocks) by using your arrow keys to move a red box around the screen and the 'FIRE' key to toggle the selected cell (a mouse click is also captured on a supported device). If you press 'F2' again a menu will appear, allowing you to restart the simulation, clear the grid, reset the grid to some known originating pattern, and toggle the grid control (between a 'light' version that requires less memory and a 'heavy' version that requires more). 

You can create your own originating pattern and restart the simulation to experiment with different combinations. While the simulation is running you cannot change cell states.

This sample demonstrates many different aspects of using components in UJML. For example, the animation is controlled by a timer component which broadcasts multiple timer events via both a special listener interface and standard UJML events. See timer.ujml. It also demonstrates the techniques required for displaying visual components, controlling their z-order, and updating them on the screen. 

A very important feature is the heavy and light versions of the grid component: these demonstrate the significant performance and memory use advantage in designing larger-grained components over collections of smaller-grained components. Despite its name, the 'light' version of the grid component is actually a monolithic module, providing all the functionality for the grid cells. It contains significantly more code than the 'heavy' component. 

Why is this? The 'heavy' grid component delegates grid display to a block component, and must manage a list of block component instances. This means that each block in the grid represents a separate component instance, with its own memory and performance overhead. Although this kind of design might be preferable from a code-reuse and conceptual viewpoint, it doesn't represent the most efficient way to code UJML components for devices with limited resources.

Samples, Components, Interfaces, Component Events, timer.ujml, Conway's Game of Life