GUI Development with Java
Model-View-Controller provides a powerful model for separating the functionality of a GUI-based application into three constituent parts. Putting it simply, the model is the code that keeps track of the data. The view is the code that displays the model on screen. The controller is the code that responds to user actions such as mouse clicks, button presses and the like. This separation, first formalized in 1988 for use with Smalltalk-80, has become the dominant model for object-oriented developers building GUI-based applications. And with good reason: it partitions the code into three (or more) reasonably small modules. It provides maximum flexibility—there can be more than one view and more than one controller. In a slide show program, for example, you might have a Slide Show view and a Slide Sorter view. Either or both would be visible, each in its own window. With MVC, a change to either would immediately be reflected in all the views. So a results-oriented way of looking at MVC is a way of making all the views on your data be dynamically self-updating as the data changes.
Let's take that slide show program as a simple example, which I've called JabberPoint (no relation at all to PowerPoint). The main program (see Listing 3) simply creates the model, the view and the controllers, then connects them together.
The data or model is maintained by a class called JPModel. It is little more than an array of Strings, except that each line has a Style associated with it. The model also has certain other data, such as the current slide number. Plus, it has methods for updating the data. This version of the program doesn't have any slide-editing capabilities (I still use vi to edit the show's text), but it does have methods—in the model—to change the current slide number.
Note that this is not the full source code, but only the fragments needed to show the MVC architecture. If you want the full source code to compile or use, go to the course author's web site (see sidebar) and follow the link to Free Software.
The model contains the data and functionality, and can be displayed by many views. It commonly includes a main program and may subclass java.util.Observable.
The view is the GUI or display of the model's data. It commonly creates a frame, or is an applet, and adds listeners. It may implement java.util.Observer.
The controller handles events for the model and the view. It commonly implements listener interfaces and responds to events by calling methods in the model.
Part of the model, Model.java, is shown in Listing 4.
The simplest view is a SlideShow view, which simply paints the current page in large letters. This view is a Component that can be embedded in a Frame or an Applet.
How does it know when its data has changed? Note the method update. This is not the update method of AWT, but is part of the Observable interface. This update simply saves the data that was passed in as a Slide and calls AWT's repaint, which will call the paint method a few lines below it in the listing.
There can be more than one view. A slide-show program usually has three: the slide show (which we implement), the Outline and the Sorter (which we do not yet provide). Each of these would be a different view and would be registered as an Observer for the model as above. You would switch between them with a CardLayout or some kind of Tab Layout manager, or they could each be in a Frame. Since they use Observable/Observer, when you update the data in one window it would immediately be updated in all of them.
The controllers are called when the user does something. The KeyController.java is a simple controller that responds to PageUp and PageDown (or Enter) and moves the current page up or down as appropriate. It is “connected” with
A Controller does not have to be an explicit listener. We might, for example, use a MenuBar as a listener and connect it with the statement
frame.setMenuBar(new MenuController(view,model));after the instantiation of KeyController in our main program. It then calls methods on the Model, such as nextPage.
We can add additional functionality such as loadFile. When we get around to writing the editing part of this program, we can add methods such as saveFile, newFile, etc., to the model and call them from here.
One complication is that the MenuController may need access to the top-level frame (just for purposes of Dialog creation), but the view is a component inside the frame, and we don't wish View to know too much about its environment. One way around this is to pass the frame into the MenuController's constructor; another is for the view to have a getFrame method.
- Readers' Choice Awards 2013
- The Geek's Guide to the Coolest 2013 Holiday Gifts
- Two Pi R
- Non-Linux FOSS: Let's Make Music Together
- Best. Cake. Ever.
- A Handy U-Boot Trick
- Raspberry Pi: the Perfect Home Server
- AIDE—Developing for Android on Android
- Tech Tip: Really Simple HTTP Server with Python
- New Products
2 hours 49 min ago
18 hours 55 min ago
- Thanks for clearing that up.
1 day 19 min ago
- Nice coding on the cake. I
1 day 11 hours ago
- Baker's identity
1 day 16 hours ago
- Uber jealous
1 day 21 hours ago
- Reality is disapointing
2 days 8 hours ago
- Máy sấy quần áo
2 days 10 hours ago
- Services on GlusterFS
2 days 11 hours ago
- Reply to comment | Linux Journal
2 days 12 hours ago