MVC Widgets - Text Field with String Model

Last Updated: May 5, 1996

Previous Lesson: Model Overview
Next Lesson: Text Field with Any Model

Status quo

In AWT, a text field is represented by the class TextField. A TextField allows the UI to display a String and (unless it is read-only) accept a String as input from a user. This is a great way to interact and exhange information with a user. The problem, in our MVC world, is that we have to deal directly with a specific widget to get and set the String. Another problem is that I have to always deal with Strings - if I think in terms of floats or Employees in my model, I constantly have to be aware of translating to and from Strings.
In Smalltalk, a TextField is called an InputField.

In this lesson, we'll be dealing with the first issue: how can I interact with my model and have text fields automatically reflect (and modify) the model. Next lesson, we'll see how we can work with any kind of model - not just Strings.

Introducing...

It's time for our first MVC widget: the MVCTextField. It is a subclass of TextField, so it understands all the same messages. But in addition, MVCTextField also holds onto a ValueModel. By dealing directly with the model, we can affect the view that is displayed. I think it's time for our first example.

Example 1: An MVCTextField and its model

Before we actually go through the example, now would be a good time to tell you the format of the examples. All examples will be provided with fully commented source code - please read it to find out what is actually going on. The examples will be in the form of applets, but you can also invoke and interact with them using the standard java interpreter. Most examples are stand-alone, but they all require the com.bdnm.mvc package, which you can download from here. You can also download all of the examples and this tutorial here. In addition, a number of the examples require a layout manager I created called FractionalLayout in the com.bdnm.awt package. You can download that package from here.
Because often the best way to learn something new is to base it on something you know, I have also included (nearly) equivalent Smalltalk applications in the form of an .st file. To execute, file-in the .st file and send #open to the appropriate class. The examples were created with VisualWorks 2.5, but should work in version 2.0 as well.
This first example can be found in Example1.st and can be started by evaluating "Example1 open".

Okay, here's the first example, which you can see below. Please look at the comments in the source code to see what'd going on, because I'll only mention high points here. To play with this example, enter a value in the text field, press Enter, and then press the button. The current value should be displayed both in the Java Console and the status bar (although the status bar is really flakey - I recommend you open the Java Console).

Example 1

Here are some comments on this example:

If you are running on a Windows machine, there is a bug where the text field component does not receive the GOT_FOCUS and (more importantly) LOST_FOCUS events. Until this is fixed, make sure you press Enter to accept the value.

Notice in the action() method we are asking the model, not the component, for the value to display.

Example 2: Two MVCTextFields with the same model

Okay fine, Example 1 was no big deal, right? Let's do a couple more examples that begin to show the power of the MVC framework. In this example, we have two text fields using the same model. Observe what happens when you enter the value in one. Look at the source code to see if you can figure it out.
Predictably, you can find the Smalltalk version of this example in Example2.st and can be started by evaluating "Example2 open".

Example 2

Example 3: Two MVCTextFields, different applets, same model

If you thought that was cool, check this out. This example is going to grab the model behind the text field in Example 1 and open another view on it. So now, when you modify the contents of this field, it changes the text field in Example 1! And vice versa, of course. This example will only run as an applet on this page, so don't try to run it stand-alone. But here's the source.
Sorry, no Smalltalk equivalent for this example.

Example 3

What's next?

This lesson, we've interacted with models that are holding onto Strings. Each of these models can have multiple views, which allows us to forget about dealing with the widgets directly. But what if I'm not dealing with Strings? Next lesson, we'll show how the model and be anything we want it to be, and the widgets will still work!

Previous Lesson: Model Overview
Next Lesson: Text Field with Any Model

Go back to the tutorial introduction.

Status quo
	In AWT, a text field is represented by the class TextField. A TextField allows the UI to display a String and (unless it is read-only) accept a String as input from a user. This is a great way to interact and exhange information with a user. The problem, in our MVC world, is that we have to deal directly with a specific widget to get and set the String. Another problem is that I have to always deal with Strings - if I think in terms of floats or Employees in my model, I constantly have to be aware of translating to and from Strings.	In Smalltalk, a TextField is called an InputField.
	In this lesson, we'll be dealing with the first issue: how can I interact with my model and have text fields automatically reflect (and modify) the model. Next lesson, we'll see how we can work with any kind of model - not just Strings.
Introducing...
	It's time for our first MVC widget: the MVCTextField. It is a subclass of TextField, so it understands all the same messages. But in addition, MVCTextField also holds onto a ValueModel. By dealing directly with the model, we can affect the view that is displayed. I think it's time for our first example.
Example 1: An MVCTextField and its model
	Before we actually go through the example, now would be a good time to tell you the format of the examples. All examples will be provided with fully commented source code - please read it to find out what is actually going on. The examples will be in the form of applets, but you can also invoke and interact with them using the standard java interpreter. Most examples are stand-alone, but they all require the com.bdnm.mvc package, which you can download from here. You can also download all of the examples and this tutorial here. In addition, a number of the examples require a layout manager I created called FractionalLayout in the com.bdnm.awt package. You can download that package from here.	Because often the best way to learn something new is to base it on something you know, I have also included (nearly) equivalent Smalltalk applications in the form of an .st file. To execute, file-in the .st file and send `#open` to the appropriate class. The examples were created with VisualWorks 2.5, but should work in version 2.0 as well. This first example can be found in Example1.st and can be started by evaluating "Example1 open".
	Okay, here's the first example, which you can see below. Please look at the comments in the source code to see what'd going on, because I'll only mention high points here. To play with this example, enter a value in the text field, press Enter, and then press the button. The current value should be displayed both in the Java Console and the status bar (although the status bar is really flakey - I recommend you open the Java Console).
	Example 1
	Here are some comments on this example: If you are running on a Windows machine, there is a bug where the text field component does not receive the `GOT_FOCUS` and (more importantly) `LOST_FOCUS` events. Until this is fixed, make sure you press Enter to accept the value. Notice in the `action()` method we are asking the model, not the component, for the value to display.
Example 2: Two MVCTextFields with the same model
	Okay fine, Example 1 was no big deal, right? Let's do a couple more examples that begin to show the power of the MVC framework. In this example, we have two text fields using the same model. Observe what happens when you enter the value in one. Look at the source code to see if you can figure it out.	Predictably, you can find the Smalltalk version of this example in Example2.st and can be started by evaluating "Example2 open".
	Example 2
Example 3: Two MVCTextFields, different applets, same model
	If you thought that was cool, check this out. This example is going to grab the model behind the text field in Example 1 and open another view on it. So now, when you modify the contents of this field, it changes the text field in Example 1! And vice versa, of course. This example will only run as an applet on this page, so don't try to run it stand-alone. But here's the source.	Sorry, no Smalltalk equivalent for this example.
	Example 3	Sorry, no Smalltalk equivalent for this example.
What's next?
	This lesson, we've interacted with models that are holding onto Strings. Each of these models can have multiple views, which allows us to forget about dealing with the widgets directly. But what if I'm not dealing with Strings? Next lesson, we'll show how the model and be anything we want it to be, and the widgets will still work!