Gyakorlat: A telefonszám-fordító alkalmazás létrehozása

  • 10 perc

Ebben a gyakorlatban összeállítja a telefonos tárcsázó alkalmazás felhasználói felületét, és implementálja a felhasználói felület mögötti logikát.

Olyan felhasználói felületet fog létrehozni, amely kihasználja a .NET MAUI és a .NET MAUI Essentials csomag felhasználói felületi képességeit a telefon tárcsázásához.

Az alkalmazás lehetővé teszi, hogy a felhasználó szöveget írjon be egy beviteli mezőbe, és ezt a szöveget numerikus számjegyekre fordítja. A fordítás alapjaként a telefonbillentyűzeten megjelenő betűket fogja használni. A levélfülke például 222-etjelent, mivel a 2. számjegy mind a három a, b és c betűvel rendelkezik.

Az előző gyakorlatban létrehozott Telefon word megoldást fogja használni.

Új C#-forrásfájl hozzáadása az alkalmazáshoz

  1. Nyissa meg a Telefon word megoldást a Visual Studióban, ha még nem nyitotta meg.

  2. A Megoldáskezelő ablakban kattintson a jobb gombbal a Telefon word projektre, válassza a Hozzáadás, majd az Osztály lehetőséget.

  3. Az Új elem hozzáadása párbeszédpanelen nevezze el az osztályfájlt Telefon wordTranslator.cs, majd válassza a Hozzáadás lehetőséget.

    A screenshot of the Add new item dialog box. The user has named the class file PhonewordTranslator.cs

A fordítási logika hozzáadása

Cserélje le az osztályfájl tartalmát a következő kódra, és mentse a fájlt. Az osztály statikus metódusa ToNumberPhonewordTranslator a számot alfanumerikus szövegből normál numerikus telefonszámmá fordítja.

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

A felhasználói felület létrehozása

  1. Nyissa meg a MainPage.xaml fájlt a Telefon word projektben.

  2. Távolítsa el a vezérlőt ScrollView és annak tartalmát, és hagyja csak a vezérlőt ContentPage :

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

</ContentPage>

  3. Adjon hozzá egy VerticalStackLayout függőleges tájolású és 15 egységből álló térközt tartalmazó vezérlőt, és 20 egység kitöltésével a ContentPage-be:

    <ContentPage ... >
    <VerticalStackLayout Spacing="15" Padding="20">

    </VerticalStackLayout>
</ContentPage>

  4. Label Vezérlőelem hozzáadása a StackLayouthoz:

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

  5. Adjon hozzá egy vezérlőt Entry a StackLayouthoz a címke alatt. A Entry vezérlők egy szövegmezőt biztosítanak, amelybe a felhasználó adatokat írhat be. Ebben a kódban a tulajdonság x:Name nevet ad a vezérlőnek. Erre a vezérlőre később hivatkozni fog az alkalmazás kódjában:

    <ContentPage ... >
    <VerticalStackLayout ...>
        <Label .../>
        <Entry x:Name = "PhoneNumberText"
               Text = "1-555-NETMAUI" />
    </VerticalStackLayout>
</ContentPage>

  6. Adjon hozzá két Button vezérlőt a VerticalStackLayout elemhez a Bejegyzés vezérlőelem után. Mindkét gomb jelenleg nem tesz semmit, a második pedig kezdetben le van tiltva. A következő feladatban a következő két gomb eseményének kezelésére Clicked szolgáló kódot fogja hozzáadni:

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

Válasz a TranslateButton gombra koppintva

  1. Az Megoldáskezelő ablakban bontsa ki a MainPage.xaml bejegyzést, és nyissa meg a MainPage.xaml.cs kód mögötti fájlt.

  2. Az osztályban MainPage távolítsa el a változót count és a metódust OnCounterClicked . Az osztálynak így kell kinéznie:

    namespace Phoneword;

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

  3. Adja hozzá a sztringváltozót translatedNumber és a következő OnTranslate metódust az MainPage osztályhoz a konstruktor után. A OnTranslate metódus lekéri a telefonszámot a TextEntry vezérlő tulajdonságából, és átadja a korábban létrehozott osztály statikus ToNumber metódusának PhonewordTranslator .

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

    Megjegyzés:

    A kód hiányzó TODO-bitjei a következő lépésben lesznek kitöltve.

  4. OnTranslate A metódusban adjon hozzá kódot a Text Hívás gomb tulajdonságának módosításához, hogy a sikeres fordításkor a telefonszámot is tartalmazza. A translatedNumber mezőben tárolt értéket használhatja. Emellett engedélyezze és tiltsa le a gombot a sikeres fordítás alapján. Ha például null értéket TranslateNumber ad vissza, tiltsa le a gombot, de ha sikeres volt, engedélyezze.

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

A CallButton gomb eseménymetódusának létrehozása

  1. Adja hozzá az OnCall eseménykezelési módszert az MainPage osztály végéhez. Ez a módszer aszinkron műveleteket használ, ezért jelölje meg a következőként async:

    public partial class MainPage : ContentPage
{

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

    }
}

  2. A metódusban OnCall kérje meg a felhasználót a Page.DisplayAlert metódussal, hogy megkérdezze, szeretné-e tárcsázni a számot.

    A paraméterek DisplayAlert egy cím, egy üzenet és két sztring, amelyeket az Elfogadás és a Mégse gomb szövegéhez használnak. Egy logikai értéket ad vissza, amely jelzi, hogy az Elfogadás gomb lenyomva lett-e a párbeszédpanel bezárásához.

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

Az alkalmazás tesztelése

  1. A Visual Studio eszköztárán válassza ki a Windows Machine-profilt , és kezdje el a hibakeresést.

  2. Koppintson a Fordítás gombra az alapértelmezett szöveg érvényes telefonszámmá alakításához. A Hívás gomb képaláírás az 1-555-6386284-os telefonszámra kell váltania:

    A screenshot of the Phoneword UI. The user has translated the text to a valid phone number.

  3. Koppintson a Hívás gombra. Ellenőrizze, hogy megjelenik-e egy üzenet, amely a művelet megerősítését kéri. Válassza a Nem lehetőséget.

    A screenshot of the PhoneWord user interface's Dial a Number prompt.

  4. Térjen vissza a Visual Studióba, és állítsa le a hibakeresést.

Tárcsázza a telefonszámot

  1. A MainPage.xaml.cs kód mögötti fájlban szerkessze az OnCall metódust, és cserélje le a TODO megjegyzést a következő try/catch blokkokra:

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

    A Microsoft.Maui.ApplicationModel.Communication névtér Telefon Dialer osztálya absztrakciót biztosít a Windows, Android, iOS (és iPadOS) telefonok tárcsázási funkcióinak (és egyéb funkcióinak) és a macOS-platformoknak. A statikus Open metódus a tárcsázó segítségével próbálja meg meghívni a paraméterként megadott számot.

    Az alábbi lépések bemutatják, hogyan frissítheti az Android-alkalmazásjegyzéket, hogy az Android használhassa a tárcsázót. A Windows, az iOS és a MacCatalyst alkalmazások ugyanazt az általános elvet követik, azzal a különbséggel, hogy a jegyzékben más operációsrendszer-függő képességet kell megadni.

  2. A Megoldáskezelő ablakban bontsa ki a Platformok mappát, bontsa ki az Android mappát, kattintson a jobb gombbal az AndroidManifest.xml fájlra, és válassza a Megnyitás automatikus szerkesztőválasztóval>(XML) lehetőséget. Válassza az OK lehetőséget.

  3. Adja hozzá a következő XML-kódrészletet a jegyzékcsomóponton belül, a csomópont meglévő tartalma után.

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

  4. Mentse a fájlt.

  5. A Visual Studio eszköztárán válassza ki az Android Emulators/Pixel 3a – API 30 (vagy hasonló) profilt, és kezdje el a hibakeresést.

  6. Amikor az alkalmazás megjelenik az emulátorban (ez eltarthat néhány percig), adjon meg egy telefonszámot (vagy fogadja el az alapértelmezettet) válassza a Fordítás lehetőséget, majd válassza a Hívás lehetőséget.

  7. A Szám tárcsázása riasztásban válassza az Igen lehetőséget. Ellenőrizze, hogy megjelenik-e az Android-telefon tárcsázó az alkalmazásban megadott számmal.

    The Android phone dialer containing the number provided by the app.

  8. Térjen vissza a Visual Studióba, és állítsa le a hibakeresést.

Összesítés

Ebben a gyakorlatban egy egyéni felhasználói felületet adott hozzá az alkalmazáshoz oldalak és nézetek használatával. Emellett az Androidban elérhető platformspecifikus API-k használatával támogatást is adott a hívások indításához.