Home  Contents

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 QtCore;
using QtGui;

/**
 * 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 October 2012
 */

public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "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);
        
        cb.StateChanged += ShowTitle;
    }
    
    [Q_SLOT]
    public void ShowTitle(int state) 
    {
        if (state == (int) CheckState.Checked) 
        {
            WindowTitle = "QCheckBox";
        } else {
            WindowTitle = "";
        }
    }

    [STAThread]
    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.

WindowTitle = "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.

cb.StateChanged += ShowTitle;

We plug the ShowTitle() method to the StateChange event. The event is emitted when the state of a check box changes.

[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) CheckState.Checked) 
{
    WindowTitle = "QCheckBox";
} else {
    WindowTitle = "";
}

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.

using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses QLabel to 
 * show lyrics of a song.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */

public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "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);
        Layout = vbox;
    }

    [STAThread]
    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);
Layout = 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.

using System;
using QtCore;
using QtGui;

/**
 * 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 October 2012
 */

public class QyotoApp : QWidget 
{
    QLabel label;
    
    public QyotoApp() 
    {
        WindowTitle = "QLineEdit";
        
        InitUI();

        Resize(250, 150);
        Move(400, 300);
        Show();
    }    

    public void InitUI() 
    {        
        label = new QLabel(this);

        QLineEdit edit = new QLineEdit(this);
        edit.TextChanged += OnChanged;
        
        edit.Move(60, 100);
        label.Move(60, 40);
    }
    
    [Q_SLOT]
    public void OnChanged(string text) 
    {
        label.Text = text;
        label.AdjustSize();
    }

    [STAThread]
    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.

edit.TextChanged += OnChanged;

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.Text = 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.

using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program uses toggle buttons to
 * change the background colour of
 * a widget.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */


public class QyotoApp : QWidget 
{
    QWidget square;
    QColor col;

    QPushButton redb;
    QPushButton greenb;
    QPushButton blueb;

    public QyotoApp() 
    {
        WindowTitle = "Toggle buttons";
        
        InitUI();

        Resize(350, 240);
        Move(400, 300);
        Show();
    }
    
    private void InitUI() 
    {
        col = 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;

        redb.Toggled += OnToggled;
        greenb.Toggled += OnToggled;
        blueb.Toggled += OnToggled;
       
        square = new QWidget(this);
        square.StyleSheet = "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(bool @checked) 
    {
        int red = col.Red;
        int green = col.Green;
        int blue = col.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;
        }
        
        col = new QColor(red, green, blue);

        string sheet = System.String.Format("QWidget {{ background-color: {0} }}", 
            col.Name());
        square.StyleSheet = sheet;
    }

    [STAThread]    
    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 colour. The color variable is used to hold the color value. The three buttons are toggle buttons, which are used to mix the colour 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.

redb.Toggled += OnToggled;
greenb.Toggled += OnToggled;
blueb.Toggled += OnToggled;

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

square = new QWidget(this);
square.StyleSheet = "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 colour value and update the square widget to a new colour.

int red = col.Red;
int green = col.Green;
int blue = col.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.

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

We create a new color value.

string sheet = System.String.Format("QWidget {{ background-color: {0} }}", 
    col.Name());        

We use the C# Format method to create the appropriate stylesheet.

square.StyleSheet = sheet;

The colour 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.

using System;
using QtCore;
using QtGui;

/**
 * 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 October 2012
 */

public class QyotoApp : QWidget 
{    
    QLabel label;

    public QyotoApp() 
    {
        WindowTitle = "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("Arch");
        combo.AddItem("Fedora");
        combo.AddItem("Red Hat");
        combo.AddItem("Gentoo");
        
        combo.Move(50, 30);
        label.Move(50, 100);
        
        combo.ActivatedString += OnActivated;
    }
    
    [Q_SLOT]
    public void OnActivated(string text) 
    {
        label.Text = text;
        label.AdjustSize();
    }

    [STAThread]
    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("Arch");
combo.AddItem("Fedora");
combo.AddItem("Red Hat");
combo.AddItem("Gentoo");

Combo box is filled with values.

combo.ActivatedString += OnActivated;

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

[Q_SLOT]
public void OnActivated(string text) 
{
    label.Text = 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 Qyoto C# tutorial, we have presented several Qyoto widgets.