How to use the MVC elements (an example)


	links to this page:

Last updated at 9:16 am UTC on 13 November 2007

(Execute the following example from within an MVC Project. For best results, you should use Squeak 3.7. MVC is seemingly broken in newer versions.) In the MVC display architecture, the basic display medium is a Form. This can be used as a source or destination for displaying on other Forms using a BitBlt object. The DisplayScreen "Display" is a kind of form, so you can draw directly on it like you can any other form:

| pen |
 pen := Pen newOnForm: Display.
 pen defaultNib: 4.
 1 to: 50 do: [:i | pen go: i*4. pen turn: 89].

will draw a black spiral in the center of the Display. Note that since you are drawing directly to the display, it draws over any existing views ("windows"), and will be erased as views are moved over it.

You can draw the spiral on another form to "retain it", then draw that form on the Display:

| form pen |
 form := Form extent: 300@300 depth: Display depth.
 form fillColor: How to lay out submorphs - example 2 green.
 pen := Pen newOnForm: form.
 pen defaultNib: 4.
 1 to: 50 do: [:i | pen go: i*4. pen turn: 89].
 form display.
 form displayAt: Display center - form center.

Here the pen draws on the form, which in turn is then drawn on the Display at two locations. However, this is still drawing directly to the display, so it again draws over existing views and will be erased as views are moved over it.

To put the form in its own "window" (view) that interacts correctly with the other system views, you must use the View classes. A View is a structured picture which can contain subviews, and is part of the "Model, View, Control" (MVC) architecture. Here we will put our form in a FormView (which knows how to display forms, and can edit them too), and add the FormView as a subview of a ColorSystemView (which adds the standard title bar, close and grow boxes, and other standard window controls):

| form pen view topView |
 form := Form extent: 300@300 depth: Display depth.
 form fillColor: Color green.
 pen := Pen newOnForm: form.
 pen defaultNib: 4.
 1 to: 50 do: [:i | pen go: i*4. pen turn: 89].
 view := FormView new.
 view model: form.
 view borderWidth: 2.
 topView := ColorSystemView new.
 topView model: form. "to set the correct window size"
 topView addSubView: view.
 topView controller open.

Now the picture can be moved, resized, edited, etc.