Dag König

TrafikTitt - Språkhanteringen i Windows Phone 7

Detta är en serie korta noteringar som jag vill dela med mig efter att ha utvecklat Windows Phone appen TrafikTitt. Mer info om appen och ett index på noteringarna finns här.

Först vill jag säga att denna information har jag nästan plankat av ifrån Johan Lindfors blogg, i hans inlägg Lokalisera dina Windows Phone 7 applikationer. Där finns en grundlig genomgång av hur man gör.

Jag använder mig av resursfiler för att lagra alla strängar som skall visas i TrafikTitt. Jag skapar en huvudresursfil för standardspråket, Engelska, och en annan för Svenska. (Det är dessa två språk som jag stödjer.)

Varför sätter jag engelska som standard? Jo, när man lägger upp sin app i MarketPlace så skall man ange vilket som är de understödda språken för sin app. Där finns inte (än i alla fall) svenska med. Det gör att jag för enkelhetens skulle och också för att snabbare gå igenom certifieringsprocessen, väljer att ha ett av språken som stödjs.

Projektfilen måste också uppdateras för att registrera vilka språk som stödjs. Detta kan man inte göra i Visual Studio (det finns sätt har jag senare lärt mig, men kunde inte hitta det när jag skrev artikeln) utan måste öppna projektfilen i någon editor som kan läsa xml. Notepad går bra.

Lägg till de språk som skall stödjas via taggen SupportedCultures.

<SupportedCultures>en-US;sv-SE;</SupportedCultures>

Hur vet applikationen vilket språk som skall visas? Det gör den genom att läsa vilket språk som själva telefonen har. Ett problem med idag är att man inte kan ange svenska som ett av dessa. Man kan endast ange svenska för att ange hur formaten på datum och dylikt skall vara. För att låta vår app använda sig av denna information så lägger vi till en rad i App.cs konstruktor.

public App()
{
    MyResources.Culture = System.Threading.Thread.CurrentThread.CurrentCulture;


}

Hur visar jag dessa strängar? Man kan göra det på flera sätt. Jag vill endast göra detta genom att förändra xaml-filerna. Detta gör man genom att skapa en klass som man sedan gör tillgänglig för att kunna bindas i xaml-filen. (Se Johans blogginlägg för hur detta görs.)

Naturligtvis går det också att nå detta via kod. Då ser det ut på följande sätt:

buttonFavorites.Text = MyResources.MainPage_Favorites;

TrafikTitt - Använda sig av Live Title

Din applikation i Windows Phone 7 kan ej köras i bakgrunden. Men man kan ändå simulera på flera sätt att applikationen körs även fast den inte gör det. Ett av de enklaste sätten att göra detta på är att använda funktionen Live Title.

Detta är en serie korta noteringar som jag vill dela med mig efter att ha utvecklat Windows Phone appen TrafikTitt. Mer info om appen och ett index på noteringarna finns här.

Med Live Title kan man ange en url som telefonen med jämna mellanrum skall anropa för att hämta ned en bild och visa bilden istället för applikationens ikon. Detta funkar endast på om applikationens ikon är "pinnad" till startsidan på telefonen.

Hur gör man det?

var mySchedule = new ShellTileSchedule();
 
mySchedule.Interval = UpdateInterval.EveryHour;
mySchedule.Recurrence = UpdateRecurrence.Interval;
mySchedule.MaxUpdateCount = int.MaxValue;  
mySchedule.RemoteImageUri = new Uri(http://url_till_bild, UriKind.Absolute);
 
mySchedule.Start();

Jag använder mig av klassen ShellTitleSchedule. I denna klass finns ett antal egenskaper:

Interval	Sätter intervallet på hämtningen. Det lägsta intervallet är en timma. Andra värden är varje dag, vecka eller månad.
Recurrence	Sätter om man vill att det endast ske en gång eller flera gånger.
MaxUpdateCount	Hur många gånger som uppdateringen skall göras.
RemoteImageUri	Länken till bilden. Bilden får max vara 80Kb och ta max 15 sekunder att ladda ned.

När man har kört denna kod kan man stänga ned sin applikation och Windows Phone kommer att köra denna uppdatering utan att din applikation behöver göra någonting.

Observera!
När man testar detta, både i telefonen och i emulatorn, så börjar inte den första uppdateringen förrän det första intervallet har förfallit. Alltså, har jag satt på en-timmas-intervall, så kommer jag inte att se något hända förrän en timma har gått. (Jag har faktiskt inte provat de andra intervallen.)

TrafikTitt - Att lagra trafikkamerorna i en xmlfil

Detta är en serie korta noteringar som jag vill dela med mig efter att ha utvecklat Windows Phone appen TrafikTitt. Mer info om appen och ett index på noteringarna finns här.

En stor del av min tid, när jag utvecklade TrafikTitt, gick åt att få in alla kameror ifrån trafiken.nu. De hade tyvärr inte något enkelt sätt att exportera kamerapositionerna, utan det fick göras manuellt.

Jag valde att skapa en xmlfil, inkludera den i installationen och vid uppstarten av applikationen, initiera domänstrukturen med informationen.

Jag använda mig av xml av flera skäl:

• Det är lätt lägga till information genom att endast använda sig av vilken texteditor som helst.
• I framtiden kan det vara möjligt att uppdatera kamerapositionerna genom att anropa en webbtjänst som hämtar en uppdaterad xmlfil.

Min xmlfil har följande utseende (naturligtvis är denna förkortad):

<?xml version="1.0" encoding="utf-8" ?>
<TraficCameras>
  <Region Name="stockholm" Id="1">
    <Route Name="275 Akallavägen" Id="1">
      <TraficCamera>
        <Id>249</Id>
        <Name>Norrviksvägen</Name>
        <Url>http://www.trafiken.nu/cameraimages/249.jpg</Url>
        <Latitude>59.356073</Latitude>
        <Longitude>18.033202</Longitude>
        <CropX></CropX>
        <CropY></CropY>
      </TraficCamera>
    </Route>
    <Route Name="Kista" Id="2">
      <TraficCamera>
        <Id>251</Id>
        <Name>Husbykorset</Name>
        <Url>http://www.trafiken.nu/cameraimages/251.jpg</Url>
        <Latitude>59.414445</Latitude>
        <Longitude> 17.930409</Longitude>
        <CropX></CropX>
        <CropY></CropY>
      </TraficCamera>
    </Route>
  </Region>
</TraficCameras>

Jag har en hierarkisk struktur bestående av Region, Route och TraficCamera. (Som den uppmärksamme läsaren ser har jag redan förberett för att ha möjlighet att registrera flera regioner såsom Malmö och Göteborg.) Route är ett begrepp som trafiken.nu använder sig av för att kunna samla ihop ett antal kameror efter en färdväg.

Elementet TraficCamera är den intressanta delen i denna fil. Den innehåller:

• Name - namnet på kameran
• Url - länken till kamerabilden på trafiken.nu
• Latitude och Longitude - positonen på kameran
• CropX och CropY - vilket inte använts just nu och egentligen skall tas bort

Hur man läser in xml och gör om den till sin domänmodell

Första steget är att läsa in filen. Här är min metod som gör det:

private XElement loadXmlFile()
{
    StreamResourceInfo xml =
    Application.GetResourceStream(new 
        Uri("/TrafikTitt;component/CameraPlaces.xml", 
            UriKind.Relative));
 
    return XElement.Load(xml.Stream);
}

Url:n ser lite konstig ut. Det viktiga för att få det att funka är att man verkligen ser till att xmlfilen har egenskapen Build Action satt till Resource. Då bakas den in i xap-filen, som är den som använts i telefonen.

Nästa steg är att ta denna xml och föra över den till den interna domänmodellen som jag har i programmet.

Den här koden kan ge lite skrämselhicka när man först ser den.

Dictionary<string, Region> regions = 
    (from region in xml.Elements("Region")
        select new Region()
        {
            Name = region.Attribute("Name").Value,
            Id = Convert.ToInt32(region.Attribute("Id").Value),
            Routes = (from route in region.Elements("Route")
                    select new Route()
                    {
                        Name = route.Attribute("Name").Value,
                        Id = Convert.ToInt32(route.Attribute("Id").Value),
                        Cameras = (from cam in route.Elements("TraficCamera")
                                    where cam.Element("Longitude").Value != "0"
                                    select new TraficCamera()
                                    {
                                        Id = Convert.ToInt32(cam.Element("Id").Value),
                                        Name = cam.Element("Name").Value,
                                        Url = new Uri(cam.Element("Url").Value),
                                        Longitude = 
                                            Convert.ToDouble(
                                            cam.Element("Longitude").Value, 
                                            new CultureInfo("en-US")),
                                        Latitude = 
                                            Convert.ToDouble(
                                            cam.Element("Latitude").Value, 
                                            new CultureInfo("en-US")),
                                        IsDisplayed = false,
                                    }).ToList<TraficCamera>()
                    }).ToList<Route>()
        }).ToDictionary(k => k.Name);

Men om vi benar ut det bit för bit så blir det inte så komplext. Jag skapar en kollektion av Region. Varje Region har en egenskap som heter Routes, vilken är en kollektion av Route och varje Route har en kollektion av TraficCamera som finns i egenskapen Cameras.

Denna linqfråga använder sig av linq to xml för att traversera genom xmlfilen och skapa domänen.

Observera att jag använder mig av CulturInfo när jag skall läsa in ett tal som innehåller decimaler. Detta för att jag skall vara säker på att inläsningen skall funka oavsett vilket format som man valt i inställningarna på telefonen.

TrafikTitt – Kartnålarna i Bing Maps

Detta är en serie korta noteringar som jag vill dela med mig efter att ha utvecklat Windows Phone appen TrafikTitt. Mer info om appen och ett index på noteringarna finns här.

I förra bloggposten beskrev jag hur man använder Bing Maps i sina egna appar i Windows Phone. För att göra kartan mer intressant kan man lägga på egna delar på denna karta, däribland kartnålar.

I TrafikTitt används kartnålar (Pushpins) för att registrera vart de olika kamerorna finns och också visa kamerabilden för en kamera genom att klicka på kartnålen.

En Pushpin är en klass som man instansierar och sedan lägger till den i kartobjektet. Det sker på följande sätt:

Pushpin pushPin = new Pushpin() { Content = camera.Name, Tag = camera };
pushPin.Background = new SolidColorBrush(Color.FromArgb(255, 245, 218, 0));
pushPin.Foreground = new SolidColorBrush(Colors.Black);

 

Här skapar vi en ny Pushpin med namnet pushPin. I konstruktorn sätter vi också egenskaperna Content och Tag. Content är innehållet som skall synas i kartnålen. (Observera att detta är på samma sätt som i en knapp, Content kan innehålla nästan vad som helst.) Egenskapen Tag, som kan innehålla vad som helst, innehåller mitt objekt för själva kameran, camera. (Mer om själva domänmodellen i TrafikTitt i ett annat inlägg.)

Sedan sätts färgerna för för- och bakgrunden.

Nästa steg är att placera denna Pushpin på kartan. Det görs i två steg: sätt koordinaterna och lägg till den i kartobjektet.

Man lägger till koordinaterna genom att först skapa ett objekt av typen Location och sätta dess egenskaper Latitude och Longitude och sedan lägga till detta objekt till vår Pushpin.

Location loc = new Location();
loc.Latitude = camera.Latitude;
loc.Longitude = camera.Longitude;
pushPin.Location = loc;

(På samma sätt här så använder jag mig av mitt domänobjekt camera för att lagra Latitude och Longitude. Dessa båda är definerade som Double.)

Man använder sig av egenskapen Children i kartobjektet mapTrafik för att lägga till denna pushPin.

mapTrafic.Children.Add(pushPin);

Visning av kamerabilden

Det sista som jag skall beskriva i det här blogginlägget är hur man hanterar själva visningen av kamerabilden. Det görs genom att man kopplar ett event till de kartnålar som vi lägger till på kartan.

pushPin.MouseLeftButtonDown += 
        new MouseButtonEventHandler(pushPin_MouseLeftButtonDown);

Jag kopplar upp eventet MouseLeftButtonDown eftersom eventet Click inte finns. (LeftButtonDown är samma sak som att trycka med fingret kartnålen.) Jag använder mig av en generell hanterare av eventet med namnet pushPin_MouseLeftButtonDown.

void pushPin_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Pushpin pushPin = sender as Pushpin;
    TraficCamera tc = pushPin.Tag as TraficCamera;
    ShowCameraImage(tc); 
}

TrafikTitt - Bing Maps i Windows Phone

Detta är en serie korta noteringar som jag vill dela med mig efter att ha utvecklat Windows Phone appen TrafikTitt. Mer info om appen och ett index på noteringarna finns här.

Jag har aldrig programerat emot en kart förut, så jag hade lite respekt inför den delen av applikationen. Men det var mycket lätt.

För det första måste man skaffa sig ett konto för Bing Maps för att kunna använda kartkontrollen. Detta gör man på Bing Maps Portal. (Ingen kostnad.)

Man får en API-nyckel när man har registrerat sin applikation som skall använda Bing Maps. Denna nyckel kopierar man in i egenskapen CredentialsProvider för kontrollen för Bing Maps.

<map:Map x:Name="mapTrafic" CredentialsProvider="[API-nyckel]" ... />

Sedan är nästa steg att centrera och zooma kartkontrollen så att den visar det som man vill se. Detta gör man med de två egenskaperna Center och ZoomLevel. I min applikation är standardvärdena för detta:

<map:Map x:Name="mapTrafic" Center="59.324414,18.052993" ZoomLevel="13.00" ... />

Koordinaterna

Det sättet som jag använde mig för att få tag på koordinaterna för Center var följande.

1. Öppna Bing Maps i webbläsaren, http://maps.bing.com
2. Skapa en pushpin genom att högerklicka där jag vill ha ut koordinaterna och välja Add a pushpin
3. I My Place Editor under Actions, välja Send och Email för att skapa ett nytt email. Detta email innehåller en länk som bland annat innehåller koordinaterna:

<http://www.bing.com/maps/?v=2&cp=59.3087415586279~18.04156875525006&lvl=10&dir=0&sty=r&sp=Point.twm2yjjh4nwb_Untitled%20item____>

(Jag valde att avrunda ned till sex decimaler.)

När man flyttar runt kartan i applikationen så ändras naturligtvis egenskapen Center. Jag sparar denna information för att kunna komma ihåg detta. (Mer om detta i ett senare inlägg.)

TrafikTitt - min första app för Windows Phone 7

Det började i november när jag fick för mig att testa Bing Maps ihop med Trafiken.nu:s kartor. Det gick så lätt att jag bestämde mig för att skapa en riktig app av det och publicera den på Windows Phone Marketplace. Här kan ni ladda ned och installera TrafikTitt.

Jag kommer att göra ett antal bloggposter med erfarenheter ifrån att utveckla och publicera denna app. Men först, en introduktion av appen. (Se en lista över de inlägg som jag gjort om erfarenheter av att utveckla appen längst ned i denna bloggpost.)

TrafikTitt är en karta som visar vart Trafiken.nu:s kamerror över Stockholmsområdet finns. När man klicka på en kartnål visas själva kamerabilden.

Det finns också möjlighet att få upp en lista med alla kameror, över 130 stycken idag, och därifrån se kamerabilden också.

Till slut så finns också möjligheten att välja en kamerabild som skall synas på startskärmen. Denna bild uppdateras en gång i timmen.

Blogginlägg om erfarenheter av utvecklingen av TrafikTitt

2011-01-12 TrafikTitt - Bing Maps i Windows Phone
2011-01-13 TrafikTitt – Kartnålarna i Bing Maps
2011-01-20 TrafikTitt - Att lagra trafikkamerorna i en xmlfil
2011-01-27 TrafikTitt - Använda sig av Live Title
2011-01-31 TrafikTitt - Språkhanteringen i Windows Phone 7