Lekce 5 - 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 projekt Poznamky a vybereme možnost Manage NuGet packages. Dále otevřeme záložku Installed, 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 a horizontálně rozložená tlačítka "Uložit" a "Smazat". 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é).

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

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

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í

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.

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.