Sigurd Snørteland


wallstreet – a wp7 stock app

Here are some screenshots and a video of my latest wp7-project, wallstreet.

This is a stock app that displays the current price of a list of stocks that you provide. You can drill down to get more information, graphs and company news. The application also gives you an overview over the development on the worlds largest stock indexes and stock market news.

The application uses both the ‘panorama’ and ‘pivot’ controls from the ‘phone’-project on Codeplex (phone.codeplex.com). Stocks are powered by Yahoo’s online stock tracker and are delayed by the standard length of time.

More information and source will be published soon!!

Video
Click here to view a video of the application

Advertisements

Erfaringer fra silverlight 4 out-of-browser + “toast” notifications i viu²

I viu²-prosjektet har jeg lenge hatt ønske om å ta i bruk ‘Silverlight Out-of-Browser’ slik at løsningen kan kjøres som en lokalt program. Det viser seg midlertidig at viu²-prosjektet ikke har kunnet benytte denne funksjonen fordi min løsning er avhengig av å hoste en html-frame over silverlight app’en for å vise YouTube-videoer. For å benytte html-frames på toppen av silverlight må man sette følgende parameter i silverlight objekt-taggen i html-siden: <param name=”Windowless” value=”True” /> Når man benytter silverlight ‘Out-of-Browser’ kan man ikke benytte denne teknikken og jeg har derfor tidligere løst dette ved å laget en WPF applikasjon for å  ”hoste” silverlight løsningen i (sjekk denne blogposten: ‘Host Silverlight i WPF app).

Når Silverlight 4  beta’en ble lanser på PDC i november 2009 var ‘Out-of-browser’ en av de løsningen som hadde fått utvidet funksjonalitet og nå finnes blant annet en webbrowser-kontroll som kan host andre websider inne i Silverlight. Jeg har nå oppgradert viu²-prosjekte til Silverlight 4 og lagt inn støtte for ‘Out-of-browser’ som du kan se på bildet nedenfor:

En annen nyttig funksjon i Silverlight 4 er muligheten for å vise “toast” notifications på samme måte som f.eks. det Outlook gjør når man mottar en ny mail. I viu² vises “toast” notifications vinduer med navn på sang og artist ide det skiftes track (se bildet nedenfor). I silverlight 4 er “toast” notifications vinduene foreløpig bare tilgjengelig i “out-of-browser”-mode.

Jeg skal nå gå gjennom hvordan jeg har tatt i bruk disse nye silverlight 4 funksjonene i viu²-prosjektet.

Out-of-browser
Det første jeg undersøkte i forbindelse med Silverlight 4 var å ta i bruk den nye webbrowser-kontrollen for å vise YouTube-innhold og lignende, i stede for dagens løsning med å hoste en html-frame over silverlight app’en. Jeg oppdaget da at den nye webbrowser-kontrollen bare er tilgjengelig i “out-of-browser”-mode og at man i browser-mode må benytte html-brush i stede. Med utgangspunkt i dette har jeg i stede valgt å beholde dagens løsning slik den fungerer på http://www.viu2.com og heller vise denne websiden i webbrowser-kontrollen når man befinner seg i “out-of-browser”-mode.

Tidligere ble RootVisual i App.xaml satt til usercontrol’en MainPage.xaml, men nå har jeg opprettet en ny usercontrol kalt Main.xaml som settes i RootVisual.

Main.xaml-filen inneholder bare en kontroll og der er den nye webbrowser-kontrollen som skal benyttes i ‘out-of-browser’-mode.

Når Main-kontrollen blir loaded sjekkes det om løsningen kjøres lokalt som ‘out-of-browser’ eller inne i en browser. Dersom man kjører ‘out-of-browser’  navigerer vi webkontrollen til å vises siden http://www.viu2.com. Hvis løsningen derimot kjører inne i en browser setter vi RootVisual til MainPage.xaml og viser dermed viu2-løsningen på “gamle måten” uten bruk av de nye Silverlight 4 funksjonene.

Denne løsningen gjør det mulig å kjøre viu² i “out-of-browser”-mode uten å gjøre endringer på den eksisterende logikken.

“Toast” notifications
‘Toast notifications’ eller ‘NotificationWindow’, som det heter i Silverlight 4, gjør det mulig å vise så popupvinduer nede i høyre skjermdel tilsvarende det Outlook gjør når man mottar en ny mail. Denne funksjonen er bare tilgjengelig når man kjøre i ‘out-of-browser’-mode og kan se ut som på bildet nedenfor.

Metoden nedenfor er en del av ‘Main.xaml’-filen og sørger for at popupvinduene vises. Metoden tar inn en tekst med navnet på sang og artist adskilt med tegnet §, som den splitter opp og viser i popupvinduet, men først sjekkes det at applikasjonen kjører i ‘out-of-browser’-mode.

Klassen ‘NotificationWindow’ er ny i silverligt 4 og er den metoden som viser popup-vinduet, og vi lager derfor en instans av denne klassen, og definerer høyde, bredde, innhold/content til popup-vinduet. Deretter kaller vi metoden ‘Show(5000)’ sammen med antallet millisekunder popupen skal vises, som i vårt tilfellet er 5 sek.

Når det gjelder innholdet i popup-vindue, dvs. content, så har vi definert de i en egen usercontrol kalt ‘NotificationControl’. Xaml’en til denne usercontrollen vises lenger nede i denne artikkelen.

Nedenfor vises xaml’en til usercontrol’en ‘NotificationControl’ som settes som ‘conent’ i popup-vinduet.

Normalt sett har vi nå skrevet all nødvendig kode for å vise et ‘toast vindu’, men siden jeg har valgt å lage ‘out-of-browser’-løsingen på en litt spesiell måte må vi gjøre noen flere triks. Problemet er at når vi kjører i ‘out-of-browser’-mode viser denne løsningen bare en html-control som rendrer http://www.viu2.com nettsiden. Årsaken til denne fremgangsmåten finner du lengre oppe i denne artikkelen. Jeg må derfor lagen en kommunikasjonskanal mellom ‘out-of-browser’-klienten lokalt og http://www.vi2.com, slik at nettsiden kan melde i fra til ‘out-of-browser’-klienten om at popup-vindu skal vises. Dette løser jeg ved å benytte html-bridge/javascript.

Vi begynnet med å opprette en javascript-metode i html-siden som hoster http://www.viu2.com. Denne metoden tar inn en string kalt ‘text’ som vil være navnet på artisten og sangen som skal vises i popup-vinduet. Javascriptet kaller videre på ‘window.external.Notify’ med stringen ‘text’ som innparameter. Dette er en metode som http://www.viu2.com kan kalle på og som ‘out-of-browser’-klienten kan lytte på.

Vi går så inn i den “gamle” koden til http://www.viu2.com og definerer en metode som kan kalle på javascriptet som vi nettopp oppretten. Nedenfor vises eksempel på hvordan man kaller på javascriptet. Innparameteret vil i dette tilfellet være navn på sang+artist, adskilt med tegnet §.

HtmlPage.Window.Invoke(javascriptmetodenavn, innparameter);

Siste skritt er å gå tilbake til ‘Main.zaml’ og definere en lytter til javascriptet slik at man kan vises popup-vinduet i ‘out-of-browser’-mode. Det skjer i metoden ‘UserControl_Loaded’ slik du ser på bildet nedenfor.

Vi har dermed en løsning som viser ‘toast’-vinduer i ‘out-of-browser’-mode med informasjon som kommer fra en “ekstern” nettside på internett.

Hvis du går til www.viu2.com og høyreklikker kan man velge å installere viu² lokalt og dermed kan du teste ut disse ny funksjonene.

Pop Chart Top 100
En annen liten nyhet i viu² er at klienten nå henter inn Yahoo sin ‘Pop Chart Top 100‘-liste med bilder og rangering av sangene. Dermed kan man nå enkelt få tilgang til listepop-musikk. Planen er etter hvert å tilby andre hit-lister også, samt lage liste over hva brukerne av viu² hører mest på. Andre funksjoner som er på vei inn i viu² er visning av lignende artister og sanger til det du som bruker hører på.