4

A Label and a TextField are also Java GUI objects that can be called to add extra functionality. Both GUI objects, Label and TextField, are created in a similar way similar to a Choice object:

//Label setup coordsDisplay = new Label(); //TextField setup input = new TextField( Welcome ); //display add(coordsDisplay); add(input);

and the TextField action feedback looks like:

input.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { println( textfield = + input.getText()); } });

The input text field can add functionality to itself by using the addActionListener, which listens for text input. If an item is selected the actionPerformed will be activated and the input text number will be returned through the method getText.

By default, newly created GUI objects are arranged sequentially on the screen, starting from the top center. This is done because, by default, every applet (or application) has a method called setLayout that is responsible for setting the GUI elements in a horizontal linear top-down sequence. If we set setLayout to null (the default is FlowLayout), then we can arrange elements in our own way:

setLayout(null);

In this way, we have control over the position and size of each GUI element. This is done individually for every element, using their setSize and setLocation methods:

transform.setLocation(200, 0); transform.setSize(100, 40);

4

In the following code, we will create four GUI elements and we will control their size and location:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 class MyControl{ String status = Move ; Button bexit; Choice transform; Label coordsDisplay; TextField input; MyControl() { // Button setup bexit = new Button( Exit ); bexit.setLocation(width-50, height-30); bexit.setSize(40, 20); // Label setup coordsDisplay = new Label(); coordsDisplay.setLocation(10, height-30); coordsDisplay.setSize(100, 20); // TextField setup input = new TextField( Welcome ); input.setLocation(10, height-60); input.setSize(width-20, 20); // Choice setup transform = new Choice(); transform.addItem( Move ); transform.addItem( Rotate ); transform.addItem( Scale ); transform.setLocation(width/2-50, 0); transform.setSize(100, 40); // Screen setup setLayout(null); //use the user specified size and location add(transform); add(coordsDisplay); add(input); add(bexit); transform.addItemListener(new ItemListener() { public void itemStateChanged(ItemEvent e) { status = transform.getItem(transform.getSelectedIndex()); control.input.setText(status); }}); bexit.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { exit(); }}); input.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { println( textfield = + input.getText()); }}); } }

4

49 50 51 52 53 54 55 56 57

MyControl control; void setup(){ size(400,300); background(200); control = new MyControl(); } void draw(){ control.coordsDisplay.setText( x= + mouseX + y= + mouseY); }

First, we define four objects: a Button, a Choice, a Label, and a TextField. Each one is initialized using its corresponding constructor and then we set a location and a size to be displayed. This is done by canceling the automatic placement of objects in the scene with command setLayout(null) in line 29. The Choice object can invoke its selection by using the getItem(), which returns the string label of the selected choice, using getSelectedIndex, which returns the number of the choice. The button Exit will execute the exit() command, which will terminate the session (line 41). The TextField object will return any text typed by the user (after a return carriage is typed). Finally, within draw() in line 56 there is a method connected with the MyControl object coordsDsiplay, and it is used here to display the location of the mouse:

control.coordsDisplay.setText( x= + mouseX + y= + mouseY);

The resulting GUI is shown Figure 4-4.

If the new MyControl class is replaced in the main code in section 4.2, we are faced with a new (and functional) interface that will look like Figure 4-5.