Being Objective


Modeling

Ok, we have our little window that is completely at our mercy. We can bring it to life with a flick of the wrist, and destroy it on a whim! It is but a weakling slave and we are the all-powerful masters! But...uh...it doesn't really do much. In fact, it just sits there, taunting us - daring us to send it back to the electronic void we summoned it from. For starters, we'll try to get something to show up in the left JList. To do that, we need to define some Models (You did read the MVC Tutorial, right?). This section is kinda long, I just thought I'd warn ya ahead of time.

Models are objects. This whole section will revolve around hooking these models up to the JLists. Before we can do this, however, we have to put them on the screen so we can hook them up. This is done using the Choose Bean button, shown on the right. For starters, click this button and continue to the next picture.

After you click the Choose Bean button, you get the Choose Bean dialog (surprise!). We want to add a Variable to our Bean, so make sure that radio button is selected at the top. Now click the browse button to select what class we want to add a variable for.

The list of types is really, really long. You are looking for the DefaultListModel class. You'd be better off just typing it in, but if that sounds like too much work you can scroll through the list and find it. Then click the Ok button.

Now that we have the class of the variable, it needs a name. I suggest you name it leftListModel, because if you don't you'll have to change some of the code I give you later (don't worry, there isn't much). Click Ok after you enter the name.

Now you should get a crosshair cursor. click somewhere in the White Void to the left of your dialog, and the icon shown to the right will appear. This is the visual representation of your DefaultListModel object. Now we can make connections to and from this object.

So Many Models, So Little Time

By now you've probably figured out that the JList bean has a DefaultListModel model for it's list data. This works out well, when you change the model, the JList (the View) draws what's in the model. But we can do other things with a JList then just look at it. One other thing is selection. If you think about it, selection something from a list doesn't really have anything to do with the list. So the JList actually has 2 models associated with it. There is a DefaultListModel for the list data. Then there is a DefaultListSelectionModel for the list selection data. Later on we're going to want to select stuff from our JLists, so we need to add objects for the selection models as well.

Adding a DefaultListSelectionModel for the JList is as easy as adding the ListSelectionModel. Follow the same steps. Name this one leftSelectionModel.

Place the DefaultListSelectionModel object below the leftListModel object. Your screen should now look like this (or part of it should, anyway).

Hooking Up With Models

Ok, you have some models. But they are just sitting there, all alone. We can't have that, can we? Time to make some connections...

Ok, by default a JList already has a model. But we can't do anything fun with that model, it's sort of hidden. So we want to replace that model with our model. This involves writing a few lines of code, but we'll get to that later. First, we want to Connect the model property of the JList to our leftListModel object. Start the connection like so...

Now click on the leftListModel object and pick this. The this property always refers to the object itself - everything has a this. Now a blue line should appear going from the JList to the leftListModel.

Hooking up the list model was easy. Hooking up the list selection model is easy too, but it has more steps, and I'm going to explain them. See, there are more connection possibilities then the few that show up in the Connect submenu. This time, go to Connectable Features

We want to connect to the selectionModel Property of the JList. So start by clicking the Property radio button. Then scroll down the list and find the selectionModel. Select it and click Ok

Now connect the selectionModel Property to the leftSelectionModel, just like you did with the model property and the leftListModel.

Part of your screen should now look like this, with the blue lines going from the JList to the models. If it doesn't look like this, fix it!. You also need to add a rightListModel and a rightSelectionModel for the right JList. Follow the same steps above for these, only replace "left" with "right" wherever you see it. After you're done, carry on...

After you are done adding your objects, all the pieces of the Bean are in place, you just need to add the connections. Time to add some code, So save the bean. This generates all the setter/getter functions we'll need.

Making the Models Walk and Talk

Bet you thought we were done. Not quite. You see, we hooked up our models with our JLists. But our models are just variables - variable declarations in fact. And we all know that in Java, a variable declaration is just a reference. We need to put something into that model!

We need to write some methods, so click the Heirarchy tab and select the class you created way back in section 1. I called mine ComponentTest. In the next few steps, we're going to add a method that will set up our models and make them play nice with our JLists.

Click on this button to add a method. Call the method createModels(). It must be public, return void, and take no arguments.

Find the createModels() you created in the right list box. We need to write the code for this method, so double-click it to get a nice big source editor window.

Like I said above, the models you created are just references. You need to create a new model object for each of them and then call the setter method for your models. The code below is split up into 4 sections - creating and setting the leftListModel, leftSelectionModel, rightListModel, and rightSelectionModel. For the leftListModel, I also added some elements to the list. You can see how easy this is.

Oh yea - you have to type all this in. No pasting =). But you can do it pretty quickly if you learn about some of the features of VAJ. First of all, there is a lot of com.sun.java.swing. stuff you can get rid of by adding an import statement. VAJ will do this for you, just leave out the com.sun.java.swing. everywhere. Then when you save the file with CTRL-S, VAJ will tell you there are errors and suggest corrections. One of the corrections will be to add the import statement. Select it and click Correct and it will fix your code for you.

Ok, so you don't have to type com.sun.java.swing. a bunch of times. Whoopee-doo. Now, try this...for the setleftListModel(..) call, just type set and press CTRL-Spacebar. A handy little menu pops up with all the possiblities. Key down to the right one and press enter. You can do this for variable names too. See, you hardly have to type anything! You'll notice that, if you haven't added the import statement mentioned above, the ctrl-spacebar thing won't work for the DefaultList[Selection]Model stuff. That's because it only works when you haven't made any errors. So you can tell if you've made an error or not using ctrl-spacebar. If you've got all that down, you're practically a VAJ power-user! BTW, if you want to add the import statement right away, just type the first line, save, and add it. Then the completion command will work for everything.

Ok, so you typed that code in and it doesn't have any errors. You're two steps away from...uh...the end of this section! What we did there was write a method to create and set our models. But that method doesn't get called anywhere (yet). A good place to call it would be right after we create an instance of the object. That is done in the main() method, so find it in the method list for your class.

Now add in the highlighted line shown to the right. Then save and make sure it doesn't have any errors. You can tell if a method has errors because there is a little red X by it's name in the method list. If you see any little red X's, you screwed something up!

Now click the Run button. If the JFrame doesn't pop up and fill the left list box, you messed up somewhere! Go back and fix it! If it does work, congratulations - you are a k-rad tutorial king! But you aren't finished yet. We want to be able to interact with all those components, so carry on to Part 4...

Part 4: Getting Some Action

Back to the Tutorial