2. diel - Tvorba sudoku v Xamarin - Vytvorenie projektu

V dnešnom Xamarin tutoriále si založíme projekt Xamarin Forms v jazyku C#.NET a otestujeme prepojenie aplikácie s mobilným telefónom.

Voľba technológie

Aby sme mohli začať, je potrebné vytvoriť projekt a zvoliť nejakú technológiu. Príslovie hovorí, že "Všetky cesty vedú do Ríma", programátorské príslovie potom hovorí "Mnoho ciest vedie k splneniu zadania".:-)

Pre vývoj aplikácie je možné použiť viacero vývojových prostredí a frameworkov. My použijeme vývojové prostredie Microsoft Visual Studio s rokom vydania 2022. Voľba frameworku padne na Xamarin.Forms.

Voľba spôsobu tvorby kódu

Pri vývoji aplikácií pre mobilné telefóny sa väčšinou používa spôsob, kedy stránky sú v xml/xaml súboroch a logika spracovania v kóde, teda v súboroch typu cs.

Existuje ale aj riešenie, že všetko je urobené v kóde. Tento spôsob nám bude najviac vyhovovať, pretože máme v podstate iba jednu stránku, na ktorej sa nám budú opakovať:

• 81 polí pre čísla,
• dve tlačidlá,
• tri textové polia.

Takto sa nemusíme starať o prepojenie medzi xaml a cs súbormi, čo pri počte 81 položiek by bolo pracné a náchylné k chybám.

Existuje ešte aj mixed-mode, teda časť obrazovky je popísaná v xaml a časť v cs súboroch.

Zadanie aplikácie

V našej jednostránkovej aplikácii implementujeme:

• zobrazenie 81 editovateľných okienok na zadanie Sudoku,
• farebné rozlíšenie 81 poliach pre zadanie a pre riešenie,
• zobrazenie chybovej hlášky v prípade zadania v rozpore so Sudoku pravidlami.

Ďalej do aplikácie vložíme:

• tlačidlo na spustenie riešenia Sudoku,
• tlačidlo pre nové zadanie Sudoku,
• pole na výpočet času dĺžky riešenia Sudoku užívateľom,
• pole pre zobrazenie počtu zadaných riešení užívateľom (n/81),
• pole pre zobrazenie koľko rôznych číslic bolo zadaných užívateľom (n/9).

Pre takéto zadanie aplikácie použijeme prvok Grid z Xamarin Forms. Grid je vlastne mriežka o ľubovoľnej veľkosti, do ktorej môžeme vkladať ďalšie prvky Xamarin Forms, napríklad Button, Label, Entry, atď.

Ak zadáme mriežku s rozmermi 12 x 9, teda dvanásť riadkov a deväť stĺpcov neznamená, že v každom riadku musí byť deväť stĺpcov. Pokojne môžeme mať deväť riadkov s deviatimi stĺpcami, potom dva riadky s jedným stĺpcom a riadok s tromi stĺpcami.

Takže naša aplikácia bude mať:

• Grid s rozmermi 13 x 9,
• v prvých deviatich riadkoch bude deväť stĺpcov pre editačné prvky Entry
• desiaty riadok bude mať jeden stĺpec s tlačidlom Vyrieš typu Button,
• jedenásty riadok bude mať jeden stĺpec s tlačidlom Nové typu Button,
• dvanásty riadok bude mať dva stĺpce pre zobrazovanie počtu zadaných čísel n/81 a počtu použitých číslic n/9,
• trinásty riadok bude zobrazovať čas, za ktorý bola sudoku vyriešená.

Tak poďme na to

Tvorba projektu

Spustíme vývojové prostredie Microsoft Visual Studio 2022.

Potom vykonáme nasledujúce kroky:

• zvolíme Create a new project,
• zvolíme Mobile App (Xamarin.Forms),
• vyberieme cieľový adresár pre uloženie projektu,
• pomenujeme projekt, napríklad SudokuX,
• nakoniec zvolíme Blank.

Visual Studio nám vygeneruje celý projekt s veľkým množstvom súborov. Nás budú zaujímať iba súbory MainPage.xaml a MainPage.xaml.cs.

Súbor MainPage.xaml

Vygenerovaný kód súboru MainPage.xaml vyzerá nasledovne:

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

Súbor MainPage.xaml.cs

Vygenerovaný kód súboru MainPage.xaml.cs potom vyzerá 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();
        }
    }
}

Testovanie

Teraz je veľmi vhodné urobiť prvý test, či nám takto vygenerovaná aplikácia funguje na mobile. K tomuto testu musia byť splnené tieto podmienky:

• mobil musí byť prepnutý do režimu Vývojár,
• mobil musí mať povolený ladenie cez USB,
• USB musí byť prepnuté pre prenos súborov,
• počítač musí byť prepojený s mobilom káblom USB.

Ak máme mobil správne pripojený, zobrazí sa nám vo VS 2022 v hornej lište, kde sa vyberá cieľové zariadenie. Prednastavené cieľové zariadenie je vstavaný emulátor.

Prepnutie cieľového zariadenia z emulátora na náš mobil vykonáme nasledovne:

• stlačíme malú šípku vedľa emulátora,
• v zobrazenom liste vyberieme zobrazený model nášho mobilu s číslom Android verzie,
• zvolíme náš mobil.

Následne sa aplikácia a nahrá do nášho mobilu a zobrazí sa:

V budúcej lekcii, Tvorba sudoku v Xamarin - Základné užívateľské rozhranie , si naprogramujeme základné užívateľské rozhranie, ktoré bude obsahovať mriežku pre hru, údaje o jej priebehu aj potrebné tlačidlá.