Miten luoda ja käyttää jaettuja resursseja .NET MAUI:ssa?

.NET MAUI (Multi-platform App UI) on Microsoftin alusta, joka mahdollistaa sovellusten kehittämisen useille eri alustoille samalla koodipohjalla. Yksi tärkeimmistä konsepteista käyttöliittymien rakentamisessa on resurssien, kuten väri- ja tyylimääritysten, jakaminen sovelluksen eri osien kesken. Tässä luvussa käsitellään, kuinka luodaan ja hyödynnetään jaettuja resursseja .NET MAUI:ssa ja miten niitä voidaan muuttaa dynaamisesti sovelluksen käytön aikana.

Resurssien määrittäminen ja käyttäminen on keskeinen osa käyttöliittymän joustavuutta ja ulkoasun mukauttamista. Resurssit voivat olla esimerkiksi värejä, tyylejä, kuvia tai muita graafisia elementtejä, jotka määritellään keskitetysti ja joita voidaan käyttää monessa eri paikassa sovelluksessa. Tämä helpottaa sovelluksen ylläpitoa ja ulkoasun yhtenäisyyttä, koska muutokset voidaan tehdä vain yhdestä paikasta, eikä niitä tarvitse toistaa jokaiseen komponenttiin erikseen.

Ensimmäinen askel on määritellä tapahtumankäsittelijä, joka käynnistyy, kun sivu ladataan. Tällöin voidaan asettaa kullekin painikkeelle halutut ominaisuudet, kuten fonttikoko ja leveys. Tämän jälkeen lisätään tapahtumankäsittelijä jokaiselle painikkeelle, joka reagoi painikkeen napsautukseen ja päivittää tekstiä, joka näkyy käyttäjälle.

csharp
Copy code
private void ContentPage_Loaded(object sender, EventArgs e) {   

   foreach (Button button in gridCalculator.Children.OfType<Button>()) {     
       button.FontSize = 24;     
       button.WidthRequest = 54;     
       button.HeightRequest = 54;     
       button.Clicked += Button_Clicked;   
   } 
}
private void Button_Clicked(object sender, EventArgs e) {     
   string operationChars = "+-/X=";     
   Button button = (Button)sender;     
   if (operationChars.Contains(button.Text)) {         
       Output.Text = string.Empty;     
   } else {         
       Output.Text += button.Text;     
   } 
}

Seuraavaksi siirrymme resurssien määrittelyyn ja jakamiseen. Yksi .NET MAUI:n vahvuuksista on kyky jakaa resursseja usean käyttöliittymäkomponentin välillä. Resurssien määrittäminen voi tapahtua eri tasoilla: sovellustasolla, sivutason resursseina tai jopa yksittäisten kontrollien tasolla. Yleisimmin resurssit määritellään sovellustasolla, jolloin ne ovat käytettävissä kaikilla sovelluksen sivuilla.

xml
Copy code
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms">
   <LinearGradientBrush x:Key="rainbow" StartPoint="0,0" EndPoint="1,1">

       <GradientStop Color="Red" Offset="0" />

       <GradientStop Color="Yellow" Offset="0.5" />

       <GradientStop Color="Blue" Offset="1" />

   </LinearGradientBrush>
</ResourceDictionary>

Tämä resurssi voidaan liittää sovellukseen App.xaml-tiedostoon, jotta se on käytettävissä kaikilla sivuilla:

xml
Copy code
<Application.Resources>
   <ResourceDictionary>
       <ResourceDictionary.MergedDictionaries>
           <ResourceDictionary Source="Styles/Northwind.xaml"/>
       </ResourceDictionary.MergedDictionaries>
   </ResourceDictionary>
</Application.Resources>

Kun resurssi on määritelty ja liitetty sovellukseen, voimme käyttää sitä esimerkiksi asettamalla sivun taustaväriksi luodun gradientin:

xml
Copy code
<ContentPage BackgroundColor="{StaticResource rainbow}">

   ...
</ContentPage>

Tässä käytetty StaticResource tarkoittaa, että resurssi luetaan sovelluksen käynnistyshetkellä ja sen jälkeen se ei enää päivity, vaikka sen arvo muuttuisikin. Jos tarvitsemme dynaamisempaa käyttäytymistä, voimme käyttää DynamicResource-määrettä, joka mahdollistaa resurssin päivittymisen ajon aikana.

Resurssien muuttaminen ajon aikana on tärkeä osa sovelluksen dynaamisuutta. Esimerkiksi, jos haluamme, että käyttäjä voi muuttaa käyttöliittymän värejä tai muita asetuksia, voimme luoda asetussivun, joka muuttaa resurssien arvoja dynaamisesti.

Esimerkissä määritellään kaksi väriresurssia, joita käytetään tekstien ja taustavärien määrittämiseen:

xml
Copy code
<Color x:Key="LabelTextColor">#000000</Color>

<Color x:Key="ButtonBackgroundColor">#CCCCCC</Color>

Nämä värit voidaan asettaa suoraan käyttöliittymän komponentteihin:

xml
Copy code
<Label TextColor="{DynamicResource LabelTextColor}" />

<Button BackgroundColor="{DynamicResource ButtonBackgroundColor}" />

Tällä tavoin voidaan luoda sovellus, joka mukautuu käyttäjän toiveiden mukaan, ja tarjoaa enemmän interaktiivisia mahdollisuuksia.

Kun työskentelet jaettujen resurssien parissa, on tärkeää muistaa, että resursseja käytettäessä pitää varmistaa niiden tehokas hallinta ja välimuistin käyttö. Liiallinen resurssien määrittäminen ja käyttämättömien resurssien jättäminen voi hidastaa sovelluksen suorituskykyä. Siksi on tärkeää tehdä resurssien hallinnasta mahdollisimman kevyttä ja dynaamista, jotta sovelluksen käyttäjäkokemus säilyy sujuvana.

Miten luoda .NET MAUI + Blazor -sovellus ja web-palvelu kategorioille

Ensimmäinen askel on sovelluksen rakenteen luominen ja sen juurikäyttöliittymän määrittäminen. Aloita luomalla uusi .NET MAUI -projekti, jossa määritellään AppShell.xaml käyttöliittymän ja navigoinnin hallintaan. AppShell.xaml tiedostossa määritellään navigaatiokomponentit, kuten ShellContent elementit, jotka vastaavat pääsivujen, kuten etusivun, kategorioiden, työntekijöiden ja tilausten, näyttämisestä sovelluksessa. Tämä rakenne mahdollistaa sovelluksen selkeän ja joustavan navigoinnin eri osien välillä. Muista myös tarkistaa, että määritetty navigointi on oikein kirjoitettu, koska reitityksen nimet ovat iso–pienikirjaimille herkkiä.

Aivan kuten työskentely Androidilla, voit testata sovellusta käyttämällä Android-emulaattoria ja sen jälkeen myös Windows-ympäristössä, muuttamalla Framework-asetusta ja suorittamalla sovellusta erikseen kummassakin ympäristössä. Tämä mahdollistaa sovelluksen käytön ja toiminnan tarkastelun molemmilla alustoilla ilman erillistä koodaamista eri ympäristöjä varten.

Seuraavaksi luomme yksinkertaisen API:n, joka huolehtii kategorioiden ja tuotteiden tietojen käsittelystä. Tämä web-palvelu toimii osana .NET MAUI + Blazor -sovellusta. Web-palvelun luominen alkaa uuden ASP.NET Core Web API -projektin lisäämisellä ratkaisuun. Tässä vaiheessa valitaan minimialustat (minimal APIs), joka on kevyempi tapa määritellä API:n päälogiikka verrattuna perinteisiin controller-pohjaisiin ratkaisuihin. Kun API-projekti on luotu, se liitetään tietokantayhteyteen, joka on määritelty aiemmin SQL Server -projektiisi.

API:n käynnistämisessä määritellään launchSettings.json-tiedostossa palvelimen osoitteet sekä HTTPS- että HTTP-portit, jolloin palvelu on saavutettavissa molemmista protokollista. Tämän jälkeen määritellään ohjelmointikoodi, jossa suoritetaan tarvittavat muutokset kuten HTTPS-ohjauksen poistaminen kehitysympäristössä ja määritellään yksinkertaiset minimal API -reittipisteet, jotka käsittelevät kategoria- ja tuotedataoperaatioita. Tämän API:n avulla voidaan integroida ja käyttää kategorioiden tietoja Blazor-komponenteissa ja yhdistää ne MAUI-sovellukseen.

Tämän lisäksi on tärkeää ymmärtää, että .NET MAUI + Blazor -sovelluksessa yhdistyy kaksi erilaista teknologiaa: natiivisovellusten kehittäminen .NET MAUI:lla ja web-komponenttien luominen Blazorilla. Tämä yhdistelmä voi tuoda etuja, kuten laajemman käyttöliittymän joustavuuden ja mahdollisuuden hyödyntää jo olemassa olevaa web-osaamista myös natiivisovelluksessa. Yksi tärkeimmistä asioista on huolehtia siitä, että sovelluksen käyttöliittymän ja API:n rakenne on selkeä ja hyvin dokumentoitu, jotta eri tiimit voivat työskennellä tehokkaasti yhdessä.

Tämä menetelmä ei vain paranna kehityksen nopeutta, vaan myös mahdollistaa laajentamisen ja sovelluksen ylläpidon pitkällä aikavälillä, sillä se yhdistää sekä natiivisovellukset että web-komponentit yhteen projektirakenteeseen.

Miten integroitu .NET MAUI -sovelluksia Blazoriin ja natiivialustoihin

.NET MAUI on monialustainen kehys, joka tukee eri alustoja kuten iOS, Android, macOS ja Windows. Yksi keskeisistä käsitteistä tämän kehitysympäristön kanssa työskennellessä on Model-View-ViewModel (MVVM) -suunnittelumalli. Tässä käsitellään myös .NET MAUI -sovellusten integrointia Blazoriin sekä muiden natiivien alustojen kanssa, ottaen huomioon myös muut teknologiat kuten Swagger ja API:n kehitys.

API:n määrittäminen ja käyttö on olennaista .NET MAUI -sovelluksissa, kun halutaan yhdistää sovellus palvelimeen. Esimerkiksi kategoriatiedot voidaan noutaa REST API:sta ja näyttää ne käyttöliittymässä. Tällöin huomioitavaa on, että kehitysympäristössä voidaan käyttää Swagger-työkaluja, jotka luovat automaattisesti dokumentaation, joka mahdollistaa API:n kokeilemisen suoraan selaimessa.

Kun API on määritetty ja palvelin käynnistetty, voidaan käsitellä myös turvallisuuskysymyksiä, kuten epävarmojen yhteyksien salliminen. Tämä on erityisen tärkeää mobiililaitteiden kanssa, joissa voidaan kohdata ongelmia HTTP-yhteyksien ja suojattujen yhteyksien välillä. Esimerkiksi iOS- ja Android-alustoilla on sääntöjä, jotka estävät epävarmojen yhteyksien käytön, mutta ne voidaan avata säätämällä sovelluksen asetuksia, kuten Info.plist -tiedostossa iOS:lla ja network_security_config.xml Androidilla.

• Model: Tietomalli, joka edustaa sovelluksen ydindataa, kuten kategoriaa tai tuotetta.

• ViewModel: Liiketoimintalogiikka ja esityslogiikka, joka sisältää esimerkiksi validointisäännöt ja tiedot, jotka näyttävät sovelluksessa käyttäjälle.

• View: Käyttöliittymän rakenne, joka voi olla esimerkiksi mobiililaitteessa tai työpöydällä oleva näkymä. Tämä näkyy käyttäjälle ja voi olla esimerkiksi luettelo, jossa on kategoria- tai tuotetietoja.

MVVM-mallin implementointi voi olla haastavaa, koska se vaatii paljon toistuvaa koodia, erityisesti jos tarvitaan ominaisuuksia kuten INotifyPropertyChanged-rajapinnan toteutusta. Tämä rajapinta ilmoittaa käyttöliittymälle, että tietoja on muutettu ja että näkymä tulisi päivittää. Onneksi tämä prosessi voidaan yksinkertaistaa käyttämällä .NET MAUI:n MVVM-työkalupaketteja, kuten CommunityToolkit.Mvvm, joka mahdollistaa automaattisen koodin luomisen ja helpottaa näin kehitystä.

Esimerkiksi määrittelemällä luokassa kenttä ja merkitsemällä sen [ObservableProperty]-attribuutilla, voidaan helposti luoda seurantaa tarvitsevia ominaisuuksia, ilman että täytyy kirjoittaa manuaalisesti paljon koodia. Jos luokka ei voi periä ObservableObject-luokkaa, voidaan käyttää myös INotifyPropertyChanged-attribuuttia, mutta tämä ei ole yhtä tehokasta ja voi johtaa koodin monimutkaistumiseen.

Tietynlaisten luokkien ja ominaisuuksien määrittäminen automaattisesti säästää aikaa ja vähentää virheitä, mikä tekee kehityksestä joustavampaa ja tehokkaampaa. Tämä lisää myös sovelluksen ylläpidettävyyttä pitkällä aikavälillä, koska koodi pysyy modulaarisena ja helposti testattavana.

Tärkeää on myös, että verkkopalvelun ja sovelluksen välinen kommunikaatio on mahdollisimman sujuvaa. API:n ja sovelluksen välinen yhteys ei saisi olla haavoittuva, ja siksi on tärkeää ottaa käyttöön turvatoimet, kuten HTTPS, sekä suojata yhteydet salaamalla tiedonsiirto ja varmistamalla, että sovellus pystyy käsittelemään mahdolliset virhetilanteet tehokkaasti.