MonoDevelop HelloWorld with Leopard

In MacOS Leopard, the UI was a little bit different.   This document describes how to use Interface Builder with MonoDevelop when using Leopard.

Launch Interface Builder by double-clicking on the MainWindow.xib file. Once Interface Builder starts up, you should see a surface (your window) and a Library that contains various components. Your Library should look like the following screenshot. If it is not there, select Library from the Tools menu:

Select the "Inputs and Values" as shown on the screenshot and drag both a "Round Rect Button" into the surface and a Label into it. Double click on the button to change the text to say "Tap me!" and make sure that the label stretches and is centered. Alignment can be configured in the "Attributes Inspector" (also in the Tools menu).

The result should look more or less like this:

Unlike Windows.Forms, Gtk# or ASP.NET where objects dragged into the design surface have an identifier associated that you can refer immediately from your source code, with Interface Builder a different model is used.

To connect components together you need to define outlets in your classes. These outlets at runtime are mapped into C# properties that you can access. In our sample we want to access both the label and the button from our C# code so we will need to define one outlet for each control that we want to access, and then wire up the outlet. We will explain this next.

To let the application delegate access the button and the label, we are going to have to connect these controls with it. Select the "App Delegate" in your Document Window. And then in the Identity Inspector you should see something like the screenshot below. If you do not see this, select "Identity Inspector" from the Tools menu:

We are going to create two class outlets in the application delegate. Each outlet that we create in the user interface will be reflected as a property in a partial class in the MainWindow.designer.xib.cs file.

Create one for the label, and one for the button by clicking on the [+] button in the "Class Outlet" section of that pane. Once you are done, it should look like this:

Once these outlets have been defined, you can switch to the "Connections" tab in the Inspector. You will see that the label and button outlets are not wired up to anything yet, it will look like this:

The next step is to connect the label and the button to the controls that we added to our surface before. If you hover over the empty circles and then click and drag, a line will be drawn from this outlet to other components on the screen. First connect the label outlet to the Label control on the designer surface, like this:

Repeat this process, this time with the button:

Once you have those two outlets wired up, you should see this:

Save your file by hitting Command-S and switch back to MonoDevelop.