Introduksjon til applikasjonsutvikling for Windows Phone

Introduksjon til applikasjonsutvikling for Windows Phone Skrevet av Atle Nes Avdeling for informatikk og e-læring Høgskolen i Sør-Trøndelag Nettbasert undervisning fra http://itfag.hist.no/ Om Windows Phone Windows Phone (http://www.windowsphone.com/) er et operativsystem for mobiltelefoner utviklet av Microsoft (http://www.microsoft.com/). Tidligere hadde Microsoft et operativsystem som het Windows Mobile som var laget for mobiltelefoner og som brukte pekeredskap. Dette må ikke forveksles og er inkompatibelt med Windows Phone. Sammenlignet med de andre store plattformene for mobile operativsystemer; Android (http://www.android.com/) og ios (http://www.apple.com/iphone/ios/), er Windows Phone nyest og ble lansert så sent som i 2010. Andre generasjon av Windows Phone kom i 2012 og heter Windows Phone 8. Vi kommer til å forholde oss til denne versjonen heretter. Windows Phone 8 tilbyr blant annet: Første mobile operativsystem med Windows NT operativsystemkjerne (samme som vi finner i Windows 8) Støtte for flere skjermstørrelser enn tidligere: WVGA 800x480 15:9 (standard), WXGA 1280x768 15:9, 720p 1280x720 16:9 Støtte for flerkjerneprosessorer med inntil 64 kjerner! Deling av innhold og mikrobetalinger med NFC (Near Field Communication) Lagring av kredittinformasjon og lojalitetskort med Wallet Bakoverkompatibilitet med Windows Phone 7.x Støtte for ekstern lagring på SD-kort (Secure Digital) Integrasjon av VOIP (Voice Over Internet Protocol) i operativsystemkjernen Nokia Maps erstatter Bing Maps som standard kartapplikasjon Nokia Drive med stemmestyrt navigasjon og mulighet til å lagre kart lokalt 128-bit kryptering med BitLocker og Secure Boot Internet Explorer 10 nettleser Bedre multitasking Kids Corner kan brukes til å begrense tilgangen på applikasjoner Innebygget støtte for å ta skjermbilder Redesignet startskjerm 1

Om Metro-grensesnittet Med lanseringen av Windows Phone ble det også utviklet et nytt design med kodenavnet Modern Style UI (også kalt Metro) som vi skal bli kjent med etter hvert. Metro-designet består blant annet av en startskjerm med såkalte levende fliser (Live Tiles). Hver flis representerer en applikasjon, en webside, en kontakt, et medieelement eller lignende. I denne leksjonen skal vi se på hva som må til for å lage vår første applikasjon eller en app om du vil (som er det samme som et program). Flisene på startskjermen er ordnet i et rutemønster og er levende i den forstand at de kan ha animasjoner med innhold styrt av applikasjonene. Animasjonen på en flis kan f.eks. inneholde sanntidsinformasjon om været der du er akkurat nå. I tillegg til å ha mulighet til å velge plassering på en flisene er det mulig å endre både farger og størrelsene på flisene. Man kan velge mellom liten og stor (og kjempestor avhengig av om applikasjonen støtter det). På denne måten står hver enkelt bruker temmelig fritt til å sette opp og utforme sin egen personlige startskjerm. Figur 1. Startskjermen til Windows Phone 8 Et lignende Metro-grensesnitt med levende fliser finner vi også igjen på Windows 8, som er Microsoft sitt nyeste operativsystem for litt større personlige datamaskiner. Om mobiltelefoner (håndsett) Foreløpig lager ikke Microsoft noen mobiltelefoner selv, men det finnes derimot en rekke maskinvareprodusenter som produserer slike. De viktigste selskapene er Nokia (www.nokia.com/), Samsung (http://www.samsung.com/) og HTC (http://www.htc.com/). Figur 2. HTC 8X (venstre), Nokia Lumia 920 (midten), Samsung ATIV S (høyre) 2

Det er fullt mulig å utvikle applikasjoner uten håndsett. Vi benytter oss da av en emulator som kan simulere en virkelig telefon og gjør at vi får opp grensesnittet på en kunstig mobiltelefon på datamaskinen i stedet. Dette gir selvfølgelig ikke helt samme mulighet til å teste ut alle funksjonene som på en reell mobiltelefon, men er ofte godt nok i utviklingssammenheng. Vi skal komme tilbake til hvordan dette fungerer i praksis litt senere. Hva trenger vi for å komme i gang? Utgangspunktet for å programmere applikasjoner for Windows Phone er Windows Phone Dev Center (http://dev.windowsphone.com/). Dette er en nettside for utviklere hvor vi blant annet kan finne lenke til Windows Phone SDK. Vi kan tenke på en SDK (Software Development Kit) som en slags verktøykasse som inneholder det man trenger for å drive programvareutvikling mot et bestemt system. Rundt omkring på nettet finnes det mange ulike SDK-er for ulike systemer, og hvis vi ønsker å lage programmer for en av disse må vi laste ned og installere SDK-en til systemet på datamaskinen vår. En SDK vil inneholde de nødvendige programvarebibliotekene og utviklingsverktøyene som trengs. Windows Phone SDK inneholder også emulatoren som vi snakket om i forrige avsnitt. På nettsiden til Windows Phone Dev Center vil du finne to versjoner av SDK-et: Windows Phone SDK 8.0 lar deg utvikle applikasjoner for mobiltelefoner med Windows Phone 8 og enheter med Windows Phone 7.5. Windows Phone SDK 7.1 lar deg utvikle applikasjoner for mobiltelefoner med Windows Phone 7.5 og enheter med Windows Phone 7.0. Vi kommer til å bruke siste versjon SDK 8.0 som støtter utvikling av applikasjoner for de nyeste mobiltelefonene med Windows Phone 8. Dersom du mot formodning har behov for å utvikle for mobiltelefoner med Windows Phone 7.0 eller har maskinvare som kreves for SDK 8.0 må du velge SDK 7.1. Utviklingsprosessen vil være omtrent tilsvarende, men du vil da ikke kunne utvikle applikasjoner for Windows Phone 8. I første omgang skal vi ikke laste ned noe, bare gå inn og se hva som trengs av maskinvare og programvare for å ta i bruk de ulike SDK-ene: Windows Phone SDK 8.0 Windows Phone SDK 7.1 Operativsystem Windows 8 (64-bit, alle utgaver unntatt RT) Windows Vista med SP2 og Windows 7 (32- og 64-bit, alle utgaver unntatt Starter Edition) CPU 64-bit Ledig diskplass 6.5 GB 4 GB Minne 4 GB 3 GB Krav til utviklingsmiljø Visual Studio 2012 Visual Studio 2010 SP1 Krav for å kjøre emulator Windows 8 Pro eller Enterprise Edition, samt en prosessor som støtter SLAT (Intel Core i3/i5/i7) Grafikkort som takler DirectX10 Vi ser at et av kravene også sier noe om hvilket utviklingsmiljø som er støttet. For SDK 8.0 følger Visual Studio 2012 Express med i pakken, men det går også an å bruke Visual Studio 2012 3

Professional, Premium eller Ultimate. Disse følger ikke med SDK-et, men krever egen installasjon i som gjøres i forkant og at man har lisens. Legg merke til at HiST (Høgskolen i Sør-Trøndelag) tilbyr studentlisenser både for Windows 8 og Visual Studio 2012 Ultimate dersom du trenger dette i faget. Om utviklingsmiljøet Visual Studio Du kjenner kanskje til Visual Studio fra før? Dette er Microsoft sitt IDE (Integrated Development Environment) for å utvikle programvare for.net-plattformen. Utviklere kan bruke Visual Studio til å lage programmer for Windows, såkalte Windows Forms, websider og mobil programvare. Det er i så måte et utviklingsverktøy som strekker seg langt utenfor det vi har behov for her. Hvis du brukt Visual Studio til å lage programmer for Windows tidligere er dette god erfaring du kan ta med videre når du skal lage Windows Phone applikasjoner! De viktigste komponentene i Visual Studio er: En teksteditor som vi kan skrive koden vår i En grafisk editor som vi kan bruke til å tegne opp utseendet En kompilator som oversetter koden vår til maskinlesbar form En debugger som vi kan bruke til feilsøking av koden Utviklingsmiljøet er det programmet som vi faktisk bruker for å lage alle applikasjonene våre. Dette må installeres på den datamaskinen som du skal bruke til selve programmeringen. Vi har valgt å bruke Visual Studio 2012 Ultimate i våre eksempler. Ultimate inneholder ingen av de begrensningene som finnes i Express, men krever hele 10 GB med ledig diskplass (i tillegg til SDK-en). Du må selv vurdere om du har behov for å installere hele denne pakken eller om du klarer deg med Express (som følger med SDK). Hvis du har nok diskplass anbefaler vi at du først installerer Visual Studio 2012 Ultimate og deretter installerer SDK 8.0. 4

Installasjonen kan ta lang tid, men hvis alt har gått bra vil du til slutt kunne starte programmet og få opp startsiden til Visual Studio 2012 som ser omtrent slik ut: Figur 3. Startsiden til Visual Studio 2012 Ultimate Som en kuriositet kan vi legge merke til at Metro-grensesnittet har gjort sitt inntog også her! Om ulike språk og.net-rammeverket Applikasjonsutvikling for Windows Phone er basert på.net-rammeverket, og vi kan velge mellom flere ulike programmeringsspråk. På Windows Phone 7.x er det mulig å programmere enten i Visual Basic eller C#. For Windows Phone 8 er det i tillegg mulig å programmere i C++. Alle disse tre programmeringsspråkene bygger på.net-rammeverket. Det betyr at språket Tilbyr bruk av funksjonalitet fra det samme.net-klassebiblioteket Er CLS-kompatibelt (Common Language Specification) som betyr at det kompileres til et felles språk som heter MSIL (Microsoft Intermediate Language). MSIL er maskinuavhengig og uansett valgt språk vil det felles språket dermed bli likt ved kompilering. Bruker CLR (Common Language Runtime) som blant annet eksekverer MSIL-koden ved kjøring. Dette utføres ved hjelp av en JIT-kompiler (Just In Time). 5

Figur 4. Oversikt over.net-rammeverket Hvilket språk du velger kan være avhengig av hvilket programmeringsspråk du har programmert før. En overveldende majoritet av applikasjonene vi finner i Windows Phone Marketplace og kodeeksempler på nettet er skrevet i C#. Vi har derfor valgt å programmere C# i våre eksempler. Dersom du trives bedre med Visual Basic må du gjerne bruke det i stedet. Om programmering i C# C# er et objektorientert programmeringsspråk lansert av Microsoft i 2000. Hvis man har programmert Java eller C++ før vil man kunne kjenne seg igjen i syntaksen til C#. Vi antar at grunnleggende syntaks om C# er kjent: Variabler, konstanter, datatyper Implisitt og eksplisitt konvertering (casting) Betingelser (conditions); If-setninger, Switch-Case Løkker (loops); While-løkker, Do-While, For-løkker, Foreach-løkker Hopp (jumps); Labels og Goto, Break, Continue Unntakshåndtering (exceptions); Try-Catch-Finally En- og flerdimensjonale matriser (arrays) Hendelser (events) Objektorientert programmering; Klasser, Egenskaper, Metoder, Konstruktører Det vil bli gjort tilgjengelig bonusleksjoner i C#-programmering, som du kan lese på dersom du trenger dette i faget. Hello World Vi er nå klar for å lage vår aller første applikasjon for Windows Phone 8. Det er en god tradisjon når vi begynner med et nytt programmeringsspråk eller et nytt SDK å starte med å lage et lite program som skriver ut teksten «Hello World» til skjermen. Dette er vanligvis noe av det enkleste vi kan få til. I Visual Studio 2012 velger vi File > New > Project (eller Ctrl-Shift-N) for å lage et nytt tomt prosjekt. 6

Figur 5. Dialogboksen New Project Når du får opp dialogboksen for New Project oppretter du et nytt prosjekt ved å 1. Velge Visual C# > Windows Phone i venstre meny 2. Velge Windows Phone App i oversikten 3. Skrive inn et navn på prosjektet, f.eks. HelloWorld, ved å fylle ut tekstfeltet «Name». 4. Klikke på knappen OK Det vil da opprettes et nytt prosjekt med navnet HelloWorld. Hvis du vil endre plassering av prosjektfilene dine kan du gjøre dette ved å endre «Location» før du klikker på knappen OK. Hvis ikke vil disse havne på standard plassering: C:\Users\BRUKERNAVN\Documents\Visual Studio 2012\Projects Du vil da få opp en ny dialogboks New Windows Phone Application. Her må du ta stilling til om du skal utvikle applikasjoner for Windows Phone 7.x eller Windows Phone 8. Velg Windows Phone OS 8.0 og klikk på knappen OK. Figur 6. Dialogboksen New Windows Phone Application 7

Figur 7. Applikasjonen HelloWorld for Windows Phone 8 i Visual Studio 2012 Du har nå fått opprettet alle prosjektfilene i standardmappe eller egendefinert mappe. Det anbefales at du ikke går inn i mappestrukturen og begynner å endre på noe der. Bruk Visual Studio 2012 til å gjøre alle endringer. Vi ser at vinduet til Visual Studio 2012 er inndelt i forskjellige deler. De viktigste delene er Menylinjen (øverst) MainPage.xaml - Grafisk layout (venstre side) og XAML-kode (høyre side) for applikasjonen Solution Explorer gir en oversikt over prosjektfilene Properties brukes til å endre egenskapene til komponentene Error List viser kompileringsfeil XAML (extensible Application Markup Language) er et XML-basert språk laget av Microsoft. Det er veldig mye brukt sammen med.net-rammeverket for å definere grafiske elementer, datakoblinger, hendelser og andre egenskaper. I forhold til CLR (som vi snakket om tidligere) er XAML-elementene direkte koblet til CLR-objekter og XAML-attributter direkte koblet til CLR-egenskaper og hendelser knyttet til disse objektene. 8

La oss starte med å analysere XAML-koden i filen MainPage.xaml. Denne opprettes automatisk når man lager et nytt prosjekt. <phone:phoneapplicationpage x:class="helloworld.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone" xmlns:shell="clr-namespace:microsoft.phone.shell;assembly=microsoft.phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:systemtray.isvisible="true">  <Grid x:name="layoutroot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>   <StackPanel x:name="titlepanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel>  <Grid x:name="contentpanel" Grid.Row="1" Margin="12,0,12,0"> </Grid>   </Grid> </phone:phoneapplicationpage> Det er ikke meningen at du skal forstå all denne koden på første forsøk. Du ser kanskje at det tidlig i koden defineres en struktur (Grid) med 2 rader. Den første raden brukes til tittelen på siden og den andre brukes for innholdet på siden. 9

Litt lenger ned finner du en StackPanel som har to TextBlock inni seg. Den første inneholder tittelen på selve applikasjonen, og den neste inneholder navnet på siden.  <StackPanel x:name="titlepanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> Hvis du går litt videre finner du en annen Grid plassert litt lenger ned. Dette er ingenting annet enn selve innholdet på siden. Du kan plassere hvilket som helst innhold her.  <Grid x:name="contentpanel" Grid.Row="1" Margin="12,0,12,0"> </Grid> La oss starte å leke litt med denne koden. La oss endre navn på applikasjonen og tittel på siden. Gå til TitlePanel og endre XAML-koden slik:  <StackPanel x:name="titlepanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="Hello World App" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> <TextBlock Text="Hovedside" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> La oss kjøre kompilere, kjøre programmet og se hva som skjer. I Visual Studio 2012 velger vi Debug > Start Debugging (eller F5) for å kompilere og kjøre koden. Hvis du får feilmeldingen Deployment failed because no Windows Phone 8 phone was detected. Make sure a phone is connected and powered on kan dette være fordi datamaskinen ikke har maskinvarekravene som trengs for å kjøre den innebygde emulatoren. Hvis du husker tilbake til SDKkravene hadde emulatoren et tilleggskrav om CPU-støtte for SLAT (dvs. en Intel i3/i5/i7 prosessor). Les i så fall neste avsnitt som beskriver hvordan du kan teste ut applikasjonen på din egen telefon i stedet for emulatoren. Hvis alt går greit vil du se at Windows Phone Emulator åpnes og at applikasjonen vår vises på emulatoren. Tittel på applikasjonen og tittel på siden er oppdatert med «Hello World App» og «Hovedside». 10

La oss legge til noe innhold også, f.eks. en TextBlock. Gå til ContentPanel og endre XAML-koden slik:  <Grid x:name="contentpanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="Velkommen til min Hello World App"/> </Grid> Hvis du kjører koden nå vil du se at også innholdet på siden er oppdatert med teksten «Velkommen til min Hello World App». 11

Hvordan kan jeg teste på telefonen i stedet for emulator? I utgangspunktet kjører Windows Phone bare applikasjoner som har blitt godkjent og er gjort tilgjengelig på Windows Phone Marketplace. Det kan imidlertid være helt nødvendig å teste applikasjonen på en fysisk enhet og ikke en emulator. For å kunne rulle ut dine applikasjoner til egen mobiltelefon må du derfor registrere at din telefon brukes til utvikling. Hvis du bare kobler til telefonen og forsøker kjøre applikasjonen til telefonen får du antageligvis en av følgende feilmeldinger: Failed to connect to device as it is pin locked Failed to connect to device as it is developer locked. For details on developer unlock, visit http://go.microsoft.com/fwlink/?linkid=195284 Før du kan rulle ut en applikasjon til din egen enhet må du registrere telefonen. Dette krever en utviklerkonto på Windows Phone Dev Center. Hver enkelt utviklerkonto tillater registering av inntil tre enheter for applikasjonsutvikling. Etter at du har opprettet en utviklerkonto og registrert telefonen kan du installere, kjøre og feilsøke (debug) usignerte applikasjoner på telefonen. For å registrere din Windows Phone kan du bruke Windows Phone Developer Registration Tool som følger med Windows Phone SDK. For å bruke verktøyet trenger du: En Microsoft-konto (tidligere kalt Windows Live ID) En Windows Phone Dev Center konto Zune-programvaren installert på datamaskinen. Du kan laste ned og installere Zuneprogramvaren fra http://support.xbox.com/en-us/zune/software/download For å registrere telefonen: 1. Skru på telefonen, lås opp skjermen, sjekk at tid og dato er korrekt 2. Koble telefonen til datamaskinen med USB-kabel. Pass på at Zune-programvaren starter opp. 3. Søk etter og start Windows Phone Developer Registration. 4. Følg trinn 1-3 og logg på med din Microsoft-konto. 12

Trinn 1 Trinn 2 Figur 8. Windows Phone Developer Registration - Registrer telefon Trinn 3 Figur 9. Windows Phone Developer Registration - Logg inn med Microsoft-konto Figur 10. Windows Phone Developer Registration - Telefonen er registrert Oppsummering I denne leksjonen har vi beskrevet operativsystemet Windows Phone for mobiltelefoner. Forhåpentligvis har du nå klart å installere den nødvendige programvaren og laget din første applikasjon for Windows Phone. 13