Övning: Skapa översättningsappen för telefonnummer

10 minuter

I den här övningen skapar du användargränssnittet för telefonuppringningsappen och implementerar logiken bakom det här användargränssnittet.

Du skapar ett användargränssnitt som utnyttjar UI-funktionerna i .NET MAUI (Multi-Platform Application User Interface) och .NET MAUI Essentials-paketet för att ringa telefonen.

Appen låter användaren skriva text i ett indatafält och översätter texten till numeriska siffror. Den använder bokstäverna som visas på en telefonknappsats som grund för översättning. Bokstäverna cab översätter till exempel till 222 eftersom siffran 2 har alla tre bokstäverna a, b och c.

Du fortsätter med phoneword-lösningen som du skapade i föregående övning.

Lägga till en ny C#-källfil i appen

Öppna phoneword-lösningen i Visual Studio om du inte redan har den öppen.
I fönstret Solution Explorer högerklickar du på Phoneword-projektet , väljer Lägg till och väljer Klass.
I dialogrutan Lägg till nytt objekt namnger du klassfilen PhonewordTranslator.cs och väljer sedan Lägg till.

Lägg till översättningslogik

Ersätt innehållet i klassfilen med följande kod och spara filen. Den statiska metoden ToNumber i PhonewordTranslator klassen översätter talet från alfanumerisk text till ett vanligt numeriskt telefonnummer.

using System.Text;

namespace Core;

public static class PhonewordTranslator
{
    public static string ToNumber(string raw)
    {
        if (string.IsNullOrWhiteSpace(raw))
            return null;

        raw = raw.ToUpperInvariant();

        var newNumber = new StringBuilder();
        foreach (var c in raw)
        {
            if (" -0123456789".Contains(c))
                newNumber.Append(c);
            else
            {
                var result = TranslateToNumber(c);
                if (result != null)
                    newNumber.Append(result);
                // Bad character?
                else
                    return null;
            }
        }
        return newNumber.ToString();
    }

    static bool Contains(this string keyString, char c)
    {
        return keyString.IndexOf(c) >= 0;
    }

    static readonly string[] digits = {
        "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"
    };

    static int? TranslateToNumber(char c)
    {
        for (int i = 0; i < digits.Length; i++)
        {
            if (digits[i].Contains(c))
                return 2 + i;
        }
        return null;
    }
}

Skapa användargränssnittet

Öppna filen MainPage.xaml i Phoneword-projektet.

ScrollView Ta bort kontrollen och dess innehåll och lämna bara ContentPage kontrollen:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Phoneword.MainPage">

</ContentPage>

Lägg till en VerticalStackLayout kontroll med lodrät orientering och ett avstånd på 15 enheter och utfyllnad av 20 enheter till ContentPage:
```
<ContentPage ... >
    <VerticalStackLayout Spacing="15" Padding="20">

    </VerticalStackLayout>
</ContentPage>
```

Lägg till en Label kontroll i StackLayout:

<ContentPage ... >
    <VerticalStackLayout ...>
        <Label Text = "Enter a Phoneword"
               FontSize ="20"/>
    </VerticalStackLayout>
</ContentPage>

Lägg till en Entry kontroll i StackLayout under etiketten. En Entry kontroll innehåller en textruta där användaren kan ange data. I den här koden ger egenskapen x:Name kontrollen ett namn. Du refererar till den här kontrollen i koden för appen senare:
```
<ContentPage ... >
    <VerticalStackLayout ...>
        <Label .../>
        <Entry x:Name = "PhoneNumberText"
               Text = "1-555-NETMAUI" />
    </VerticalStackLayout>
</ContentPage>
```

Lägg till två Button kontroller i VerticalStackLayout efter kontrollen Entry. Båda knapparna gör för närvarande ingenting, och den andra är inaktiverad från början. Du lägger till koden för att hantera Clicked händelsen för dessa två knappar i nästa uppgift:

<ContentPage ... >
    <VerticalStackLayout ...>
        <Label .../>
        <Entry ... />
        <Button x:Name = "TranslateButton"
                Text = "Translate"
                Clicked = "OnTranslate"/>
        <Button x:Name = "CallButton"
                Text = "Call"
                IsEnabled = "False"
                Clicked = "OnCall"/>
    </VerticalStackLayout>
</ContentPage>

Svara på knappen TranslateButton

I Solution Explorer-fönstret expanderar du posten MainPage.xaml och öppnar filen MainPage.xaml.cs code-behind.

MainPage Ta bort variabeln count och OnCounterClicked metoden i klassen. Klassen bör se ut så här:

namespace Phoneword;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

translatedNumber Lägg till strängvariabeln och följande OnTranslate metod i MainPage klassen efter konstruktorn. Metoden OnTranslate hämtar telefonnumret från Text kontrollens Entry egenskap och skickar det till den statiska ToNumber metoden för klassen PhonewordTranslator som du skapade tidigare.

public partial class MainPage : ContentPage
{
    ...
    string translatedNumber;

    private void OnTranslate(object sender, EventArgs e)
    {
        string enteredNumber = PhoneNumberText.Text;
        translatedNumber = Core.PhonewordTranslator.ToNumber(enteredNumber);

        if (!string.IsNullOrEmpty(translatedNumber))
        {
            // TODO:
        }
        else
        {
            // TODO:
        }
    }
}

Kommentar

Du fyller i de saknade TODO-bitarna i den här koden i nästa steg.

OnTranslate I metoden lägger du till kod för att ändra Text egenskapen för knappen Samtal för att lägga till det översatta telefonnumret. Du kan använda det värde som du lagrade i fältet translatedNumber. Aktivera och inaktivera dessutom knappen baserat på den lyckade översättningen. Om TranslateNumber du till exempel returnerar null inaktiverar du knappen, men om den lyckades aktiverar du den.

private void OnTranslate(object sender, EventArgs e)
{
    string enteredNumber = PhoneNumberText.Text;
    translatedNumber = Core.PhonewordTranslator.ToNumber(enteredNumber);

    if (!string.IsNullOrEmpty(translatedNumber))
    {
        CallButton.IsEnabled = true;
        CallButton.Text = "Call " + translatedNumber;
    }
    else
    {
        CallButton.IsEnabled = false;
        CallButton.Text = "Call";
    }
}

Skapa händelsemetoden för knappen CallButton

OnCall Lägg till händelsehanteringsmetoden i slutet av MainPage klassen. Den här metoden använder asynkrona åtgärder, så markera den som async:
```
public partial class MainPage : ContentPage
{

    ...
    async void OnCall(object sender, System.EventArgs e)
    {

    }
}
```
OnCall I metoden uppmanar du användaren att med hjälp av metoden Page.DisplayAlert fråga om de vill ringa numret.

Parametrarna som ska DisplayAlert vara en rubrik, ett meddelande och två strängar som används för knapptexten Acceptera och Avbryt. Den returnerar ett booleskt värde som anger om knappen Acceptera trycktes på för att stänga dialogrutan.
```
async void OnCall(object sender, System.EventArgs e)
{
    if (await this.DisplayAlert(
        "Dial a Number",
        "Would you like to call " + translatedNumber + "?",
        "Yes",
        "No"))
    {
        // TODO: dial the phone
    }
}
```

Testa programmet

I Visual Studio-verktygsfältet väljer du Windows Machine-profilen och börjar felsöka.
Tryck på knappen Översätt för att konvertera standardtexten till ett giltigt telefonnummer. Bildtexten på knappen Samtal ska ändras till Ring 1-555-6386284:
Tryck på knappen Samtal . Kontrollera att en fråga visas där du uppmanas att bekräfta åtgärden. Välj Nej.
Gå tillbaka till Visual Studio och sluta felsöka.

Ring upp telefonnumret

I filen MainPage.xaml.cs code-behind redigerar du Metoden OnCall och ersätter TODO-kommentaren med följande try/catch block:
```
async void OnCall(object sender, System.EventArgs e)
{
    if (await this.DisplayAlert(
        "Dial a Number",
        "Would you like to call " + translatedNumber + "?",
        "Yes",
        "No"))
    {
        try
        {
            if (PhoneDialer.Default.IsSupported)
                PhoneDialer.Default.Open(translatedNumber);
        }
        catch (ArgumentNullException)
        {
            await DisplayAlert("Unable to dial", "Phone number was not valid.", "OK");
        }
        catch (Exception)
        {
            // Other error has occurred.
            await DisplayAlert("Unable to dial", "Phone dialing failed.", "OK");
        }
    }
}
```
Klassen PhoneDialer i namnområdet Microsoft.Maui.ApplicationModel.Communication ger en abstraktion av telefonuppringningsfunktionerna (och andra) för plattformarna Windows, Android, iOS (och iPadOS) och macOS. Metoden Static Open försöker använda telefonuppringningen för att anropa det nummer som anges som parameter.

Följande steg visar hur du uppdaterar Android-programmanifestet så att Android kan använda telefonuppringningen. Program i Windows, iOS och MacCatalyst följer samma allmänna princip, förutom att du anger en annan funktion i manifestet beroende på operativsystemet.
I solution explorer-fönstret expanderar du mappen Plattformar, expanderar Android-mappen, högerklickar på filen AndroidManifest.xml och väljer Öppna med>XML (Automatic Editor Selector). Välj OK.

Lägg till följande XML-kodfragment i manifestnoden efter det befintliga innehållet för den här noden.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <queries>
        <intent>
            <action android:name="android.intent.action.DIAL" />
            <data android:scheme="tel"/>
        </intent>
    </queries>
</manifest>

Spara filen.
I Visual Studio-verktygsfältet väljer du profilen Android Emulators/Pixel 3a – API 30 (eller liknande) och börjar felsöka.
När appen visas i emulatorn (det kan ta några minuter) anger du ett telefonnummer (eller accepterar standardinställningen) väljer Översätt och väljer sedan Ring upp.
I aviseringen Ring upp ett nummer väljer du Ja. Kontrollera att Android-telefonuppringaren visas med det nummer som du angav i appen.
Gå tillbaka till Visual Studio och sluta felsöka.

Sammanfattning

I den här övningen har du lagt till ett anpassat användargränssnitt i ditt program med hjälp av sidor och vyer. Du har också lagt till stöd för att ringa ett anrop med hjälp av plattformsspecifika API:er som är tillgängliga i Android.