Cvičení: Vytvoření aplikace translatoru telefonního čísla

10 min

V tomto cvičení vytvoříte uživatelské rozhraní pro aplikaci telefonního dialeru a implementujete logiku za tímto uživatelským rozhraním.

Vytvoříte uživatelské rozhraní, které využívá možnosti uživatelského rozhraní .NET MAUI (Multi-platform Application User Interface) a balíček .NET MAUI Essentials pro vytáčení telefonu.

Aplikace umožňuje uživateli zadat text do vstupního pole a přeložit tento text na číselné číslice. Používá písmena, která se zobrazují na klávesnici telefonu jako základ pro překlad. Například písmena cab překládají na 222 , protože číslice 2 má všechna tři písmena a, b a c.

Pokračujte v řešení Phoneword, které jste vytvořili v předchozím cvičení.

Přidání nového zdrojového souboru C# do aplikace

Pokud ho ještě nemáte otevřené, otevřete řešení Phoneword v sadě Visual Studio.
V okně Průzkumník řešení klikněte pravým tlačítkem myši na projekt Phoneword, vyberte Přidat a vyberte Třídu.
V dialogovém okně Přidat novou položku pojmenujte soubor třídy PhonewordTranslator.cs a pak vyberte Přidat.

Přidání logiky překladu

Obsah souboru třídy nahraďte následujícím kódem a soubor uložte. Statická metoda ToNumber ve PhonewordTranslator třídě přeloží číslo z alfanumerického textu do běžného číselného telefonního čísla.

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;
    }
}

Vytvoření uživatelského rozhraní

Otevřete soubor MainPage.xaml v projektu Phoneword.

ScrollView Odeberte ovládací prvek a jeho obsah a nechte jenom ContentPage ovládací prvek:

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

</ContentPage>

VerticalStackLayout Přidejte ovládací prvek se svislou orientací a mezerami 15 jednotek a odsazením 20 jednotek do ContentPage:
```
<ContentPage ... >
    <VerticalStackLayout Spacing="15" Padding="20">

    </VerticalStackLayout>
</ContentPage>
```

Label Přidejte ovládací prvek do StackLayoutu:

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

Entry Pod popisek přidejte ovládací prvek do StackLayoutu. Ovládací Entry prvek poskytuje textové pole, do kterého může uživatel zadávat data. V tomto kódu vlastnost x:Name dává ovládacímu prvku název. Na tento ovládací prvek odkazujete v kódu aplikace později:
```
<ContentPage ... >
    <VerticalStackLayout ...>
        <Label .../>
        <Entry x:Name = "PhoneNumberText"
               Text = "1-555-NETMAUI" />
    </VerticalStackLayout>
</ContentPage>
```

Přidejte dva Button ovládací prvky do VerticalStackLayout za ovládací prvek Entry. Obě tlačítka momentálně nic neudělají a druhá je zpočátku zakázaná. Do dalšího úkolu přidáte kód pro zpracování Clicked události pro tato dvě tlačítka:

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

Odpovědět na tlačítko TranslateButton klepněte na

V okně Průzkumník řešení rozbalte položku MainPage.xaml a otevřete soubor MainPage.xaml.cs kódu.

MainPage Ve třídě odeberte proměnnou count a metoduOnCounterClicked. Třída by měla vypadat takto:

namespace Phoneword;

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

Za konstruktor přidejte proměnnou translatedNumber řetězce a následující OnTranslate metodu MainPage do třídy. Metoda OnTranslate načte telefonní číslo z Text vlastnosti Entry ovládacího prvku a předá ho statické ToNumber metodě PhonewordTranslator třídy, kterou jste vytvořili dříve.

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:
        }
    }
}

Poznámka:

V dalším kroku vyplníte chybějící bity toDO tohoto kódu.

OnTranslate V metodě přidejte kód, který změní Text vlastnost tlačítka Volání a připojí úspěšně přeložené telefonní číslo. Můžete použít hodnotu, kterou jste uložili v přeloženém poliNumber. Také povolte a zakažte tlačítko na základě úspěšného překladu. Pokud TranslateNumber například vrátíte hodnotu null, zakažte tlačítko, ale pokud bylo úspěšné, povolte ho.

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";
    }
}

Vytvoření metody události pro tlačítko CallButton

Přidejte metodu OnCall zpracování událostí na konec MainPage třídy. Tato metoda využívá asynchronní operace, takže ji označte jako async:
```
public partial class MainPage : ContentPage
{

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

    }
}
```
OnCall V metodě požádejte uživatele pomocí metody Page.DisplayAlert, jestli chce vytočit číslo.

Parametry, které mají DisplayAlert být nadpisem, zprávou a dvěma řetězci použitými pro text tlačítka Přijmout a Zrušit. Vrátí logickou hodnotu označující, jestli bylo tlačítko Přijmout stisknuto, aby se dialogové okno zavřelo.
```
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
    }
}
```

Testování aplikace

Na panelu nástrojů sady Visual Studio vyberte profil počítače s Windows a spusťte ladění.
Klepnutím na tlačítko Přeložit převedete výchozí text na platné telefonní číslo. Titulek na tlačítku Hovor by se měl změnit na Hovor 1-555-6386284:
Klepněte na tlačítko Zavolat . Ověřte, že se zobrazí výzva s výzvou k potvrzení operace. Vyberte možnost Ne.
Vraťte se do sady Visual Studio a zastavte ladění.

Vytočení telefonního čísla

V souboru MainPage.xaml.cs kódu upravte metodu OnCall a nahraďte komentář TODO následujícími try/catch bloky:
```
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");
        }
    }
}
```
Třída PhoneDialer v oboru názvů Microsoft.Maui.ApplicationModel.Communication poskytuje abstrakci funkce vytáčení telefonu (a další) pro platformy Windows, Android, iOS (a iPadOS) a macOS. Statická metoda Open se pokusí použít telefonní dialer k volání čísla zadaného jako parametr.

Následující kroky ukazují, jak aktualizovat manifest aplikace pro Android tak, aby android mohl používat telefonní vytáčení. Aplikace pro Windows, iOS a MacCatalyst se řídí stejným obecným principem, s tím rozdílem, že v manifestu určíte jinou funkci v závislosti na operačním systému.
V okně Průzkumník řešení rozbalte složku Platformy, rozbalte složku Android, klikněte pravým tlačítkem na soubor AndroidManifest.xml a vyberte Otevřít pomocí>automatického výběru editoru (XML). Vyberte OK.

Za existující obsah tohoto uzlu přidejte následující fragment kódu XML do uzlu manifestu .

<?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>

Uložte soubor.
Na panelu nástrojů sady Visual Studio vyberte profil Android Emulators/Pixel 3a – API 30 (nebo podobný) a spusťte ladění.
Když se aplikace zobrazí v emulátoru (může to trvat několik minut), zadejte telefonní číslo (nebo přijměte výchozí) vyberte Přeložit a pak vyberte Volat.
V upozornění vytočit číslo vyberte Ano. Ověřte, že se zobrazí telefonní číselník pro Android s číslem, které jste zadali v aplikaci.
Vraťte se do sady Visual Studio a zastavte ladění.

Shrnutí

V tomto cvičení jste do aplikace přidali vlastní uživatelské rozhraní pomocí stránek a zobrazení. Přidali jste také podporu pro umístění volání pomocí rozhraní API specifických pro platformu, která jsou dostupná v Androidu.

Pokračovat