Why Pattern?
When developing complex GUI applications, you need a structured approach to manage interactions between different UI components, models, and controllers.
HMVC Pattern (Hierarchical Model View Controller) Introduced
HMVC Pattern can be seen as an extended version of the MVC pattern. You can divide your GUI into different GUI objects: some for navigation purposes (Menubar), some for displaying/editing data (Grid/Tree/Forms), and others for layouting purposes. Three major aspects of GUI objects are clearly identified.
In HMVC Pattern, you assign a dedicated Controller and Model for each of these objects. It is not necessary to provide each GUI object its own controller and model. To keep it simple, you can give dedicated controllers and models only to major Pages, Grids, Dynamic Trees, and other major navigation areas such as ContentPanel.
Key Components
NAVIGATION_EVENT
Navigation events are initiated from the View and passed to the controller. The controller checks whether it can handle the event or not. If not, the chain of responsibility pattern is applied, and the event is passed through the hierarchy of its parent controllers. When the first controller that can handle the event is found, the hierarchy stops.
DATA_REQUEST_EVENT
Data Request Events involve server communication. These events are initiated from the view and, after being delegated by the controller, are finally handled by the Model, which does client-server interaction. After the response from the server, the model fires NAVIGATION or REFRESH_VIEW events to the controller to show a new page or refresh the requested data.
Implementation Pattern
When a dataRequestEvent is fired from the view, the controller has a fixed set of steps:
- Get data from view and set it to model
- Delegate event to model
Since we know what we need to do, we can code this in the super-class of the controller. The setModelData() method will be abstract in the super class of Controller, and all other controllers will extend this Controller class.
For example, if you want to create a "Login" widget's controller, its setModelData() method would handle extracting data from the view and passing it to the model.
Similarly, you can write a setViewData() method which will synchronize the data of the view with the model. After the server response is received, the model fires a REFRESH_VIEW event to the controller, which calls setViewData() to sync the view and then calls refreshView() to update the view on screen.
Pattern Flow
Complex UI objects are given dedicated controllers and models that communicate with each other through events:
- DataRequestEvent flow: View → Controller → Model → Server → Model → Controller → refreshView()
- Navigation events are handled by controller using chain of responsibility
- When the first controller that can handle the event is found, the chain ends
Benefits
After this initial framework is built:
- It becomes easy to add new components later or debug existing components
- You can build super classes for each type of UI component (Page, Grid, Tree, etc.)
- Components remain loosely coupled and reusable
- The architecture scales well with application complexity
References
- Javaworld HMVC Tutorial
- The Centric HMVC Tutorial
Suggestions and queries are always welcome.