Windows Phone sovelluskehitys

Uuden Windows Phonen myötä myös monen opiskelijan mielenkiinto on siirtynyt kohti Microsoftin työkaluja ja teknologiota. MSDN AA:n ja DreamSparkin kaltaisten palveluiden kautta opiskelijoiden on helppo päästä käsiksi työkaluihin.Nämä palvelut tarjoavat kehitystyökalut ja lisenssit ilmaiseksi opiskelijoille. Lisätään siihen vielä päälle helposti opittava Silverlight-teknologia niin kyllä alkuun pääse nopeasti, ilman että uhraa kaiken vapaa-aikansa.

Windows Phone työkalut

Windows Phone työkalut ovat kaikille ilmaisia ja asentuvat yhdestä

paikasta. Työkalut löytyvät jokaisen Windows Phone-kehittäjän uudesta kodista, AppHubista. Tällä hetkellä voit ladata joko 7.0 työkalut tai uudet 7.1 työkalut. Uuden version lopullista versiota odotetaan syksylle, joten tässä ohjeessa käytetään uusinta Beta-versiota.

Työkaluilla kuten Visual Studio ja Expression Blend päästään nopeasti alkuun ja saadaan näyttäviä Windows Phone sovelluksia valmiiksi.

FESTARIT 2011

Kesällä monet siirtyvät mökeille, ulkomaille tai festareille. Todistaakseni että Expression Blend on varteenotettava työkalu niin alla käyn läpi miten nopeasti saadaan proto tulevaisuuden killer appsista nimeltä Festarit 2011. Jotta saat hommat toimimaan niin lataa alla olevat tiedostot. Niissä ei mitään kummempaa ole, muutama kuva jota tulemme käyttämään sovelluksessamme.
https://skydrive.live.com/?cid=93d4596792bbc2c6&sc=documents&id=93D4596792BBC2C6%21696

Windows Phone kehitystyökalut saat ladattua App Hubista ja opiskelija saa kehittäjälisenssin ilmaiseksi Dreamsparkista. Nyt palikat on asennettu ja olet valmis joten starttaa Expression Blend 4 ja luo uusi Windows Phone Application-projekti nimeltä Festarit2011.

Määritellään esimerkkidata

Eteen aukeaa Windows Phone sovellus ja MainPage -sivu. Sillä teemme vain protoa niin määritetään ”esimerkki dataa” jota sovelluksemme käyttää. Teemme tämän vaiheen sen takia, koska meillä ei ole olemassa olevaa datalähdettä. Voit myös ladata valmiin projektin täältä ja käyttää sitä pohjana.

Avaa Expression Blendistä ”Data”-tabi oikealta ja määritä uusi Sample Data.

Anna datalle nimeksi ”FestariData” ja lisää se projektiin. Sen jälkeen määrittele Festarille tietoja: Logo, Ajankohta, Pituusaste, Leveysaste ja Nimi. Kentän vierestä voit valita tyypin (teksti, numero, kuva tai totuusarvo) voit myös lisätä lisää kenttiä dataasi klikkaamalla +-painiketta, joka on merkitty vihreällä kuvaan. Määritä Logo kuvaksi (oletuksena nämä ovat tuoleja, voit valita lähteeksi lataamasi festari-logot). Ajankohta päivämääräksi sekä pituus- ja leveysasteet numeroksi. Anna kokoelmalle (Collection) uusi nimi ”Festari”.

Valitse Edit Sample Values (merkitty kuvaan punaisella) ja määritä että haluat 9-festaria. Nyt meillä on valmiina data jota voimme käyttää sovelluksessamme.

Voit myös muokata koko esimerkki dataa valitsemalla ”Edit Sample Values” ylimmältä tasolta. Voisit esimerkiksi nimetä festarit ja yhdistää kuvat oikein. Aseta myös kaikille festarille koordinaatit alla olevan kuvan mukaisesti, tai sitten voit ladata valmiin projektipohjan missä esimerkkidata on jo määritetty täältä.

Festari-listan lisääminen

Aloitetaan vaihtamalla sivun taustaväri valkoiseksi. Valitse Blendin ”Objects and Timeline”-paneelista LayoutRoot ja tämän jälkeen vaihda oikealta Properties-paneelista Background-arvo valkoiseksi, varmista että Alpha-kanava on 100%.Valitse sitten ”MY APPLICATION”-teksti ja vaihda sen Text-arvo Properties-paneelista niin että sovelluksen nimi on ”FESTARIT 2011” ja vaihda Foreground-arvo mustaksi. Päivitä myös ”page name” niin että siinä lukee ”festarit” ja väri on musta. Tämän jälkeen lisätään lista festareista käyttöliittymäämme, eli raaha ”Festari”-kokoelma Data-paneelista vasemmalta löytyvään ContentPaneliin. Kuten huomasit sivulle ilmestyi nyt lista festareista, paina listaa oikealla hiirenpainikkeella ja valitse Auto Size -> Fill niin lista suurenee sivun levyiseksi.

Lista tyylitys

Muutetaan vielä listan osioiden tyyliä niin että siinä näkyy tapahtuman nimi, logo sekä päivämäärä. Valitse lista oikealla hiirenpainikkeella ja valitse Edit Addiontal Templates -> Edit Generated Items (ItemTeplate) -> Edit Current, niin pääse muokkaamaan yksittäisen osion ulkoasua. Aloita vaihtamalla elementtien säiliön tyypin Grid-säiliöksi painamalla oikealla hiirellä ”StackPanel”-elementtiä Objects and Timeline paneelista ja valitse Change Layout Type -> Grid. Nyt voimme vapaasti liikuttaa elementtejä design-näkymässä. Järjestele elementit Valinta-työkalulla viereisen kuvan mukaan. Sen jälkeen voimme asettaa teksteille eri tyylejä, valitse festarin nimi oikealla hiiren painikkeella ja valitse Edit Style -> Apply Resources -> PhoneTextLargeStyle. Vaihda tämän jälkeen tekstin Properties-paneelista ”Foreground”-arvo mustaksi. Aseta päivämäärä-tekstille tyyli nimeltä PhoneTextAccentStyle.

Palataksesi pääsivulle valitse ”Return scope to [PhoneApplicationPage]” painamalla FestariItemTemplate1-nimeä Objects and Timeline-paneelista.

Toiminnallisuuden lisääminen

Nyt olemme käyneet perusasiat läpi sovelluksen luomisesta Expression Blendissä. Voimme vielä lisätä pientä toiminnallisuutta killer appiimme. Kun sovelluksesta valitaan festari niin puhelin neuvoo käyttäjälle ajo-ohjeet käyttäen Bingin Turn-by-Turn navigaatiota.

Aloitetaan nimeämällä listamme, joten valitse se ja anne sille nimi ”festivalList” Properties-paneelin ylä-osassa. Valitse Events-osio Properties-paneelista. Events listan SelectionChanged-kohtaan kirjoita NavigateToFestival ja paina enter. Tämä luo tapahtumakäsittelijan MainPage.xaml.cs-sivulle, joten joka kerta kun listan valinta vaihtuu niin tuota tapahtumakäsittelijää kutsutaan. Voimme muokata tätä sivua Expression Blendissä , mutta Visual Studio tukee C#:in kirjoittamista paremmin kuin Blend joten avataan sama projekti Visual Studiossa. Blendin Project-paneelista paina oikealla hiirenpainikkeella MainPage.xaml.cs-sivua ja valitse Edit in Visual Studio, tämä avaa saman projektin Visual Studiossa.

Sovelluksemme tulee käyttämään paikkatietoja, joten lisätään uusi referenssi projektiimme. Visual Studion Solution Explorein kautta paina oikealla hiirenpainikkeella References-kansiota ja valitse ”Add Reference...” Esiin tulevasta dialogista valitse System.Device ja paina OK.

Aloita luomalla uusi metodi nimeltä ShowDirections jolle syötetään sen festivaalin numero johon halutaan ohjeet.

MainPage.xaml.cs:

voidShowDirections(intitemIndex)

{

}

Luo ShowDirections-metodin sisään uusi BingMapsDirectionsTask ja luo koordinaatit Helsingille, käytämme tätä lähtöpaikkana jos emulaattorista ei ole asetettu paikkatietoja.

BingMapsDirectionsTaskbingDirections = newBingMapsDirectionsTask();

GeoCoordinatehelsinki = newGeoCoordinate(60.169812, 24.93824);

Tämän jälkeen lisätään using-lauseet jotta voimme käyttää näitä puhelimen ominaisuuksia, joten paina oikealla hiirellä BingMapsDirectionsTaskia ja valitse Resolve->+ using Microsoft.Phone.Tasks; ja tee sama GeoCoordinatelle.

Haetaan seuraavaksi valittu festivaali, jotta tiedämme mihin navigoidaan. Festari on siis listan valitun osion datalähde:

FestariItem festari = festivalList.SelectedItem asFestariItem;

Valitse oikealla hiirenpainikkeella FestariItem ja valitse taas Resolve->+ using Expression.Blend.Sampledata.FestariData; Näin pääsemme selaamaan Blendin generoimaa esimerkkidataa Visual Studiossa.

Määritetään sitten mihin mennään ja näytetään ohjeet:

voidShowDirections(intitemIndex)

{

BingMapsDirectionsTaskbingDirections = newBingMapsDirectionsTask();

GeoCoordinatehelsinki = newGeoCoordinate(60.169812, 24.93824);

FestariItemfestari = festivalList.Items[itemIndex] asFestariItem;

GeoCoordinate destination = newGeoCoordinate(festari.Leveysaste, festari.Pituusaste);

// Jos start arvon jättää määrittelemättä niin tehtävä käyttää puhelimen sijantia

bingDirections.Start = newLabeledMapLocation("Helsinki", helsinki);

bingDirections.End = newLabeledMapLocation(festari.Nimi, destination);

bingDirections.Show();

}

Lopuksi kutsutaan ShowDirections-metodia NavigateToFestival-tapahtumakäsittelijästä.

MainPage.xaml.cs:

privatevoidNavigateToFestival(object sender, SelectionChangedEventArgs e)

{

    ShowDirections(festivalList.SelectedIndex);

}

Nyt voit ihalla tätä mahtavaa tuotosta joko Visual Studiosta tai Expression Blendistä painamalla F5!

Emulaattorin sensorit

Uusi Windows Phone 7.1 emulaatori tukee myös sensoreiden emulointia.Tämä mahdollistaa kiihtyvyysantureiden tai esimerkiksi paikkatietojen testaamisen ilman fyysistä laitetta. Käynnistä sovelluksesi joko Visual Studiosta tai Expression Blendistä ja siirrä hiiresi oikeaan yläkulmaan niin että lisävalikot ilmestyvät. Valitse siitä sitten additional tools niin uusi dialogi aukeaa.

Paikkatietojen testaaminen

Avaa ”Location”-välilehti jossa näet kartan, oletuksena kartta näyttää Redmondin mutta voit selata sillä esim. Helsinkiin, lisää sinne yksi pushpin. Poistu seuraavaksi Debug-tilasta valitsemalla Visual Studiosta Debug->Stop Debugging. Nyt jos kommentoit NavigateToFestivalista reittiohjeiden Start-koordinaatit niin ohjelma etsii reittiohjeet emulaattorissa määritetyn paikan mukaan.

MainPage.xaml.cs:

privatevoidNavigateToFestival(object sender,SelectionChangedEventArgs e)

{

BingMapsDirectionsTaskbingDirections = newBingMapsDirectionsTask();

GeoCoordinatehelsinki = newGeoCoordinate(60.169812, 24.93824);

FestariItemfestari = festivalList.SelectedItemasFestariItem;

GeoCoordinate destination = newGeoCoordinate(festari.Leveysaste, festari.Pituusaste);

// Jos start arvon jättää määrittelemättä niin tehtävä käyttää puhelimen sijantia

//bingDirections.Start = new LabeledMapLocation("Helsinki", helsinki);

bingDirections.End = newLabeledMapLocation(festari.Nimi, destination);

bingDirections.Show();

}

Käynnistä nyt projekti uudestaan niin reittiohjeet etsitään emulaattorista valitsemastasi paikasta.

Kiihtyvyysanturit emulaattorissa

Emulaattori tarjoaa myös mahdollisuuden testata kiihtyvyysantureita. Tehdään vaikka niin, että jos käyttäjä heiluttaa puhelinta niin valitaan festari satunnaisesti.

Lataa App Hubista ShakeGesture-kirjaston niin voit helposti tunnistaa liikkeen.

Pura lataamasi paketti ja avaa siinä mukana tuleva Visual Studio projekti ja käynnistä se (F5). Nyt voit emulaattorin Accelerometer-välilehdeltä käynnistää Shake-emuloinnin, joka on siis nauhoitettu liike emulaattorissa.

Lisätään seuraavaksi referenssi ShakeGesture-kirjastoon meidän Festari-sovelluksestamme. Avaa Festari-sovellus Visual Studiossa ja paina oikealla hiirenpainikkeella Solution Explorerin References-hakemistoa ja valitse ”Add reference..”. Käytä Browse-välilehteä ja navigoi purkaamasi GestureLibrary-hakemistoon ja hae sieltä ShakeGestures/Bin/Debug/ShakeGesture.dll tiedosto.

Lisää MainPage.xaml.cs sivulle uusi using-lause jotta voimme käyttää ShakeGestures-kirjastoa. Kytke sen jälkeen ShakeGesture-tapahtuman käsittelijä. Muista voit käyttää hyödyksi Visual Studio IntelliSensea, kun kirjoitat

ShakeGesturesHelper.Instance.ShakeGesture +=

Ja painat tabulaattoria kaksi kertaa niin IntelliSense luo sinulle tarvittavan tapahtumakäsittelijän. Tämän jälkeen aseta kuinka monta liikettä käyttäjän pitää tehdä ennen kuin tapahtuma laukaistaan ja viimeiseksi käynnistä ShakeGestureHelper.

MainPage.xaml.cs:

usingShakeGestures;

namespace Festarit2011

{

publicpartialclassMainPage : PhoneApplicationPage

    {

publicMainPage()

        {

InitializeComponent();

ShakeGesturesHelper.Instance.ShakeGesture += newEventHandler<ShakeGestureEventArgs>(Instance_ShakeGesture);

ShakeGesturesHelper.Instance.MinimumRequiredMovesForShake = 4;

ShakeGesturesHelper.Instance.Active = true;

        }

voidInstance_ShakeGesture(object sender, ShakeGestureEventArgs e)

{

        }

Kiihtysvyysantureiden tapahtumat laukeavat toiseen säikeeseen, joten käytetään Dispathceria jotta päästään kutsumaan ShowDirections-metodia käyttöliittymä-säikeessä. Määritetään satunainen numero nollan ja listan koon välillä ja sitten lähetetään tämä ShowDirections-metodille. Näin haemme ohjeet satunaiseen festariin.

voidInstance_ShakeGesture(object sender, ShakeGestureEventArgs e)

{

Dispatcher.BeginInvoke(delegate()

    {

Randomrandom = newRandom();

intrandomIndex = random.Next(0, festivalList.Items.Count - 1);

ShowDirections(randomIndex);

    });

}

Käynnistä nyt sovelluksesi ja varmista Location-välilehdeltä että sijaintisi on määritetty Suomeen. Sitten valitse Accelerometer-valikosta ”Play Recorded data” ja IHAILE tuotostasi!

Olemme nyt käyneet olennaisimmat osat Windows Phone kehityksessä. Olemme käyttäneet Blendiä ja Visual Studiota, olemme tehneet tyylejä ja käyttäneet Sample Dataa ja kokeilleet tapahtumia ja sensoreita. Valmiin projektin voit ladata täältä.Eli mitä odotellaan viedään homma askelta pidemmälle ja aletaan tekemään niitä KILLER APPSEJA!

”Kooditon kesä”-kilpailu, voita Windows Phone-puhelin!

Vuoden aikana tulee koodailtua sen verran että joskus on hyvä tehdä jotain muuta. Kesäloma menee monilla rentoutuessa ja eihän ihmisiltä voi muuta vaatiakkaan. Sen takia haluaisimme käynnistää pienen leikkimielisen kilpailun josta voit itsellesi Windows Phone 7-puhelimen!

Haluamme nähdä kenen Blendi on nopein ota aikaa kuinka pitkään kestää projektinluomisestasovelluksen käynnistymiseen.

Miten osallistut:

1. Käynnistä Expression Blend, saat sen ladattua App Hubista

2. Luo uusi Windows Phone Application

3. Paina F5 käynnistääksesi sovellus emulaattorissa

4. Ota aika ylös ja laita se sähköpostilla osoitteeseen KooditonKesa@live.com Laita viestin otsikkoon aikasi.

5. Ajanotto aloitetaan siitä, kun uuden projektin valinnassa painat ok.

Tämän jälkeen syntyy uusi projekti, paina F5 mahdollisimman nopeasti (joka käynnistää sovelluksen emulaattoriin)
Ajanotto päättyy, kun emulaattorissa on sovellus käynnissä ja näet sovelluksesi.

6. Nopeimman 5:n ajan kesken arvotaan uusi Windows Phone 7-puhelin!
Voittajan suorituksesta pyydetään videonauhoite.

Hyvä vinkki muuten tähän on pitää emulaattori valmiiksi päällä :)

Tämä kesäkilpailu päättyy 15.8 ja siihen mennessä lähetetyt ajat mahtuvat mukaan.Voittajalle ilmoitetaan henkilökohtaisesti.

Hyvää kesää!

Drazen Dodik on opiskelija ja hänestä tulee isona nörtti. Tällä hetkellä Drazen työskentelee Silverlightin sekä Windows Phonen parissa Sinisessä Meteoriitissa ja piristää kanssaopiskelijoiden päivää Microsoft Student Partnerina.