Book Image

iOS Development with Xamarin Cookbook

By : Dimitrios Tavlikos (USD)
Book Image

iOS Development with Xamarin Cookbook

By: Dimitrios Tavlikos (USD)

Overview of this book

Table of Contents (22 chapters)
iOS Development with Xamarin Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Accessing the UI with Outlets


In this recipe, we will discuss the concept of Outlets and their usage with Xamarin.iOS.

Getting ready

In the previous recipe, we learned how to add controls to form a basic interface for our app. In this recipe, we will discuss how to access and use these controls in our code. Launch Xamarin Studio and open the project ButtonInput we created earlier. Open the project's ButtonInputViewController.xib in Interface Builder by double-clicking on it in the Solution pad.

How to do it...

Perform the following steps to access the UI with Outlets:

  1. In the assistant editor, select the ButtonInputViewController.h file, press the Ctrl key, and drag it from Label to the Objective-C source file, as displayed in the following screenshot:

  2. When you release the cursor, a context window will appear similar to the one in the following screenshot:

  3. In the Name field of the context window, enter labelStatus and click on Connect.

  4. Do the same for Button, and name it buttonTap. Save the Interface Builder document by navigating to File | Save in the menu bar or by pressing Cmd + S on the keyboard.

  5. Back in Xamarin Studio, enter the following code in the ViewDidLoad method of the ButtonInputViewController class:

    // Create and hook a handler to our button's TouchUpInside event
    // through its outlet
    this.buttonTap.TouchUpInside += delegate(object sender, EventArgs e) {
      this.labelStatus.Text = "Button tapped!";
    };

    This code snippet adds a handler to the button's TouchUpInside event. This event is similar to the Clicked event of a Button control in System.Windows.Forms. It also displays the usage of an anonymous method, which just shows how Xamarin.iOS provides C# features to .NET developers.

That was it! Our app is now ready with functional controls. Compile and run it on the simulator. See the label changing its text when you tap on the button.

How it works...

The Outlet mechanism is basically a way of connecting Interface Builder objects with the code. It is necessary since it is the only way we can access user interface objects that we create with Interface Builder. This is how Interface Builder works, and it is not just a Xamarin.iOS workaround. An Outlet of an object provides a variable of this object so that we will be able to use it in a project. Xamarin.iOS makes a developer's life much easier because when we create Outlets in Interface Builder and connect them, Xamarin Studio works in the background by autogenerating code regarding these Outlets. This is what the ButtonInputViewController.designer.cs file has added to provide us access to the controls we created:

[Outlet]
MonoTouch.UIKit.UILabel labelStatus { get; set; }

[Outlet]
MonoTouch.UIKit.UIButton buttonTap { get; set; }

These are the properties which provide us access to the controls. They are decorated with the Outlet attribute. You can see that the names of the properties are exactly the same names we entered for our Outlets. This is very important since we only have to provide names once for the Outlets, and we do not have to worry about repeating the same naming conventions in different parts of our code. Also, notice that the types of variables of the controls are exactly the same as the types of controls we dragged-and-dropped in our user interface. This information is stored in the XIB file, and Xamarin Studio reads this information accordingly.

There's more...

To remove Outlets, you first have to disconnect them. For example, to remove the buttonTap Outlet, press Ctrl and click on the button. In the panel that will appear, click on the x button next to the Outlet, as shown in the following screenshot. This will disconnect the Outlet.

After this, delete the following code from the Objective-C source file:

@property (retain, nonatomic) IBOutlet UIButton *buttonTap;

When you save the document, the Outlet will be removed from the Xamarin Studio project.

Adding Outlets through code

Another way of adding Outlets is to create a property in your C# class and decorate it with the Outlet attribute:

[Outlet]
UIButton ButtonTap { get;	set; }

When you open the XIB file in Interface Builder, the Outlet will be added to the user interface. However, you would still have to connect it to the corresponding control. The easiest way to do this is to press Ctrl, click on the control the Outlet corresponds to, and click-and-drag from New Referencing Outlet to the File's Owner object on the left of the designer area, as shown in the following screenshot:

When you release the cursor, select the ButtonTap Outlet from the small context menu that will appear.

Note

Note that it is Xamarin Studio that monitors for changes made in Interface Builder, and not the other way around. When making changes in the Xamarin project, make sure to always open the XIB file from Xamarin Studio.

See also

  • The Interface Builder, Creating the UI, and Adding Actions to controls recipes

  • The Adding and customizing views recipe in Chapter 2, User Interface – Views