Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij slevovou akci až 30 % zdarma při nákupu e-learningu - Více informací.
discount 30 + hiring

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

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 Blank.

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:


 

Předchozí článek
Tvorba sudoku v Xamarin - Úvod
Všechny články v sekci
Xamarin aplikace Sudoku v C# .NET
Článek pro vás napsal Daniel Martinko
Avatar
Uživatelské hodnocení:
1 hlasů
Aktivity

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!