Question

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.

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.

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.

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.

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.

Figure: QComboBox widget

In this part of the Qyoto C# tutorial, we have presented several Qyoto widgets.