Sigurd Snørteland


Category Archive

The following is a list of all entries from the viu² category.

viu² touch – one of the norwegian wp7 app contest winners

More info:
http://www.vs2010.no
http://blogs.msdn.com/b/dpenorway/archive/2011/01/27/3-vinner-av-wp7-app-konkurransen-er-k-229-ret.aspx

viu² touch is a WP7 based version of my silverlight mediacenter app viu² (www.viu2.com).
More information about viu² touch will be published soon!!


viu² now on silverlight.net

Microsoft has now added viu² (my silverlight based mediacenter app) as both a ‘Showcase’-app and a ‘Community sample’-app on their site ‘silverlight.net‘ .

Community Samples
Url: http://www.silverlight.net/community/samples/silverlight-samples/viu2-36741

Showcase

Url: http://www.silverlight.net/showcase


viu² released on Codeplex

My silverlight based mediacenter app, viu², has now been released on Codeplex (http://viu2.codeplex.com).

Features & technology:
» youtube music videos (google.gdata api)
» last.fm music & artist info integrated (last.fm api)
» silverlight out-of-browser support
» podcast
» radio & tv stream
» “toast” notifications
» webbrowser control
» isolated storage
» “screen saver”
» pop chart (yahoo api)

Click here for more info, sample code, etc

Out-of-browser version


Video
Click here to view a video of the application


Silverlight 4 er releaset

15 april 2010 ble releasekandidaten til Silverlight 4 sluppet og med det ble en mengde nye funksjoner tilgjengelig. Blant de største nyhetene er støtte for printing og webcam, elevated trust i OOB-mode, støtte for bruk av Managed Extensibility Framework, samt mulighet for å hente data fra lokal disk i OOB-mode.

Jeg har ikke fått mulighetene til å prøve ut alle de nye funksjonene enda, men jeg har i hvertfall fått oppgradert viu² fra beta-utgaven til release. Når jeg utførte denne oppgraderingen oppdaget jeg at relase-versjonen av Silverlight 4 også har fått endringer på mulighetene for styling av ‘out-of-browser’ vinduet. Man slipper nå å ha standard windows-ramme/meny rundt silverlight-applikasjonen som på bildet nedenfor, og man kan i stede bygge en custom meny/ramme som på bilde 2 nedenfor.

Før:

Nå:

Når viu² er installert i OOB-mode ser derfor applikasjonen ut som på bildet nedenfor:

For å utføre denne endringen må man gå inn i ‘Out-of-Browser Settings’ i Visual Studio og sette ‘Window Style’ til ‘No Border’ (se bildet nedenfor).

Når ‘No Border’ er satt forsvinner alle rammer rundt applikasjonen og det er derfor ikke mulig å flytte rundt/minimere/maximere eller lukke applikasjonen. All den funksjonaliteten må man utvikle selv. Det enkleste er å opprette en meny-controller som man legger til dersom applikasjonen kjører i OOB-mode. Koden nedenfor viser hvordan man kan sjekk om applikasjonen kjøres i OOB-mode:

if (App.Current.IsRunningOutOfBrowser)
{
//code for å vise vindusmenyen
}

Nedenfor ser du kode for å minimere, maximere, lukke og flytte applikasjonsvinduet:

  • App.Current.MainWindow.WindowState = WindowState.Maximized;
  • App.Current.MainWindow.WindowState = WindowState.Normal;
  • App.Current.MainWindow.WindowState = WindowState.Minimized;
  • App.Current.MainWindow.Close();
  • App.Current.MainWindow.TopMost = true;
  • App.Current.MainWindow.DragMove();

Andre endringer i Silverlight 4 er muligheten for å få tilgang til lokale filer. Det forutsetter imidlertid at applikasjonen kjører i OOB-mode med elevated trust, samt tilgangen på lokal disk strekker seg ikke utover mappene ‘Mine dokumenter/Min musikk/Mine bilder/osv’. Nedenfor vises en lite kodesnutt for hvordan man kan loope gjennom alle bilder i ‘Mine bilder’-folderen fra Silverlight:

Straks jeg får litt ledig tid planlegger jeg å introdusere slik lokal tilgang til bilder, musikk og video i viu² applikasjonen. Nedenfor ser du et skjermbildet for hvordan disse valgene kommer til å se ut i menyen.


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å.