Cvičení: Vytvoření aplikace translatoru telefonního čísla
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 jenomContentPage
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 vlastnostx: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ěnnoucount
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
metoduMainPage
do třídy. MetodaOnTranslate
načte telefonní číslo zText
vlastnostiEntry
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. PokudTranslateNumber
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 konecMainPage
třídy. Tato metoda využívá asynchronní operace, takže ji označte jakoasync
: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.