Question

In this part of the Java Gnome programming tutorial, we will introduce some widgets.

Widgets are basic building blocks of a GUI application. Over the years, several widgets became a standard in all toolkits on all OS platforms. For example a button, a check box or a scroll bar. The GTK+ toolkit's philosophy is to keep the number of widgets at a minimum level. More specialised widgets are created as custom widgets.

Label

The Label widget shows text.

label.java

package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program uses Label widget
 * to display text. 
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GLabel extends Window {


  public GLabel() {
  
    setTitle("Death song");

    initUI();

    connect(new Window.DeleteEvent() {
      public boolean onDeleteEvent(Widget source, Event event) {
        Gtk.mainQuit();
        return false;
      }
    });
    
    setPosition(WindowPosition.CENTER);
    showAll();
  }
  
  public void initUI() {

    Label lyrics = new Label("Lets sing the death song kids\n\n" +
    "We light a candle on an earth\n" +
    "We made into hell\n" +
    "And pretend that were in heaven\n" +
    "Each time we do we get\n" +
    "The blind mans ticket\n" +
    "And we know that nothings true\n" +
    "I saw priest kill a cop on the tv\n" +
    "And I know now theyre our heroes too\n\n" +

    "We sing the death song kids\n" +
    "Because weve got no future\n" +
    "And we want to be just like you\n" +
    "And we want to be just like you\n");
    
    add(lyrics);  
    
    setBorderWidth(8);
  }
  
  public static void main(String[] args) {
    Gtk.init(args);
    new GLabel();
    Gtk.main();
  }
}

The code example shows some lyrics on the window.

Label lyrics = new Label("Lets sing the death song kids\n\n" +
"We light a candle on an earth\n" +
...

This is the text we will display in the Label widget.

setBorderWidth(8);

The Label is surrounded by some empty space.

Figure: Label Widget

HSeparator

HSeparator is an ornament widget, which can be used to separate items on the window.

separator.java

package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.HSeparator;
import org.gnome.gtk.Label;
import org.gnome.gtk.VBox;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * Java Gnome tutorial
 *
 * This program shows how to use
 * a horizontal separator.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GHSeparator extends Window {

  private final int VERTICAL_SPACE = 15;
  private final int BORDER_AROUND = 25;
  private final float Y_ALIGN = 0f;
  private final float X_ALIGN = 0f;

  public GHSeparator() {
  
    setTitle("HSeparator");
    
    initUI();
    
    connect(new Window.DeleteEvent() {
      public boolean onDeleteEvent(Widget source, Event event) {
        Gtk.mainQuit();
        return false;
      }
    });
    
    setPosition(WindowPosition.CENTER);
    showAll();
    
  }  
  
  public void initUI() {
     
    VBox vbox = new VBox(false, VERTICAL_SPACE);
    
    Label zinc = new Label("Zinc is a moderately reactive, blue" +
    "gray metal that tarnishes in moist air and burns in air of zinc " +
    "oxide. It reacts with acids, alkalis and other non-metals. If not" +
    "completely pure, zinc reacts with dilute acids to release hydrogen.");

    zinc.setLineWrap(true);
    zinc.setAlignment(X_ALIGN, Y_ALIGN);

    vbox.packStart(zinc);
    
    HSeparator hsep = new HSeparator();
    vbox.packStart(hsep);
    
    Label copper = new Label("Copper is an essential trace nutrient to" +
    "all high plants and animals. In animals, including humans," +
    "it is found primarily in the bloodstream, as a co-factor in various" +
    "enzymes, and in copper-based pigments. However, in sufficient" +
    "amounts, copper can be poisonous and even fatal to organisms.");
    
    copper.setAlignment(X_ALIGN, Y_ALIGN);
    copper.setLineWrap(true);

    vbox.packStart(copper);
    add(vbox);
    
    setResizable(false);
    setBorderWidth(BORDER_AROUND);
  }
  

  public static void main(String[] args) {
    Gtk.init(args);
    new GHSeparator();
    Gtk.main();
  }
}

In our code example, we have descriptions of two chemical elements, which are separated by the horizontal separator.

zinc.setLineWrap(true);

This line wraps the text. This is necessary for longer texts.

zinc.setAlignment(X_ALIGN, Y_ALIGN);

This code line aligns the text to the left.

HSeparator hsep = new HSeparator();
vbox.packStart(hsep);

The HSeparator widget is created and placed in between the two label widgets.

Figure: HSeparator

CheckButton

CheckButton is a widget that has two states: on and off. The on state is visualised by a check mark. It is used to denote some boolean property.

checkbutton.java

package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.CheckButton;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.ToggleButton;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program uses a CheckButton to 
 * toggle the visibility of a window title.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GCheckButton extends Window implements ToggleButton.Toggled {

  CheckButton check;
  Window window;
  private String title = "Check Button";

  public GCheckButton() {
  
    setTitle(title);

    initUI();
    
    connect(new Window.DeleteEvent() {
      public boolean onDeleteEvent(Widget source, Event event) {
        Gtk.mainQuit();
        return false;
      }
    });
    
    setSizeRequest(250, 200);
    showAll();
  }
  

  public void initUI() {
  
    setBorderWidth(10);
    
    Fixed fixed = new Fixed();
    
    check = new CheckButton("Show title");
    check.setActive(true);
    check.connect(this);
    
    check.setCanFocus(false);

    fixed.put(check, 50, 50);
    
    add(fixed);
    setPosition(WindowPosition.CENTER);
  }
  
  public void onToggled(ToggleButton toggleButton) {
      if (check.getActive()) {
        setTitle(title);
      } else {
        setTitle("");
      }
  }
  
  public static void main(String[] args) {
  
    Gtk.init(args);
    new GCheckButton();
    Gtk.main();
    
  }   
}

We will display a title in the titlebar of the window, depending on the state of the CheckButton .

check = new CheckButton("Show title");

CheckButton widget is created.

check.setActive(true);

The title is visible by default, so we check the check button by default.

if (check.getActive()) {
  setTitle(title);
} else {
  setTitle("");
}

Depending on the state of the CheckButton , we show or hide the title of the window.

Figure: CheckButton

TextComboBox

TextComboBox is a widget that allows the user to choose from a list of textual options.

textcombobox.java

package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.ComboBox;
import org.gnome.gtk.Fixed;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Label;
import org.gnome.gtk.TextComboBox;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;


/**
 * ZetCode Java Gnome tutorial
 *
 * This program shows how to use
 * a TextComboBox.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class GTextComboBox extends Window implements ComboBox.Changed {

  TextComboBox cb;
  Label label;


  public GTextComboBox() {
  
    setTitle("TextComboBox");
    
    initUI();
    
    setSizeRequest(250, 200);
    setPosition(WindowPosition.CENTER);
    showAll();
  }
    
    
  public void initUI() {
    
    connect(new Window.DeleteEvent() {
      public boolean onDeleteEvent(Widget source, Event event) {
        Gtk.mainQuit();
        return false;
      }
    });
    
    Fixed fixed = new Fixed();
    
    label = new Label("");
    fixed.put(label, 55, 130);
        
    cb = new TextComboBox();
    
    cb.appendText("Ubuntu");
    cb.appendText("Mandriva");
    cb.appendText("Fedora");
    cb.appendText("Mint");
    cb.appendText("Debian");
    cb.appendText("Gentoo");
    
    cb.connect(this);
    
    fixed.put(cb, 50, 50);
    
    add(fixed);
  }
    
  public void onChanged(ComboBox comboBox) {
    String text = cb.getActiveText();
    label.setLabel(text);
  }
  
  public static void main(String[] args) {
    Gtk.init(args);
    new GTextComboBox();
    Gtk.main();
  }
}

The example shows a text combo box and a label. The text combo box has a list of six options. These are the names of Linux Distros. The label widget shows the selected option from the text combo box.

cb = new TextComboBox();

The TextComboBox widget is created.

cb.appendText("Ubuntu");

The appendText() method is called to fill the text combo box.

public void onChanged(ComboBox comboBox) {
  String text = cb.getActiveText();
  label.setLabel(text);
}

The onChanged() method is called, when we select an option from the text combo box. We get the selected text and set it to the label widget.

Figure: TextComboBox

Image

The next example introduces the Image widget. This widget displays pictures.

image.java

package com.zetcode;

import org.gnome.gdk.Event;
import org.gnome.gtk.Gtk;
import org.gnome.gtk.Image;
import org.gnome.gtk.Widget;
import org.gnome.gtk.Window;
import org.gnome.gtk.WindowPosition;

/**
 * ZetCode Java Gnome tutorial
 *
 * This program shows an image of a castle
 * in the window.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class GImage extends Window {
  public GImage() {
  
    setTitle("Red Rock");
    
    initUI();
   
    setPosition(WindowPosition.CENTER);
    showAll();
  }
  
  
  public void initUI() {
  
    connect(new Window.DeleteEvent() {
      public boolean onDeleteEvent(Widget source, Event event) {
        Gtk.mainQuit();
        return false;
      }
    });
    
    Image image = new Image("redrock.png");
    
    int width = image.getRequisition().getWidth();
    int height = image.getRequisition().getHeight();
    setSizeRequest(width, height);
    
    add(image);
    setBorderWidth(2);
  }
 
  public static void main(String[] args) {
    Gtk.init(args);
    new GImage();
    Gtk.main();
  }
}

We show the Red Rock castle in the window.

Image image = new Image("redrock.png");

We create an instance of the Image widget. Notice that we do not catch for any exceptions. The Image widget already handles them. If the Image widget cannot find the redrock.png image, it will display a missing image by default.

Image image = new Image(castle);
Add(image);

Image widget is created and added to the window.

Figure: Image

In this chapter, we showed the first pack of basic widgets of the Java Gnome programming library.