Building UI with Xcode

The Monobjc MonoDevelop addin does not provide an UI designer. In order to design the UI part of the application, the addin uses the installed Apple Developer Tools, especially Xcode.

Why using Xcode to design the UI ?

The Xcode application provides a great UI designer that works pretty well. By using it, UI design remain simple and efficient.

How does it work ?

Xcode 3 Integration

With using Xcode 3, the UI design is handled by an application called Interface Builder. It is a separate application that is merely based on declarations. You declare the classes, wire outlets and action, and the result is stored in a xib file. When the Monobjc MonoDevelop addin detect that a xib file has changed, it parses it and generates the appropriate design code in .NET.

Xcode 4 Integration

Since Xcode 4 has been released, some things have changed. The Interface Builder application does not exists anymore, and it is not possible to edit a xib file outside a project.

To work around this limitation, the Monobjc MonoDevelop addin creates a surrogate Xcode project that enables the UI design in Xcode. This surrogate project is created by the addin and exposes the .NET code as Objective-C classes to enable the UI design in Xcode.

In order to make the integration simple and robust, the synchronization is very basic:

• When you open a XIB file, the surrogate classes are created from the .NET code
• If you modify a XIB file and/or a header files, the changes are merged back into the .NET code when you get back to MonoDevelop/Xamarin
• If you make big changes to the project, remember to re-open a XIB file so the surrogate project is up-to-date.

Xcode 5 Integration

Xcode 5 uses the same integration as Xcode 4.

Configuration

In order to use the Xcode application, the Monobjc MonoDevelop addin needs the location of the Apple Developer Tools.

• In MonoDevelop, open the preferences.
• Select the Monobjc section.
• Select the root folder for the Apple Developer Tools. Once the install folder is selected, the preference pane shoud display the message Developer Tools X.Y.Z found.
  • For Xcode 3 and for Xcode 4 up to 4.2, the standard folder to select is the /Developer folder.
  • For Xcode 4 starting from 4.3, the folder to select is the / folder.

Designing UI

Accessing the UI designer

• In MonoDevelop, select the xib file you want to edit.
• Right-click on it and select Apple Developer Tools. This will launch the Xcode application.
• In Xcode, the surrogate project has been opened. Expand the project and the Resources folder, to select the xib file to edit it.

Adding an outlet

• For the sake of this tutorial, we will add an outlet bound to a button control. Drag a button from the palette and drop it on the window.
• In Xcode, click on the Wizard button to get a split view. On the top, the xib file is displayed, and on the bottom select the header file where you want to add the outlet.
• Press and maintain the CTRL key while clicking and dragging the UI control to the header file. Xcode will let you choose if you want to create an outlet or an action.
• Give a name to the outlet. The outlet is now defined in the header file and bound the UI control.
• Click in the UI zone and save the xib file.
• When you return to MonoDevelop, the addin will parse it and generates the appropriate design code in .NET.

Adding an action

• For the sake of this tutorial, we will bind the button to an action.
• Press and maintain the CTRL key while clicking and dragging the UI control to the header file. Xcode will let you choose if you want to create an outlet or an action.
• Give a name to the action (don't forget to put a colon at the end). The action is now defined in the header file and bound the UI control.
• Click in the UI zone and save the xib file.
• When you return to MonoDevelop, the addin will parse it and generates the appropriate design code in .NET.