Programvaruutveckling för nybörjare
2/82
Inledning Välkommen till framtidens karriär programvaruutveckling. Programvaruutveckling är en snabbt växande bransch med bra möjligheter för entreprenörer. Tekniken utvecklas och programvaran blir en allt viktigare del av vårt dagliga liv, både på jobbet och på fritiden. Inom området programvaruutveckling efterfrågas kompetens inom allt från idégenerering och design till ren programmering. I den här guiden om programvaruutveckling lär du dig grundläggande programmering i Windows 8. Välkommen till framtidens bransch! Innehåll Vad är programvaruutveckling?... 5 Programmering i Windows 8... 10 Din första Windows 8- app... 16 Windows- appgränssnitt... 30 Datahantering... 40 Avancerad gränssnittsdesign... 48 Appdistribution och appförsäljning... 57 Avancerade avsnitt... 70 Bilaga... 80 Kompetensnivåer Allt innehåll har numrerats baserat på svårighetsgrad, så att du enkelt kan välja de avsnitt som passar din kunskapsnivå och kanske avancera till nästa nivå. 1. Passar alla och kräver (nästan) inga förkunskaper. 2. Aningen mer tekniskt material, men inget du inte kan lära dig även om du aldrig har programmerat förut. 3. Det här är den första nivån för professionella utvecklare och en viss erfarenhet förväntas. 4. Avancerad nivå för erfarna utvecklare (finns inte i detta material). Välkommen till programvaruutvecklingens och programvarubranschens värld, kanske vägen till din framtida karriär. 3/82
Om den här guiden Den här guiden har tagits fram i samarbete med Microsoft och Junior Achievement Finland (Nuori yrittäjyys). Guiden ingår i Microsofts YouthSpark- projekt som hjälper ungdomar att förbättra sina praktiska yrkesfärdigheter genom IKT- kunskaper. Mer information Onlineversionen av den här guiden finns på www.win8.com Microsoft YouthSpark www.microsoft.com/about/corporatecitizenship/en- us/youthspark/ Microsoft www.microsoft.com Junior Achievement Finland Nuori yrittäjyys www.nuoriyrittajyys.fi Ung Företagsamhet Sverige www.ungforetagsamhet.se Innehåll Materialets innehåll har tagits fram av Jani Järvinen (Nimacon ltd) - http://nimacon.net 4/82
Kapitel 1 Vad är programvaruutveckling? Innan vi går närmare in på ämnet programvaruutveckling ska vi försöka definiera vad programvara egentligen är. När du lyfter telefonluren, sätter på datorn, loggar in på Facebook för att se vad dina vänner gör eller för att spela spel, använder du inte bara en enhet, utan även programvaran som finns i den och Internet. När du ringer ett samtal eller skickar ett SMS utlöser du en rad programvarubaserade händelser som resulterar i att mottagarens telefon ringer. I själva verket kan du hitta programvara, eller program, på många fler ställen än du kanske tror. Många apparater i hemmet innehåller ofta programvara: mikrovågsugnar, kylskåp, tvättmaskiner, brandvarnare, kameror, TV- apparater, digitalboxar, hissar, luftkonditioneringsapparater o.s.v. När du reser med buss, tåg eller flyg har tidtabellerna beräknats på en dator, d.v.s. med hjälp av programvara. När du kör (en relativt modern) bil, ser programvaran i bilens inbyggda dator till att motorn fungerar. I en nödsituation ser antispinnsystemet och systemet för låsningsfria bromsar till att bilen håller sig på vägen och stannar. De styrs också av programvara. Bild 1.1 En telefonstyrd bil är ett exempel på programdiversifiering, då programvara krävs både i telefonen och i bilen. I dag finns det programvara nästan överallt, och därför är det svårt att tänka sig ett liv utan den. Men det behöver vi inte heller, och programvaran är verkligen till stor nytta i många fall. Och även om programvaran ibland ställer till med problem skulle det moderna samhället inte fungera effektivt utan den. Programvaruutveckling är också en stor bransch, där populära videospel är bland de mest välkända produkterna. Mojangs (Mincraft) grundare Markus Persson eller Sebastian Knutsson, Thomas Hartwig, Patrik Stymne, Lars Markgren grundare av King (Candy crush) är exempel på svenska framgångar inom området. 5/82
Vad är programvara? Men vad är egentligen programvara? Kort beskrivet är programvara digitala entiteter som består av små enkla kommandon som styrs av en enhet och som, till exempel, skapar bilden som visas på displayen på din telefon. Programvaran sparas i enhetens minne. En dators (eller annan enhets) processor bearbetar kommandona som finns i programvaran. (Obs! termen program används ofta i stället för programvara.) På gräsrotsnivå styr dessa små kommandon elektricitetens flöde inuti processorn, men slutanvändaren har inget behov av den informationen. Programvara och program blir användbara först när de kan bearbeta användarens indata och producera någon form av utdata. Exempel på indata är när användaren trycker på pekskärmen på en telefon, pratar i en mikrofon eller trycker på en knapp. Utdata kan bestå av text på skärmen, video, ljud eller text som skrivs ut på papper. När indata och utdata kombineras på lämpligt sätt kan resultatet till exempel bli ett roligt videospel eller ett produktivitetsprogram för ett företag. Eftersom programvara finns överallt är det omöjligt att säga hur ett typiskt program är. Traditionella datorer används i hög utsträckning på skolor och arbetsplatser. Dessa datorer kan köra hjälp- och kontorsprogram som textredigeraren Word, kalkylbladsprogrammet Excel eller presentationsprogrammet PowerPoint. Du har säkert också använt dessa program vid något tillfälle. Bild 1.2 Facebook är ett exempel på ett webbprogram. Programvara och program som finns på Internet är också väldigt populära. Webbprogram kallas även för onlineprogram. YouTube, Facebook och Google är alla exempel på program som körs på Internet. Alla fungerar enligt samma princip: programvarukoden bearbetas på en server någonstans i världen, och resultatet levereras till skärmen på din enhet över Internet. Webbsökningar på Google är ett tydligt exempel på hur programvara bearbetar indata och visar utdata. Hur utvecklas programvara? Kort beskrivet är programvaruutveckling arbete som utförs för att utveckla programvara och program som kan användas av slutanvändare. Den här typen av arbete går under många benämningar: kodning, programmering, programutveckling, apputveckling o.s.v. 6/82
De som arbetar med den här typen av utvecklingsprojekt brukar kallas för kodare eller utvecklare. Det räcker dock sällan med bara utvecklare. Ofta krävs även grafiska designers, tekniker, testare o.s.v. I Finland finns det runt 20 000 yrkesverksamma programvaruutvecklare, men i USA närmar sig siffran 900 000. Programvaruutvecklingen görs på datorer med hjälp av speciella program. Dessa program brukar kallas för utvecklingsverktyg. Själva arbetsprocessen börjar med en idé som beskriver vad programvaran ska göra. Nästa steg är att förverkliga idén, och det är i den här fasen som själva programkoden skrivs. Koden berättar för datorn hur programmet är tänkt att fungera. Den här fasen brukar också omfatta grafisk produktion, särskilt i samband med videospelsutveckling. När programmet börjar ta form, testas det. Under testningen kontrollerar man att programmet fungerar som det ska och att det inte innehåller några fel, så kallade buggar. Utvecklingen och testningen fortsätter tills utvecklarna är nöjda med resultatet. Därefter publiceras programmet för användning på webben, på en dator eller kanske som en liten app i webbutiken för en mobiltelefon. Själva koden kan i teorin skrivas i valfri textredigerare, men i praktiken används mer eller mindre alltid ett utvecklingsverktyg för kodning. Ett mycket populärt verktyg, även bland professionella utvecklare, är Visual Studio ett utvecklingsverktyg för Windows-, telefon- och webbprogram. Bild 1.3 Visual Studio 2013- sviten. Programvaruutveckling är en viktig bransch. Programvara kan utvecklas separat, men ofta arbetar experter som är specialiserade på olika aspekter av programvaruproduktionen tillsammans. Ju större och viktigare programvaran är, desto fler personer behövs för att utveckla den. Försäljare, marknadsförare, PR- personal, supportpersonal, utbildare och dokumenterare ansluter sig ofta till ovan nämnda utvecklare, tekniker och testare. Stora programvaruutvecklingsprojekt kan ofta involvera ett tiotal, för att inte säga flera hundra, personer. Och därför har programvara ett högt ekonomiskt värde. Även små program kan kosta hundratusentals kronor. Och stora program kan kosta många miljoner. En stor del av utvecklingskostnaderna går till löner. 7/82
Bild 1.4 Spelplan- ASGD och ANGI är branchföreningar för programvaruutvecklare. Programvaruutveckling, och dess olika aspekter, är ett välbetalt yrke. En programvaruutvecklares lön ligger vanligtvis på mellan 30 000 och 50 000 kronor i månaden. Uppgifter 1. Fundera på om programvara kan anta fysisk form. 2. Ge minst tre exempel på enheter som kör programvara. Datorer och telefoner räknas inte. 3. Ta reda på vilka verktyg som krävs för programvaruutveckling. Är papper och penna allt som behövs? 4. Vilka olika jobb faller inom området programvaruutveckling? Frågor och svar F1: Varför behöver vi programvara? S1: Programvara har en viktig roll i det moderna samhället eftersom nästan alla elektroniska enheter bygger på programvara. Mycket annat hanteras också av programvara: kassaflöden, tåg- och busstidtabeller, satelliter, TV- programtablåer o.s.v. Programvara behövs också för design: till exempel produceras hus och byggnader, ljusspel på konserter, filmer och animeringar o.s.v. med programvara. Listan är lång. Programvaran har stor effekt på hur vi lever och uppfattar livet. I framtiden kommer programvarans roll att bli ännu viktigare. F2: Hur många arbetar med programvaruutveckling i Finland? S2: I Finland, precis som i många andra länder i Väst, finns många anställda inom programvaruutveckling och närliggande områden. I Finland arbetar runt 20 000 personer med programvaruutveckling. Och flera 8/82
hundra tusen arbetar direkt eller indirekt inom närliggande områden. Programvaruutvecklingen föddes i Storbritannien och USA. F3: Hur kan jag börja utveckla programvara? S3: Programvara kan utvecklas med många verktyg och på många plattformar. Att börja kostar oftast ingenting. Du kan ladda ned de verktyg som du behöver från olika webbplatser för programutveckling. Verktyg för professionell utveckling kostar ofta en slant, men även dessa brukar ha gratislicenser för tidsbegränsad testning. 9/82
Kapitel 2 Programmering i Windows 8 Windows 8 är den senaste versionen av Microsofts populära Windows- operativsystem. En av de mest anmärkningsvärda funktionerna i Windows 8 är Startskärmen som är optimerad för enheter med pekskärm, samt de nya möjligheterna att skapa program, eller appar. De nya Windows Store- apparna som de kallas, har utformats specifikt för enheter med pekskärm, men de kan också användas på vanliga datorer med tangentbord och mus. I det här kapitlet tittar vi närmare på Windows 8 Store- program och hur de utvecklas. I resten av guiden kommer vi att kalla dessa program för Windows 8- appar. Observera att en uppdaterad version av Windows 8 Windows 8.1 publicerades i oktober 2013. Alla Windows 8- användare kan kostnadsfritt uppdatera sina operativsystem till den nya 8.1- versionen. En närmare titt på Windows 8 Windows 8- operativsystemet innehåller många uppdateringar från tidigare versioner av Windows. En av de viktigaste nyheterna för utvecklare var stödet för en ny typ av program, kallade Windows 8- appar (eller Store- appar). De nya programmen startas från den nya Startskärmen i Windows 8, som ser ut så här: Bild 2.1 Startskärmen i Windows 8.1. Windows 8 kan också köra traditionella Windows- program, men på surfplattor och nya datorer med pekskärmar är de nya Windows 8- apparna mer användarvänliga. Den största nyheten med Windows 8- apparna är att allt fler av dem styrs via touch i stället för med tangentbord och mus. Dessutom är programmen mycket snyggare, vilket gör dem mer tilltalande för användarna. 10/82
Bild 2.2 Windows 8- appar är visuella och utformade för pekskärmar. Detta nya fokus på grafiken skapar nya möjligheter för till exempel grafiska designers, som behövs mer än någonsin. Skickliga animerare är också en ovärderlig tillgång vid utvecklingen av många program. Windows 8- appar ❷ Windows 8- apparna kännetecknas också av att de ofta kan köras i helskärmsläge i stället för i en traditionell fönstervy. Dessutom startar de utan att använda det traditionella Windows- skrivbordet. Den nya helskärmsvyn gör det lättare för användarna att fokusera på vad de behöver göra, utan distraktioner. Det finns en mängd detaljerade instruktioner som beskriver hur Windows 8- appar bör se ut och fungera. Målet med dessa instruktioner är att skapa enhetlighet mellan olika appar: när användaren har lärt sig att använda en Windows 8- app, har hon samtidigt lärt sig att använda andra Windows 8- appar. 11/82
Bild 2.3 Detaljerade instruktioner finns tillgängliga för Windows 8- appar. Det är viktigt att Windows 8- appar fungerar bra med själva operativsystemet och med andra installerade program. Det är inte helt lätt att få olika program att fungera ihop. Om du till exempel vill dela en webbplats på Facebook måste webbläsaren och Facebook- appen fungera sömlöst ihop. Som programmerare har du möjlighet att bygga in liknande funktioner i dina egna program. Windows 8- appar distribueras och säljs via Windows Store. Windows Store är ett enkelt och snabbt sätt för användaren att ladda ned nya appar till en enhet. Windows Store underhålls av Microsoft och finns i nästan 150 länder. 12/82
Bild 2.4 Windows 8- appar distribueras och säljs via internationella Windows Store. Det är viktigt att alla tillgängliga appar genomgår grundliga kontroller. På så sätt kan användarna vara säkra på att, oavsett var de bor eller vilket språk de pratar, så installeras inget skadligt innehåll, t.ex. virus eller skadliga program för datainsamling, på deras telefon, surfplatta eller dator. Microsoft kräver att alla programmerare följer strikta riktlinjer och begränsningar vad gäller teknik och innehåll (hur programmet ser ut och vad det gör). Först när alla krav är uppfyllda kan programmet delas via Windows Store. Windows 8- appar kan säljas på flera olika sätt. Om utvecklaren planerar att sälja sin app, är det enklast att sätta ett pris på appen. Priserna ligger oftast på några tior. På så sätt kommer höga priser inte att hindra användarna från att skaffa appen. Men utvecklaren kan också välja att appen ska vara gratis att ladda ned, vilket ofta är fallet med många spel. Om spelet är bra kan det snabbt få många tusen eller till och med flera hundra tusen användare i hela världen. Utvecklaren kan göra sig ett namn på den globala marknaden, men kan också sälja annonsutrymme inuti spelet. Utvecklaren får en liten royalty varje gång spelet spelas, normalt några få ören. Ett annat alternativ är att göra spelet gratis, men sedan sälja nedladdningsbart innehåll, t.ex. fler nivåer eller specialutrustning och ammunition för karaktärerna. Vilka verktyg används för att utveckla Windows 8- appar? ❷ Windows 8- appar kan utvecklas med Microsofts eget utvecklingsverktyg, Visual Studio. I Visual Studio ingår alla verktyg som du behöver för att utveckla och förbereda Windows 8- appar för försäljning och distribution via Microsofts Windows Store. 13/82
Bild 2.5 Alla kan utveckla Windows 8- appar, även för försäljning, i Visual Studio 2013. Visual Studio kan laddas ned gratis från Microsofts webbplats och vem som helst kan använda programmet för att skapa Windows 8- appar, även för försäljning. Det enda kravet är att användaren har en dator med Windows 8. Det betyder att i princip vem som helst till priset av en dator kan skapa program som kan distribueras i hela världen till flera miljoner användare. Arbetet i Visual Studio är tekniskt och kräver programmeringskunskaper. Det är en fördel om du är en van Windows 8- användare med erfarenhet av olika webbtekniker. Det är också bra om du har kunskaper inom filhantering, datatrafik och särskilt inom informationssäkerhet på företagsnivå. Du måste emellertid inte börja från scratch. Det finns många mallar och vägledningar för nybörjare på Internet. Men om du vill utmana dig själv kan du självklart börja från scratch. Uppgifter 1. Försök att komma på tre appar som skulle vara roliga och användbara i hemmet, för skolarbete eller i anslutning till en hobby. 2. Kan det finnas enheter som använder två olika processorarkitekturer? Vilka fördelar skulle den typen av lösning ha? 3. Skriv ned tre fördelar och tre nackdelar med enheter som hanteras via en pekskärm. 4. Tänk igenom vilka fördelar grafik och animeringar kan ha i ett produktivitetsprogram för företag. Frågor och svar F1: Vilka funktioner gör en app lämplig för enheter med pekskärm i stället för en enhet med tangentbord och mus? S1: En app som ska användas på enheter med pekskärm måste ta hänsyn till flera saker som är mindre viktiga i traditionella datorprogram som hanteras via tangentbord och mus. En av de viktigaste skillnaderna är att ett touchgränssnitt har sämre precision än ett musgränssnitt. Av den anledningen måste alla element som användaren ska kunna peka på vara relativt stora. En annan viktig aspekt på enheter med pekskärm 14/82
är de olika typerna av gester. Ett vanligt datorprogram kan starta olika processer när användaren trycker på olika tangenter, t.ex. funktionstangenterna F1 och F2. Dessa funktioner måste dock återges på ett helt annat sätt på enheter med pekskärm utan något fysiskt tangentbord. F2: Vad är en processorarkitektur? Vilka olika processorarkitekturer finns det? S2: Processorarkitekturen eller mikroarkitekturen definierar en processors tekniska funktioner. Dessa funktioner påverkar sedan vilken typ av programvara som processorn kan köra. De vanligaste arkitekturerna i dag är Intels x86/x64- plattform och ARM, som framförallt används på mobila enheter. Exempel på andra kända mikroarkitekturer i informationsteknikens historia är Motorola 6502, Alpha, Itanium och Zilog Z80. F3: Vilka verktyg används för att utveckla Windows 8- appar? S3: Windows 8- appar utvecklas enklast i utvecklingsverktyget Microsoft Visual Studio och det kompatibla programmet Blend. Blend är ett grafikverktyg som används för att utveckla och förbättra de visuella elementen i en app. 15/82
Kapitel 3 Din första Windows 8- app ❷ I det här kapitlet ska vi fokusera på utvecklingen av Windows 8- appar. Du får chansen att testa dina kunskaper och skapa din första app. Du behöver en dator med ett Windows 8- operativsystem, helst uppdaterat till den senaste versionen, Windows 8.1. I följande guide vägleder vi dig genom installationen av de nödvändiga programmen. Det viktigaste av dessa är utvecklingsverktyget Visual Studio. Visual Studio är avsett både för amatörer och professionella utvecklare. Det finns också en version av Visual Studio som passar för Windows 8- programmering, som kan laddas ned gratis. Förberedelser Innan du kan börja programmera i Windows 8 behöver du följande programvara: ett Windows 8.1- operativsystem utvecklingsverktyget Visual Studio 2013. Du behöver också en bredbandsanslutning till Internet, åtminstone om du vill att programutvecklingen ska gå smidigare. Det finns flera webbplatser på Internet med en mängd användbart innehåll och gratis källkod. Men först ska vi se hur du installerar utvecklingsverktygen. Börja med att kontrollera vilken version av Windows du har. Bild 3.1 Du kan se vilken version av Windows du har genom att välja System på Kontrollpanelen. Du kan också använda tangentbordsgenvägen Windows+Pause. Eftersom du måste ha ett operativsystem, räcker det att kontrollera att det är Windows 8. Installationen av Windows är för komplex för att beskrivas i den här guiden, så vi förutsätter att allt är som det ska. 16/82
Om du har en tidigare version av Windows kanske du kan uppgradera den. Om du vill ha mer information om hur du uppgraderar datorn kontaktar du din återförsäljare eller besöker http://www.microsoftstore.se/. Nu måste du installera Visual Studio. I det här utvecklingsverktyget skapar du appens användargränssnitt och skriver nödvändig kod. Visual Studio kan även användas för att felsöka en app, d.v.s. för att ta reda på varför appen inte fungerar som den ska. Dessutom kan Visual Studio kompilera ett distributionspaket av appen när den är klar. Det här distributionspaketet kan sedan skickas till Windows 8 Store för utvärdering. Det är lätt att installera Visual Studio. Du kan ladda ned installationsfilerna från Microsoft på http://www.visualstudio.com/downloads/download- visual- studio- vs. Klicka på fliken Express på webbplatsen. Bild 3.2 Visual Studio 2013 Express är en gratisversion av Visual Studio. Den passar bra för studenter. Fortsätt genom att klicka på Visual Studio Express 2013 for Windows. Nere till vänster ser du en länk med texten Install now. När du klickar på länken kommer du till en ny sida där du uppmanas att logga in med ditt Microsoft- konto. Om du inte har något Microsoft- konto (t.ex. ett Outlook.com- eller Hotmail- e- postkonto) kan du registrera ett här. 17/82
Bild 3.3 Du behöver ett Microsoft- konto för att installera Visual Studio. När du har loggat in väljer du rätt version av Visual Studio. Du kan välja den kostnadsfria Express- versionen eller en 90- dagars utvärderingsversion av den kommersiella och professionella Visual Studio Ultimate- utgåvan. Bild 3.4 Du kan välja mellan den kostnadsfria Express- versionen eller en utvärderingsversion av Ultimate. När du klickar på den vänstra länken med texten Express 2013 for Windows laddas installationsfilerna för Visual Studio ned. Nu ska vi installera kostnadsfria Visual Studio Express. Du installerar Visual Studio Ultimate på praktiskt taget samma sätt. a. Installera Visual Studio ❸ Installationsfilen för Visual Studio 2013 Express heter winexpress_full.exe. När du har laddat ned filen kör du den genom att dubbelklicka på filens ikon. Det svarta Visual Studio- installationsfönstret öppnas: 18/82
Bild 3.5 Du börjar installationen genom att godkänna licensvillkoren och klicka på Install. Fortsätt med installationen genom att godkänna licensvillkoren. När du gjort det aktiveras knappen Install. Klicka på Install. Installationen tar ungefär tio minuter (beroende på dator). Bild 3.6 Installationen av Visual Studio tar ungefär tio minuter. Ett meddelande visas när installationen är klar. Knappen Launch visas längst ned i fönstret. 19/82
Bild 3.7 Installationen av Visual Studio är klar. Starta Visual Studio genom att klicka på knappen Launch. Första starten av Visual Studio När du har installerat Visual Studio 2013 och startat programmet för första gången uppmanas du att logga in. Bild 3.8 Inloggningsfönstret i Visual Studio. 20/82
Inloggningskravet är en ny funktion i Visual Studio 2013. Du måste logga in för att utveckla Windows 8- appar eftersom du behöver en utvecklarlicens för att utveckla och distribuera programmen. Nu ska vi förklara hur du kan skaffa en utvecklarlicens. Observera att du kan använda Visual Studio utan att logga in, men i så fall kan du inte distribuera dina appar via Windows Store. Du kommer inte heller att kunna synkronisera inställningar mellan flera datorer, t.ex. om du använder Visual Studio hemma och på skolan. Du kan hoppa över inloggningsskärmen genom att klicka på Not now, maybe later. Skaffa en Windows 8- utvecklarlicens Windows 8 Store- appar installeras framförallt via Microsofts Windows Store. Till skillnad mot traditionella Windows- program går det inte att kopiera Store- appar från en dator till en annan, även om du har tillgång till appens installationsfiler. Microsoft har försäkrat sig om att Store- appar alltid installeras från en säker och betrodd källa. Andra installationsmetoder, förutom vissa företagslicenser, tillåts inte. Däremot skulle det vara omöjligt att utveckla Windows 8- appar om utvecklarna inte kunde installera och köra sina appar på sina egna datorer innan de skickar in dem till Windows Store. För att kunna utveckla och testa appar behövs en utvecklarlicens. Med den här licensen kan utvecklarna testa sina appar på sina egna datorer. Utvecklarlicensen är giltig i en månad (30 dagar) eller i tre månader (90 dagar) i taget. Därefter måste den förnyas. Om licensen inte förnyas slutar alla appar som utvecklats att fungera. Med utvecklarlicensen kan utvecklarna även kopiera appar mellan datorer, förutsatt att alla datorer har en giltig utvecklarlicens. Visual Studio 2013 levereras med en kostnadsfri utvecklarlicens, som är giltig under en begränsad tid. När du vill skicka din app till Windows Store måste du köpa ett utvecklarkonto. För närvarande är årsavgiften för ett utvecklarkonto 20 för privat bruk och 75 för företag. Ditt första program: Hello world! Det är tradition att programvaruutvecklare som ska lära sig ett nytt verktyg eller programmeringsspråk börjar med ett skriva ett enkelt program. Det är ett bra sätt att bekanta sig med nya funktioner. Det här är ett litet testprogram som ofta kallas för ett Hello World- program eftersom syftet med programmet är att skriva ut texten Hello World! på skärmen. Vi ska fortsätta med den här traditionen när vi skriver vår första Windows 8- app. Börja med att starta Visual Studio 2013 Express och logga in genom att klicka på inloggningsikonen längst upp till höger. När du befinner dig i huvudfönstret i Visual Studio väljer du New Project från File- menyn längst upp till vänster. Skärmen New Project öppnas. (Du kan också använda tangentbordsgenvägen Ctrl+Skift+N.) Enterprise Sideloading (separat inläsning) ❹ Windows 8- appar distribueras framförallt via Microsofts globala och offentliga Windows Store, men den här lösningen fungerar inte alltid. Vissa program, särskilt egen programvara, skyddas ofta mot obehörig åtkomst så att konfidentiell företagsinformation inte hamnar i fel händer. För den här typen av situationer har Microsoft tagit fram funktionen Enterprise Sideloading (separat inläsning), som gör att företag kan distribuera Windows 8- appar i det egna privata nätverket. Den här funktionen säljs separat för hundra användare i taget. 21/82
Bild 3.9 Skärmen New Project innehåller flera mallar för Windows 8- appar. Visual Studio stöder många olika projektmallar. Vissa projekt visas två gånger på skärmen New Project eftersom du kan välja vilket programmeringsspråk du vill använda. De två vanligaste programmeringsspråken är C# och Visual Basic. Om du ska utveckla Windows 8- appar går du igenom listan med projektmallar till vänster på skärmen. Välj Templates, Visual C#, Windows Store i listan. Olika alternativ visas till höger på skärmen. Välj Blank App. Nu måste du ge projektet ett namn i fältet Name längst ned på skärmen. Döp projektet till HelloWorldWindows8 eller hitta på ett eget namn. Den enda begränsningen är att du inte kan använda specialtecken. Tänk också på att namnet inte får börja med en siffra. Klicka på OK. Visual Studio börjar samla in nödvändiga data för din Windows 8- app. Om du inte loggade in under installationen uppmanas du att skaffa en utvecklarlicens. Klicka på I Agree på den första skärmen och logga in om det behövs. 22/82
Bild 3.10 En utvecklarlicens krävs för att utveckla Windows 8- appar. När du förnyar din utvecklarlicens, meddelar Visual Studio när den upphör att gälla. Om du inte förnyar licensen före detta datum kommer de appar som du utvecklar sluta att fungera. Bild 3.11 När du får din utvecklarlicens, meddelar Visual Studio när den upphör att gälla. Nu när du har en utvecklarlicens fortsätter Visual Studio att skapa ditt nya projekt. Efter några sekunder visas ett tomt Windows 8- projekt. I det här läget bör skärmen i Visual Studio se ut ungefär så här: 23/82
Bild 3.12 Hello World- projektmallen i Visual Studio. Nu ska vi lägga till några funktioner i programmets gränssnitt. Dubbelklicka på filen MainPage.xaml i fönstret Solution Explorer till höger på skärmen. Nu öppnas skärmen för design av det visuella gränssnittet. Bild 3.13 Fönstret Solution Explorer innehåller dina projektfiler. Standardgränssnittet för Windows 8- appar är alltid svart. I Visual Studio visas appens gränssnitt i mitten av skärmen. Med verktygen i Visual Studio kan du enkelt skapa en snygg gränssnittslayout. Verktygen i Visual Studio är samlade i ett fönster kallat Toolbox, eller verktygslådan. I verktygslådan hittar du de viktigaste komponenterna som du behöver för att bygga gränssnittet. Komponenter är byggstenar för programvaruutveckling. Var och en fyller en bestämd funktion. Button, TextBox och ListView är några exempel. Komponenter kallas ofta för kontroller. Vi ska titta närmare på komponenter i kapitel 6. 24/82
Genom att kombinera olika komponenter i gränssnittet kan du skapa en app utan att behöva fokusera för mycket på de tekniska detaljerna. Observera att som standard visas bara namnet Toolbox till vänster på skärmen. När du klickar på namnet öppnas fönstret för verktygslådan. Bild 3.14 Verktygslådan innehåller alla komponenter som du behöver i gränssnittet. Nu ska vi lägga till den första komponenten i ditt tomma projekt. Kontrollera att verktygslådan visas (om det behövs klickar du på View- menyn och sedan på Toolbox) och välj komponenten TextBlock under Common XAML Controls: Olika komponenter ❸ Du kan använda en rad olika komponenter i dina Windows 8- appar. De flesta av dem är komponenter för användargränssnittet, vilket betyder att de visas för användaren. Bild 3.15 Börja med att lägga till en TextBlock- komponent i projektet. Observera att du kan söka efter komponenter baserat på namn med hjälp av sökfunktionen i verktygslådan. När du har valt TextBlock- komponenten från verktygslådan kan du klicka på den svarta huvudskärmen. TextBlock- komponenten läggs till där du klickade. En del av dessa gränssnittskomponenter är endast avsedda för att visa data, men det finns också ett flertal indatakomponenter. Indatakomponenter kan ta emot indata från användaren: touch, musklickningar eller text via ett tangentbord. Exempel på indatakomponenter är Button, TextBox och ListView. Lägg till en till komponent, den här gången Button. TextBlock- komponentens enda funktion är att visa text. Texten kan manipuleras via programkod även när appen körs. Button- komponenten är en klickbar knapp som kan aktiveras via touch eller mus. Programkoden kan köra en åtgärd när knappen aktiveras. 25/82
Bild 3.16 TextBlock- och Button- komponenter. När du har lagt till båda komponenterna är det dags att ge TextBlock- komponenten ett namn. Det gör du i fönstret Properties längst ned till höger på Visual Studio- skärmen. Om fönstret inte visas klickar du på View- menyn och sedan på Properties Window. När fönstret visas väljer du ditt TextBlock (en blå ram visas runt komponentens namn precis som förut) och skriver komponentens namn i fältet Name genom att ersätta texten <No Name> : Bild 3.17 Ge en komponent ett namn i fönstret Properties. Vi döper komponenten till textblock. Du kan givetvis använda ett annat namn om du vill. Nu ska vi fortsätta och skriva lite kod. Dubbelklicka på Button- komponenten. Kodredigeraren öppnas i Visual Studio. 26/82
Bild 3.18 Appens funktioner konstrueras i kodredigeraren i Visual Studio. Skriv nästa C#- rad i kodredigeraren inom klammerparenteser { }: textblock.text = "Hello, World!"; Om du döpte TextBlock- komponenten till något annat än textblock ersätter du det första ordet på kodraden med namnet på din TextBlock- komponent. Den här kodraden beordrar appen att uppdatera Label- komponentens text när Button- komponenten aktiveras. Nu kan du köra appen. Det gör du enklast genom att klicka på den gröna Start- knappen i verktygsfältet i Visual Studio. Bild 3.19 Du kan köra appen genom att klicka på den gröna Start- knappen. När du har klickat på Start- knappen körs appen i Visual Studio. Skärmen blir svart och appens gränssnitt visas. Tryck eller klicka på knappen så ändras texten som visas i TextBlock- komponenten. 27/82
Bild 3.20 Appen i aktion. Grattis, du har skapat din första Windows 8- app! b. Gå tillbaka till Visual Studio Nu kan du gå tillbaka till Visual Studio antingen genom att trycka på Alt+F4 på tangentbordet eller genom att svepa med fingret uppifrån och nedåt på skärmen (om du använder en enhet med pekskärm). Med båda metoderna avslutas Windows 8- appen och du kommer tillbaka till Visual Studio. I följande kapitel ska vi titta närmare på hur du utvecklar Windows 8- appar. Uppgifter Ta reda på maskinvarukraven för Visual Studio Express 2013 för Windows. Går det att köra Visual Studio på äldre datorer? Förklara varför Windows 8- utvecklare behöver en utvecklarlicens. Visual Studio levereras med fyra programmallar. Beskriv när de olika mallarna skulle kunna användas och ge exempel på ett program som skulle passa för respektive mall. Ta reda på hur du enkelt kan öppna Blend direkt från Visual Studio. Går det att öppna Visual Studio direkt från Blend? Frågor och svar F1: Måste jag ha en dator, bärbar dator eller surfplatta med pekskärm för att kunna utveckla Windows 8- appar? S1: Inte nödvändigtvis, men enheter med pekskärm har många fördelar. Visual Studio är utrustat med en Windows 8- simulator, som du kan använda för att med hjälp av en mus testa hur appen skulle fungera på en pekskärm. Appen tror att den körs med en pekskärm. F2: Jag har Windows 7 på min dator. Hur kan jag börja utveckla Windows 8- appar? S2: Du måste uppgradera till Windows 8 för att kunna använda och utveckla Windows 8- appar. Om datorn är högst två år och fungerar bra med Windows 7, kan du förmodligen uppgradera operativsystemet. Om datorn är gammal och långsam är det bättre att köpa en ny dator, t.ex. en bärbar dator med pekskärm. Dessa finns att köpa för mindre än 4 000 kronor. F3: Jag vill kopiera en Windows 8- app som jag har skapat till en vän/kollega. Hur kan jag kopiera appen till en annan dator? 28/82
S3: Om din vän eller kollega har Windows 8 och Visual Studio kan du skicka appens källkod till vännen eller kollegan och sedan be honom eller henne att kompilera koden på sin dator. Om detta inte är möjligt eller om du vill behålla källkoden, kan du skapa ett appaket för distribution i Visual Studio och sedan kopiera paketet till en annan dator. Du kan skapa appaketet genom att klicka på Store- menyn och sedan på Create App Packages. Din vän eller kollega kan sedan skaffa nödvändig utvecklarlicens med hjälp av PowerShell- kommandot Get- WindowsDeveloperLicense. Läs mer på http://msdn.microsoft.com/en- us/library/windows/apps/hh974578.aspx. 29/82
Kapitel 4 Windows- appgränssnitt ❸ Windows 8- appar ska vara snygga och effektiva, men ändå lätta att använda. I det här kapitlet ska vi utforska gränssnittsalternativen i Windows 8 och vilka funktioner som finns i ett bra Windows 8- gränssnitt. Samtidigt lär du dig att utforma och skapa gränssnitt i Visual Studio. Vikten av en bra gränssnittsdesign kan inte nog betonas. Särskilt konsumenter överger snabbt en app med en dålig eller bristfällig gränssnittsdesign. Ett bra gränssnitt kräver arbete och är resultatet av noggrann planering. Genom att studera användarnas indata och titta på andra program kan du lära dig mycket om hur ett bra gränssnitt ser ut. Bild 4.1 Gränssnittet i appen Hälsa och träning för Windows. Men det är också viktigt att förstå att gränssnittets design i hög grad beror på vad programmet är tänkt att göra. Ett spel och ett produktivitetsprogram kan ha helt olika gränssnitt utan att något av dem nödvändigtvis är bättre än det andra. Därför är gränssnittets design nära kopplat till ett programs generella designprocess, där man tar hänsyn till programmets behov och funktioner. Planera gränssnittet ❷ Ett bra gränssnitt kräver eftertanke, men en bra plan kräver inga särskilda verktyg. Ett enkelt program kanske bara kräver några få anteckningar på en bit papper, men ett mer komplext program kan kräva flera sidor med förklaringar och ett dussintal skisser. Det går lika bra att skriva ner idéer och att göra skisser med papper och penna som att använda datorn. Du vet att din plan är tillräckligt utförlig och begriplig om en utomstående bara genom att titta på planen snabbt kan förstå vilka användare som programmet vänder sig till och vad de förväntas göra med det. Skissar över programmets gränssnitt är också en viktig del av planen eftersom de gör att grafiska designers och utvecklare snabbt kan sätta igång. Glöm inte att en bra bild säger mer än tusen ord. När du planerar din app kan det vara bra att försöka besvara åtminstone följande frågor: 1. Vad är appen bra på och på vilket sätt är den bättre än andra? 2. Vem riktar sig appen till? 3. På vilka enheter kan appen användas? Surfplattor, bärbara datorer, stationära datorer? 4. Vilka är de viktigaste funktionerna i appen? 5. Hur ser de viktigaste skärmarna i appen ut och hur navigerar du mellan dem? I vilken ordning? När du har besvarat dessa frågor har du kommit en bra bit med planen. Samtidigt går själva utvecklingsprocessen snabbare om du kan koncentrera dig på att skapa appen utan att behöva tänka på vad nästa steg är. 30/82
Men du måste inte komma på alla idéer själv. Bra gränssnittsdesign är något du kan lära dig. Det enklaste sättet är att ladda ned Windows 8- appar som har fått bra recensioner från Windows Store och själv se vilka typer av gränssnitt olika appar har. Testa bara olika slags appar! Bild 4.2 Windows tjänst för utvecklare på dev.windows.com. Självklart finns det också officiell vägledning. Microsoft har en omfattande webbplats för utvecklare på dev.windows.com. Du hittar heltäckande vägledningar för gränssnittsdesign på http://msdn.microsoft.com/en- US/windows/apps/hh779072. Vad måste du ta hänsyn till när du skapar gränssnittet? ❷ En av de viktigaste förändringarna från äldre versioner av Windows är att Windows 8- programmen nu framförallt är avsedda att hanteras via touch. Men eftersom det fortfarande finns gott om traditionella stationära och bärbara datorer som saknar pekskärm måste utvecklaren se till att apparna även kan användas med mus och tangentbord. Microsoft har tagit fram fem riktlinjer för gränssnittsdesign: Yrkesskicklighet Snabb och smidig Genuint digital Mer med mindre Tänk på helheten Dessa riktlinjer kan sammanfattas så här: Yrkesskicklighet innebär att hänsyn tas även till de minsta detaljerna i den färdiga appen. Det är särskilt viktigt att finjustera grafiken och funktionaliteten i funktioner som ofta används. För att ett gränssnitt ska vara snabbt och smidigt måste det vara användarvänligt, kraftfullt och okomplicerat. På pekskärmar är det extra viktigt att gränssnittet reagerar snabbt på användarens indata. Animeringar kan användas för att förbättra användarupplevelsen. För att vara genuint digital måste en app vara enkel att använda utan begränsningar från världen utanför. Detta gäller särskilt för spel, där det är bra att ge fantasin fria tyglar. Mer med mindre syftar på att undvika att proppa appen full med onödiga funktioner. En av de viktigaste riktlinjerna för Windows 8- gränssnitt är att det ofta går att undvika gränssnittskomponenter (t.ex. knappar) helt, eftersom själva innehållet kan fungera som det element som initierar en funktion. Jämför den här filosofin med minimalismen och funktionalismen inom inrednings- och möbeldesign. Tänk på helheten påminner utvecklaren om att inga appar behöver vara helt fristående i Windows 8. Installerade program kan dela data med varandra och erbjuda funktioner som inte är möjliga för ett enskilt program. Ett exempel på en sådan funktion är att skicka en webblänk via e- post, även om din app inte kan hantera e- post. 31/82
Visual Studio- mallar ❸ Microsoft har ansträngt sig för att göra utvecklingen av Windows 8- appar så enkel som möjligt genom att tillhandahålla mallar i Visual Studio. Genom att använda dessa mallar slipper utvecklaren koncentrera sig på den mest grundläggande kodningen och kan snabbt komma igång. De tillgängliga mallarna visas när du startar ett nytt projekt. Visual Studio levereras med fyra olika mallar: Blank App, Grid App, Hub App och Split App. Tre av dessa fyra mallar hjälper utvecklare att snabbt sätta igång med utvecklingen. Dessa mallar beskrivs i detalj nedan. Bild 4.3 På skärmen New Project visas flera programmallar. Mallen Hub App är ett nytt tillägg i Windows 8.1. På skärmen New Project (se bilden) visas mallarna i mitten när du väljer Templates, Visual C#, Windows Store i trädmenyn till vänster. Namnet Windows Store i trädmenyn syftar på Windows 8- appar som kan distribueras via Windows Store. Det finns sex programmallar, varav fyra är avsedda för gränssnittsdesign: Blank App. Det här är en tom mall. Den är avsedd för utvecklare som har erfarenhet av Windows 8- programmering och som vill börja utan gränssnittsmallar eller programmeringskod. Grid App. Den här programmallen är ett enkelt sätt att börja utveckla Windows 8- appar. Mallen baseras på ett rutnät, som består av olika grupper. Varje grupp kan ha ett eller flera objekt och en tredje separat sida som visar information om varje objekt. Rutnätet kan innehålla alla slags visuella data, t.ex. användarens bilder ordnade efter månad. Med den här mallen är det enkelt att visa varierande och komplext datainnehåll. Hub App. Den här mallen är ett nytt tillägg som kräver Windows 8.1 för att fungera. Hub App delar in appens huvudskärm i delar med olika storlek så att viktiga element får mer utrymme. Den här mallen stöder både bilder och text eller en kombination av båda. Mallen har tre sidor. Split App. Den här mallen delar upp appen i sidor. Mallen är perfekt för appar som innehåller text och bilder. Exempel på bra innehåll för en Split App är recept, fotoalbum och förhandsgranskningar av låtar. Nästa tre mallar stöder gränssnittsdesign. Class Library. Den här mallen är inte ett fristående program, utan ett klassbibliotek som innehåller programmeringskod. Den kan inte köras eller kompileras som den är. Koden i klassbiblioteket kan i stället användas i ett program. Fördelen med klassbiblioteket är att samma kod kan användas i flera program utan att utvecklaren behöver skriva om koden varje gång. Windows Runtime Component. Med den här mallen kan utvecklare skapa komponenter som kan återanvändas. Mallen bygger på samma grundläggande idé som klassbiblioteket, men genom att använda komponenter kan utvecklarna dela koden även mellan programmeringsspråk. XAML- språk? Windows 8- apparnas gränssnitt skapas med programmeringsspråket XAML. XAML är en förkortning av extensible Application Markup Language, vilket betyder att språket använder XML- syntax. XAML- filer känns enkelt igen på filformatet.xaml. Visual Studio- mallarna innehåller alltid minst en XAML- fil. 32/82
Unit Test Library. Med bibliotek för enhetstestning kan utvecklarna testa sina appar automatiskt med hjälp av enhetstester. Det är små kodblock som ser till att annan kod fungerar som den ska. Ett enkelt enhetstest kan till exempel bekräfta att en beräkningsrutin fungerar som den ska genom att kontrollera att den returnerar rätt resultat. Det blir lättare att snabbt utveckla appar med hjälp av mallar. Även om du väljer att ta bort en del av mallfunktionerna eller mallgränssnittet, kan du ändå spara tid jämfört med om du skriver all kod manuellt. En annan fördel med mallarna är att de (i synnerhet Grid App och Split App) baseras på designprinciperna för Windows 8- gränssnitt. Om du använder någon av mallarna kan du därför vara säker på att din app följer rekommendationerna och att den fungerar på olika enheter. Layoutkontroller ❸ Windows 8- appar kan använda allt tillgängligt skärmutrymme för sina funktioner. Det betyder att det finns många möjligheter att visa appens data, t.ex. foton och musik, eller ett spels nivåer. I produktivitetsprogram visas informationen ofta enligt en bestämd struktur, t.ex. ett rutnät eller i ett område som kan skrollas vågrätt. I dessa situationer kan du använda särskilda layoutkontroller för dina Windows 8- appar. Windows 8 har fyra layoutkontroller: Kontroll Beskrivning Exempellayout Canvas (Windows.UI.Xaml.Controls ) Med Canvas- kontrollen kan du fritt placera de element du vill (komponenter som TextBlock, Button o.s.v.). Canvas är en perfekt kontroll när du redan vet antalet element eller om det bara finns några få element. StackPanel (Windows.UI.Xaml.Controls ) Grid (Windows.UI.Xaml.Controls ) VariableSizedWrapGrid (Windows.UI.Xaml.Controls ) Som namnet antyder skapar kontrollen StackPanel automatiskt staplar från element och kontroller som är kopplade till den. Staplarna kan vara vågräta eller lodräta. Grid- kontrollen är en perfekt lösning om du vill kunna ordna de tillhörande underelementen i rader och kolumner med hög precision. Grid- kontrollen skapar ett rutnät med det antal rader och kolumner som utvecklaren anger. Alla element får samma storlek. VariableSizedWrapGrid fungerar enligt samma principer som Grid- kontrollen, men underelementen kan ha olika storlekar. 33/82
Även om Canvas- kontrollen stöder fri placering av elementen på skärmen, bör du undvika att fylla skärmen från kant till kant. Även om det är tekniskt möjligt blir det svårt att använda appen, särskilt på enheter med pekskärm eftersom det inte skulle gå att använda skärmens kanter för att skrolla. Av den anledningen rekommenderar Microsoft utvecklare att lämna stora marginaler längst skärmens kanter. Den vanligaste layoutkontrollen är Grid. Det är standardkontrollen i Visual Studio när du startar nya programprojekt eller när du lägger till nya sidor i ett program. Även om Grid består av flera interna underelement (även kallade underordnade kontroller), innehåller standardlayouten för Grid- kontrollen bara en rad och kolumn. I praktiken betyder det att hela Grid- utrymmet är en enda stor skärm, och att kontrollens interna underelement kan placeras lika fritt som med Canvas- kontrollen. Här ser du ett exempel med Hello World- programmet från det förra kapitlet, skrivet i XAML: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <TextBlock x:name="textblock" HorizontalAlignment="Left" Margin="179,73,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="20" Width="157"/> <Button Content="Button" HorizontalAlignment="Left" Margin="179,106,0,0" VerticalAlignment="Top" Width="122" Click="Button_Click"/> </Grid> I det här exemplet används XML- syntaxen för att skapa en Grid- kontroll med två underkontroller (TextBlock och Button). När du arbetar med definierade underelement, är layoutkontrollens innehåll statiskt. Det här innehållet kan också definieras i programkoden, t.ex. via en datakälla från tredje part. I så fall är layoutkontrollens innehåll dynamiskt. Det dynamiska innehållet visas oftast på skärmen i form av olika listkontroller och skrollningsbara områden. Exempel på dessa är GridView- och ListView- komponenterna. Vi ska prata mer om dessa och andra komponenter i kapitel längre fram. Importera bilder och grafik ❸ Imponerande och snygg grafik är ett måste för att locka användare. Därför är det viktigt att veta hur man importerar grafikelement till appar och visar dem på skärmen. Men eftersom grafik kräver en hel del diskutrymme måste du som utvecklare se till att den färdiga appen inte överbelastar hårddisken. Windows 8- apparna installeras ofta via trådlösa nätverk. Det betyder att appens storlek står i direkt relation till den tid det tar att ladda ned och installera den. I Visual Studio kan du enkelt lägga till grafik i dina appar. Själva Visual Studio innehåller inte verktyg för att skapa eller redigera bilder. För att göra det behöver du andra program. Adobe Photoshop är standard i branschen, men du kan använda många andra program också. Grafiken i Windows 8- appar är antingen vektorgrafik som renderas i XAML- språket eller bitmappar, oftast i JPEG- eller PNG- format. Skillnaden mellan de två bitmappformaten är att JPEG bygger på förlustgivande komprimering, medan PNG är ett förlustfritt format. JPEG passar bäst för fotografier. PNG passar bäst för ikoner och HD- bilder som exempelvis innehåller många raka linjer. 34/82
Om du till exempel vill visa ett fotografi i en Windows 8- app kan du följa stegen nedan. 1. Starta Visual Studio och öppna Windows 8- approjektet. 2. Välj Add Existing Item på Project- huvudmenyn. Du kan också använda tangentbordsgenvägen Skift+Alt+A. 3. Välj bildfilen och klicka på Add. De vanligaste bilderna har JPEG- eller PNG- format. Nu läggs bildfilen till i projektet och du hittar den i Solution Explorer- fönstret. 4. Lägg till en Image- komponent i programmet och välj bildfilen via fältet Source för Image- komponenten. 5. Bildfilen visas inuti Image- komponenten. Du hittar Image- komponenten som nämns i steg fyra i verktygslådan i Visual Studio: Bild 4.4 Image- komponenten i verktygslådan. Det snabbaste sättet att redigera bildens Source- fält (steg 4) är från fönstret Properties i Visual Studio. Om fönstret Properties inte visas klickar du på View- menyn och sedan på Properties Window. Bild 4.5 Bildfilen som används i Image- komponenten definieras i fältet Source. När egenskaperna har angetts ser resultatet ut ungefär så här: Bild 4.6 En Image- komponent som visar en JPEG- bild. Du kan också skriva definitionen manuellt i XAML- språket. Den här metoden är bra om du vill lägga till flera bilder på en sida med minimalt arbete: du kan kopiera och klistra in XAML- koden och bara redigera Source- definitionen. Här en typisk definition för Image- komponenten: <Image HorizontalAlignment="Left" Height="454" Margin="60,42,0,0" VerticalAlignment="Top" Width="723" Source="Forest.jpg"/> 35/82
Observera att det kan vara bra att lägga till en ny mapp i projektet för bildfiler om appen innehåller många bilder. I Visual Studio skapas en Assets- mapp för Windows 8- appar som standard. Du kan använda den här mappen för att lagra bildfiler. Förutom de bilder som du lägger till i ett projekt kan du självklart använda bildfiler från till exempel Internet. Tänk bara på att du måste ta hänsyn till upphovsrättigheter. Här är ett kort kodstycke som illustrerar hur du läser in en bild från Internet (förutsatt att du känner till URL- adressen): string url = "http://i.msdn.microsoft.com/dynimg/ic650184.png"; myimage.source = new BitmapImage(new Uri(url)); Observera att du i en riktig app måste ta hänsyn till situationer då ingen Internetanslutning är tillgänglig. Animeringar ❸ Windows 8- appar har omfattande stöd för animeringar. Animeringar kan vara både trevliga och praktiska, särskilt på enheter med pekskärm. Animeringar kan ha en avgörande roll i ett program (t.ex. i spel) eller vara mindre viktiga men ändå fylla en funktion. Små animeringar kan till exempel användas för att ge feedback när användaren trycker på något. Knappen kan ändra färg en aning eller så kan texten skjutas in när användaren trycker på knappen. XAML- språket stöder många olika typer av animeringar, både små och stora. Animeringarna skapas med XAML- kod, men kan tack och lov även skapas med visuella verktyg. Du kan använda både Visual Studio och Expression Blend, ett produktivitetsprogram som utvecklats specifikt för grafisk design och animeringar, när du vill implementera animeringar i Windows 8- appar. Bild 4.7 Blend är Visual Studios systerprodukt som främst är avsedd för grafisk design. Precis som Visual Studio är Expression Blend en Microsoft- produkt, även om programmet ser annorlunda ut: Bild 4.8 Ett exempelprojekt i Blend. När Visual Studio används för programmering, är Expression Blend framförallt ett grafikverktyg. Detta återspeglas i programmets funktioner. Nu ska vi ta en titt på hur du skapar animeringar. Vi börjar med grunderna. Animeringar i Windows 8 har tre grundläggande egenskaper: start- och slutpunkter och hastighet. Baserat på dessa uppsättningar med data kan Windows- operativsystemet beräkna delarna i mitten av animeringen och rita ut ändringarna på skärmen. Som utvecklare kan du animera många saker: gränssnittselementens placering (rörelse), storlek, färger, rotationsvinklar o.s.v. Flera värden kan manipuleras samtidigt i en animering, t.ex. storlek och placering. Dessutom kan en animering påverka flera element samtidigt. 36/82