Getting Some Action

Not That Kind of Action...

That Add button is just begging for something to do. The text entry field looks pretty bored too. If you recall, when you click a button the ActionPerformed event occurs. What we want to do is hook this event up to the text entry field and the rightListModel. When we're done, clicking the Add button will take the text in the text entry field and put it in the rightListModel. Start by making a connection from the ActionPerformed event of the button.

Now we want to hook the ActionPerformed event up to the rightListModel. Specifically, we want to hook it up to the addElement() method of the rightListModel. This isn't one of the defaults, so go into the Connectable Features... dialog

Selecte the addElement(java.lang.Object) method. This method adds an object to the rightListModel. Then, the right JList displays the output of the object's toString() method in the list. We're just going to use String objects, and a String's toString() method returns the string.

Now you have a connection from the Add button to the rightListModel. However, the green connection line is dashed. This means that the connection has an argument you need to fill in. We could define this argument, but it would be much easier to just let VAJ get it from the text entry field. Start a connection from the text property of the text entry field.

Now move the weird-lookin spider cursor to the middle of the broken green connection line from Add to rightListModel. You'll know when you're in the right place because a little dashed box will appear. Click when you see this box.

The argument for the connection is called obj, so select that as the destination for the connection from the text entry field.

Your screen should now look like this. The solid green line is the connection from the Add button to the rightListModel. The blue line that intersects it is the argument connection. Now when the Add button is pressed, the ActionPerformed event causes the addElement() method of rightListModel to be called, with the text property of the text entry field as the argument.

Now that we have the Add button working, it would be nice if the JLists did something too. They aren't very useful at the moment. If they would call functions when list elements were selected, well, that would be great. Luckily, we can. This is where the selection models come in. Start a connection from the leftSelectionModel and go into the Connectable Features. You will see that there are 3 events that leftSelectionModel knows about. The this event isn't really useful for what we want to do. But valueChanged looks promising. Pick it.

Now, we could connect the valueChanged event to rightListModel.addElement(), but there is a small problem. The valueChanged event occurs 3 times when you select an element. This would call the addElement() method 3 times, which isn't what we want. So we need to write some code ourselves. This is done by connecting the event to a function of our own - called an Event to Code... connection. Click outside of your dialog and you will get this popup - pick Event to Code.

Event to Code Kung Foo

Ok, when you clicked Event to Code, a window similar to the one below popped up, only it didn't have as much code. I suggest you type in the extra code (so it works). No, no cutting and pasting - learn to use the editor! Go back to section 3 and re-read the rant about editing! You might be curious as to what this actually does. Well, take a look. This function is called when a valueChanged event occurs in the leftSelectionModel. It is passed a ListSelectionEvent object. This object has all sorts of information about the event, but right now we are interested in the getValueIsAdjusting() method. This method returns true until the user lets go of the mouse button. The user lets go of the mouse button when the element he/she wants to select is hilited. So, when getValueIsAdjusting() returns false, the user has selected an element. Now that we know the user has selected a list element, we can do something about it. What we want to do is add the selected element to the rightListModel, so it appears in the right list box. So we have to call the addElement() method of the rightListModel. Unfortunately, the rightListModel is hidden by VAJ, we need to use the getter method. So we want to call getrightListModel().addElement(...). Almost done. The ... inside the addElement() call has to be filled in. Specifically, it has to be filled in with the objects from the leftListModel we want to put into the rightListModel. getleftListMode() returns the leftListModel, just like getrightListMode() above. elementAt() returns the element at the index given. Now all we need is the index. We get that from the ListSelectionEvent object that was passed in. The call e.getFirstIndex() returns the index of the selected item. Nuff sed.

Bored yet? Not to worry, we're almost done. The left list box does it's thing, bu just for fun lets make the right list box do something too. Fun? Yea, I'm working from a different definition of "Fun". Previously we used the valueChanged event from the leftSelectionModel. Now we want to connect the listSelection event from the rightSelectionModel to an Event to Code function. So do that. Now.

This is the Event to Code function for the listSelection event. This event is a little more complicated, because it doesn't have any arguments. That means we have to find out if the user has actually selected something in a more complicated way - we have to ask the rightSelectionModel if anything has been selected. Then we have to ask the rightSelectionModel what was selected. In the other event-to-code function, this stuff was stored in the ListSelectionEvent object we were passed. This one isn't so friendly. But, once you type this stuff in, you're probably done =)