Her er Danmarks fem bedste CIO’er lige nu:Se de fem nominerede til prisen som Årets CIO 2024

Artikel top billede

(Foto: Computerworld)

Lav apps til Windows 10

Med Universelle Windows Apps kan du lave apps til alle Windows 10-enheder som pc, tablets, smartphones og Xbox. Se her hvordan.

Af Tom Madsen, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Mangt og meget er blevet skrevet om Windows 10, som er kommet ud, når du læser dette. Langt mindre har vi hørt om den nye udviklingsmodel, som også kommer med Windows 10. Windows 10 er blevet lavet til at kunne køre på så at sige alt. Det vil sige, at det er samme styresystem, der vil køre på pc, tablet, Windows Phone og Xbox. For Xbox, gælder det dog kun Xbox One. Sammen med Windows 10 kommer den nye udviklingsmodel, som Microsoft kalder for Universal Windows Apps.

Windows 10: Ét styresystem til det hele... og sådan kommer du i gang med at lave apps til alle enhederne. Windows 10: Ét styresystem til det hele... og sådan kommer du i gang med at lave apps til alle enhederne.

Målet for den nye model er, at man nu kan udvikle en app til Windows 10 og forvente, at den vil køre uden modifikationer på både pc, tablet, Windows Phone 10 og Xbox One. Vi glæder os til, at Windows 10 senere på året bliver rullet ud til de sidste enheder som Windows Phone og Xbox.

Der er naturligvis muligt for en udvikler at tilpasse oplevelsen til den specifikke platform, men den største del af den nødvendige kode vil være den samme på alle platformene. En integreret del af den nye udviklingsmodel er konceptet ’shared app identities’. Det er den del, der gør det muligt for en bruger at købe en app på én platform og bruge den på tværs af de forskellige devices, som brugeren har. Hvis man har udviklet en app, som kommer med In App Purchases, så gælder der det samme for de indkøb, brugeren har lavet, og det samme gælder for eventuelt notifikationer, som appen har. De fungerer også på tværs af platforme i appen. Du kan selvfølgelig godt sige, at det samme har været tilfældet med Windows 8.1 og Windows Phone 8.1.

Det nye for Windows 10 er, at selve operativsystemkernen er den samme på alle platforme. Faktisk, så er der en version af Windows 10, der kører på en Rasberry PI. Der vil være enkelte forskelle på de forskellige platforme, men den grundlæggende del af operativsystemerne på pc, tablet og Windows Phone vil være den samme. Microsoft har delt de enkelte platforme ind i familier og gjort det nemmere for udviklerne at målrette deres apps til de enkelte familier. Hvis f.eks. din app kræver, at der er et kamera installeret på en enhed, jamen så er din app nok mere rettet imod mobiltelefoner og/eller tablets. Så selvom du kan udvikle din app til alle platformene, så er der intet, der forhindrer dig i at målrette den og bruge af de muligheder, der findes på en mobiltelefon, som ikke findes på en pc.

Automatisk tilpasning
En Universal Windows Platform (UWP) app kan komme til at køre på enheder med et utal af opløsninger, dpi og input-muligheder. En UWP-app kan køre på en Xbox med en fjernsynsskærm og på en mobiltelefon med en masse dpi. Windows 10 og udviklingsværktøjet Visual Studio 2015 kommer med masser af værktøjer og kontroltyper designet til at hjælpe dig med at designe dine apps bedst muligt til de forskellige enheder. Nogle kontroltyper kan tilpasse sig til de ændrede forhold fra enhed til enhed. Knapper f.eks. vil automatisk ændre sig. Layoutpaneler og de forskellige kontroltyper, der kommer med Windows 10, hjælper alle sammen med at udvikle en brugerflade, der kan tilpasse sig. Teknikken bag ved denne automatiske tilpasning til enheden kalder Microsoft for Adaptive Scaling. En Windows 10 kontrol finder automatisk ud af, hvad opløsningen er på enheden, og hvilken dpi den har. Kontrollen kan bruges af både mus, pen og en Xbox-controller. Du behøver ikke at tilføje yderligere kode til din app for at få den til at fungere på tværs af enhederne.

Kom i gang med at udvikle apps
Hvad skal du så bruge for at kunne udvikle UWP-apps? Du skal bruge et Windows 10 styresystem. Derudover skal du bruge en version af Visual Studio i 2015-udgaven. Visual Studio kommer i gratis udgaver, som kan bruges til udvikling af UWP-apps, så du behøver ikke at købe en af de store udgaver for at komme hurtigt i gang med UWP- apps. Hvis du kører Windows 7 eller en af Windows 8-udgaverne, så har du haft mulighed for at opgradere gratis til Windows 10. De færdige udviklingsværktøjer til Windows 10 kommer efter denne artikel var færdiggjort, så hvis du ser forskelle imellem de skærmbilleder, jeg viser her, og de skærme der er i den endelige udgave, så er det fordi jeg i skrivende stund stadigvæk bruger den tidligere udgave af Windows 10 udviklingsværktøjerne. Men lad os komme i gang.

På figur 1 kan du se vinduet i Visual Studio 2015, du skal bruge til at lave et nyt projekt. Jeg har allerede installeret udviklingsværktøjerne til Windows 10 udvikling men læg mærke til, at der er en mulighed for at downloade disse værktøjer. Du vil ikke se de andre muligheder på figur 1, før du har gjort det. Vores mål i denne artikel er at lave en Blank App. Når Visual Studio er færdig med at lave det nye projekt, så læg mærke til, at det hele er WPF! Hvis du allerede programmerer på Windows og bruger WPF til det, så er du allerede mere end halvvejs med de ting, du skal kunne for at udvikle UWP-apps.

Figur 1: Du kan stadigvæk udvikle apps til Windows 8 med Visual Studio 2015. Figur 1: Du kan stadigvæk udvikle apps til Windows 8 med Visual Studio 2015.

Alle de ting, som du kender fra WPF, fungerer på samme måde for UWP-apps. Der er naturligvis nye funktioner som layoutpaneler og de nye kontroller, men kernen i disse ting er den samme, som den har været i årevis på WPF. Inden vi begynder at tilføje kode, så lad os lige tage et kig på de nye værktøjer, der kommer til UWP-udvikling i Visual Studio 2015.

Åbn den fil der hedder MainWindow.xaml fra solution explorer. I øverste venstre hjørne er der en dropdownliste med forskellige størrelser på det/de devices, din UWP-app er rettet imod. Det er et af de værktøjer, du kan bruge til at målrette din app til et specific device, og til at se hvordan din app ser ud på de forskellige størrelser (se figur 2). Lige til højre for dropdownlisten finder vi de to knapper, du kan bruge til at ændre dit layout til at være lodret, som på en mobiltelefon eller vandret som på en tablet.

Figur 2: Under udviklingsarbejdet kan du bruge layoutværktøjerne til at udarbejde din brugerflade. Figur 2: Under udviklingsarbejdet kan du bruge layoutværktøjerne til at udarbejde din brugerflade.

Når du skal til at debugge din UWP-app, så kommer Visual Studio 2015 med emulatorer til forskellige opløsninger, og du kan downloade nye emulatorer fra den samme menu, som du kan se på figur 3. I skrivende stund, fra RC-udgaven af Visual Studio 2015, er det kun Windows 10 Phone emulatoren, der kan downloades. Her skal det lige siges, at med Visual Studio 2015 kan du også udvikle til Android-telefoner og tablets. Du kan vælge den funktionalitet til under indstallationen af Visual Studio. Tilbage til UWP-apps.

Figur 3: Visual Studio 2015 kommer med forskellige emulatorer, og du kan downloade flere. Figur 3: Visual Studio 2015 kommer med forskellige emulatorer, og du kan downloade flere.

På figur 3 kan du se, at hvis du allerede har et Windows 10 device, kan du debugge direkte på dette device. Når vi kikker på kontollerne i Toolboxen, så er de fleste af dem let genkendelige fra old school WPF-projekter. Der er nogle nye, specielt til UWP-udvikling, som f.eks. MenuFlyout og FlipView. På figur 4 er listet de mest almindelige kontroller, der kommer med Visual Studio 2015.

Figur 4: Mange af standard WPF-kontrollerne går igen for UWP, men der er kommet flere til. Figur 4: Mange af standard WPF-kontrollerne går igen for UWP, men der er kommet flere til.

Der findes ikke rigtigt nogle tredjeparts UWP-kontroller endnu, men du kan være sikker på, at firmaer som Telerik og DevExpress er på vej med disse. De gængse WFP-kontroller kan bruges, som de plejer i en UWP-app, men du skal være opmærksom på, at nogle af dem kan være meget ’tunge’ i den forstand, at de fylder meget i din app, så det kan tage længere tid for en bruger på en mobiltelefon at downloade din app, hvis du bruger mange af de tunge WPF-kontroller.

Som sagt tidligere, så kan en UWP-app, køre på alle Windows 10 devices fra starten af, men hvad nu hvis din app er målrettet desktopversionen af Windows 10? Jeg har jo nævnt, at du kan målrette din app til et bestemt device, hvordan gør du det? Hvis du højreklikker på References noden i solution explorer og vælger Add Reference, så får du skærmbilledet på figur 5 frem. Her kan du tilføje de udvidelser, der skal til for at tilpasse din app til et device. Læg mærke til, at der er en udvidelse til Internet of Things! Lur mig om der ikke også kommer en udvidelse til HoloLens fra Microsoft.

Figur 5: Hvis du vil målrette din app til en specifik type af device, så skal du tilføje referencer til disse værktøjer. Figur 5: Hvis du vil målrette din app til en specifik type af device, så skal du tilføje referencer til disse værktøjer.



Apps til flere enheder
Lad os nu kigge lidt på selve C# koden i en UWP-app. Forestil dig en situation, hvor du har udviklet en app, der kan køre på tværs af devices. Så den kører glad på både tablets, mobil telefoner og på en pc. På tablets og mobiltelefoner har du tilføjet kode, der kan tilgå kameraet. Hvordan undgår du nu, at din UWP-app fejler, når den kører på en pc, der formentligt ikke har et kamera? På figur 6 er listet nogle linjer kode. Den første linje er en event-handler, der skal køre, når brugeren trykker på kameraknappen på en mobiltelefon. Hvis min UWP-app kører på en pc, så vil den linje få min app til at gå ned, fordi min pc ikke har de biblioteker, der skal til for at kunne eksekvere den linje.

Figur 6: Du skal huske at kode defensivt og tjekke for, om et API er tilstede i din UWP-app. Figur 6: Du skal huske at kode defensivt og tjekke for, om et API er tilstede i din UWP-app.

De næste linjer på figur 6 viser, hvordan det gøres på den rigtige måde. Først laver jeg en variabel, som får værdien sand eller falsk, alt efter om API’et er tilstede. Derefter tjekker jeg, om værdien af min variabel er sand, og hvis den er det, så bliver koden eksekveret. Det, du skal læse ud af dette, er, at der er situationer i UWP-app, som kræver, at du tænker lidt anderledes, end hvis du udvikler en app kun rettet imod en desktop. Fordi UWP-apps kan køre på alle de forskellige platforme og devices, så kræver det, at du skriver din kode defensivt og tjekker for tilstedeværelsen af et API, inden du kalder det. Det betyder også, at du skal sørge for at teste din app på tværs af devices. Både for at tjekke at koden virker som den skal, men også for at kunne validere, at din brugerflade ser ordentlig ud på de forskellige devices.

Hvad så med XAML-koden? Jeg nævnte tidligere, at WFP-kontrollen RelativePanel, er en af de nye kontroller til UWP-apps. På figur 7 kan du se, hvordan RelativePanel er blevet implementeret sammen med en Textbox og nogle knapper. RelativePanel er beregnet til at tilpasse sig forskellige skærmopløsninger og formfaktorer. Det vil sige, at når du har brugt et RelativePanel til at udlægge din brugerflade, så kan du regne med, at de kontroller, som du har inkluderet inden i et RelativePanel, automatisk vil flytte rundt på sig selv på brugerfladen.

Figur 7: RelativePanel vil være en af de vigtigste kontroller for en UWP-app. Figur 7: RelativePanel vil være en af de vigtigste kontroller for en UWP-app.

På figur 8 kan du se, hvordan det ser ud, når jeg debugger XAML-koden. Hvis jeg begynder at taste tekst ind i i tekstboksen, så vil den automatisk udvide sig med den tekst, jeg taster ind. Knapperne vil stadigvæk være lige over hinanden og flytte sig til højre automatisk, når tekst- boksen udvider sig. Den effekt kunne man stadigvæk opnå ved hjælp af et standard WPF-grid, men den automatiske tilpasning til nye formfaktorer og skærmopløsninger ville mangle. Nu har jeg nævnt formfaktorer og skærmopløsninger meget, men de nye WPF-kontroller, der tilpasser sig en enhed og skærmopløsningen, vil også automatisk tilpasse brugerfladen, hvis din app kører i et vindue. Husk på at din UWP-app ikke er tvunget til at eksekvere i fuldskærmsmode, som på Windows 8, men kan køre i et mindre vindue på desktoppen, som vi kender det fra Windows 7 og tidligere.

Figur 8: De to knapper vil automatisk flytte sig afhængig af, hvor meget tekst der bliver tastet ind i boksen. Figur 8: De to knapper vil automatisk flytte sig afhængig af, hvor meget tekst der bliver tastet ind i boksen.


Find eksempler og gå i træningslejr
Fordi Microsoft har et problem med udbredelsen af sit mobiloperativsystem, så er de meget fokuserede på at denne nye UWP-app model skal blive en succes for Windows 10. Derfor har Microsoft under hele udviklingsforløbet sørget for, at der var træning til rådighed for nye udviklere lige så vel som dem, der har udviklet til de gamle Windows-versioner. På Github.com ligger der en masse UWP- eksempler udviklet af Microsoft, der viser, hvordan de enkelte API’er fungerer på de forskellige platforme og devices.

De er alle sammen open source, så du kan klone disse eksempler og eksperimentere med dem, alt det du lyster. Hvad angår træning i Windows 10 for både udviklere og it-professionelle, så har Microsoft frigivet tredages træning i UWP-udvikling på Microsoft Virtual Academy (MVA). Hvis du ikke allerede er registreret der, så gør det nu! På MVA er der træning for både udviklere og it-specialister på alle Microsofts produkter, og det hele er gratis, så der er ingen undskyldning.

Windows 10 kommer senere på året til Windows Phone. Windows 10 kommer senere på året til Windows Phone.

Det her var nødvendigvis en meget hurtig introduktion til UWP-udvikling til Windows 10. Hvis det her har givet dig mod på mere, så kan jeg varmt anbefale den tredages gratis træning, der findes på MVA. Der kommer de hele vejen rundt om UWP, og hvordan du skal pakke og frigive din app til slutbrugerne. Og husk så at UWP-apps kan køre på Xbox. Så har du en idé til et spil til Xbox, så er det bare at gå i gang! Du kan finde yderligere oplysninger og træning i boksen med links nedenfor. God fornøjelse med dine UWP-eksperimenter.

 

Find flere oplysninger om app-udvikling til Windows 10 her

Links:
Microsoft Virtual Academy – www.microsoftvirtualacademy.com

UWP app’s på GitHub - https://github.com/Microsoft/Windows-universal-samples

Getting Started with Windows App’s - https://dev.windows.com/en-us/getstarted