SoftArchDoc:Web2.0 MVC Architecture

Introduction

Web-based presentation and client-side processing is going through a renaissance. For J2EE hosting environments Sun Microsystems has provided web portals, detailed in the JSR168 and JSR286 techinical specifications. With the acceptance of AJAX, alternatives to Java-based web portals are are available using Web 2.0 technologies. Even though the Web 2.0 offers a more powerful flavor Javascript, the J2EE developer can still harness the usefullness of Model-View-Controller architecture.

Purpose

The purpose of this document is to provide some examples of how to properly separate and apply the MVC architecture. By adopting this approach the software that is engineered cannot be re-used but easily modified as well. These best practices will ultimately provide clarity and discipline in Web 2.0 software engineering effort.

Scope

The scope of this document is limited to the use of Google’s Google Web Toolkit. Although there are alternatives to Google’s GWT, such as ExtJS and ExtGWT, they will not be covered in this document.

Acronyms/Abbreviations & Definitions

References

Model-View-Controller Pattern

The MVC pattern allows the software engineer to separate the business logic from the front-end. With this pattern it is much easier to modify the user interface as well as the related business logic. The Model is a domain-specific representation of discrete information. The View is a visual representation of the defined Model. The Controller interacts to/with user and internal processing events and may modify the Model. Figure 2-1 shows the interaction among the components of this pattern.

Figure 2-1 Model-View-Controller Pattern

Model

The key features behind the Model component are:

• Encapsulation of the application state.
• Responds to state queries.
• Related to application functionality.
• Notifies View of modifications.

Figure 3-1 provides an example of what a Model may look like using GWT.

Figure 3-1 Sample Model source code

View

The key features behind the Model component are:

• Renders the underlying View(s).
• Requests any modifications made to the Model.
• Contains event listeners that are used to capture user and internal process interaction.
• Allows Controller to select the View.

Figure 4-1 provides an example of what a View may look like using GWT.

Figure 4-1 Sample View source code

Controller

Event Listeners

Whenever the user interacts with the View, the Controller must react with that interaction. To that end, the Controller can define how to react to user events by using Even Listeners. Whenever a user triggers an Event Listener at the View, the Controller can contain logic (method) that the listener invokes.

Figure 5-1 Click Listener sample source code

Controller Structure

The key features behind the Controller component are:

• Defines application behavior.
• Allows model modifications based on user events.
• Determines view selection.

Figure 5-2 provides an example of what a Controller may look like using GWT.

Figure 5-2 Sample Controller source code

Dependency Injection

The order of importance on how to separate and then employ the MVC layers should be in this order:

1. Analyze the application to determine the data needed for operation.
2. Create the Model based on the application’s data.
3. Create the event listeners based on how the Controller reacts to user interaction.
4. Create the View based on the Model. Add the related listeners created in the Controller as arguments to methods that create the components that make up the View, if applicable.
5. Create the Controller, implementing the methods invoked by the event listeners.

Figure 6-1 shows an example of a given View. If the user wants to change the View by, let’s say, changing the vertical Stack Panel tabs (Connect, Store, etc.) to horizontal File tabs then the MVC pattern makes this exercise simple. The View may change but the Controller and the Model do not.

Figure 6-1 A sample View

Conclusion

Employing MVC architecture in a Web 2.0 world will help prevent the development of unmanageable software. Even though the GWT will ultimately compile the Java classes and generate AJAX-threaded Javascript, the software engineer has to be able to read and understand the source code. Following this disciplined approach will provide an edge in quick and accurate maintenance and enhancements.

For more information:

• Event Listeners
• Design Patterns
• Dependency Injection