Introduction
Mono allows developers to build Linux and cross-platform applications easily. Mono's .NET implementation is based on the ECMA standards for C#. GTK+ is a multi-platform toolkit for creating graphical user interfaces. Offering a complete set of widgets, GTK+ is suitable for projects ranging from small one-off projects to complete application suites. Gtk# is a .NET language binding for the Gtk+ toolkit. Glade provides an easy interface to design the application GUI efficiently and fastly.
This article will teach you how to write cross platform GUI application using Gtk# and mono, and how to create the GUI interface using glade. Designing GUI with Glade is somewhat similar to designing forms in Visual studio. Although this article scope is limited to Windows 2000 or similar systems, the concepts can be similarly extended to Linux or other platforms.
Getting Started
To get started, first you need all the required software for building our application. The first and the foremost important thing is mono, which can be downloaded from the mono website. Just download the Windows installer and install it. I know you can do that yourself. This installer includes the GTK# package also. Now you have to run the setmonopath.bat file in the bin directory of your mono installation to setup up the environment variables. I don�t know why, but it never works with me, so I have to manually add that path in the environment variable.
After installing mono, you need to install Glade. Download and install Glade from source forge website. You have to download and install the Gtk+/Win32 Development Environment. Now you are ready to start coding, but wait, we won�t be coding in notepad, so you need the Visual Studio .NET. This is the best editor in my choice and also more familiar to all of us. You can also use SharpDevelop which is freely available from the SharpDevelop website. But here, we�ll be using Visual Studio .NET. Now, we are all set to start the mission, 9 8 7 6 5 4 3 2 1 Starting Glade�
Glade
As a Windows developer you will be glad to know that designing GUI with glade is similar to designing dialog boxes in VC++ or Win Forms in .NET. Just run the �glade-2.exe� and you will see three windows at your screen. The first one is the main window, with a menu and a toolbar. It helps you to create new project, save and open current projects. Another one looks to have many controls icon on it with �Palette� caption. These controls are called widgets in Linux and mono. You will see some icons as horizontal box and vertical Box on that palette. This is one of the main differences between glade and Win Forms. These boxes are invisible and used for packaging other controls, it�s like a container. By packing widgets into boxes, you can create layouts that remain consistent at different window sizes, and orient boxes either vertically or horizontally.
Now click on the window icon, in the palette bar. A new window appears on the screen. This is your application window GUI, that you have to modify. In the properties window, you can see the properties of that window. From the properties window, you can edit the caption and the variable name of the window to be used in your program. Change the �Type Hint� to �Menu� from the properties window, so that, maximize and minimize button does not appear in your application, when you run it. Add an event handler for the destroy event, which gets raised when the user clicks on the close button.
Now add some vertical boxes and some horizontal boxes to those vertical boxes, except the top vertical box. Add an edit box to the top vertical box. The edit box is called Entry in GTK#. Add some buttons to each box. Set the padding to 5 and width to 35, height to 30. Also set the label accordingly. Add an event handler for button clicked and add the accelerator keys.
Creating boxes for packaging widgets.
Adding text entry and Fixed Positions to the GUI.
Adding buttons and menu bar. Setting button's Label, Height, Width, Padding, Accelerators and Signal Handler for the first row Buttons.
Wait, Wait!, It would be useless to say click on that, and then click on that, as I had used some other widgets also, to make the GUI impressive like ToggleButton, Fixed Positions and Menu Bars. So, I would like you to open the "calculator.glade" file and see what I had done. We call it reverse engineering, the best training tool. After, you are finished with the GUI, just save the project file. For now on, just change the project name to calculator and safely ignore all other stuffs. This will create an XML file with ".glade" extension, which will contain all the information regarding the GUI and the variable names of the widgets by which we will access them in our code and all the event handlers and widgets property information. I would like you to refer to "A Google search application using GTK#" at CodeProject for further information in this regard.
Coding
Now the sets are all ready, but the shooting has not started yet. Where is our hero "Mono"? So let�s bring our hero to center stage. Mono is an open source C# compiler in which we will compile our program, which consumes the GUI interface in the XML file generated by the glade.
To use all the classes and power of GTK#, we will have to import its namespaces firstly. So, import all the namespaces:
using Gtk;
using Gdk;
using Glade;
using GtkSharp;
using System;
using System.Text;
After that we will declare a class Calculator and a static Main function in it, as the entry point of our program. In the Main function we create an object of our class Calculator. As Main is defined as static, it will get called automatically by the compiler.
In the constructor of our class, we will initialize GTK#, by calling Application.Init();. Now we create an object of Glade.XML which contains the GUI description. We will pass the name of our XML file and the top level widget to the Glade.XML constructor. The Autoconnect(this) method simply creates the controls and connects it to the corresponding event handler defined in that XML file. Run causes the flow of control to enter into the main event loop.
Now we will write the window delete event handler, by writing a function with name OnWindowDeleteEvent and with parameters as an object (reference to the sending object) and the DeleteEventArgs. The function name should be the same as defined in the XML file by glade. The delete event does two tasks, first it quits the main event loop by calling the Application.Quit(); and secondly it sets the args.RetVal to true, preventing any subsequent handlers from getting this event back.
Compiling
C:\>mcs /unsafe �r gtk-sharp.dll �r gdk-sharp.dll �r glade-sharp.dll calculator.cs
C:\>mono calculator.exe
Reference
