Counter
Description: 7GUIs Counter
Solution: counter.js
Temperature Converter
Description: 7GUIs Temperature Converter
Solution: temperature.js
Flight Booker
Description: 7GUIs Flight Booker
Solution: flight.js
Discussion
A user interface demanding more interaction among UI elements obviously demands more coordination among MVC component messaging. The code for this reservation system is still fairly tractable mainly due to repetition of event handling and message subscriptions. From this point forward the complexity begins to shift from event handling and subscriptions toward configuration.
This example continues to initialize each component explicitly. An example with any more component coordination might benefit from initialization driven by configuration data. The 7GUIs Timer task might benefit from such data-driven configuration.
Another note with this current task is the model's values are published to an event cache. PageBus provides the event cache for several purposes, one being the ability to be less dependent on order of initilization of components and subscriptions. This example doesn't benefit greatly from an event cache but this is a useful point in the sequence of tasks for a simple illustration of its use. Looking forward, an event cache can be useful for messages providing configuration data for components.
Timer
Description: 7GUIs Timer
Solution: timer.js
Discussion
Coordinating MVC for the timer task turns out to be on the same order as for flight booking. The rules are even a bit simpler, but
the new angle is the need to model the interaction between steady elapsed time and concurrent modification of the duration. The MVC
angle I've taken here is to implement steady elapsed time as a "system controller" using the browser's setTimeout
.
The user interface and the timer model are independent, again thanks to PageBus, of the system controller's timeout callback.
Looking ahead, the CRUD task definitely takes one step forward in MVC complexity.