Widgets in Qyoto
In this part of the Qyoto C# programming tutorial, we will cover Qyoto 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. Qyoto 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.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# 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 QyotoApp : QWidget {
public QyotoApp() {
SetWindowTitle("QCheckBox");
SetupUI();
Resize(250, 150);
Move(300, 300);
Show();
}
public void SetupUI() {
QCheckBox cb = new QCheckBox("Show Title", this);
cb.Checked = true;
cb.Move(50, 50);
Connect(cb, SIGNAL("stateChanged(int)"), this, SLOT("ShowTitle(int)"));
}
[Q_SLOT]
public void ShowTitle(int state) {
if (state == (int) Qt.CheckState.Checked) {
SetWindowTitle("QCheckBox");
} else {
SetWindowTitle("");
}
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return 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.Checked = true;
The title is visible at the start of the application. So the check box must be checked too. We make the check box checked through the Checked property.
Connect(cb, SIGNAL("stateChanged(int)"), this, SLOT("ShowTitle(int)"));
The stateChanged(int) signal is emitted when the state of a check box changes. When the signal is emitted, we trigger the ShowTitle() method.
[Q_SLOT]
public void ShowTitle(int state) {
...
}
The method definition is preceded by a Q_SLOT attribute. This attribute informs a compiler about a custom slot.
if (state == (int) Qt.CheckState.Checked) {
SetWindowTitle("QCheckBox");
} else {
SetWindowTitle("");
}
Depending on the state of the check box, we show or hide the title of the window.
QLabel
The QLabel widget is used to display text or image. No user interaction is available.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# tutorial
*
* This program uses QLabel to
* show lyrics of a song
*
* @author jan bodnar
* website zetcode.com
* last modified March 2009
*/
public class QyotoApp : QWidget {
public QyotoApp() {
SetWindowTitle("You know I'm no Good");
InitUI();
Resize(250, 150);
Move(300, 300);
Show();
}
public void InitUI() {
string text = @"Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray
cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore
I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good";
QLabel label = new QLabel(text, this);
label.Font = new QFont("Purisa", 9);
QVBoxLayout vbox = new QVBoxLayout();
vbox.AddWidget(label);
SetLayout(vbox);
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
}
}
Our example shows lyrics of a song in the window.
string text = @"Meet you downstairs in the bar and heard ...
We define a multi line text. Multiline texts are preceded by the @ character in C# language.
QLabel label = new QLabel(text, this);
label.Font = 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.
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.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# 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 QyotoApp : QWidget {
QLabel label;
public QyotoApp() {
SetWindowTitle("QLineEdit");
InitUI();
Resize(250, 150);
Move(400, 300);
Show();
}
public void InitUI() {
label = new QLabel(this);
QLineEdit edit = new QLineEdit(this);
Connect(edit, SIGNAL("textChanged(QString)"),
this, SLOT("OnChanged(QString)"));
edit.Move(60, 100);
label.Move(60, 40);
}
[Q_SLOT]
public void OnChanged(string text) {
label.SetText(text);
label.AdjustSize();
}
public static int Main(string[] args) {
new QApplication(args);
new QyotoApp();
return 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.
Connect(edit, SIGNAL("textChanged(QString)"),
this, SLOT("OnChanged(QString)"));
When we type or delete some text from the line edit, the OnChanged() method is triggered. The method takes a string parameter.
[Q_SLOT]
public 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.
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.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# 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 QyotoApp : QWidget {
QWidget square;
QColor color;
QPushButton redb;
QPushButton greenb;
QPushButton blueb;
public QyotoApp() {
SetWindowTitle("Toggle buttons");
InitUI();
Resize(350, 240);
Move(400, 300);
Show();
}
private void InitUI() {
color = new QColor();
redb = new QPushButton("Red", this);
redb.Checkable = true;
greenb = new QPushButton("Green", this);
greenb.Checkable = true;
blueb = new QPushButton("Blue", this);
blueb.Checkable = true;
Connect(redb, SIGNAL("toggled(bool)"), this, SLOT("OnToggled()"));
Connect(greenb, SIGNAL("toggled(bool)"), this, SLOT("OnToggled()"));
Connect(blueb, SIGNAL("toggled(bool)"), this, SLOT("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);
}
[Q_SLOT]
public void OnToggled() {
int red = color.Red();
int green = color.Green();
int blue = color.Blue();
if (redb.Checked) {
red = 255;
} else {
red = 0;
}
if (greenb.Checked) {
green = 255;
} else {
green = 0;
}
if (blueb.Checked) {
blue = 255;
} else {
blue = 0;
}
color = new QColor(red, green, blue);
string sheet = System.String.Format("QWidget {{ background-color: {0} }}",
color.Name());
square.SetStyleSheet(sheet);
}
public static int Main(string[] args) {
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
}
}
In the code example, we use three toggle buttons to change the color of a rectangular widget.
QWidget square; QColor color; QPushButton redb; QPushButton greenb; 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.Checkable = true;
We create a QPushButton widget. The Checkable property changes the push button into a toggle button.
Connect(redb, SIGNAL("toggled(bool)"), this, SLOT("OnToggled()"));
Connect(greenb, SIGNAL("toggled(bool)"), this, SLOT("OnToggled()"));
Connect(blueb, SIGNAL("toggled(bool)"), this, SLOT("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 Qyoto, 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.Checked) {
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.
string sheet = System.String.Format("QWidget {{ background-color: {0} }}",
color.Name());
We use the C# Format object to create the appropriate stylesheet.
square.SetStyleSheet(sheet);
The color of the square is updated.
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.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# 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 QyotoApp : QWidget {
QLabel label;
public QyotoApp() {
SetWindowTitle("QComboBox");
InitUI();
Resize(250, 150);
Move(300, 300);
Show();
}
public void InitUI() {
label = new QLabel("Ubuntu", this);
QComboBox combo = new QComboBox(this);
combo.AddItem("Ubuntu");
combo.AddItem("Mandriva");
combo.AddItem("Fedora");
combo.AddItem("Red Hat");
combo.AddItem("Gentoo");
combo.Move(50, 30);
label.Move(50, 100);
Connect(combo, SIGNAL("activated(QString)"), this,
SLOT("OnActivated(QString)"));
}
[Q_SLOT]
public void OnActivated(string text) {
label.SetText(text);
label.AdjustSize();
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return 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("Mandriva");
combo.AddItem("Fedora");
combo.AddItem("Red Hat");
combo.AddItem("Gentoo");
Combo box is filled with values.
Connect(combo, SIGNAL("activated(QString)"), this,
SLOT("OnActivated(QString)"));
When we select an option from the combo box, the OnActivated() method is triggered.
[Q_SLOT]
public 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.
In this part of the Qyoto C# tutorial, we have presented several Qyoto widgets.