 | Level: Introductory Mikko Kontio (mikko.kontio@enfo.fi), Technology manager, Enfo Solutions
09 Sep 2004 Learn how to use the Model-View-Controller pattern in your MIDP user interface development. Start with an overview of the structure of the MVC pattern, then see how it can be applied in a real-life case. Introduction
In everyday software development you often encounter the same problems again and again. Rather than solve the same problem each time, it makes sense to document the solution and re-use it. Design patterns are essentially documented, generalized solutions to common problems in application development.
It has been said that there are two phases to implementing a design pattern: understanding it, and then using it. In this article, you'll be introduced to the Model-View-Controller (MVC) pattern and learn how to make it part of your MIDP user interface development. You'll start
with an overview of the MVC pattern structure, then see how it can be applied in a real-life case.
What is MVC?
Some people categorize MVC as an architectural style, while others (such as myself) think of it as a design pattern. Whereas architectural styles tend to dictate the structure of the whole application, design patterns focus on solving one or two particular problems. The MVC pattern solves the problem of updating an application's views (UI screens) as its data changes.
The MVC pattern consists of three parts: model, view, and controller. The model represents the data and business logic of the application. In an accounting application, the model would be the part of the application responsible for fetching data from the lower layers or components, handling the data, making any necessary calculations, and notifying all the views registered to that particular data of any changes.
The view is the actual screen that displays data and related commands to the user. Some applications offer multiple views of a given model, or even of the same data. Many of the popular spreadsheet applications present different kinds of charts representing a single block of data.
The controller receives user actions and dispatches them to the model. You can assign a single class to be the controller or divide the controller's responsibilities among several classes.
Figure 1 is a simple diagram of the MVC pattern. The view contains the graphical user interface, which is the part of the application the user can see. When the user alters the data on the screen and then initiates an action, that action goes to the controller. The controller determines what kind of action has been requested and calls the appropriate interfaces of the model. The model can consist of several components, classes, or packages, depending on the technology that implement the application's business logic.
Figure 1. Elements of the MVC design pattern
Notice that the view has registered itself to the model. The model notifies the view of data changes in its various components. This way, the view doesn't have to poll the model about changes in the application data.
Using MVC with MIDP
Now, you'll build an example application so you can see how the MVC design pattern works in an MIDP user interface development. There are essentially two ways to build an MIDP 2.0 interface: you can use the Form class, which gives you a basic UI template consisting of predefined forms; or you can use the Canvas class and create everything from scratch. For the purpose of this article, you'll work with the Form class.
This simple Form-based application displays a screen with a value that is constantly updated. In real life, the model might need to reflect all the functions associated with a huge data model and the business logic necessary to handle it. In this case, however, you're working with a simple, easily changed value, and no server back end, so the model is actually just a simulator of a real-life data model. The simulator changes the value (an integer) inside the model as other users or other applications would do with the real-life data model.
You can see a screen capture of the example application in Figure 2. The user has just updated the value of the model to 40, whereupon the simulator has increased it a few times.
Figure 2. A screen capture of the application
The example application
The example application consists of three classes: MVCMIDlet, Model, and View, which extends the MIDP Form class. As you can see in Figure 3, the MVCMIDlet class acts as the controller and the others are named according to their roles. The application structure is quite simple.
Figure 3. A class diagram of the example application
From this point, you'll concentrate on the code, which should amply demonstrate the three components of the MVC pattern, as well as their use in building an MIDP interface.
The controller
The MVCMIDlet class shown in Listing 1 is a typical MIDlet class. It has all the mandatory methods, and it also implements the CommandListener interface. Every time the user updates the value of the TextField the controller updates the model. The MIDlet class controls all of the commands and the setting of the command listener.
Listing 1. MVCMIDlet is the controller
package com.kontio;
import javax.microedition.lcdui.*;
import javax.microedition.midlet.*;
import java.io.*;
public class MVCMIDlet extends MIDlet implements CommandListener {
private Display display;
private Command exitCommand = new Command("Exit", Command.EXIT, 60);
private Command updateCommand = new Command("Update", Command.ITEM, 60);
private Model model = new Model();
private View v = null;
public MVCMIDlet() {
v = new View(model);
model.start();
display = Display.getDisplay(this);
v.addCommand(exitCommand);
v.addCommand(updateCommand);
v.setCommandListener(this);
display.setCurrent(v);
}
public void startApp() {
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
display.setCurrent((Displayable)null);
}
public void commandAction(Command c, Displayable s) {
if (c == exitCommand) {
destroyApp(false);
notifyDestroyed();
}
if (c == updateCommand) {
int i = Integer.parseInt(v.getValue());
model.setCount(i);
}
}
}
|
The model
The Model class simulates an actual model that would be used by multiple users. As users change the state of the model (by changing its values), the model notifies its registered views. The run() method is the heart of the simulator; as you can see, it simply increases the value of the count every 50 milliseconds.
Listing 2. The Model class simulates an actual model
package com.kontio;
import java.util.*;
public class Model implements Runnable{
Vector reg = new Vector(5);
int count = 0;
boolean play = false;
Thread thread = null;
public Model(){
}
public synchronized void start() {
play=true;
thread = new Thread(this);
thread.start();
}
public void register(View v){
reg.addElement(v);
}
public void stop(){
play=false;
}
public void run(){
while (play){
count++;
informViews();
try {
thread.sleep(50);
} catch (java.lang.InterruptedException e){}
}
}
private void informViews(){
for (Enumeration e = reg.elements() ; e.hasMoreElements() ;) {
View v = (View)e.nextElement();
v.update();
}
}
public String getCount(){
return ""+count;
}
public void setCount(int count){
this.count = count;
}
}
|
The view
The View class is inherited from the MIDP 2.0 Form class. It has one TextField and one StringItem. The StringItem shows the value of the model and the TextField offers a field to update the value. Naturally, this isn't the only way to implement MVC, but it is one possibility.
Listing 3. The View class is inherited from Form
package com.kontio;
import javax.microedition.lcdui.*;
public class View extends Form{
private StringItem si = new StringItem("Count","");
private TextField tf = new TextField("Count", null, 5, TextField.NUMERIC);
private Model model = null;
public View(Model model){
super("Count");
this.model = model;
this.model.register(this);
this.append(si);
this.append(tf);
update();
}
public void update(){
si.setText(model.getCount());
}
public String getValue(){
return tf.getString();
}
}
|
In conclusion
Design patterns let you effectively and efficiently solve common problems in application development. The MVC design pattern is a proven solution for applications where the user interface needs to show up-to-date information and polling the server isn't an option.
In MVC, the user interface (called the view) registers itself as a listener to certain parts of the application's underlying business and functional logic, as represented by the model. The model then notifies all registered views whenever there is a change in the data. Completing the cycle, the controller receives user actions and dispatches them to the model.
In this month's column I've introduced you to the structure of MVC and walked you through an implementation of MVC in an MIDP environment. While very simple, the example application demonstrates the three components of the Model-View-Controller pattern and shows how they can work together as the underlying framework of an MIDP interface.
Resources
- Learn more about MIDP development with Mikko's Designing MIDP applications (developerWorks, February 2004).
- This column demonstrates the simplicity of the
Form class, but MIDP 2.0 offers far more advanced features for user interface development. Mikko's Custom GUI development with MIDP 2.0 (developerWorks, May 2003) shows you how to build custom GUI elements with the extendable CustomItem class.
- For a more in-depth introduction to MIDP development, delve into John Muchow's J2ME 101 series (developerWorks, November 2003), a comprehensive four-part introduction to Java 2 Platform, Micro Edition (J2ME) and the Mobile Information Device Profile.
- David Gallardo's Design Patterns 101 (developerWorks, January 2002) tutorial introduces the theory and practice of pattern-based development.
- IBM's Thin Client Framework (TCF) is a lightweight programming framework for Java client applications. In the two-part Introduction to Thin Client Framework (developerWorks, January 2003), developers Barry Feigenbaum and Peter Bahrs show you how TCF raises the Model-View-Controller design pattern to the level of an application architecture.
- Visit the Sun Microsystems developer network to learn more about MIDP 2.0 and
J2ME.
- Don't miss a single installment of Mikko's Architectural manifesto column. See the column series page for a complete listing of previous installments in this series.
- See the developerWorks Wireless technology zone for a continuously updated collection of articles and tutorials on mobile application design and development.
About the author | | |
Mikko Kontio works as a production manager for the leading-edge Finnish software company, Softera. He holds a master's degree in computer science and is the author and co-author of several books, the latest being Professional Mobile Java with J2ME, published by IT Press. Mikko can be reached at mikko.kontio@softera.fi. |
Rate this page
| |
