5. diel - Code Behind v VB.NET WPF a dokončenie kalkulačky

V minulom dieli, Návrh formulára pre kalkulačku v VB.NET WPF , sme nakódovali formulár pre jednoduchú kalkulačku.

Dnes do aplikácie pridáme jednoduchú logiku a na konci si vysvetlíme ako WPF vnútri funguje.

Code Behind

Prezentačná časť aplikácie je napísaná v XAML. Ten nám však samozrejme nestačí a preto má každé okno okrem XAML kódu ešte tzv. Code Behind (kód na pozadí), ktorý obsahuje volania logiky aplikácie. Do tohto kódu sa z dizajnérov presunieme pravým kliknutím myši a zvolením možnosti View Code. Alternatívne môžeme používať klávesové skratky CTRL + ALT + 0 (jedná sa o nulu na alfanumerickej klávesnici) pre presun do Code Behind a Shift + F7 na presun do grafického návrhára.

Code Behind nášho formulára vyzerá asi takto (vynechal som menné priestory):

Class MainWindow

End Class

Na pozadí táto trieda dedí od triedy Window a má konštruktor, v ktorom sa volá metóda InitializeCom­ponent.

Pomenovanie kontroliek

Keď chceme s nejakou kontrolkou pracovať z Code Behind, musíme ju priradiť meno. V našom prípade budeme pri výpočte potrebovať čítať z dvoch textbox s číslami, ComboBox s operáciou, písať do TextBlocku s výsledkom a obslúžiť udalosť kliknutí na tlačidlo.

Presunieme sa späť do XAML a týmto kontrolkám priradíme atribút Name s nasledujúce hodnotou pre jednotlivé kontrolky: cislo1TextBox, cislo2TextBox, operaceComboBox, vysledekTextBlock, vypocitejButton. Všimnite si, že mená sme zvolili tak, aby končila názvom kontrolky. Pri väčších formulároch je to oveľa prehľadnejšie. Určite sa vyvarujte názvom ako tlacitko1 a podobne.

Udalosti

WPF sú postavené na udalostiach. My budeme v kalkulačke reagovať na jedinú udalosť, ktorou je kliknutie na tlačidlo. V dizajnéri na tlačidlo poklepeme, budeme presmerovaní na Code Behind, kde sa nám vygeneruje nasledujúce metóda:

Private Sub vypocitejButton_Click(sender As Object, e As RoutedEventArgs) Handles vypocitejButton.Click

End Sub

Metóda sa spustí vo chvíli, keď na tlačidlo používateľ klikne. Využíva sa jednoducho kľúčového slova Handles, s ktorým sme sa už stretli vo Windows Forms. Udalosti môžeme priraďovať a mazať tiež v oknu Properties. Stačí kontrolku označiť a kliknúť na ikonu blesku, čím sa presunieme z vlastností do udalostí. Tlačidlo vedľa nás potom presunie späť na vlastnosti:

Do vygenerované metódy vložme nasledujúci kód:

'Příprava proměnných
Dim cislo1 As Double = cislo1TextBox.Text
Dim cislo2 As Double = cislo2TextBox.Text
Dim operace As String = operaceComboBox.Text
Dim vysledek As Double = 0
'Výpočet
Select Case operace
    Case "+"
        vysledek = cislo1 + cislo2
    Case "-"
        vysledek = cislo1 - cislo2
    Case "*"
        vysledek = cislo1 * cislo2
    Case "/"
        If cislo2 = 0 Then
            MessageBox.Show("Nelze dělit nulou")
            Exit Sub
        End If
        vysledek = cislo1 / cislo2
End Select
vysledekTextBlock.Text = vysledek

Na prvých riadkoch si pripravíme premenné, do ktorých uložíme potrebné hodnoty z kontroliek. K textu v textbox ik vybranej textovej položke ComboBox sa dostaneme cez vlastnosť Text. Vidíme tu, prečo sme kontrolky pomenovávali. V aplikácii nijako neriešime situáciu, kedy užívateľ zadá nezmyselný vstup a program tak spadne na výnimku pri parsovanie tejto hodnoty. Ako sa správne ošetrujú chyby si ukážeme až v ďalších dieloch, môžete sa sem potom vrátiť a validáciu dodať.

Výpočet výsledku by mal byť jasný. Zaujímavá je tu len kontrola, či nedelíme nulou. Ak áno, zobrazíme tzv. MessageBox, čo je okno so správou pre užívateľov, ktoré určite dobre poznáte z iných aplikácií. Slúži nám k tomu rovnomenná statická trieda. MessageBox vyzerá asi takto:

Na konci metódy už len priradíme do vlastnosti Text TextBlocku výsledok.

Môžete si aplikáciu vyskúšať.

WPF pod pokrievkou

Než začneme zas pokročilejšie látku, venujme niekoľko odsekov tomu, ako aplikácia funguje pod pokrievkou. Je to trochu taká teória navyše, ak ste nedočítali tunajšie objektový seriál do konca, asi nebudete všetkému rozumieť, v praktickom vytváranie aplikácií vám to však nebude nijako brániť.

Parciálny trieda

Zamerajme sa ešte raz na triedu MainWindow (teda na Code Behind). Trieda je parciálny. To znamená, že je definovaná vo viacerých súboroch. Tá druhá chýbajúcu časť je skrytá a môžeme do nej prejsť tak, že v Solution Exploreri rozbalíte MainWindow tak, aby ste videli metódu InicializeCom­ponents. Do metódy prejdeme.

Dostali sme sa do pomerne škaredé triedy, ktorú nám Visual Studio samo vygenerovalo s novým oknom. Vidíme tu dve metódy: InitializeComponent () a Connect ().

InitializeComponent () si načíta XAML a zavolá na neho LoadComponent (). Všimnite si nad triedou atribútov zo menného priestoru CodeDom. Tu sú triedy pre generovanie VB kódu za behu aplikácie. Presne to metóda robí, dekóduje XAML a vytvára podľa neho inštancie kontroliek.

Metóda Connect () sprostredkováva ono magické napojenie metód v CodeBehind.

Metóda sprístupňuje jednotlivé kontrolky pod ich názvami, to je realizované tým škaredým Select Case Do tohto súboru nebudeme nikdy nijako zasahovať, je však dôležité, aby sme chápali, ako WPF funguje.

Vytváranie kontroliek za behu aplikácie

Keďže kontrolky sú obyčajné triedy, určite vás napadlo, či ich môžeme na formulár pridávať tak, že vytvoríme ich inštancie v Code Behind namiesto toho, aby sme ich písali do XAML. Áno, ide to. Teoreticky by sme XAML kód nemuseli vôbec používať. Prakticky by sme sa však v návrhu formulárov vôbec nevyznali.

Ukážme si nejakú časť nášho XAML, napr. Grid. Ten vyzeral takto:

<Grid Margin="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="30"/>
    </Grid.RowDefinitions>
</Grid>

V Code Behind by sme rovnaký výsledok dosiahol týmto zápisom:

Dim grid As New Grid()
grid.Margin = DirectCast(TypeDescriptor.GetConverter(GetType(Thickness)).ConvertFromInvariantString("0"), Thickness)
Dim columnDefinition As New ColumnDefinition()
columnDefinition.Width = DirectCast(TypeDescriptor.GetConverter(GetType(GridLength)).ConvertFromInvariantString("*"), GridLength)
grid.ColumnDefinitions.Add(columnDefinition)
Dim columnDefinition2 As New ColumnDefinition()
columnDefinition2.Width = DirectCast(TypeDescriptor.GetConverter(GetType(GridLength)).ConvertFromInvariantString("50"), GridLength)
grid.ColumnDefinitions.Add(columnDefinition2)
Dim columnDefinition3 As New ColumnDefinition()
columnDefinition3.Width = DirectCast(TypeDescriptor.GetConverter(GetType(GridLength)).ConvertFromInvariantString("*"), GridLength)
grid.ColumnDefinitions.Add(columnDefinition3)
Dim columnDefinition4 As New ColumnDefinition()
columnDefinition4.Width = DirectCast(TypeDescriptor.GetConverter(GetType(GridLength)).ConvertFromInvariantString("50"), GridLength)
grid.ColumnDefinitions.Add(columnDefinition4)
Dim columnDefinition5 As New ColumnDefinition()
columnDefinition5.Width = DirectCast(TypeDescriptor.GetConverter(GetType(GridLength)).ConvertFromInvariantString("*"), GridLength)
grid.ColumnDefinitions.Add(columnDefinition5)
Dim rowDefinition As New RowDefinition()
rowDefinition.Height = DirectCast(TypeDescriptor.GetConverter(GetType(GridLength)).ConvertFromInvariantString("*"), GridLength)
grid.RowDefinitions.Add(rowDefinition)
Dim rowDefinition2 As New RowDefinition()
rowDefinition2.Height = DirectCast(TypeDescriptor.GetConverter(GetType(GridLength)).ConvertFromInvariantString("30"), GridLength)
grid.RowDefinitions.Add(rowDefinition2)

Asi uznáte, že to nie je práve prehľadné a to sa jedná o malú časť formulára. Takže práve preto sa používa XAML, kde je stromová štruktúra prehľadná a jednoduchá.

Niekedy však môže byť naopak užitočné vytvoriť nejakú časť aplikácie alebo niečo donastaviť až v Code Behind miesto v XAML. Účelom tejto časti seriálu bolo, aby ste vedeli, že to ide.

Nabudúce, PRIPOMIENKOVÉ narodenín v VB .NET WPF - Návrh okien , začneme tvoriť robustnejšie aplikáciu, pôjde o pripomienkovej narodenín priateľov. Zdrojové kódy kalkulačky sú ako vždy na stiahnutie nižšie.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.