This tutorial will go through the main steps to create a HTML5 application following a DOM centric MVC (DMVC) pattern with the brite framework. The target application is a simple but real taskmanager application allowing user to manage a set of tasks per project. Below is the final application.
Note The goal of this tutorial is not to show how short an application code can be, but rather how well structured it should be. The goal of brite and its DOM centric MVC approach is to provide a simple, scalable, and flexible MVC approach to build high-end HTML5 applications by utilizing as efficiently as possible the HTML, CSS, and JS environment.
To run the application and the tutorial steps
Note To avoid duplicating too many files, the shared resources like brite.js, jquery.min.js, boostrap/css/... are shared in some parent folder. Consequently, to run the application and tutorials, make sure to have the brite/ folder as the root web folder. Obviously, in real applications, all the dependency files will be self-contained in the application folder.
The goal of the user interface is to be simple, modern, and smooth. The simplicity is accomplished with a simple master details view, focusing only on the main properties of each entity, and very simple but intuitive ways to edit and browe entities (e.g., Edit in place). The modern feel of the application is given with a subtle but polish style (e.g., shadow, inset, and texture) and the smoothness with fluid animations.
The application user interface has three main views MainView which is the top level view, ProjectListNav which is the left side view that allow the user to see and select projects, and ProjectView which is a view on a selected project allowing the user to manage it tasks.
There are two main object type Project and Task, with a many to one relationship between Task and Project.
The data in this particular example is InMemory, but the way the application access its data with with the Brite.dao pattern which allows to transparently swap the data storage (to SQLite, Remote Service API) without changing one line of application UI code.