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. The tutorial was created with the help of Dimitar Dobrev, the maintainer of the Qyoto 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 on Linux

We build the Qyoto library from the latest sources.

$ git clone git://anongit.kde.org/smokegen
$ git clone git://anongit.kde.org/smokeqt
$ git clone git://anongit.kde.org/assemblygen

We dowload the sources from the git repositories.

$ sudo apt-get install cmake-qt-gui

We install the cmake-qt-gui if not present.

We build each three packages in the following order: 1) smokegen, 2) smokeqt and 3) assemblygen. We run the cmake-qt-gui in each of the three directories. We specify the source, the build directory and set the CMAKE_BUILD_TYPE to Release. We click on the Configure and the Generate buttons. Change directory to the build directory. Run make and sudo make install.

$ export LD_LIBRARY_PATH=/usr/local/qt4/lib

Before building the smokeqt package, we set an environment variable. After each build, we run the sudo ldconfig command.

$ ls /usr/local/lib/mono/qyoto 
qyoto-qtcore.dll  qyoto-qtsvg.dll
qtscript.dll      qyoto-qtgui.dll      qyoto-qtuitools.dll
qttest.dll        qyoto-qtnetwork.dll  qyoto-qtwebkit.dll
qtuitools.dll     qyoto-qtopengl.dll   qyoto-qtxml.dll
qtwebkit.dll      qyoto-qtscript.dll   qyoto-qtxmlpatterns.dll
qyoto-phonon.dll  qyoto-qtsql.dll

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

$ dmcs -r:/usr/local/lib/mono/qyoto/qyoto-qtcore.dll \
> -r:/usr/local/lib/mono/qyoto/qyoto-qtgui.dll donut.cs

The above command shows, how to compile the donut example. The -r parameter of the mono C# compiler loads the Qt assembly. It is a dynamic library. The command 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 QtCore;
using QtGui;

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


public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "Tooltip";

        ToolTip = "This is QWidget";    
        Resize(250, 150);
        Move(300, 300);
        Show();
    }
    
    [STAThread]
    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 QtCore;
using QtGui;

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.

WindowTitle = "Tooltip";

Setting the WindowType property will display a title for a 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.

[STAThread]
public static int Main(String[] args) 

The [STAThread] attribute is required on Windows platform. It ensureas that the communication with the COM components is safe. In some cases like Clipboard and File dialogs, we are calling COM components. Without this attribute, the application would crash.

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

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


public class QyotoApp : QWidget 
{
    const int WIDTH = 250;
    const int HEIGHT = 150;
    
    public QyotoApp() 
    {
        WindowTitle = "Center";
                
        Resize(WIDTH, HEIGHT);
        Center();
        Show();
    }
    
    private void Center()
    {
        QDesktopWidget qdw = new QDesktopWidget();

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

        int cx = (screenWidth - WIDTH) / 2;
        int cy = (screenHeight - HEIGHT) / 2;        
        
        Move(cx, cy);
    }

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

Center();

The code to center the window is placed in the Center() method.

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 cx = (screenWidth - WIDTH) / 2;
int cy = (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(cx, cy);

We move the window to the computed cx, cy 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 QtCore;
using QtGui;

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


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

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

We use the QPushButton. 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.