In the first post in this series we went over the details of creating a new desktop application using
Gtk# using MonoDevelop. The main reason for doing that was to get
acquainted with the IDE and the way it creates and manages the Gtk# code for us, behind the scene.
This time, we'll stay strictly on the front side, using MonoDevelop's tools to create a simple UI with a simple layout and place buttons and
labels on the screen. Nothing too complicated, really.
I'd like to point out that there are some excellent tutorials out there that you can check out, including:
-
a tutorial that is very similar to what this series is about, except
without using MonoDevelop
- the tutorials on the mono project's own website
What
is written here is not novel (if you'll pardon the pun!) I'm just
taking a shot at it from a different perspective. If you've written desktop applications on Windows, most of what you'll read here will be very familiar. Just reading the tutorials above will teach you what you need to know. I hope, however, to save you the few minutes or hours that you will spend figuring out the few features that are not as well documented.
That being said,
let's get started!
I'd like to add two buttons to
our application. One that will close the main window, and the other one
that will change the text on a label that sits somewhere around the center of the window. For this, we will use Gtk's
excellent abilities at layering and positioning controls (or widgets,
remember?) on the screen. We'll stack the buttons on the right hand
side of the window and center the label in the remaining empty space.
Open up the project that we created in the last post and open up the
MainWindow.cs file. At the bottom, you'll see that you can view this
file in two ways: view the source code, of view the designer. Select
the designer view.
The first thing we need to do is add a container, which is a type control that is used by Gtk# to define your UI layout. There are a few that
are available to us right out of the box and what we want is something
that will allow us to have the buttons on the left and an empty space
on the right. Open up the toolbox tab on the right and take a look at
was is in the containers list:
Drag an HBox onto the main window:
An HBox is a container that is used to layout your UI in any number of
vertical columns. As you can see, the default amount of columns is
three. However, we only need two but fortunately, adding and removing
columns is easy enough. Right click on any columns and select the
delete option in the context menu.
You can edit the properties of any widget or container from the
properties tab on the right. Select and rename the HBox by using the
combo box right above the UI builder window, then open up that
properties tab:
We are now ready to stack our buttons. Go back to the toolbox and drag a VBox to the leftmost column:
As you can see, VBoxes and HBoxes are exactly the same, differing only
in their alignement. Just like with the HBox, we have one too many rows
in our VBox so go ahead and remove one. Then, drag a button from the
toolbox into each of the remaining rows:
It's interesting to see how the buttons are automatically stacked at
the top of the window. The reason why is that you can specify how
widgets are packed inside a container. Select a button and go take a
look at its properties. Expand the Box Child Layout category. In there,
you can adjust the pack type and the position of the widget. The pack
type tells Gtk# to put that button either at the start or at the end of
a container. By selecting end, the selected button would be put at the
bottom of the screen. You can also change the position of the button.
Gtk# will then put it at position x, starting from the top or bottom,
depending on the selected pack type. Note that the position is 0 based.
Go ahead and play with those and see what happens. You can also play
with the pack type and positioning of the VBox itself!
Alright, let's rename those buttons.
I'd like to quickly mention that in the Common Widget Properties
categories, you'll surely use the Sensitive property. In .Net talk, it
means Enabled. Yes, Sensitive == Enabled. It took me a while to find
that one!
Open up the Button Properties category and change the
name and label of the buttons. Name one "Quit" and the other "Change
Text". Did you happen to notice the Button Type property? I've never
played with it, but having the ability to put images and text on a
button right out of the box is pretty sweet!
Now, go and drag a
Label widget from the toolbox into the empty remaining space in the
window. Great, it's centered vertically, but not horizontally. Open up
its properties and in the Box Child Layout section, unselect Auto Size
and then check the Expand and Fill check boxes. There, it's centered
now. Go ahead, compile and run the app and bask in the glory of having
done something with Gtk#!
Have you basked in the glory? Good.
Now we really should think about making those buttons do something. You
might have noticed the Signals tab when looking at a widget's
properties. This is where we hook up a method in our class to an event,
called signals.
The screenshot above shows the signals that are available for a button
widget. Go to the Clicked signals and enter in "OnClicked" in the
textbox next to it. Then, go back to the source code for our MainWindow
class. You should see a new OnClicked method that has been created for
you. Edit the method and add the following code:
1: protected virtual void OnClicked (object sender, System.EventArgs e)
2: {
3: centerLabel.Text = "Clicked!";
4: }
This will simply change the text on the label that we put in the center
of the screen. If you didn't name your label widget "centerLabel", just
use whatever name you chose in the code. Run the app, click on the
button, and the text will change! A small step for man, a giant step
for humanity... or something like that!
Finally, go back to the signals panel of the Quit button and add a Clicked signal. In your method, enter the following line:
which will close the app.
That's it for this post. Nothing special was presented, really. The
main thing I wanted to showcase is the the layout capabilities of Gtk#,
which is what I found to be highly refreshing, coming from a Windows
Forms world. In the next post, we'll check out the code that was
generated for us in the background while we were draging and dropping
widgets on the screen.
Thanks for reading!
Posted
Oct 15 2009, 10:41 PM
by
Louis Salin