www.apress.com

18-4-23

Xamarin Development for the Mac - Text Input

By Dawid Borycki

Collecting user input from the wearable app is more challenging than doing so from the iOS app because watches have much smaller screens and the user typically wants to interact quickly. For this reason, WatchKit provides a dedicated text input controller that you use for gathering user input on watchOS. As shown in Figure 1, this controller appears as a modal window and contains a predefined list of suggested values. Additionally, depending on the controller configuration, you can collect user input as emoji, voice command, or scribble.

New Content Item

Figure 1. Example appearance of the text input controller

Listing 1.  Collecting User Input with TextInputController

partial void ButtonInput_Activated()
{

    var  colors  =  new  string[]
    {

        "Red", "Green", "Blue", "Orange", "Purple"
    };

    PresentTextInputController(colors, WKTextInputMode.AllowEmoji,        DisplayUserResponse);
}

To show how to use the text input controller, I modify the first scene defined under the HelloWatchKit. Watch app. Namely, I add a separator, a button, and a label. I set their horizontal and vertical alignment  to center. Then, I change the name of the button and label to ButtonInput and LabelAnswer, respectively. Finally, I double-click the button. This creates a default event handler, ButtonInput_Activated, which I define as shown in Listing 1. In the ButtonInput_Activated event handler, I first create an array of strings, which serves as the list of predefined inputs or suggestions in the text input controller. Then, I show this controller to the user by invoking the PresentTextInputController method, which is implemented in the WKInterfaceController class and accepts three arguments:

  • suggestions – an array of strings with predefined items displayed in the modal window
  • inputMode – specifies the type of input described by one of the values declared in the WKTextInputMode enumeration:
    • AllowEmojiAnimated and AllowEmoji – indicate that either animated or non- animated emojis are allowed, respectively
    • Plain – indicates that emojis are not allowed
  • completion – an action that is invoked after the user dismisses the controller

In Listing 1, I allow non-animated emojis and use a DisplayUserResponse action as the completion handler. As Listing 2 shows, the DisplayUserResponse method displays the first item retrieved from the text input controller and displays it in the label of name LabelAnswer. The text input controller returns a collection of items selected by the user as an instance of the NSArray object, which is then provided to the completion handler.

Listing 2. Presenting an Item Chosen by the User

private void DisplayUserResponse(NSArray result)
{

    var  answer  =  "No  answer";
if (result != null)
{

    if (result.Count > 0)
{   

        answer     =     result.GetItem<NSObject>(0).ToString();
    }
}

LabelAnswer.SetText(answer);
}

After re-running the app, you can press the button to activate the text input controller. It will look as previously shown in Figure 2. Try to tap one of the suggested values (colors) or emoji. You will see that the text input controller is dismissed and the selected value is displayed in the bottom label (Figure 2).

New Content Item

Figure 2. Displaying user input gathered with text input controller

About the Author:

Dawid Borycki is a software engineer, biomedical researcher, and an expert in several Microsoft developer technologies. He has resolved a broad range of software development challenges for device prototypes (mainly medical equipment), embedded device interfacing, and desktop and mobile programming. Dawid regularly speaks at international developers conferences and has published, cited, and presented on numerous developer topics.This article is excerpted from his book Beginning Xamarin Development for the Mac (December 2017).

Want more? Pick up Dawid's book, Beginning Xamarin Development for the Mac, now available on Apress.com.