Home  Contents

Introduction to Qyoto

In this part of the Qyoto C# programming tutorial, we will introduce and build the Qyoto library. We create our first Qyoto programs using the C# programming language.

The purpose of this tutorial is to get you started with the Qyoto and C#. Images used in this tutorial can be downloaded here. I used some icons from the tango icons pack of the Gnome project.

About

Qyoto is a library that provides binding of the Qt library to the .NET languages like C# or Visual Basic. Qt is a powerful cross-platform application development framework. Its native language is C++. Qyoto is a part of the KDE desktop environment. Qyoto is created with the SMOKE library. It is a KDE project for creating bindings for multiple languages. The SMOKE stands for Scripting Meta Object Kompiler Engine.

Building Qyoto

Today most Linux distributions do not contain Qyoto binaries. The only way is to build Qyoto from the sources.

$ git clone http://anongit.kde.org/qyoto
Cloning into qyoto...
remote: Counting objects: 23328, done.
remote: Compressing objects: 100% (3249/3249), done.
remote: Total 23328 (delta 19701), reused 23328 (delta 19701)
Receiving objects: 100% (23328/23328), 6.82 MiB | 1.23 MiB/s, done.
Resolving deltas: 100% (19701/19701), done.

We dowload the sources from the KDE git repository.

$ sudo apt-get install cmake
$ sudo apt-get install libsmokeqt4-dev

We install lacking libraries. The cmake tool and the libsmokeqt4-dev library are needed to build Qyoto.

$ cmake CMakeLists.txt
$ make
$ sudo make install
$ sudo ldconfig

We build and install Qyoto. We also run the ldconfig tool to let the system know about the new dynamic libraries.

$ ls /usr/local/lib/mono/qyoto 
qt-dotnet.dll  qtscript.dll  qttest.dll  qtuitools.dll  qtwebkit.dll

We have the Qyoto dlls in the /usr/local/lib/mono/qyoto directory.


$ dmcs -r:/usr/local/lib/mono/qyoto/qt-dotnet.dll quitbutton.cs

The above command shows, how to compile the quitbutton example. The -r parameter of the mono C# compiler loads the Qt assembly. It is a dynamic library. The commnad shows a path to the dll library on a Linux system.

Creating a Tooltip

The first example will show a tooltip. A tooltip is a small rectangular window, which gives a brief information about an object. It is usually a GUI component. It is part of the help system of the application.

using System;
using Qyoto;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program displays a
 * tooltip.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified April 2012
 */


public class QyotoApp : QWidget {

    public QyotoApp() {

        SetWindowTitle("Tooltip");

        ToolTip = "This is QWidget";    
        Resize(250, 150);
        Move(300, 300);
        Show();
    }


    public static int Main(String[] args) {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

The example creates a window. If we hover a mouse pointer over the area of the window, a tooltip pops up.

using System;
using Qyoto;

The using keyword imports necessery types that we will use in the application.

public class QyotoApp : QWidget {

The example inherits from a QWidget. The QWidget class is the base class of all user interface objects. The widget is the atom of the user interface. It receives mouse, keyboard and other events from the window system.

SetWindowTitle("Tooltip");

This method call creates a title for the window.

ToolTip = "This is QWidget";

We set a tooltip through the ToolTip property.

Resize(250, 150);

Here we set the width and the height of the window.

Move(300, 300);

The Move() method moves the window on the screen.

Show();

When everything is ready, we show the window on the screen.

new QApplication(args);
new QyotoApp();
return QApplication.Exec();

These three lines set up the application.


Tooltip
Figure: Tooltip

Centering a window

In the second example, we will center the window on the screen.

using System;
using Qyoto;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program centers a window
 * on the screen
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified April 2012
 */


public class QyotoApp : QWidget {

    const int WIDTH = 250;
    const int HEIGHT = 150;
    
    public QyotoApp() {

        SetWindowTitle("Center");

        QDesktopWidget qdw = new QDesktopWidget();

        int screenWidth = qdw.Width();
        int screenHeight = qdw.Height();

        int x = (screenWidth - WIDTH) / 2;
        int y = (screenHeight - HEIGHT) / 2;

        Resize(WIDTH, HEIGHT);
        Move(x, y);
        Show();
    }


    public static int Main(String[] args) {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

The Qyoto does not have a single method to center a window.

const int WIDTH = 250;
const int HEIGHT = 150;

These two constants define the width and height of the application window.

QDesktopWidget qdw = new QDesktopWidget();

The QDesktopWidget class provides information about the screen.

int screenWidth = qdw.Width();
int screenHeight = qdw.Height();

Here we determine the screen width and height.

int x = (screenWidth - WIDTH) / 2;
int y = (screenHeight - HEIGHT) / 2;

Here we calculate the x, y coordinates of the centered window. To center a window on the screen, we need to know the size of the screen and the size of the window.

Move(x, y);

We move the window to the computed x, y coordinates.

Quit button

In the last example of this section, we will create a quit button. When we press this button, the application terminates.

using System;
using Qyoto;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program creates a quit
 * button. When we press the button,
 * the application terminates. 
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified April 2012
 */


public class QyotoApp : QWidget {

    public QyotoApp() {

        SetWindowTitle("Quit button");

        InitUI();

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

    public void InitUI() {
        
        QPushButton quit = new QPushButton("Quit", this);

        Connect(quit, SIGNAL("clicked()"), qApp, SLOT("quit()"));
        quit.SetGeometry(50, 40, 80, 30);

    }

    public static int Main(String[] args) {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}

We use the QPushButton. This is a very common widget. It is rectangular and usually shows a text label.

InitUI();

We delegate the creation of the user interface to the InitUI() method.

QPushButton quit = new QPushButton("Quit", this);

We create the button widget. The first parameter of the constructor is the label, which the button displays. The second parameter is the parent widget of the button.

Connect(quit, SIGNAL("clicked()"), qApp, SLOT("quit()"));

The clicked() signal is emitted, when we click on the button. The Connect() method connects a signal to a particular slot of an object. The first parameter of the method is the object, that receives the signal. In our case it is the application object. The second parameter is the method, which is called. In our case it is the quit() method of the application object. The qApp is a global reference to the application object.

quit.SetGeometry(50, 40, 80, 30);

We position and size the button widget. The first two parameters are the x, y coordinates of the button. The last two parameters are the width and height of the button.


Quit button
Figure: Quit button

This section was an introduction to the Qyoto library with the C# language.