Widgets in QtJambi

In this part of the QtJambi programming tutorial, we will cover QtJambi 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. QtJambi has a rich set of widgets which cover most of the programming needs. More specialized widgets can be created as custom widgets.

QCheckBox

The QCheckBox is a widget that has two states: on and off. The on state is visualized by a check mark. It is used to denote some boolean property. The QCheckBox widget provides a checkbox with a text label.

package com.zetcode;

import com.trolltech.qt.core.Qt.FocusPolicy;
import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QCheckBox;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses QCheckBox
 * widget to show/hide the title
 * of the window
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class JambiApp extends QWidget {
    
    public JambiApp() {

        setWindowTitle("QCheckBox");
        
        initUI();

        resize(250, 150);
        move(300, 300);
        show();        
    }

    public void initUI() {

        QCheckBox cb = new QCheckBox("Show Title", this);
        cb.setFocusPolicy(FocusPolicy.NoFocus);
        cb.setChecked(true);
        cb.toggled.connect(this, "onChanged(boolean)");

        cb.move(50, 50);

    }

    public void onChanged(boolean state) {
        if (state) {
            setWindowTitle("QCheckBox");
        } else {
            setWindowTitle("");
        }
    }
    
    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}

In our example, we place a check box on the window. The check box shows/hides the title of the window.

setWindowTitle("QCheckBox");

During the construction of the window, we set a title for the window.

QCheckBox cb = new QCheckBox("Show Title", this);

The QCheckBox widget is created. The first parameter of the constructor is its text label. The second parameter is the parent widget.

cb.setFocusPolicy(FocusPolicy.NoFocus);

I do not like the visual representation of a focused check box. This line disables focus.

cb.setChecked(true);

The title is visible at the start of the application. So the check box must be checked too.

cb.toggled.connect(this, "onChanged(boolean)");

The toggled() signal is emitted when the state of a check box changes. When the signal is emitted, we trigger the onChanged() method.

if (state) {
    setWindowTitle("QCheckBox");
} else {
    setWindowTitle("");
}

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

QCheckBox
Figure: QCheckBox

QLabel

The QLabel widget is used to display text or image. No user interaction is available.

package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QFont;
import com.trolltech.qt.gui.QLabel;
import com.trolltech.qt.gui.QVBoxLayout;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses QLabel to 
 * show lyrics of a song
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class JambiApp extends QWidget {
    
    public JambiApp() {

        setWindowTitle("You know I'm no Good");

        initUI();

        move(300, 300);
        show();
    }
    

    private void initUI() {
       String text =
           "Meet you downstairs in the bar and heard\n" +
           "your rolled up sleeves and your skull t-shirt\n" +
           "You say why did you do it with him today?\n" +
           "and sniff me out like I was Tanqueray\n\n" +
           "cause you're my fella, my guy\n" +
           "hand me your stella and fly\n" +
           "by the time I'm out the door\n" +
           "you tear men down like Roger Moore\n\n" +
           "I cheated myself\n" +
           "like I knew I would\n" +
           "I told ya, I was trouble\n" +
           "you know that I'm no good";

        QLabel label = new QLabel(text, this);
        label.setFont(new QFont("Purisa", 9));

        QVBoxLayout vbox = new QVBoxLayout();
        vbox.addWidget(label);
        setLayout(vbox);
    }
    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}

Our example shows lyrics of a song in the window.

String text =
    "Meet you downstairs in the bar and heard\n" +
...

We define a multi line text.

QLabel label = new QLabel(text, this);
label.setFont(new QFont("Purisa", 9));

We create the label widget and change its font.

QVBoxLayout vbox = new QVBoxLayout();
vbox.addWidget(label);
setLayout(vbox);

Instead of manually coding the position and size of the label, we put the label into a box layout.

QLabel
Figure: QLabel

QLineEdit

The QLineEdit is a widget that allows to enter and edit a single line of plain text. There are undo/redo, cut/paste and drag & drop functions available for QLineEdit widget.

package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QLabel;
import com.trolltech.qt.gui.QLineEdit;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program shows text
 * which is entered in a QLineEdit
 * widget in a QLabel widget
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class JambiApp extends QWidget {

    QLabel label;
    
    public JambiApp() {

        setWindowTitle("QLineEdit");

        initUI();
        
        resize(250, 200);
        move(300, 300);
        show();
    }

    private void initUI() {

        label = new QLabel(this);

        QLineEdit edit = new QLineEdit(this);
        edit.textChanged.connect(this, "onChanged(String)");

        edit.move(60, 100);
        label.move(60, 40);
    }

    private void onChanged(String text) {
        label.setText(text);
        label.adjustSize();
    }

    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}

In our example we show two widgets. A line edit and a label widget. The text entered into the line edit is shown in the label widget.

QLineEdit edit = new QLineEdit(this);

The QLineEdit widget is created.

edit.textChanged.connect(this, "onChanged(String)");

When we type or delete some text from the line edit, the onChanged() method is triggered.

private void onChanged(String text) {
    label.setText(text);
    label.adjustSize();
}

In the onChanged() method, we set the contents of the line edit to the label widget. The adjustSize() method ensures that all text is visible.

QLineEdit widget
Figure: QLineEdit widget

Toggle buttons

Toggle buttons are push buttons with a checkable flag set. Toggle button is a button that has two states. Pressed and not pressed. You toggle between these two states by clicking on it. There are situations where this functionality fits well.

package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QColor;
import com.trolltech.qt.gui.QPushButton;
import com.trolltech.qt.gui.QWidget;
import java.util.Formatter;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses toggle buttons to
 * change the background color of
 * a widget
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */


public class JambiApp extends QWidget {

    private QWidget square;
    private QColor color;

    private QPushButton redb;
    private QPushButton greenb;
    private QPushButton blueb;

    public JambiApp() {

        setWindowTitle("Toggle Buttons");

        initUI();

        resize(350, 240);
        move(300, 300);
        show();
    }

    private void initUI() {

        color = new QColor();

        redb = new QPushButton("Red", this);
        redb.setCheckable(true);
        greenb = new QPushButton("Green", this);
        greenb.setCheckable(true);
        blueb = new QPushButton("Blue", this);
        blueb.setCheckable(true);

        redb.toggled.connect(this, "onToggled()");
        greenb.toggled.connect(this, "onToggled()");
        blueb.toggled.connect(this, "onToggled()");

        square = new QWidget(this);
        square.setStyleSheet("QWidget { background-color: black }");

        redb.move(30, 30);
        greenb.move(30, 80);
        blueb.move(30, 130);
        square.setGeometry(150, 25, 150, 150);

    }

    public void onToggled() {

        int red = color.red();
        int green = color.green();
        int blue = color.blue();
        
        if (redb.isChecked()) {
            red = 255;
        } else {
            red = 0;
        }
  
        if (greenb.isChecked()) {
            green = 255;
        } else {
            green = 0;
        }

        if (blueb.isChecked()) {
            blue = 255;
        } else {
            blue = 0;
        }
        
        color = new QColor(red, green, blue);

        Formatter fmt = new Formatter();
        fmt.format("QWidget { background-color: %s }", color.name());

        square.setStyleSheet(fmt.toString());
}


    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}

In the code example, we use three toggle buttons to change the color of a rectangular widget.

private QWidget square;
private QColor color;

private QPushButton redb;
private QPushButton greenb;
private QPushButton blueb;

We define five objects. The square widget is a QWidget, which shows the color. The color variable is used to hold the color value. The three buttons are toggle buttons, which are used to mix the color value.

redb = new QPushButton("Red", this);
redb.setCheckable(true);

We create a QPushButton widget. The setCheckable() method changes the push button into a toggle button.

redb.toggled.connect(this, "onToggled()");
greenb.toggled.connect(this, "onToggled()");
blueb.toggled.connect(this, "onToggled()");

All three buttons are plugged into one method call, the onToggled() method.

square = new QWidget(this);
square.setStyleSheet("QWidget { background-color: black }");

We create the square widget. At the beginning, it is black. In QtJambi, we use style sheets to customize the appearance of a widget.

Inside the onToggled() method, we determine the color value and update the square widget to a new color.

int red = color.red();
int green = color.green();
int blue = color.blue();

Here we determine the current color of the square widget.

if (redb.isChecked()) {
    red = 255;
} else {
    red = 0;
}

Change the red part of the color, depending on the state of the red toggle button.

color = new QColor(red, green, blue);

We create a new color value.

Formatter fmt = new Formatter();
fmt.format("QWidget { background-color: %s }", color.name());

These two lines create the text for the style sheet. We use the Java Formatter object.

square.setStyleSheet(fmt.toString());

The color of the square is updated.

Toggle buttons
Figure: Toggle buttons

QComboBox

The QComboBox is a widget that allows the user to choose from a list of options. It is a selection widget that displays the current item, and can pop up a list of selectable items. A combo box may be editable. It presents a list of options to the user in a way that takes up the minimum amount of screen space.

package com.zetcode;

import com.trolltech.qt.gui.QApplication;
import com.trolltech.qt.gui.QComboBox;
import com.trolltech.qt.gui.QLabel;
import com.trolltech.qt.gui.QWidget;

/**
 * ZetCode QtJambi tutorial
 *
 * This program uses the QComboBox widget.
 * The option selected from the combo box is
 * displayed in the label widget.
 *
 * @author jan bodnar
 * website zetcode.com
 * last modified March 2009
 */

public class JambiApp extends QWidget {

    QLabel label;
    
    public JambiApp() {

        setWindowTitle("QComboBox");

        initUI();
        
        resize(250, 200);
        move(300, 300);
        show();
    }
    
    private void initUI() {

        label = new QLabel("Ubuntu", this);

        QComboBox combo = new QComboBox(this);

        combo.addItem("Ubuntu");
        combo.addItem("Fedora");
        combo.addItem("Mandriva");
        combo.addItem("Red Hat");
        combo.addItem("Mint");

        combo.currentStringChanged.connect(this, "OnActivated(String)");

        combo.move(50, 30);
        label.move(50, 100);
    }

    private void OnActivated(String text) {
       label.setText(text);
       label.adjustSize();
    }
    
    public static void main(String[] args) {
        QApplication.initialize(args);
        new JambiApp();
        QApplication.exec();
    }
}

In our code example, we have two widgets. A combo box and a label widget. The option selected from a combo box is shown in the label.

label = new QLabel("Ubuntu", this);

This is the label that will show the currently selected option from the combo box.

QComboBox combo = new QComboBox(this);

We create the instance of the QComboBox widget.

combo.addItem("Ubuntu");
combo.addItem("Fedora");
combo.addItem("Mandriva");
combo.addItem("Red Hat");
combo.addItem("Mint");

Combo box is filled with values.

combo.currentStringChanged.connect(this, "OnActivated(String)");

When we select an option from the combo box, the OnActivated() method is triggered.

private void OnActivated(String text) {
    label.setText(text);
    label.adjustSize();
}

In the OnActivated() method, we update the label widget to the currently selected string from the combo box.

QComboBox widget
Figure: QComboBox widget

In this part of the QtJambi tutorial, we have presented several QtJambi widgets.