The Problem Solver : WP7

Using SignalR for real time communication on the web

Maurice — Mon, 09 Jul 2012 14:13:00 GMT

In a previous blog post I mentioned how exited I was about WebSockets and the future with real time duplex communication over the Internet. Unfortunately the current support for WebSockets, both on the client and on the server, is still somewhat limited making this a thing of the future. Does that mean we can do this yet? Not quite.

SignalR to the resque

Even if a pure Web Socket solution isn’t possible yet there are perfectly good alternatives. And the one I really like is SignalR as it allows for the same kind of application today. Check out a live demo of a simple chat application here.

So if SignalR works today does it mean it doesn’t use Web Sockets? Well it might or might not depending on the circumstances. SignalR actually provides an abstraction layer over the actual transport used. And depending on the client and sever capabilities it can use one or 4 different networking techniques

WebSockets
Server Send Events
Forever frame
Long polling

It just chooses the best solution that both the browser and server support.

SignalR is multi browser

I have create a simple chat page using SignalR and as you can see in the screenshot below it supports lots of browsers on different platforms, here I used desktop IE, Chrome and FireFox as wel as my iPad and Windows Phone 7. All of these just work with SignalR. Pretty good as Web Sockets would only work on Chrome and FireFox at the moment.

The client side code

The HTML markup required is really simple

<h2>

    SignalR Chat</h2>

<input type="text" id="txt" />

<button id="btn">

    Submit</button>

<ul id='messages'>

</ul>

<script src='@Url.Content("~/Scripts/jquery.signalR-0.5.2.js")'>   1:  
</script>   1:  
   2:  
   3: <script src='@Url.Content("~/signalr/hubs")/'> 
</script>

The most important thing about the markup is the two script references at the bottom. The firsts, jquery.signalR-0.5.2.js, points to client side library that ships with SignalR. The second, /signalr/hubs, is a dynamically generated based on the server side Hub classes, see below.

The client side JavaScript is also quite simple.

$(function () {

    var hub = $.connection.signalRChatHub;

    $.connection.hub.start();

    hub.ChatMessage = function (msg) {

        $('<li>').text(msg).prependTo('#messages');

};

    $('#btn').click(function () {

        var txt = $('#txt').val();

        hub.sendMessage(txt);

        $('#txt').val('').focus();

});

});

Basically SignalR extends jQuery and add the connection property containing a property for each hub. Next we call start() to initialize the communication and start listening for the ChatMessage callback, this is the method being called on the server Clients property below. To send some data to the server we just call the sendMessage() function, the public function defined on the server side hub below.

The server parts

The server side implementation of SignalR is also quite nice. All I had to do is add the SignalR nuget package and create a class deriving from Hub.

public class SignalRChatHub : Hub

    public void SendMessage(string message)

        Clients.ChatMessage("Echo " + message);

The public SendMessage is automatically made available to JavaScript clients and the Clients property is a Dynamic object. Just call a method on Clients and it will fire on all connected JavaScript client. You can also just call back to the originating client using the Dynamic Caller property if you want to. And best of all this works perfectly fine with my budget shared hosing account.

Check out a live demo here.

Enjoy!

DotNed Podcast: Tom Verhoeff over geld verdienen met Windows Phone 7 applicaties

Maurice — Thu, 10 May 2012 10:12:00 GMT

In deze podcast spreekt Maurice de Beijer met Tom Verhoeff over zijn sessies op de TechDays. Tom presenteerde een sessie over hoe je geld kan verdienen met Windows Phone 7 applicaties. Het lijkt op het eerste gezicht zo eenvoudig, je maakt een app en het geld stroomt binnen. Maar in de praktijk blijkt het toch iets lastiger te zijn en zijn er best wel veel details waar je op moet letten.

Links:

Blog: http://blog.tomverhoeff.nl/
Blogpost nav TechDays sessie: http://blog.tomverhoeff.nl/2012/02/24/making-money-with-windows-phone-applications-at-techdays-2012/
Mark Monster zijn Unified Ad oplossing: http://mark.mymonster.nl/2012/02/07/windows-phone-unified-ad-part-1-introduction/
Verschillende posts over Tom zijn review reader tool: http://blog.tomverhoeff.nl/tag/wp7rr/
AddDuplex: http://www.adduplex.com/
Managing Trial Applications for Windows Phone: http://www.slickthought.net/post/2010/08/30/Managing-Trial-Applications-for-Windows-Phone-7.aspx

Je kan hem hier afluisteren.

Met dank aan onze sponsor RedGate.
http://www.red-gate.com/

Enjoy!

Een eerste weekend met de Nokia Lumia 800

Maurice — Mon, 14 Nov 2011 10:13:00 GMT

Afgelopen vrijdag bracht de koerier mijn nieuwe telefoon, een Nokia Lumia 800 telefoon met Windows Phone 7 Mango als OS. En die heb ik dit weekend eens flink onderhanden genomen om te kijken of hij nu echt zo goed is als iedereen vindt en vooral of het beter is dan mijn huidige iPhone.

De hardware.

Ik kan er kort over zijn. Nokia heeft hier een hele mooie telefoon gemaakt. Hij is prachtig afgewerkt met een heel mooi helder scherm. Het eerste wat opviel is dat de het standaard blauw anders is dan de Samsung Omnia die we ook al in huis hebben. Dat is geen verschil in het scherm maar het blijkt dat Nokia een extra kleur blauw toegevoegd heeft, Nokia blue, en dat ziet er best mooi uit. Dat is overigens niet de enige Nokia extra die er op de telefoon aanwezig is, zo hebben ze ook extra ringtones en software, meer daarover later, standaard op de telefoon geïnstalleerd. De eerste indruk is ook dat de batterij een stuk langer meegaat dan bij de iPhone maar dan moet ik wel toegeven dat ik het niet echt getest heb, het is maar een indruk. Zo heb ik de hele zondag aardig wat geinternet, een half uur gereden met de Nokia Rijden en de GPS aan en een paar uur naar Nokia Music zitten luisteren en toen was de accu nog niet leeg.

Waar die batterij-winst mee gehaald wordt weet ik niet, ik heb begrepen dat het voor alle leveranciers van telefoons, en de software die er op draait, een grote uitdaging is om de batterij zo lang mogelijk mee te laten gaan. Het is overigens niet mogelijk om een Nokia Lumia 800 open te maken en de batterij te vervangen dus extra stroom zal net als bij een iPhone uit een extern juicepack moeten komen.

Over het algemeen voelt de telefoon heel solide aan. En voor het geval dat komt er standaard ook nog een beschermende hoes omheen. Of dat echt nodig is weet ik niet, ik heb begrepen dat de telefoon van hetzelfde materiaal gemaakt is waar veiligheids helmen van gemaakt worden en het glas, dat door de hoes niet bedekt wordt is ook kraswerend. Maar in de auto bleek de hoes al een leuk antislip voordeel te hebben en het betekent ook dat de knoppen aan de zijkant niet meer uitsteken en dus minder snel per ongeluk ingedrukt worden.

Windows Phone 7 Mango

Ik ben erg te spreken over de Windows Phone 7 Mango software. Het werkt snel en makkelijk, net als iOS op de iPhone. Maar wat ik een groot pluspunt vindt is dat je op de levende tegels al een hoop informatie kan vinden en vaak niet eens de applicatie op hoeft te starten. En dan bedoel ik niet alleen het aantal ongelezen emails maar dingen als Buienradar waar ze al een klein recent overzicht van de buien laten zien op de tegel en je zo snel kan zien of het überhaupt de moeite waard is om de applicatie op te starten en verder te kijken. Veel applicaties bevatten dit soort levende tegels om snel informatie te krijgen. De huidige trend van sociale media zoals Facebook en Twitter is ook overal door de telefoon geïntegreerd en voor veel dingen is niet eens een extra applicatie nodig. Ook handig is dat je contactpersonen in groepen in kan delen en dan zo de updates per groep kan bekijken.

Over contactpersonen gesproken. Om mijn mail, agenda en contactpersonen te beheren gebruik ik Google Apps. En dat werkt prima samen met de Windows Phone 7, er is een optie om een Google account toe te voegen en alles werkt gewoon. Ook afspraken op de telefoon in de agenda zetten synchroniseert prima terug naar het Internet, wel even in de goede agenda zetten natuurlijk.

Wat ook makkelijk is dat je op het lockscreen al infomatie als aantal ongelezen emails en volgende afspraak kan zien en de muziek speler kan bedienen zonder de telefoon te moeten ontgrendelen.

Net zoals bij de iPhone zijn er veel appjes die je kan downloaden van een centrale marketplace. Het zijn er voor de Windows Phone 7 zeker nog niet zoveel als er voor de iPhone beschikbaar zijn, en ik mis er nog een paar, maar er zijn er al 35.000 dus er is veel te halen. En dit aantal zal alleen maar groter worden. De belangrijke populaire apps als NU.NL, Buienradar, WhatsApp, Runkeeper, Wonder Reader (voor Google Reader) en Trip-It zijn allemaal beschikbaar. Een paar die ik nog mis zijn de ANWB, Appie of Instapaper maar het zal een kwestie van tijd zijn voor die ook beschikbaar zijn. Ook aan spelletjes is geen gebrek en zijn populaire namen als Angry Birds en Fruit Ninja zijn allemaal beschikbaar.

De extra Nokia software

Nokia heeft een paar extra applicaties op de telefoon gezet. De Nokia Kaarten applicatie die er nu op staat is nog niet de echte en stuurt alleen naar de marketplace. De echte komt binnenkort, als de telefoon in de winkel verkrijgbaar is, vanzelf via de marketplace binnen. Nokia Kaarten wordt overigens gratis beschikbaar voor alle Windows Phone 7 gebruikers, ook die met een ander merk telefoon

Daarnaast is er Nokia Music die naast een groot aanbod van commerciële muziek ook het gratis mix-radio bevat waar iedereen zonder extra kosten naar een groot aantal muziek kanalen kan luisteren. Op dit moment wordt de muziek nog op het moment van afspelen binnen gestreamed maar binnenkort moet er een update komen waar de muziek ook opgeslagen en offline afgeluisterd kan worden. Zo zit ik nu naar het jaren 80 rock channel te luisteren.

Een andere nuttige app die ik vandaag eens getest heb is Nokia Rijden, gesproken navigatie software voor in de auto. Je kan hiervoor kaarten van een groot deel van de wereld downloaden en op je telefoon bewaren. Op dit moment heeft deze applicatie een beperking dat je een data verbinding nodig hebt om de bestemming te zoeken maar dit moet binnenkort ook offline werken. Overigens vond ik een menu optie met de titel "Best inst" ook niet helemaal duidelijk om de bestemming op te geven, misschien iets met een vertaling? Wat hierbij wel best handig is dat je een mooi hoesje voor de de telefoon krijgt en dat bij daarmee mooi tegen het dashboard blijft staan. Dat hoefde ik met mijn iPhone niet te proberen, in de eerste bocht was ik hem kwijt. Toch waren de ervaringen met Nokia Rijden niet puur positief. Zo hebben we in het centrum van Zoetermeer een tunnelbak waar je een druk stukje kan passeren, daar heb je geen stoplichten en mag je zelfs 70 Km/uur rijden. En waar TomTom die feilloos weet te vinden wou Nokia Rijden toch bovenlangs waar je 50 Km/uur mag en 3 stoplichten moet passeren, toch jammer. Iets wat ik ook miste is dat TomTom me waarschuwt als ik te hard rij, iets wat Nokia niet doet. Maar daar staat tegenover dat ik Nokia Rijden wereldwijd kan gebruiken en mijn telefoon toch al bij me heb.

Conclusie

Alles bij elkaar ben ik heel tevreden met de Nokia Lumia 800. De hardware is perfect en Windows Phone 7 voelt lekker aan. Op de extra Nokia software, vooral Nokia Rijden, valt nog wel wat aan te merken op dit moment maar ik weet dat het belangrijkste probleem, een data verbinding nodig hebben om de bestemming op te geven, binnenkort opgelost is. De indrukken van dit eerste weekend zijn dan ook zo dat ik niet bepaald terug verlang naar mijn iPhone, die kan de kast in, maar dat de Nokia Lumia 800 mijn hart gestolen heeft!

En wil je meer weten over de Nokia Lumia 800 en wat Nokia allemaal van plan is? Luister dan eens naar deze podcast.

www.TheProblemSolver.nl
www.dotnetevents.nl

DotNed Podcast: Jurgen Thysmans en het Tweakers Testpanel voor de Nokia Lumia 800

Maurice — Thu, 10 Nov 2011 18:30:00 GMT

In deze podcast spreekt Maurice de Beijer met Jurgen Thysmans van Nokia over wat de omschakeling van Nokia naar het Windows Phone 7 platform allemaal voor gevolgen gaat hebben. Tevens bezoeken we het Testpanel Nokia Lumia 800 dat die avond door Tweakers en Nokia samen georganiseerd werd en waar 40 testers met een Nokia Lumia 800 naar huis gingen.

Links:

http://discoveryzone.nl/
http://forum.nokia.com
Marko Ahtisaari op http://conversations.nokia.com/

http://www.dotned.nl/PodCasts.aspx?id=18

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

DotNed podcast: Joost van Schaik over de Windows Phone 7 Mango update

Maurice — Wed, 12 Oct 2011 12:33:23 GMT

In deze podcast spreekt Maurice de Beijer met Joost van Schaik die zojuist de MVP award als Windows Phone Developer ontvangen heeft. In deze podcast bespreken we de nieuwe Mango update voor de Windows Phone 7 en wat dit allemaal voor nieuws brengt.

Links:
Blog: http://dotnetbyexample.blogspot.com/
SilverlightSerializer: http://whydoidoit.com/2010/04/08/silverlight-serialization/ en http://whydoidoit.com/silverlight-serializer/

De podcast is hier te vinden.

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

Workflow Services and Windows Phone 7

Maurice — Sat, 05 Feb 2011 18:12:54 GMT

Today I did a fun presentation at the Engineering World Conference in the Netherlands on using the Windows Phone 7 with a Workflow Service hosted on Windows Azure.

The sample application, that is complete with all source on CodePlex over here, consists of an expense app on the phone

and an ASP.NET MVC site hosting the workflow service.

The PowerPoint presentation can be found here.

It was a fun session on a fun event

www.TheProblemSolver.nl
www.dotnetevents.nl

Windows Phone 7, Animations and Data Binding

Maurice — Mon, 27 Dec 2010 16:20:20 GMT

While working on one of my WP7 applications I noticed a weird problem with the animations. The app is pretty simple with just two pages. I added the same page load animation, see below, to both pages and all seemed to work just fine.

<phone:PhoneApplicationPage.Projection>

    <PlaneProjection

        x:Name="plane"

        CenterOfRotationX="0"/>

</phone:PhoneApplicationPage.Projection>

<phone:PhoneApplicationPage.Triggers>

    <EventTrigger>

        <BeginStoryboard>

            <Storyboard>

                <DoubleAnimation

                    Storyboard.TargetName="plane"

                    Storyboard.TargetProperty="RotationY"

                    From="-90"

                    To="0"

                    Duration="0:0:0.5"/>

            </Storyboard>

        </BeginStoryboard>

    </EventTrigger>

</phone:PhoneApplicationPage.Triggers>

The animation causes the page to rotate in and is something I copied from Charles Petzold eBook Programming Windows Phone 7 although I shortened the time to just half a second. While developing everything worked just fine when I ran my application in the emulator. However when I deployed my application to a real phone I noticed that the first page ran the animation just fine but the second page didn’t show the animation at all.

The hunt for the missing animation

After some trial and error I noticed that the animation started showing up if I increased the time to around 1.5 seconds. And it wasn’t the complete animation, only the last part would show up. The first second or so would just not show up at all. Of course I could have changed the animation to do nothing for a second and then sweep in but that felt like a wrong hack so I decided to find out what was really going on and why the two pages where behaving differently.

The guilty party is data binding

It turned out the main difference between the two pages was the fact that the second used data binding while the first didn’t. And when I removed the DataContext from the second page the animation would show up just as it was supposed to. Of course the data binding was there for a good reason and removing it wasn’t an option so I had to change the way the data binding was initialized.

I was using the excellent MVVM Light Toolkit written by Laurent Bugnion and it uses the ViewModelLocator pattern to hook up the View and the ViewModel. This works really well as Blend understand the paradigm and makes it very easy to do the UI work in Blend. However it also means that the DataContext is set when the page is first created. Normally not a bad thing but in this case it meant that all data bindings where being evaluated right when the page was created, at the same time as the animation was running. So the solution was to move the runtime data binding to the page Loaded event using the following code:

void SecondPage_Loaded(object sender, RoutedEventArgs e)

    DataContext = ViewModelLocator.SecondStatic;

Of course I also needed to prevent the page from setting the DataContext when first created while still maintaining the blendability of the page. This is achieved by making a small change to the ViewModelLocator class in the property that returns the ViewModel when the page is loaded:

public SecondViewModel Second

get

        if (SecondStatic.IsInDesignMode)

            return SecondStatic;

        else

            return null;

With these small changes in place the animation ran just fine and the data binding worked just fine as well.

Conclusion

The two tings I learned from this is not to trust the emulator as it runs a lot faster that the actual Windows Phone 7 and as a result will hide these kind of problems. And secondly to set the page DataContext in the loaded events instead of during the page construction.

Enjoy!

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Keyboard and the Windows Phone 7 emulator

Maurice — Tue, 30 Nov 2010 11:47:51 GMT

By default the WP7 emulator will not react to you typing on the keyboard, instead you have to use the mouse to press keys on the software keyboard that pops up.

There is however a hidden feature that will let you use your hardware keyboard, just press Page Up when the software keyboard pops up.

And as an extra bonus the three buttons at the bottom of the phone can be activated using F1, F2 and F3 for back, home and search respectively.

Cool feature that makes development using the emulator a lot easier

Enjoy!