Lekce 2 - Tvorba sudoku v Xamarin - Vytvoření projektu

V minulé lekci, Tvorba sudoku v Xamarin - Úvod, jsme si rozebrali problematiku SUDOKU a seznámili se s hrou a pravidly tvorby.

V dnešním Xamarin tutoriálu si založíme projekt Xamarin Forms v jazyce C#.NET a otestujeme propojení aplikace s mobilním telefonem.

Volba technologie

Abychom mohli začít, je třeba vytvořit projekt a zvolit nějakou technologii. Přísloví říká, že "Všechny cesty vedou do Říma", programátorské přísloví pak říká "Mnoho cest vede ke splnění zadání".

Pro vývoj aplikace je možné použít vícero vývojových prostředí a frameworků. My použijeme vývojové prostředí Microsoft Visual Studio s rokem vydání 2022. Volba frameworku padne na Xamarin.Forms.

Volba způsobu tvorby kódu

Při vývoji aplikací pro mobilní telefony se většinou používá způsob, kdy stránky jsou v xml/xaml souborech a logika zpracování v kódu, tedy v souborech typu cs.

Existuje ale i řešení, že vše je uděláno v kódu. Tento způsob nám bude nejvíce vyhovovat, protože máme v podstatě pouze jednu stránku, na které se nám budou opakovat:

• 81 polí pro čísla,
• dvě tlačítka,
• tři textová pole.

Takto se nemusíme starat o propojení mezi xaml a cs soubory, což při počtu 81 položek by bylo pracné a náchylné k chybám.

Existuje ještě i mixed-mode, tedy část obrazovky je popsána v xaml a část v cs souborech. 

Zadání aplikace

V naší jednostránkové aplikaci implementujeme:

• zobrazení 81 editovatelných okének pro zadání Sudoku,
• barevné rozlišení 81 polích pro zadání a pro řešení,
• zobrazení chybové hlášky v případě zadání v rozporu se Sudoku pravidly.

Dále do aplikace vložíme:

• tlačítko ke spuštění řešení Sudoku,
• tlačítko pro nové zadání Sudoku,
• pole pro výpočet času délky řešení Sudoku uživatelem,
• pole pro zobrazení počtu zadaných řešení uživatelem (n/81),
• pole pro zobrazení kolik různých číslic bylo zadáno uživatelem (n/9).

Pro takovéto zadání aplikace použijeme prvek Grid z Xamarin Forms. Grid je vlastně mřížka o libovolné velikosti, do které můžeme vkládat další prvky Xamarin Forms, například Button, Label, Entry, atd.

Zadáme-li mřížku o rozměrech 12 x 9, tedy dvanáct řádků a devět sloupců neznamená, že v každém řádku musí být devět sloupců. Klidně můžeme mít devět řádků s devíti sloupci, poté dva řádky s jedním sloupcem a řádek se třemi sloupci.

Takže naše aplikace bude mít:

• Grid o rozměrech 13 x 9,
• v prvních devíti řádcích bude devět sloupců pro editační prvky Entry,
• desátý řádek bude mít jeden sloupec s tlačítkem Vyřeš typu Button,
• jedenáctý řádek bude mít jeden sloupec s tlačítkem Nové typu Button,
• dvanáctý řádek bude mít dva sloupce pro zobrazování počtu zadaných čísel n/81 a počtu použitých číslic n/9,
• třináctý řádek bude zobrazovat čas, za který byla sudoku vyřešena.

Tak pojďme na to

Tvorba projektu

Spustíme vývojové prostředí Microsoft Visual Studio 2022.

Poté provedeme následující kroky:

• zvolíme Create a new project,
• zvolíme Mobile App (Xamarin.Forms),
• vybereme cílový adresář pro uložení projektu,
• pojmenujeme projekt, například SudokuX,
• nakonec zvolíme Create.

Visual Studio nám vygeneruje celý projekt s velkým množstvím souborů. Nás budou zajímat pouze soubory MainPage.xaml a MainPage.xaml.cs.

Soubor MainPage.xaml

Vygenerovaný kód souboru MainPage.xaml vypadá následovně:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SudokuX.MainPage">

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
        <Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0"/>
        <Label FontSize="16" Padding="30,24,30,0">
            <Label.FormattedText>
                <FormattedString>
                    <FormattedString.Spans>
                        <Span Text="Learn more at "/>
                        <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/>
                    </FormattedString.Spans>
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>

</ContentPage>

Soubor MainPage.xaml.cs

Vygenerovaný kód souboru MainPage.xaml.cs pak vypadá takto:

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

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

Testování

Nyní je velmi vhodné provést první test, zda nám takto vygenerovaná aplikace funguje na mobilu. K tomuto testu musí být splněny tyto podmínky:

• mobil musí být přepnut do režimu Vývojář,
• mobil musí mít povolen ladění přes USB,
• USB musí být přepnuto pro přenos souborů,
• počítač musí být propojen s mobilem kabelem USB.

Máme-li mobil správně připojen, zobrazí se nám ve VS 2022 v horní liště, kde se vybírá cílové zařízení. Přednastavené cílové zařízení je vestavěný emulátor.

Přepnutí cílového zařízení z emulátoru na náš mobil provedeme následovně:

• stiskneme malou šipku vedle emulátoru,
• v zobrazeném listu vybereme zobrazený model našeho mobilu s číslem Android verze,
• zvolíme náš mobil.

Následně se aplikace a nahraje do našeho mobilu a zobrazí se:

V příští lekci, Tvorba sudoku v Xamarin - Základní uživatelské rozhraní, si naprogramujeme základní uživatelské rozhraní, které bude obsahovat mřížku pro hru, údaje o jejím průběhu i potřebná tlačítka.

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.