Lekce 7 - Uložení a načtení dat v Xamarin pomocí textového souboru

V minulé lekci kurzu o vývoji multiplatformních mobilních aplikací pomocí technologie Xamarin, Debug Xamarin aplikace na Android zařízení a stylovaní, jsme se věnovali debugování a stylování.

Dnes si vytvoříme aplikaci typu poznámkový blok. Osvojíme si práci s ukládáním a načítáním dat do / z souboru a později i SQLite databáze.

Rozložení prvků

Založíme nový prázdný projekt typu Xamarin.forms, který pojmenujeme např. Poznamky. Než se pustíme do programování, aktualizujeme instalované balíčky. To provedeme tak, že v Solution Exploreru klikneme pravým tlačítkem na řešení (Solution) Poznamky a vybereme možnost Manage NuGet packages for Solution.... Dále otevřeme záložku Updates, zaškrtneme vše a zvolíme Update. Odsouhlasíme licenční podmínky a můžeme začít s programováním.

Otevřeme si soubor MainPage.xaml a z elementu <ContentPage></ContentPage> odebereme následující řádky + celý obsah mezi tagy <StackLayout></StackLayout>:

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

<StackLayout> upravíme do následující podoby:

<StackLayout Margin="10,35,10,10">
        <Label Text="Poznámky"
               HorizontalOptions="Center"
               FontAttributes="Bold" />
        <Editor x:Name="editor"
                Placeholder="Napište poznámku"
                HeightRequest="100" />
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
            <Button Text="Uložit"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Smazat"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
</StackLayout>

XAML kód je jednoduchý a měl by nám všem být jasný z minulé lekce. Ve zkratce jsme vytvořili Label s tučným, vycentrovaným nadpisem "Poznámky", textový editor s výškou 100 jednotek. Ovládací prvek Editor se od prvku Entry liší zejména v tom, že umožňuje psát víceřádkový text. Na konec jsme přidali horizontálně rozložená tlačítka "Uložit" a "Smazat" pomocí kontejneru Grid se dvěma sloupci. Všimněte si, že u tlačítek můžeme události Clicked přiřadit metodu nejen v C# kódu (jako jsme to dělali minule), ale i v XAMLu. Soubor uložíme a přesuneme se do MainPage.xaml.cs.

MainPage.xaml.cs

Jako první můžeme vymazat nepotřebné příkazy using (ty šedivé).

Do těla třídy (ještě nad konstruktor MainPage()) přidáme cestu k souboru, do kterého se budou naše data ukládat nebo se z něj naopak načítat:

string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "poznamky.txt");

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Přidáme si potřebný using system.IO podržením kurzoru na červeně podtrženém místě a následným kliknutím na dropdown u žárovky a výběrem usingu.

Nyní jednoduchou podmínkou zjistíme, zda soubor existuje. Pokud ano, tak načteme uložený text:

if (File.Exists(_fileName))
{
    editor.Text = File.ReadAllText(_fileName);
}

Zbývá nám už jen vytvořit události pro tlačítka. Opět to není nic složitého a jistě kód každý chápe. Pokud ne, doporučuji se nejprve vrátit k základům C#, neboť nejsou součástí tohoto tutoriálu.

void OnSaveButtonClicked(object sender, EventArgs e)
{
    File.WriteAllText(_fileName, editor.Text);
}

void OnDeleteButtonClicked(object sender, EventArgs e)
{
    if (File.Exists(_fileName))
    {
        File.Delete(_fileName);
    }
    editor.Text = string.Empty;
}

Pro kontrolu bude celý kód MainPage.xaml.cs vypadat takto:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Poznamky
{
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "poznamky.txt");

        public MainPage()
        {
            InitializeComponent();

            if (File.Exists(_fileName))
            {
                editor.Text = File.ReadAllText(_fileName);
            }
        }

        void OnSaveButtonClicked(object sender, EventArgs e)
        {
            File.WriteAllText(_fileName, editor.Text);
        }

        void OnDeleteButtonClicked(object sender, EventArgs e)
        {
            if (File.Exists(_fileName))
            {
                File.Delete(_fileName);
            }
            editor.Text = string.Empty;
        }
    }
}

Nezbývá než připojit zařízení nebo použít emulátor a aplikaci otestovat. Měla by vypadat nějak takto:

Jak vidíme, program zatím není moc přínosný. Poznámka se sice uloží do souboru, takže když aplikaci vypneme, vymažeme z paměti a opětovně spustíme, uvidíme opět naši poznámku. Chtělo by to však mít možnost ukládat více poznámek. Aplikaci hned napravíme rozdělením na obrazovky pro výpis všech uložených poznámek, uložení nové a editaci té stávající.

Aplikace s více obrazovkami

Jak jsme si již říkali, budeme tedy muset vytvořit 3 různé obrazovky (stránky) a to:

• pro výpis poznámek
• vytvoření nové
• editaci stávající

Navigace

Aby bylo možné mezi stránkami přepínat, budeme potřebovat navigaci a tedy i nějakou tu logiku. Nespokojíme se tedy již pouze s jednou třídou MainPage. Nejjednodušší způsob, jak se mezi stránkami navigovat, je použít NavigationPage. Ta nám umožňuje procházet stránkami vpřed a vzad podle potřeby. Stránky se ukládají do zásobníku, což znamená, že se uplatňuje Last-in First-out (na poslední navštívenou stránku se vrátíme jako první). Jednotlivé stránky do zásobníku vkládáme pomocí vlastnosti Navigation, kterou obsahuje každá stránka dědící od třídy Page a vždy odkazuje na jeden a ten samý objekt, který se o samotnou navigaci stará.

Komponenta Navigation poskytuje tři základní metody:

• PushAsync() - bere v parametru stránku, kterou vloží do zásobníku a zobrazí ji
• PopAsync() - odstraní aktuální stránku ze zásobníku a zobrazí tu předchozí
• PopToRootAsync() - odstraní všechny stránky ze zásobníku kromě první (hlavní), kterou zobrazí

Tyto metody dále berou jako druhý nepovinný parametr hodnotu typu bool, zda má být přechod na stránku animovaný. K samotnému zásobníku stránek poté můžeme přistupovat pomocí vlastnosti NavigationStack. Všimněte si, že všechny metody mají v názvu slovo Async, to znamená, že jsou asynchronní a tudíž je můžeme volat pomocí klíčových slov async/await.

Jestliže jste se ještě s asynchronním programováním nesetkali, můžete navštívit kurz Paralelní programování a vícevláknové aplikace v C# .NET.

V praxi si NavigationPage ukážeme v příští lekci.

Příprava prostředí

Nejprve si přidáme do projektu novou složku, kterou pojmenujeme Models/. Pravým tlačítkem klikneme v Solution Exploreru na projekt a vybereme Add -> New Folder. Ve složce Models/ hned vytvoříme C# třídu (pravým kliknutím na složku Models/ a zvolením Add -> class). Aby se nám to nepletlo a Visual Studio nekomolilo názvy, budeme již používat angličtinu a nazveme třídu anglicky - Note.cs.

Dále si přidáme 2 stránky obsahu - Notes.xaml a AddNote.xaml. Ty přidáme tak, že klikneme pravým tlačítkem myši na projekt a zvolíme Add -> New Item -> Content Page.

To by bylo pro dnešní lekci vše.

V příští lekci, Práce s textovým souborem v Xamarin - Dokončení bloku, si poznámkovou aplikaci v Xamarin s ukládáním do souboru dokončíme a začneme pracovat na variantě využívající databázi. Pokud se vám něco nedaří a potřebujete kontrolu, celý projekt je ke stažení níže.